/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../../node_modules/.pnpm/next@15.3.4_@babel+core@7.29.7_@opentelemetry+api@1.9.1_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[2]!../../node_modules/.pnpm/next@15.3.4_@babel+core@7.29.7_@opentelemetry+api@1.9.1_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[3]!./src/components/marketing.module.css ***! \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* * Store-rental marketing pages — Resume-18H.1. * * The storefront has no CSS Modules today: one 3097-line `globals.css` plus * ~850 inline style objects (docs/41 §61). Modules are the direction docs/45 §9 * sets for the storefront, and they are the right choice for *these* pages * specifically, because the scoping is what guarantees a marketing stylesheet * cannot leak a rule into `/stores` or any other marketplace route. * * Everything here reads from the existing `--kees-*` tokens already defined in * `globals.css`. Shared primitives that exist globally — `.container`, `.btn`, * `.btn-primary`, `.btn-outline` — are reused rather than restyled, so these * pages inherit the site's buttons instead of inventing new ones. * * No direction is forced anywhere: the layout reads `dir` from ``, which * the locale layout sets. Logical properties (`margin-inline`, `inset-inline`, * `text-align: start`) keep the layout correct in both Arabic and English * without a single RTL override. */ /* ── Page shell ─────────────────────────────────────────────────────────── */ .marketing_page__cEzXb { padding-bottom: 4rem; } .marketing_section__2JthI { padding: 3rem 0; } .marketing_sectionTight__xTrmU { padding: 2rem 0; } .marketing_sectionHead__EP1iZ { max-width: 44rem; margin-bottom: 2rem; } .marketing_sectionTitle__KBjOP { margin: 0 0 0.5rem; font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 800; color: var(--kees-text); } .marketing_sectionIntro___je_l { margin: 0; color: var(--kees-text-3); font-size: 0.95rem; line-height: 1.8; } /* ── Hero ───────────────────────────────────────────────────────────────── */ .marketing_hero__YT9uw { padding: 4rem 0 3rem; background: linear-gradient(160deg, var(--kees-primary-light), var(--kees-surface) 70%); border-bottom: 1px solid var(--kees-border-subtle); } .marketing_heroInner__c61Fi { max-width: 46rem; } .marketing_eyebrow__d_qwz { display: inline-block; margin-bottom: 0.85rem; padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--kees-surface); border: 1px solid var(--kees-primary); color: var(--kees-primary-dark); font-size: 0.78rem; font-weight: 700; } .marketing_heroTitle__MpDcr { margin: 0 0 1rem; font-size: clamp(1.75rem, 5vw, 2.75rem); font-weight: 800; line-height: 1.35; color: var(--kees-text); } .marketing_heroSub__Krr3H { margin: 0 0 1.75rem; font-size: clamp(0.95rem, 2vw, 1.1rem); line-height: 1.9; color: var(--kees-text-2); } .marketing_heroActions__zLi30 { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; } .marketing_heroNote__wR6GE { margin: 0; font-size: 0.82rem; color: var(--kees-text-3); } /* ── Cards ──────────────────────────────────────────────────────────────── */ .marketing_grid__dhRhI { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-gap: 1rem; gap: 1rem; } .marketing_card__T0V6q { padding: 1.25rem; border: 1px solid var(--kees-border); border-radius: 0.75rem; background: var(--kees-surface); } .marketing_cardTitle__gTxAO { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; color: var(--kees-text); } .marketing_cardBody__cGQK3 { margin: 0; font-size: 0.88rem; line-height: 1.8; color: var(--kees-text-3); } /* ── Status pills ───────────────────────────────────────────────────────── */ .marketing_status__Gu_Wu { flex-shrink: 0; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; white-space: nowrap; } .marketing_statusLive__hBObD { background: var(--kees-success-bg); color: var(--kees-success); border: 1px solid var(--kees-success-border); } .marketing_statusSoon__Edf2h { background: var(--kees-warning-bg); color: var(--kees-warning); border: 1px solid var(--kees-warning); } .marketing_statusPlanned__Y4ZfE { background: var(--kees-muted); color: var(--kees-text-3); border: 1px solid var(--kees-border); } /* ── Numbered steps ─────────────────────────────────────────────────────── */ .marketing_steps__oQPfc { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); grid-gap: 1rem; gap: 1rem; counter-reset: step; } .marketing_step__tTYZJ { position: relative; padding: 1.25rem; border: 1px solid var(--kees-border); border-radius: 0.75rem; background: var(--kees-surface); } .marketing_stepNumber__jT_N1 { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; margin-bottom: 0.6rem; border-radius: 999px; background: var(--kees-primary); color: var(--kees-on-primary); font-size: 0.82rem; font-weight: 700; } /* ── Notice ─────────────────────────────────────────────────────────────── */ .marketing_notice__AkOdb { padding: 1rem 1.25rem; border: 1px solid var(--kees-warning); border-radius: 0.75rem; background: var(--kees-warning-bg); } .marketing_noticeTitle__K0T8P { margin: 0 0 0.4rem; font-size: 0.92rem; font-weight: 700; color: var(--kees-text); } .marketing_noticeBody__kLgyu { margin: 0; font-size: 0.86rem; line-height: 1.8; color: var(--kees-text-2); } /* ── Plan cards ─────────────────────────────────────────────────────────── */ .marketing_planGrid___8_q_ { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); grid-gap: 1rem; gap: 1rem; } .marketing_plan__FfT8u { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.5rem 1.25rem; border: 1px solid var(--kees-border); border-radius: 0.75rem; background: var(--kees-surface); } .marketing_planName__YAeXb { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--kees-text); } .marketing_planFor__DRRtY { margin: 0 0 0.75rem; font-size: 0.82rem; color: var(--kees-text-3); } .marketing_planPrice__9qmuI { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--kees-primary-dark); } .marketing_planPeriod__9oaz8 { margin: 0 0 1rem; font-size: 0.78rem; color: var(--kees-text-4); } .marketing_planCta__E3seQ { margin-top: auto; } /* ── Comparison table ───────────────────────────────────────────────────── */ /* Scrolls inside its own card rather than pushing the page sideways. */ .marketing_tableWrap__jukL_ { overflow-x: auto; border: 1px solid var(--kees-border); border-radius: 0.75rem; background: var(--kees-surface); } .marketing_table__8DoLp { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.85rem; } .marketing_table__8DoLp th, .marketing_table__8DoLp td { padding: 0.7rem 1rem; text-align: start; border-bottom: 1px solid var(--kees-border-subtle); } .marketing_table__8DoLp thead th { background: var(--kees-muted); font-weight: 700; color: var(--kees-text); white-space: nowrap; } .marketing_table__8DoLp tbody tr:last-child th, .marketing_table__8DoLp tbody tr:last-child td { border-bottom: none; } .marketing_rowLabel__YSqlW { font-weight: 600; color: var(--kees-text-2); white-space: nowrap; } /* ── Template preview tiles ─────────────────────────────────────────────── */ .marketing_templateGrid__vi3MG { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 1.25rem; gap: 1.25rem; } .marketing_template__hKGwq { border: 1px solid var(--kees-border); border-radius: 0.75rem; background: var(--kees-surface); overflow: hidden; } /* * A schematic, not a screenshot. Nothing is rendered from a real template * because no template exists yet, and a mocked-up screenshot would imply one * does. The bars stand in for a hero and a product grid. */ .marketing_templatePreview__kfWH9 { display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem; height: 8rem; background: var(--kees-muted); border-bottom: 1px solid var(--kees-border-subtle); } .marketing_previewBar__g6PGO { border-radius: 0.25rem; background: var(--kees-border); } .marketing_previewHero__ymR1C { height: 2.5rem; background: var(--kees-primary-light); } .marketing_previewRow__2Y1IJ { display: flex; gap: 0.4rem; flex: 1 1; } .marketing_previewTile__TNEeO { flex: 1 1; border-radius: 0.25rem; background: var(--kees-border-subtle); } .marketing_templateBody__ljjvK { padding: 1rem 1.25rem 1.25rem; } /* ── Feature groups ─────────────────────────────────────────────────────── */ .marketing_featureGroup__l4PEP { margin-bottom: 1.5rem; border: 1px solid var(--kees-border); border-radius: 0.75rem; background: var(--kees-surface); overflow: hidden; } .marketing_featureGroupTitle__ujCms { margin: 0; padding: 0.85rem 1.25rem; background: var(--kees-muted); border-bottom: 1px solid var(--kees-border-subtle); font-size: 0.95rem; font-weight: 700; color: var(--kees-text); } .marketing_featureList__ln1BP { margin: 0; padding: 0; list-style: none; } .marketing_featureItem__hX1nu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--kees-border-subtle); font-size: 0.88rem; color: var(--kees-text-2); } .marketing_featureItem__hX1nu:last-child { border-bottom: none; } /* ── Legend ─────────────────────────────────────────────────────────────── */ .marketing_legend__4DyaH { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-gap: 0.75rem; gap: 0.75rem; margin-bottom: 2rem; } .marketing_legendItem__pCiw8 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--kees-text-3); } .marketing_spacedNote__pRTI1 { margin-top: 1.25rem; } /* ── Closing CTA ────────────────────────────────────────────────────────── */ .marketing_cta__rUI90 { padding: 2.5rem 1.5rem; border: 1px solid var(--kees-border); border-radius: 1rem; background: linear-gradient(160deg, var(--kees-primary-light), var(--kees-surface) 75%); text-align: center; } .marketing_ctaTitle__v1qQl { margin: 0 0 0.6rem; font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 800; color: var(--kees-text); } .marketing_ctaBody__HeoM0 { max-width: 38rem; margin: 0 auto 1.5rem; font-size: 0.92rem; line-height: 1.8; color: var(--kees-text-2); } .marketing_ctaActions__Kv5iP { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } /* ── FAQ ────────────────────────────────────────────────────────────────── */ .marketing_faqItem__LmfDO { padding: 1.1rem 0; border-bottom: 1px solid var(--kees-border-subtle); } .marketing_faqItem__LmfDO:last-child { border-bottom: none; } .marketing_faqQuestion__enxQf { margin: 0 0 0.4rem; font-size: 0.95rem; font-weight: 700; color: var(--kees-text); } .marketing_faqAnswer__wLnxX { margin: 0; font-size: 0.88rem; line-height: 1.8; color: var(--kees-text-3); } /* ── Inline link row ────────────────────────────────────────────────────── */ .marketing_linkRow__9V2Kh { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--kees-border-subtle); font-size: 0.88rem; } .marketing_linkRow__9V2Kh a { color: var(--kees-primary-dark); font-weight: 600; } .marketing_linkRow__9V2Kh a:focus-visible { outline: 2px solid var(--kees-primary); outline-offset: 3px; border-radius: 0.25rem; }