/*! * Couponsuck 2026 — main stylesheet. Hand-written, no build step. * Loaded non-blocking (preload+swap) by inc/performance.php; a subset is * inlined in as critical.css. Organized by "== NAME ==" sections. * Design system: design-reference/TOKENS.md + ADAPTATION.md. */ /* ============================================================== == TOKENS — custom properties == ============================================================== */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/manrope-variable-latin.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215; } /* Metric-matched fallback: swap from system font to Manrope stays CLS-free. */ @font-face { font-family: 'Manrope Fallback'; src: local('Arial'); ascent-override: 106.6%; descent-override: 30%; line-gap-override: 0%; } :root { /* -- color: near-monochrome + pink accent (TOKENS.md §1, §6) -- */ --cs-white: #ffffff; --cs-black: #0b0b0c; --cs-ink: #141414; --cs-gray-25: #fafafa; --cs-gray-50: #f5f5f5; --cs-gray-100: #eeeeee; --cs-border: #e6e6e6; --cs-gray-500: #8a8a8a; /* decorative/large text only — fails AA, see TOKENS §6 */ --cs-gray-600: #5c5c5c; /* AA-safe secondary text */ --cs-gray-700: #3d3d3d; --cs-pink: #e70aa8; /* large text, badges, fills */ --cs-pink-text: #c9078f; /* small text/links — AA safe */ --cs-pink-dark: #9c0761; --cs-pink-tint: #fdf0f9; --cs-pink-tint-2: #fbdcf0; /* -- type -- */ --cs-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --cs-font-heading: 'Manrope', 'Manrope Fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --cs-fs-xs: 0.8125rem; --cs-fs-sm: 0.875rem; --cs-fs-base: 1rem; --cs-fs-md: 1.125rem; --cs-fs-lg: 1.25rem; --cs-fs-xl: 1.5rem; --cs-fs-2xl: 1.875rem; --cs-fs-3xl: 2.25rem; --cs-fs-4xl: 2.75rem; --cs-fs-5xl: 3.5rem; --cs-fs-6xl: 4.5rem; --cs-ls-tight: -0.01em; --cs-ls-tighter: -0.02em; --cs-ls-tightest: -0.035em; --cs-ls-hero: -0.045em; /* -- spacing (4px base) -- */ --cs-space-1: 0.25rem; --cs-space-2: 0.5rem; --cs-space-3: 0.75rem; --cs-space-4: 1rem; --cs-space-5: 1.25rem; --cs-space-6: 1.5rem; --cs-space-8: 2rem; --cs-space-10: 2.5rem; --cs-space-12: 3rem; --cs-space-16: 4rem; --cs-space-20: 5rem; --cs-space-24: 6rem; /* -- shape / elevation / motion -- */ --cs-radius-sm: 8px; --cs-radius-md: 14px; --cs-radius-lg: 20px; --cs-radius-xl: 28px; --cs-radius-pill: 999px; --cs-shadow-card: 0 5px 20px rgba(16, 34, 86, 0.07); --cs-shadow-card-hover: 0 16px 36px rgba(16, 34, 86, 0.13); --cs-shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.18); --cs-ease: cubic-bezier(0.4, 0, 0.2, 1); --cs-fast: 150ms; --cs-med: 260ms; /* -- layout -- */ --cs-container: 1280px; --cs-measure: 68ch; } /* ============================================================== == RESET / BASE == ============================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; } body { margin: 0; font-family: var(--cs-font-body); font-size: var(--cs-fs-base); line-height: 1.65; color: var(--cs-black); background: var(--cs-white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; height: auto; } figure { margin: 0; } a { color: var(--cs-pink-text); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:not([class]) { color: var(--cs-pink-text); } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } ul, ol { padding-left: 1.25em; } table { border-collapse: collapse; width: 100%; } :focus-visible { outline: 2px solid var(--cs-pink); outline-offset: 2px; border-radius: 4px; } h1, h2, h3, h4, h5, h6 { font-family: var(--cs-font-heading); font-weight: 700; line-height: 1.15; letter-spacing: var(--cs-ls-tighter); color: var(--cs-black); margin: 0 0 var(--cs-space-4); } h1 { font-size: var(--cs-fs-4xl); letter-spacing: var(--cs-ls-tightest); } h2 { font-size: var(--cs-fs-2xl); letter-spacing: var(--cs-ls-tighter); margin-top: var(--cs-space-10); } h3 { font-size: var(--cs-fs-xl); } h4, h5, h6 { font-size: var(--cs-fs-lg); } p { margin: 0 0 var(--cs-space-4); } @media (min-width: 981px) { h1 { font-size: var(--cs-fs-6xl); letter-spacing: var(--cs-ls-hero); } h2 { font-size: var(--cs-fs-3xl); } } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; border: 0; padding: 0; margin: -1px; } .cs-skip-link { position: absolute; top: -100px; left: var(--cs-space-4); z-index: 1000; background: var(--cs-black); color: var(--cs-white); padding: var(--cs-space-3) var(--cs-space-5); border-radius: var(--cs-radius-sm); font-weight: 700; transition: top var(--cs-fast) var(--cs-ease); } .cs-skip-link:focus { top: var(--cs-space-4); } /* ============================================================== == LAYOUT == ============================================================== */ .cs-container { max-width: var(--cs-container); margin-inline: auto; padding-inline: var(--cs-space-5); } @media (min-width: 981px) { .cs-container { padding-inline: var(--cs-space-8); } } .cs-main { display: block; } .cs-section { padding-block: var(--cs-space-12); } /* ============================================================== == HEADER / NAV == ============================================================== */ .cs-header { background: rgba(247, 249, 251, 0.94); border-bottom: 1px solid rgba(194, 198, 214, 0.32); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .cs-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--cs-space-4); min-height: 80px; padding-block: 10px; } .cs-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--cs-font-heading); font-weight: 800; font-size: 21px; letter-spacing: -0.04em; color: var(--cs-black); text-decoration: none; white-space: nowrap; } .cs-logo::before { content: none !important; display: none !important; } .cs-logo__mark { display: block; width: 40px; height: 40px; flex: 0 0 40px; } .cs-logo__mark img { display: block; width: 100%; height: 100%; } .cs-logo__word { display: block; } .cs-logo__accent { color: #0058be; } /* Nav toggle:
element, CSS-only disclosure on mobile, forced permanently open on desktop. Zero JS. */ .cs-nav-toggle { position: static; } /* panel anchors to .cs-header (sticky = containing block) so it can span the full nav width */ .cs-nav-toggle__btn { list-style: none; display: flex; align-items: center; gap: var(--cs-space-2); cursor: pointer; border: 1px solid rgba(194, 198, 214, .65); background: #fff; border-radius: var(--cs-radius-pill); padding: var(--cs-space-2) var(--cs-space-4); font-weight: 750; font-size: var(--cs-fs-sm); user-select: none; } .cs-nav-toggle__btn::-webkit-details-marker { display: none; } .cs-nav-toggle__icon { width: 18px; height: 12px; position: relative; } .cs-nav-toggle__icon::before, .cs-nav-toggle__icon::after, .cs-nav-toggle__icon { background: var(--cs-black); } .cs-nav-toggle__icon, .cs-nav-toggle__icon::before, .cs-nav-toggle__icon::after { height: 2px; border-radius: 2px; } .cs-nav-toggle__icon::before, .cs-nav-toggle__icon::after { content: ""; position: absolute; left: 0; right: 0; } .cs-nav-toggle__icon { top: 5px; } .cs-nav-toggle__icon::before { top: -5px; } .cs-nav-toggle__icon::after { top: 5px; } .cs-nav-toggle__panel { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--cs-white); border: 0; border-bottom: 1px solid var(--cs-border); border-radius: 0 0 var(--cs-radius-md) var(--cs-radius-md); box-shadow: var(--cs-shadow-pop); padding: var(--cs-space-5) max(var(--cs-space-5), calc((100% - var(--cs-container)) / 2 + var(--cs-space-5))); } .cs-nav-toggle[open] .cs-nav-toggle__panel { display: block; } .cs-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cs-space-1); } .cs-nav__list li { position: relative; } .cs-nav__list > li > a { display: block; padding: var(--cs-space-2) var(--cs-space-2); color: #424754; text-decoration: none; font-weight: 750; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; border-radius: var(--cs-radius-sm); } .cs-nav__list > li > a:hover, .cs-nav__list > li > a:focus-visible { color: #0058be; background: #d8e2ff; } .cs-nav__list .sub-menu { list-style: none; margin: 0 0 0 var(--cs-space-4); padding: 0; display: block; } .cs-nav__list .sub-menu a { display: block; padding: var(--cs-space-1) var(--cs-space-2); color: var(--cs-gray-600); text-decoration: none; font-size: var(--cs-fs-sm); border-radius: var(--cs-radius-sm); } .cs-nav__list .sub-menu a:hover, .cs-nav__list .sub-menu a:focus-visible { color: var(--cs-pink-text); } .cs-nav-toggle__search { margin-top: var(--cs-space-5); padding-top: var(--cs-space-5); border-top: 1px solid var(--cs-border); } @media (min-width: 981px) { .cs-header__inner { gap: var(--cs-space-8); } .cs-nav-toggle__btn { display: none; } .cs-nav-toggle { display: flex; align-items: center; gap: var(--cs-space-8); flex: 1 1 auto; justify-content: flex-end; } .cs-nav-toggle__panel { display: flex !important; position: static; border: 0; box-shadow: none; padding: 0; width: auto; background: transparent; align-items: center; gap: var(--cs-space-8); flex: 0 1 auto; justify-content: flex-end; } .cs-nav__list { flex-direction: row; align-items: center; gap: var(--cs-space-6); } .cs-nav__list > li > a { padding: var(--cs-space-2) 0; } .cs-nav__list > li > a:hover, .cs-nav__list > li > a:focus-visible { background: none; } .cs-nav__list > li > a { position: relative; } .cs-nav__list > li > a::before { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; border-radius: 2px; background: #0058be; transition: right .18s ease; } .cs-nav__list > li > a:hover::before, .cs-nav__list > li > a:focus-visible::before { right: 0; } .cs-nav__list .menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); } .cs-nav__list .sub-menu { display: none; position: absolute; top: calc(100% + var(--cs-space-2)); left: 0; margin: 0; background: var(--cs-white); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-pop); padding: var(--cs-space-3); min-width: 220px; z-index: 10; } .cs-nav__list li:hover > .sub-menu, .cs-nav__list li:focus-within > .sub-menu { display: block; } /* invisible hover bridge across the visual gap so the dropdown doesn't vanish while the pointer crosses from the menu item to the panel */ .cs-nav__list .sub-menu::before { content: ""; position: absolute; top: calc(-1 * var(--cs-space-2) - 2px); left: 0; right: 0; height: calc(var(--cs-space-2) + 2px); } .cs-nav-toggle__search { margin: 0; padding: 0; border: 0; width: min(300px, 24vw); } } /* ============================================================== == SEARCH FORM == ============================================================== */ .cs-search-form { display: flex; align-items: center; border: 1px solid rgba(194, 198, 214, .45); border-radius: var(--cs-radius-pill); background: #eceef0; padding: var(--cs-space-1); gap: var(--cs-space-1); } .cs-search-form__input { border: 0; background: transparent; padding: var(--cs-space-2) var(--cs-space-4); font-size: var(--cs-fs-sm); width: 100%; min-width: 0; } .cs-search-form__input:focus { outline: none; } .cs-search-form__submit { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--cs-black); color: var(--cs-white); transition: background var(--cs-fast) var(--cs-ease); } .cs-search-form__submit:hover { background: #0058be; } .cs-search-form__submit svg { width: 16px; height: 16px; } /* ============================================================== == BUTTONS (contract: .cs-btn) == ============================================================== */ .cs-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--cs-space-2); background: var(--cs-pink); color: var(--cs-white); font-family: var(--cs-font-heading); font-weight: 700; font-size: var(--cs-fs-md); line-height: 1; letter-spacing: var(--cs-ls-tight); padding: 0.95em 1.7em; border: 0; border-radius: var(--cs-radius-pill); text-decoration: none; white-space: nowrap; transition: transform var(--cs-fast) var(--cs-ease), box-shadow var(--cs-fast) var(--cs-ease); } .cs-btn:hover, .cs-btn:focus-visible { color: var(--cs-white); box-shadow: 0 10px 24px rgba(231, 10, 168, 0.35); } .cs-btn::after { content: "→"; display: inline-block; transition: transform var(--cs-fast) var(--cs-ease); } .cs-btn:hover::after, .cs-btn:focus-visible::after { transform: translateX(3px); } .cs-btn--ghost { background: transparent; color: var(--cs-black); border: 1.5px solid var(--cs-border); } .cs-btn--ghost:hover, .cs-btn--ghost:focus-visible { box-shadow: none; border-color: var(--cs-black); } .cs-btn--ghost::after { content: ""; } .cs-btn--black { background: var(--cs-black); color: var(--cs-white); } .cs-btn--black:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); } .cs-btn--sm { padding: 0.6em 1.3em; font-size: var(--cs-fs-sm); } .cs-btn--block { display: flex; width: 100%; } /* circular icon button (copy, back-to-top, prev/next) */ .cs-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--cs-black); color: var(--cs-white); transition: background var(--cs-fast) var(--cs-ease), transform var(--cs-fast) var(--cs-ease); } .cs-icon-btn:hover, .cs-icon-btn:focus-visible { background: var(--cs-pink); } .cs-icon-btn svg { width: 16px; height: 16px; } /* ============================================================== == HERO (home / archive) == ============================================================== */ .cs-hero { padding-block: var(--cs-space-10) var(--cs-space-8); text-align: center; } .cs-hero__title { font-size: var(--cs-fs-4xl); letter-spacing: var(--cs-ls-tightest); max-width: 18ch; margin-inline: auto; } .cs-hero__title mark { background: none; color: var(--cs-pink); } .cs-hero__subtitle { color: var(--cs-gray-600); font-size: var(--cs-fs-md); max-width: 52ch; margin: 0 auto var(--cs-space-6); } .cs-hero__search { max-width: 460px; margin-inline: auto; } .cs-hero__search .cs-search-form { background: var(--cs-white); box-shadow: var(--cs-shadow-card); padding: var(--cs-space-2); } .cs-hero__search .cs-search-form__input { font-size: var(--cs-fs-base); padding: var(--cs-space-3) var(--cs-space-5); } .cs-hero__search .cs-search-form__submit { width: 44px; height: 44px; } @media (min-width: 981px) { .cs-hero__title { font-size: var(--cs-fs-5xl); letter-spacing: var(--cs-ls-hero); } } /* ============================================================== == CATEGORY CHIPS == ============================================================== */ .cs-chips { display: flex; gap: var(--cs-space-2); overflow-x: auto; padding-block: var(--cs-space-2) var(--cs-space-6); margin-bottom: var(--cs-space-2); scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .cs-chips__item { flex: none; display: inline-flex; align-items: center; padding: var(--cs-space-2) var(--cs-space-5); border-radius: var(--cs-radius-pill); border: 1px solid var(--cs-border); background: var(--cs-white); color: var(--cs-black); font-size: var(--cs-fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background var(--cs-fast) var(--cs-ease), color var(--cs-fast) var(--cs-ease), border-color var(--cs-fast) var(--cs-ease); } .cs-chips__item:hover, .cs-chips__item:focus-visible { border-color: var(--cs-pink); color: var(--cs-pink-text); } .cs-chips__item[aria-current="page"], .cs-chips__item.is-active { background: var(--cs-black); border-color: var(--cs-black); color: var(--cs-white); } /* ============================================================== == CARD GRID == ============================================================== */ .cs-grid { display: grid; grid-template-columns: 1fr; gap: var(--cs-space-8) var(--cs-space-6); padding-block: var(--cs-space-4) var(--cs-space-10); } @media (min-width: 640px) { .cs-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 981px) { .cs-grid { grid-template-columns: repeat(3, 1fr); gap: var(--cs-space-10) var(--cs-space-8); } } .cs-grid--related { padding-block: 0; } .cs-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; } .cs-card__media { position: relative; display: block; border-radius: var(--cs-radius-md); overflow: hidden; aspect-ratio: 4 / 3; background: var(--cs-gray-50); transition: transform var(--cs-med) var(--cs-ease), box-shadow var(--cs-med) var(--cs-ease); } .cs-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--cs-med) var(--cs-ease); } .cs-card__img--placeholder { display: flex; width: 100%; height: 100%; background: linear-gradient(135deg, var(--cs-pink-tint) 0%, var(--cs-gray-50) 100%); } .cs-card:hover .cs-card__media, .cs-card:focus-visible .cs-card__media { box-shadow: var(--cs-shadow-card-hover); } .cs-card:hover .cs-card__img, .cs-card:focus-visible .cs-card__img { transform: scale(1.06); } .cs-card__badge { position: absolute; top: var(--cs-space-3); right: var(--cs-space-3); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(4px); color: var(--cs-black); font-size: var(--cs-fs-xs); font-weight: 700; padding: var(--cs-space-1) var(--cs-space-3); border-radius: var(--cs-radius-pill); } .cs-card__body { padding-top: var(--cs-space-4); } .cs-card__title { font-size: var(--cs-fs-lg); letter-spacing: var(--cs-ls-tight); margin-bottom: var(--cs-space-2); } .cs-card__title a { color: var(--cs-black); text-decoration: none; } .cs-card:hover .cs-card__title a, .cs-card__title a:hover { color: var(--cs-pink-text); } .cs-card__excerpt { color: var(--cs-gray-600); font-size: var(--cs-fs-sm); margin-bottom: var(--cs-space-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cs-card__meta { display: flex; align-items: center; gap: var(--cs-space-2); font-size: var(--cs-fs-xs); color: var(--cs-gray-600); } .cs-card__cat { font-weight: 700; color: var(--cs-pink-text); } .cs-card__meta time { color: var(--cs-gray-600); } /* was --cs-gray-500, which fails AA contrast at this 13px size — flagged by a Lighthouse a11y audit during Phase 6 integration QA (3.45:1 vs required 4.5:1) */ .cs-empty { padding-block: var(--cs-space-16); text-align: center; color: var(--cs-gray-600); } .cs-empty .cs-hero__search { margin-bottom: var(--cs-space-8); } /* ============================================================== == PAGINATION == ============================================================== */ .cs-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--cs-space-2); padding-block: var(--cs-space-8) var(--cs-space-16); } .cs-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding-inline: var(--cs-space-3); border-radius: var(--cs-radius-pill); border: 1px solid var(--cs-border); color: var(--cs-black); text-decoration: none; font-weight: 600; font-size: var(--cs-fs-sm); } .cs-pagination .page-numbers:hover, .cs-pagination .page-numbers:focus-visible { border-color: var(--cs-pink); color: var(--cs-pink-text); } .cs-pagination .page-numbers.current { background: var(--cs-black); border-color: var(--cs-black); color: var(--cs-white); } .cs-pagination .page-numbers.next, .cs-pagination .page-numbers.prev { background: var(--cs-pink); border-color: var(--cs-pink); color: var(--cs-white); font-weight: 700; padding-inline: var(--cs-space-5); } .cs-pagination .page-numbers.next:hover, .cs-pagination .page-numbers.prev:hover { box-shadow: 0 10px 24px rgba(231, 10, 168, 0.3); } .cs-pagination .page-numbers.dots { border: 0; } /* ============================================================== == BREADCRUMBS == ============================================================== */ .cs-breadcrumbs { padding-top: var(--cs-space-5); } .cs-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--cs-space-1); margin: 0; padding: 0; font-size: var(--cs-fs-xs); color: var(--cs-gray-600); } .cs-breadcrumbs li { display: flex; align-items: center; gap: var(--cs-space-1); max-width: 40ch; } .cs-breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--cs-gray-500); margin-left: var(--cs-space-1); } .cs-breadcrumbs a { color: var(--cs-gray-600); text-decoration: none; } .cs-breadcrumbs a:hover { color: var(--cs-pink-text); } .cs-breadcrumbs li[aria-current="page"] { color: var(--cs-black); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================== == ARCHIVE / SEARCH HEADER == ============================================================== */ .cs-archive-header, .cs-page-header { padding-block: var(--cs-space-6) var(--cs-space-2); } .cs-archive-title, .cs-page-title { font-size: var(--cs-fs-3xl); letter-spacing: var(--cs-ls-tightest); } .cs-archive-desc { color: var(--cs-gray-600); max-width: 65ch; font-size: var(--cs-fs-md); } @media (min-width: 981px) { .cs-archive-title, .cs-page-title { font-size: var(--cs-fs-4xl); } } /* ============================================================== == SINGLE POST == ============================================================== */ .cs-single__inner { padding-bottom: var(--cs-space-20); } .cs-entry-header { max-width: var(--cs-measure); margin-inline: auto; padding-block: var(--cs-space-5) var(--cs-space-6); text-align: center; } .cs-entry-kicker { display: inline-block; font-family: var(--cs-font-heading); font-weight: 800; font-size: var(--cs-fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-pink-text); background: var(--cs-pink-tint); padding: var(--cs-space-1) var(--cs-space-4); border-radius: var(--cs-radius-pill); margin-bottom: var(--cs-space-4); } .cs-entry-title { font-size: var(--cs-fs-3xl); letter-spacing: var(--cs-ls-tightest); margin-bottom: var(--cs-space-4); } .cs-entry-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--cs-space-2); font-size: var(--cs-fs-sm); color: var(--cs-gray-600); } .cs-entry-meta a { color: var(--cs-gray-600); text-decoration: none; font-weight: 700; } .cs-entry-meta a:hover { color: var(--cs-pink-text); } .cs-entry-meta__sep { color: var(--cs-gray-500); } @media (min-width: 981px) { .cs-entry-title { font-size: var(--cs-fs-5xl); } } .cs-entry-content { max-width: var(--cs-measure); margin-inline: auto; font-size: var(--cs-fs-md); line-height: 1.8; color: var(--cs-gray-700); } .cs-entry-content > * { margin-inline: 0; } /* -- the "money component": first paragraph reads as an always-visible code-reveal card, CSS-only, no content changes required. Matches the reference's discount-popup shape adapted from a modal into an inline hero callout. See ADAPTATION.md "Top move". -- */ .cs-entry-content > p:first-of-type, .cs-entry-content > div:first-child > p:first-of-type { background: var(--cs-pink-tint); border: 1px solid var(--cs-pink-tint-2); border-radius: var(--cs-radius-lg); padding: var(--cs-space-6) var(--cs-space-6); font-size: var(--cs-fs-lg); line-height: 1.6; color: var(--cs-black); margin-bottom: var(--cs-space-8); } @media (min-width: 640px) { .cs-entry-content > p:first-of-type, .cs-entry-content > div:first-child > p:first-of-type { padding: var(--cs-space-8); } } /* !important defeats the inline style="" every post's already carries (Gutenberg's inline color picker) — nothing else can override it. */ .cs-entry-content mark { background: var(--cs-pink-tint-2) !important; color: var(--cs-pink-dark) !important; font-weight: 800 !important; padding: 0.1em 0.6em; border-radius: var(--cs-radius-pill); box-decoration-break: clone; -webkit-box-decoration-break: clone; } .cs-entry-content mark code, .cs-entry-content mark strong, .cs-entry-content mark em, .cs-entry-content mark b { background: none !important; padding: 0; border-radius: 0; color: inherit !important; font-family: inherit; font-weight: inherit; font-style: inherit; } .cs-entry-content code:has(mark) { background: none; padding: 0; } .cs-entry-content code { background: var(--cs-gray-50); padding: 0.15em 0.45em; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; } .cs-entry-content h2 { font-size: var(--cs-fs-xl); letter-spacing: var(--cs-ls-tight); color: var(--cs-black); } .cs-entry-content h3 { font-size: var(--cs-fs-lg); } .cs-entry-content h2:first-child, .cs-entry-content h3:first-child { margin-top: 0; } @media (min-width: 981px) { .cs-entry-content h2 { font-size: var(--cs-fs-2xl); } } .cs-entry-content p, .cs-entry-content ul, .cs-entry-content ol { margin-bottom: var(--cs-space-5); } .cs-entry-content ul, .cs-entry-content ol { padding-left: 1.4em; } .cs-entry-content li { margin-bottom: var(--cs-space-2); } .cs-entry-content li > ul, .cs-entry-content li > ol { margin-top: var(--cs-space-2); margin-bottom: 0; } .cs-entry-content a { font-weight: 600; } /* numbered steps: every
    gets a black numeral badge treatment. */ .cs-entry-content ol { list-style: none; padding-left: 0; counter-reset: cs-step; } .cs-entry-content ol > li { position: relative; padding-left: 2.6em; counter-increment: cs-step; } .cs-entry-content ol > li::before { content: counter(cs-step); position: absolute; left: 0; top: 0.05em; width: 1.9em; height: 1.9em; display: flex; align-items: center; justify-content: center; background: var(--cs-black); color: var(--cs-white); border-radius: 50%; font-family: var(--cs-font-heading); font-weight: 700; font-size: 0.75em; } .cs-entry-content img, .cs-entry-content .wp-block-image img { border-radius: var(--cs-radius-md); } .cs-entry-content figure { margin-bottom: var(--cs-space-6); } .cs-entry-content figcaption { font-size: var(--cs-fs-xs); color: var(--cs-gray-500); text-align: center; margin-top: var(--cs-space-2); } /* legacy classic-editor alignment classes (2015–2017 posts) */ .cs-entry-content img.aligncenter, .cs-entry-content .aligncenter { display: block; margin-inline: auto; } .cs-entry-content img.alignleft, .cs-entry-content .alignleft { float: left; margin: 0 var(--cs-space-5) var(--cs-space-4) 0; } .cs-entry-content img.alignright, .cs-entry-content .alignright { float: right; margin: 0 0 var(--cs-space-4) var(--cs-space-5); } .cs-entry-content img.alignnone { display: block; } .cs-entry-content::after { content: ""; display: table; clear: both; } .cs-entry-content table { margin-bottom: var(--cs-space-6); font-size: var(--cs-fs-sm); overflow-x: auto; display: block; } .cs-entry-content table th, .cs-entry-content table td { border: 1px solid var(--cs-border); padding: var(--cs-space-3) var(--cs-space-4); text-align: left; vertical-align: top; } .cs-entry-content table th { background: var(--cs-gray-25); font-weight: 700; } /* blockquote FAQ: CSS-only styling of the existing

    Q

    A

    markup, no content edits. main.js progressively enhances it into a real accordion; fully visible/crawlable with JS off. */ .cs-entry-content blockquote { margin: 0; padding: var(--cs-space-5) var(--cs-space-1); border: 0; border-top: 1px solid var(--cs-border); background: none; font-style: normal; } .cs-entry-content blockquote:last-of-type { border-bottom: 1px solid var(--cs-border); } .cs-entry-content blockquote > p:first-child { position: relative; padding-right: 2em; margin: 0; font-weight: 700; font-size: var(--cs-fs-md); color: var(--cs-black); } .cs-entry-content blockquote > p:first-child strong { font-weight: 700; } .cs-entry-content blockquote > p:first-child::after { content: ""; position: absolute; right: var(--cs-space-1); top: 0.4em; width: 9px; height: 9px; border-right: 2px solid var(--cs-pink); border-bottom: 2px solid var(--cs-pink); transform: rotate(45deg); transition: transform var(--cs-fast) var(--cs-ease); } .cs-entry-content blockquote > p:not(:first-child) { color: var(--cs-gray-600); margin: var(--cs-space-3) 0 0; font-size: var(--cs-fs-base); } /* JS-enhanced collapsed state */ .js-faq .cs-entry-content blockquote > p:first-child { cursor: pointer; } .js-faq .cs-entry-content blockquote:not(.is-open) > p:first-child::after { transform: rotate(-45deg); } .js-faq .cs-entry-content blockquote:not(.is-open) > p:not(:first-child) { display: none; } /* ============================================================== == RELATED POSTS == ============================================================== */ .cs-related { max-width: var(--cs-container); margin-inline: auto; padding-top: var(--cs-space-16); border-top: 1px solid var(--cs-border); margin-top: var(--cs-space-16); } .cs-related__title { font-size: var(--cs-fs-2xl); margin-bottom: var(--cs-space-2); } /* ============================================================== == CONTRACT: coupon box / prompt / form (shortcodes.php + forms.php own the markup; styled here only, per the functions.php contract) == ============================================================== */ /* 4 real variants, verified against inc/shortcodes.php output: --code/--link are the big "money" card ([coupon]); --inline is a mid-sentence chip ([greenrush] etc.); --list is a plain link list ([weedlist]). */ .cs-coupon-box { display: block; } .cs-coupon-box--code, .cs-coupon-box--link { display: flex; flex-direction: column; align-items: center; gap: var(--cs-space-4); text-align: center; background: linear-gradient(160deg, var(--cs-black) 0%, var(--cs-ink) 100%); color: var(--cs-white); border-radius: var(--cs-radius-xl); padding: var(--cs-space-8) var(--cs-space-6); margin: var(--cs-space-6) 0 var(--cs-space-8); } .cs-coupon-box--code .cs-coupon-box__image, .cs-coupon-box--link .cs-coupon-box__image { max-height: 64px; width: auto; border-radius: var(--cs-radius-sm); } .cs-coupon-box--code .cs-coupon-box__body, .cs-coupon-box--link .cs-coupon-box__body { display: flex; flex-direction: column; align-items: center; gap: var(--cs-space-4); } .cs-coupon-box__title { font-family: var(--cs-font-heading); font-weight: 700; font-size: var(--cs-fs-md); color: var(--cs-white); margin: 0; } .cs-coupon-box__desc { color: rgba(255, 255, 255, 0.75); font-size: var(--cs-fs-sm); margin: 0; max-width: 42ch; } .cs-coupon-box__code-row { display: inline-flex; align-items: center; gap: var(--cs-space-3); background: rgba(255, 255, 255, 0.08); border: 1.5px dashed rgba(255, 255, 255, 0.4); border-radius: var(--cs-radius-md); padding: var(--cs-space-3) var(--cs-space-3) var(--cs-space-3) var(--cs-space-6); } /* [hidden] (set when the shortcode's reveal="0", the default) is native browser behavior — no CSS needed to hide it; coupon.js removes the attribute on click. */ .cs-coupon-box__code { font-family: var(--cs-font-heading); font-weight: 800; font-size: var(--cs-fs-2xl); letter-spacing: 0.04em; color: var(--cs-white); background: none; padding: 0; } @media (min-width: 640px) { .cs-coupon-box__code { font-size: var(--cs-fs-3xl); } } .cs-coupon-box__copy { display: inline-flex; align-items: center; justify-content: center; flex: none; border: 0; border-radius: var(--cs-radius-pill); padding: var(--cs-space-2) var(--cs-space-4); font-size: var(--cs-fs-xs); font-weight: 700; background: rgba(255, 255, 255, 0.14); color: var(--cs-white); transition: background var(--cs-fast) var(--cs-ease); } .cs-coupon-box__copy:hover, .cs-coupon-box__copy:focus-visible { background: var(--cs-pink); } .cs-coupon-box--code .cs-coupon-box__cta, .cs-coupon-box--link .cs-coupon-box__cta { background: var(--cs-pink); color: var(--cs-white); } /* --inline: mid-sentence chip, e.g. [greenrush]. */ .cs-coupon-box--inline { display: inline-flex; align-items: center; gap: var(--cs-space-2); vertical-align: middle; } .cs-coupon-box--inline .cs-coupon-box__code { background: var(--cs-pink-tint-2); color: var(--cs-pink-dark); padding: 0.1em 0.6em; border-radius: var(--cs-radius-pill); font-size: 0.95em; } .cs-coupon-box--inline .cs-coupon-box__cta { padding: 0.6em 1.3em; font-size: var(--cs-fs-sm); } /* --list: plain link list, e.g. [weedlist]. */ ul.cs-coupon-box--list { list-style: none; margin: var(--cs-space-6) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--cs-space-3); } .cs-coupon-box--list .cs-coupon-box__cta { background: var(--cs-black); color: var(--cs-white); } /* [top]'s reader-support disclaimer line. */ .cs-disclosure { color: var(--cs-gray-600); /* was --cs-gray-500, which fails AA contrast at this 13px size — same fix already applied to .cs-card__meta time above, found again by a Lighthouse a11y audit on the alinea-referral-code showcase rebuild */ font-size: var(--cs-fs-xs); margin: var(--cs-space-6) 0; } /* --cs-prompt-accent defaults to pink; inc/shortcodes.php overrides it inline when a custom color attr is passed. --trigger = [wptrigger]'s zip-code-check form + live JS-filled result pane. */ .cs-prompt { --cs-prompt-accent: var(--cs-pink); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cs-space-4); background: var(--cs-pink-tint); border: 1px solid var(--cs-pink-tint-2); border-radius: var(--cs-radius-lg); padding: var(--cs-space-5) var(--cs-space-6); margin: var(--cs-space-6) 0; } .cs-prompt__title { font-family: var(--cs-font-heading); font-weight: 700; font-size: var(--cs-fs-md); color: var(--cs-black); margin: 0 0 var(--cs-space-1); } .cs-prompt__message { color: var(--cs-gray-600); font-size: var(--cs-fs-sm); margin: 0; } .cs-prompt__btn { flex: none; background: var(--cs-prompt-accent); } .cs-prompt--trigger { flex-direction: column; align-items: stretch; } .cs-prompt--trigger .cs-form--trigger { display: flex; gap: var(--cs-space-3); } .cs-prompt--trigger .cs-form__field { flex: 1 1 auto; } .cs-prompt--trigger .cs-prompt__btn { flex: none; } .cs-prompt__result { margin-top: var(--cs-space-4); font-size: var(--cs-fs-sm); color: var(--cs-gray-700); } .cs-prompt__result:empty { display: none; } /* Real inc/forms.php markup: .cs-form__row wraps .cs-form__label + a control carrying .cs-form__field directly (not a wrapper div). */ .cs-form { max-width: 560px; } .cs-form__row { margin-bottom: var(--cs-space-5); } .cs-form__label { display: block; font-weight: 700; font-size: var(--cs-fs-sm); margin-bottom: var(--cs-space-2); } .cs-form__field { width: 100%; border: 1.5px solid var(--cs-border); border-radius: var(--cs-radius-sm); padding: var(--cs-space-3) var(--cs-space-4); font-size: var(--cs-fs-base); background: var(--cs-white); transition: border-color var(--cs-fast) var(--cs-ease); } .cs-form__field:focus { outline: none; border-color: var(--cs-pink); } .cs-form__field--textarea { min-height: 140px; resize: vertical; } .cs-form__submit { border: 0; } .cs-form__notice { padding: var(--cs-space-4) var(--cs-space-5); border-radius: var(--cs-radius-sm); font-size: var(--cs-fs-sm); font-weight: 600; margin-bottom: var(--cs-space-5); } .cs-form__notice--success { background: var(--cs-pink-tint); color: var(--cs-pink-dark); } .cs-form__notice--error { background: #fdeaea; color: #b42318; } /* honeypot: inc/forms.php already inline-hides it; belt + suspenders. */ .cs-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* ============================================================== == 404 == ============================================================== */ .cs-404 { text-align: center; padding-block: var(--cs-space-16) var(--cs-space-8); } .cs-404__code { font-family: var(--cs-font-heading); font-weight: 800; font-size: var(--cs-fs-6xl); letter-spacing: var(--cs-ls-hero); color: var(--cs-pink); margin-bottom: 0; line-height: 1; } .cs-404__title { margin-top: var(--cs-space-2); } .cs-404__search { max-width: 460px; margin: var(--cs-space-6) auto var(--cs-space-4); } .cs-404 .cs-chips { justify-content: center; } @media (min-width: 640px) { .cs-404 .cs-chips { flex-wrap: wrap; overflow: visible; justify-content: center; } } /* ============================================================== == FOOTER == ============================================================== */ .cs-footer { background: var(--cs-ink); color: rgba(255, 255, 255, 0.7); margin-top: var(--cs-space-20); padding-block: var(--cs-space-16) var(--cs-space-8); } .cs-footer a { color: rgba(255, 255, 255, 0.85); text-decoration: none; } .cs-footer a:hover { color: var(--cs-pink); } .cs-footer__top { display: grid; grid-template-columns: 1fr; gap: var(--cs-space-10); padding-bottom: var(--cs-space-10); } @media (min-width: 768px) { .cs-footer__top { grid-template-columns: 1.3fr 1fr 1fr; } } .cs-footer__logo { font-family: var(--cs-font-heading); font-weight: 800; font-size: var(--cs-fs-xl); color: var(--cs-white); display: inline-block; margin-bottom: var(--cs-space-3); } .cs-footer__logo .cs-logo__accent { color: var(--cs-pink); } .cs-footer__tagline { max-width: 40ch; font-size: var(--cs-fs-sm); } .cs-footer__heading { color: rgba(255, 255, 255, 0.45); font-size: var(--cs-fs-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-bottom: var(--cs-space-4); } .cs-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cs-space-3); } .cs-footer__list a { font-size: var(--cs-fs-sm); } .cs-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cs-space-4); padding-top: var(--cs-space-8); border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: var(--cs-fs-xs); color: rgba(255, 255, 255, 0.45); } /* ============================================================== == COMMENTS (minimal) == ============================================================== */ .cs-comments { max-width: var(--cs-measure); margin-inline: auto; padding-top: var(--cs-space-12); border-top: 1px solid var(--cs-border); margin-top: var(--cs-space-12); } .cs-comments__title { font-size: var(--cs-fs-xl); } .cs-comments__closed { color: var(--cs-gray-600); } .cs-comments__list { list-style: none; margin: 0 0 var(--cs-space-8); padding: 0; } .cs-comments__list .comment-body { padding: var(--cs-space-4) 0; border-bottom: 1px solid var(--cs-border); } .cs-comments__list ol.children { list-style: none; padding-left: var(--cs-space-6); margin: 0; } .cs-comments__list .comment-author { font-weight: 700; font-size: var(--cs-fs-sm); } .cs-comments__list .comment-metadata { font-size: var(--cs-fs-xs); color: var(--cs-gray-500); margin-bottom: var(--cs-space-2); } .cs-comments__list .comment-metadata a { color: inherit; } .comment-reply-title { font-size: var(--cs-fs-xl); } .comment-form label { display: block; font-weight: 700; font-size: var(--cs-fs-sm); margin-bottom: var(--cs-space-2); } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; border: 1.5px solid var(--cs-border); border-radius: var(--cs-radius-sm); padding: var(--cs-space-3) var(--cs-space-4); margin-bottom: var(--cs-space-4); font-size: var(--cs-fs-base); } .comment-form textarea { min-height: 120px; } .comment-form .form-submit input { border: 0; } /* ============================================================== == LEGACY CONTENT ODDITIES (2015–2017 raw-HTML posts) == ============================================================== */ .cs-entry-content div { margin-bottom: var(--cs-space-4); } .cs-entry-content span[style*="color"] { border-radius: 4px; } .cs-entry-content h4 strong, .cs-entry-content strong h4 { font-family: var(--cs-font-heading); } .cs-entry-content > *:last-child { margin-bottom: 0; } /* ============================================================== == PRINT == ============================================================== */ @media print { .cs-header, .cs-footer, .cs-pagination, .cs-nav-toggle, .cs-related { display: none; } }