/* ============================================================================ * seo_landing.css — Shared design system for /recipe-card-maker and other * SEO landing pages. * * All rules are scoped under .rcm-seo (added to alongside .rcm-homepage * so the existing footer in _rcm_landing_inline.css cascades in). Page- * specific markup uses the .rcm-seo-* class namespace. * * Design tokens live on the .rcm-seo selector. Major sections in this file: * - body / html resets and tokens * - typography helpers (.rcm-seo-eye, .rcm-seo-h2, .rcm-seo-lede, etc.) * - buttons (.rcm-seo-btn-amber, .rcm-seo-btn-ghost-light) * - hero (.rcm-seo-hero, .rcm-seo-hero-frame, etc.) * - section scaffolding (.rcm-seo-section-paper / -cream / -dark) * - three-mode grid (.rcm-seo-modes) * - before/after grid (.rcm-seo-ba-grid) * - cluttered-blog mock (used only by the maker page) * - simple before/after pair (used by cookbook + family pages) * - compare band (.rcm-seo-compare) * - pricing register + FAQ (.rcm-seo-util-grid) * - final CTA (.rcm-seo-final) * - responsive @media block at bottom * ============================================================================ */ /* Reset default browser margin on html/body so the parchment background reaches the viewport edges. Without this, a ~8px white frame shows around the page. */ html, body { margin: 0; padding: 0; } /* This page also carries the .rcm-homepage class on body so the existing footer styles in _rcm_landing_inline.css cascade in. We override the body-level font/color/background that .rcm-homepage sets so the new editorial design wins. */ body.rcm-seo { background: var(--parchment-warm); color: var(--ink); font-family: 'EB Garamond', serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } .rcm-seo { --ink: #1a1208; --dark: #2c2416; --dark-2: #1a0f06; --parchment: #faf7f2; --parchment-warm: #f4efe4; --paper: #f1eadb; --gold: #c8973a; --rule-soft: rgba(60, 40, 22, 0.14); --rule-strong: rgba(60, 40, 22, 0.34); --copy: #594a35; --copy-soft: #766650; --muted: #8b7351; --shell: min(1180px, calc(100vw - 48px)); background: var(--parchment-warm); color: var(--ink); font-family: 'EB Garamond', serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } .rcm-seo *, .rcm-seo *::before, .rcm-seo *::after { box-sizing: border-box; } .rcm-seo img { display: block; max-width: 100%; } .rcm-seo a { color: inherit; text-decoration: none; } .rcm-seo .rcm-seo-shell { width: var(--shell); margin: 0 auto; } /* Editorial typography */ .rcm-seo .rcm-seo-eye { font-family: 'Source Sans 3', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .rcm-seo .rcm-seo-h2 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -0.005em; color: var(--ink); margin: 0; } .rcm-seo .rcm-seo-lede { font-family: 'EB Garamond', serif; font-size: 19px; line-height: 1.7; color: var(--copy); margin: 0; } .rcm-seo .rcm-seo-body { font-family: 'EB Garamond', serif; font-size: 17px; line-height: 1.7; color: var(--copy); margin: 0; } .rcm-seo .rcm-seo-rule { width: 56px; height: 1px; background: var(--rule-strong); margin: 18px 0 22px; } /* Buttons — sharp rectangles, collections style */ .rcm-seo .rcm-seo-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 26px; border: 1px solid transparent; font-family: 'Source Sans 3', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease; } .rcm-seo .rcm-seo-btn:hover { transform: translateY(-1px); } .rcm-seo .rcm-seo-btn-amber { background: var(--gold); color: var(--dark-2); border-color: var(--gold); } .rcm-seo .rcm-seo-btn-amber:hover { background: #d8a84b; border-color: #d8a84b; } .rcm-seo .rcm-seo-btn-ghost-light { background: transparent; color: #dbc7a2; border-color: rgba(200, 151, 58, 0.36); } .rcm-seo .rcm-seo-btn-ghost-light:hover { border-color: var(--gold); color: var(--parchment); } /* Hero */ .rcm-seo-hero { background: linear-gradient(180deg, #1c1108 0, #24180f 650px, var(--parchment-warm) 650px); padding: 0; } .rcm-seo-hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr); gap: 70px; align-items: center; } .rcm-seo-hero-copy { display: flex; flex-direction: column; align-items: flex-start; max-width: 39rem; padding: 86px 0 68px; } .rcm-seo-hero-title { font-family: 'Playfair Display', serif; font-weight: 400; color: var(--parchment); margin: 14px 0 14px; font-size: clamp(40px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.01em; max-width: 15ch; } .rcm-seo-hero-title em { font-style: italic; font-weight: 400; color: var(--gold); } .rcm-seo-hero-sub { max-width: 35rem; font-family: 'EB Garamond', serif; font-size: 21px; line-height: 1.62; color: #c5aa7e; margin: 0 0 18px; } .rcm-seo-hero-sources { margin: 0 0 22px; font-family: 'Source Sans 3', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.7; color: rgba(219, 199, 162, 0.78); } .rcm-seo-hero-sources span { color: rgba(200, 151, 58, 0.92); } .rcm-seo-hero-cta-group { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .rcm-seo-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; } .rcm-seo-hero-meta { font-family: 'Source Sans 3', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(200, 151, 58, 0.62); } .rcm-seo-hero-stage { display: flex; align-items: center; justify-content: flex-end; padding: 96px 0 24px; } .rcm-seo-hero-frame { position: relative; width: 100%; max-width: 680px; background: var(--parchment); padding: 14px; border: 1px solid rgba(200, 151, 58, 0.28); box-shadow: 0 28px 58px rgba(0, 0, 0, 0.34), 0 10px 24px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.05); transform: translateY(20px); } .rcm-seo-hero-frame img { width: 100%; aspect-ratio: 7 / 4.6; object-fit: cover; background: #f4ede2; } .rcm-seo-hero-tag { position: absolute; top: -14px; left: 24px; background: var(--gold); color: var(--dark-2); font-family: 'Source Sans 3', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 7px 14px; } .rcm-seo-hero-caption { position: absolute; left: 0; right: 0; bottom: -30px; text-align: center; font-family: 'Source Sans 3', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(89, 74, 53, 0.68); } /* Section scaffolding */ .rcm-seo-section { padding: 100px 0; } .rcm-seo-section-paper { background: var(--parchment-warm); } .rcm-seo-section-cream { background: var(--paper); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); } .rcm-seo-section-dark { background: var(--dark); color: #e8dfc8; } .rcm-seo-section-head { display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); gap: 56px; align-items: end; margin-bottom: 56px; } .rcm-seo-section-head-stack { display: flex; flex-direction: column; gap: 18px; } .rcm-seo-section-head .rcm-seo-lede { max-width: 38rem; } /* Three modes (URL / Photo / Text) */ .rcm-seo-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); } .rcm-seo-mode { padding: 38px 32px 36px; border-right: 1px solid var(--rule-soft); display: flex; flex-direction: column; gap: 14px; } .rcm-seo-mode:last-child { border-right: 0; } .rcm-seo-mode-num { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400; font-size: 32px; color: var(--gold); line-height: 1; } .rcm-seo-mode-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--ink); margin: 0; } .rcm-seo-mode-body { font-family: 'EB Garamond', serif; font-size: 16px; line-height: 1.65; color: var(--copy); margin: 0; } .rcm-seo-mode-eg { margin-top: auto; padding-top: 14px; border-top: 1px dotted var(--rule-soft); font-family: 'Source Sans 3', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* Before/After comparison */ .rcm-seo-ba-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr); gap: 28px; align-items: center; } .rcm-seo-ba-side { display: flex; flex-direction: column; gap: 10px; } .rcm-seo-ba-side-after { align-self: center; } .rcm-seo-ba-label { font-family: 'Source Sans 3', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .rcm-seo-ba-frame { background: var(--parchment); border: 1px solid var(--rule-soft); padding: 18px; position: relative; } .rcm-seo-ba-frame-before { background: #f7f2e8; padding: 0; overflow: hidden; height: 540px; } .rcm-seo-ba-frame-after { padding: 0; background: var(--parchment); box-shadow: 0 18px 38px rgba(56, 36, 21, 0.18); } .rcm-seo-ba-frame-after img { display: block; width: 100%; height: auto; } .rcm-seo-ba-arrow { align-self: center; width: 56px; display: flex; align-items: center; justify-content: center; color: var(--gold); font-family: 'Playfair Display', serif; font-size: 28px; line-height: 1; } /* Cluttered blog mock (the "before" side) */ .rcm-seo-blog { height: 100%; overflow: hidden; position: relative; font-family: 'Georgia', 'Times New Roman', serif; color: #2a2a2a; } .rcm-seo-blog::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(180deg, transparent, #f7f2e8); pointer-events: none; } .rcm-seo-blog-chrome { background: #ebe7df; padding: 7px 10px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #d4cfc4; } .rcm-seo-blog-dot { width: 9px; height: 9px; border-radius: 50%; background: #c4bfb4; display: inline-block; } .rcm-seo-blog-url { margin-left: 10px; background: #ffffff; border-radius: 3px; padding: 3px 10px; font-family: 'Helvetica', 'Arial', sans-serif; font-size: 10px; color: #6a6a6a; flex: 1; border: 1px solid #d4cfc4; } .rcm-seo-blog-nav { background: #f4ebd6; border-bottom: 2px solid #c89a4a; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; } .rcm-seo-blog-logo { font-family: 'Brush Script MT', 'Lucida Handwriting', cursive; font-size: 18px; color: #8a4a1a; font-style: italic; } .rcm-seo-blog-nav-links { font-family: 'Helvetica', 'Arial', sans-serif; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: #6a4a2a; } .rcm-seo-blog-banner-ad { position: relative; padding: 14px 16px; text-align: center; background: linear-gradient(90deg, #ff6a3d, #d63d1f); color: white; } .rcm-seo-blog-ad-tag { position: absolute; top: 3px; left: 6px; font-family: 'Helvetica', 'Arial', sans-serif; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.7); background: rgba(0, 0, 0, 0.2); padding: 1px 5px; border-radius: 2px; } .rcm-seo-blog-banner-ad .rcm-seo-blog-banner-text { font-family: 'Impact', 'Helvetica', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: white; } .rcm-seo-blog-h1 { padding: 16px 16px 4px; font-family: 'Georgia', serif; font-size: 22px; font-weight: 700; color: #1a1a1a; line-height: 1.15; } .rcm-seo-blog-meta { padding: 0 16px 12px; font-family: 'Helvetica', 'Arial', sans-serif; font-size: 10px; color: #8a8a8a; } .rcm-seo-blog-photo { margin: 0 16px; height: 160px; overflow: hidden; border-radius: 4px; background: #2a1a0e; } .rcm-seo-blog-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .rcm-seo-blog-photo-cap { margin: 6px 16px 14px; text-align: right; font-family: 'Helvetica', 'Arial', sans-serif; font-size: 10px; color: #c8973a; font-weight: 600; } .rcm-seo-blog-p { padding: 0 16px 12px; font-family: 'Georgia', serif; font-size: 13px; line-height: 1.6; color: #3a3a3a; } .rcm-seo-blog-inline-ad { margin: 6px 16px 14px; background: #f4f0e8; border: 1px solid #d4cfc4; border-radius: 4px; padding: 10px 12px; position: relative; } .rcm-seo-blog-inline-ad-body { display: flex; align-items: center; gap: 12px; } .rcm-seo-blog-inline-ad-thumb { width: 48px; height: 48px; background: linear-gradient(135deg, #c4cfd8, #8a98a8); border-radius: 4px; flex-shrink: 0; } .rcm-seo-blog-inline-ad-title { font-family: 'Helvetica', 'Arial', sans-serif; font-size: 12px; font-weight: 600; color: #1a4a8a; line-height: 1.3; } .rcm-seo-blog-inline-ad-sub { font-family: 'Helvetica', 'Arial', sans-serif; font-size: 10px; color: #4a8a4a; margin-top: 2px; } .rcm-seo-blog-popup { position: absolute; top: 110px; left: 24px; right: 24px; background: white; border-radius: 6px; padding: 18px 18px 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 0 1000px rgba(0, 0, 0, 0.18); text-align: center; z-index: 10; } .rcm-seo-blog-popup-close { position: absolute; top: 6px; right: 10px; font-size: 18px; color: #8a8a8a; } .rcm-seo-blog-popup-h { font-family: 'Georgia', serif; font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; } .rcm-seo-blog-popup-p { font-family: 'Helvetica', 'Arial', sans-serif; font-size: 11px; color: #6a6a6a; margin-bottom: 12px; line-height: 1.4; } .rcm-seo-blog-popup-input { display: flex; border: 1px solid #d4cfc4; border-radius: 4px; overflow: hidden; font-family: 'Helvetica', 'Arial', sans-serif; font-size: 11px; } .rcm-seo-blog-popup-input span:first-child { flex: 1; padding: 8px 10px; color: #aaa; text-align: left; background: white; } .rcm-seo-blog-popup-btn { background: #d63d1f; color: white; padding: 8px 14px; font-weight: 700; letter-spacing: 0.06em; } .rcm-seo-blog-cookie { position: absolute; bottom: 10px; left: 10px; right: 10px; background: rgba(40, 40, 40, 0.94); color: white; padding: 10px 14px; border-radius: 4px; font-family: 'Helvetica', 'Arial', sans-serif; font-size: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 11; } .rcm-seo-blog-cookie-btn { background: #c89a4a; color: #1a1a1a; padding: 5px 12px; border-radius: 3px; font-weight: 700; letter-spacing: 0.04em; flex-shrink: 0; } /* Simple before/after photo pair (used by the cookbook and family pages — pages where the "before" is a real photo, not the cluttered-blog mock). The maker page uses .rcm-seo-blog-* (above) instead. */ .rcm-seo-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 28px; align-items: center; } .rcm-seo-pair-side { display: flex; flex-direction: column; gap: 10px; } .rcm-seo-pair-label { font-family: 'Source Sans 3', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .rcm-seo-pair-frame { background: var(--parchment); padding: 14px; border: 1px solid rgba(60, 40, 22, 0.18); box-shadow: 0 18px 38px rgba(56, 36, 21, 0.18); position: relative; } .rcm-seo-pair-frame img { display: block; width: 100%; aspect-ratio: 7 / 4.6; object-fit: cover; background: #ebe7df; } .rcm-seo-pair-tag { position: absolute; top: -12px; left: 22px; background: var(--gold); color: var(--dark-2); font-family: 'Source Sans 3', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 12px; } .rcm-seo-pair-arrow { align-self: center; display: flex; align-items: center; justify-content: center; color: var(--gold); font-family: 'Playfair Display', serif; font-size: 28px; line-height: 1; } /* Compare band (Canva / JustTheRecipe / Card My Recipe) */ .rcm-seo-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(200, 151, 58, 0.18); border-bottom: 1px solid rgba(200, 151, 58, 0.18); } .rcm-seo-compare-col { padding: 38px 32px; border-right: 1px solid rgba(200, 151, 58, 0.18); } .rcm-seo-compare-col:last-child { border-right: 0; } .rcm-seo-compare-col-us { background: rgba(200, 151, 58, 0.06); } .rcm-seo-compare-eye { font-family: 'Source Sans 3', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(200, 151, 58, 0.7); margin: 0 0 10px; } .rcm-seo-compare-col-us .rcm-seo-compare-eye { color: var(--gold); } .rcm-seo-compare-name { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--parchment); margin: 0 0 14px; } .rcm-seo-compare-desc { font-family: 'EB Garamond', serif; font-size: 16px; line-height: 1.65; color: #c5aa7e; margin: 0 0 18px; } .rcm-seo-compare-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-family: 'EB Garamond', serif; font-size: 15px; line-height: 1.5; color: #c5aa7e; } .rcm-seo-compare-list li { padding-left: 18px; position: relative; } .rcm-seo-compare-list li::before { content: '—'; position: absolute; left: 0; top: 0; color: rgba(200, 151, 58, 0.5); } .rcm-seo-compare-col-us .rcm-seo-compare-list li::before { color: var(--gold); } /* Pricing register + FAQ */ .rcm-seo-util-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 80px; align-items: start; } .rcm-seo-pricing { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule-strong); margin-top: 28px; } .rcm-seo-pricing-row { display: grid; grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--rule-soft); align-items: baseline; } .rcm-seo-pricing-name { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 22px; color: var(--ink); } .rcm-seo-pricing-name em { display: block; font-family: 'Source Sans 3', sans-serif; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-top: 4px; } .rcm-seo-pricing-desc { font-family: 'EB Garamond', serif; font-size: 16px; line-height: 1.6; color: var(--copy); } .rcm-seo-pricing-link { margin-top: 22px; font-family: 'Source Sans 3', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--gold); padding-bottom: 2px; display: inline-block; } .rcm-seo-faq { display: flex; flex-direction: column; gap: 0; margin-top: 28px; border-top: 1px solid var(--rule-strong); } .rcm-seo-faq-item { padding: 22px 0; border-bottom: 1px solid var(--rule-soft); } .rcm-seo-faq-q { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 22px; color: var(--ink); margin: 0 0 8px; line-height: 1.2; } .rcm-seo-faq-a { font-family: 'EB Garamond', serif; font-size: 16px; line-height: 1.65; color: var(--copy); margin: 0; } /* Final CTA */ .rcm-seo-final { background: var(--dark); color: var(--parchment); padding: 110px 0; text-align: center; } .rcm-seo-final-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(38px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -0.01em; color: var(--parchment); margin: 18px auto 22px; max-width: 22ch; } .rcm-seo-final-sub { font-family: 'EB Garamond', serif; font-size: 19px; line-height: 1.7; color: #c5aa7e; margin: 0 auto 32px; max-width: 38rem; } .rcm-seo-final-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* Hidden H1 — accessible page title for SEO/a11y, not visible in design */ .rcm-seo-sr-h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Responsive */ @media (max-width: 980px) { .rcm-seo-hero { background: linear-gradient(180deg, #1c1108 0, #24180f 820px, var(--parchment-warm) 820px); } .rcm-seo-hero-inner { grid-template-columns: 1fr; gap: 0; } .rcm-seo-hero-copy { padding: 56px 0 34px; } .rcm-seo-hero-sub { margin-bottom: 16px; } .rcm-seo-hero-sources { margin-bottom: 18px; max-width: 36ch; } .rcm-seo-hero-stage { padding: 0 0 0; } .rcm-seo-hero-frame { transform: translateY(20px); } .rcm-seo-section-head { grid-template-columns: 1fr; gap: 18px; } .rcm-seo-modes { grid-template-columns: 1fr; } .rcm-seo-mode { border-right: 0; border-bottom: 1px solid var(--rule-soft); } .rcm-seo-mode:last-child { border-bottom: 0; } .rcm-seo-ba-grid { grid-template-columns: 1fr; } .rcm-seo-ba-arrow { transform: rotate(90deg); margin: 12px auto; width: auto; } .rcm-seo-compare { grid-template-columns: 1fr; } .rcm-seo-compare-col { border-right: 0; border-bottom: 1px solid rgba(200, 151, 58, 0.18); } .rcm-seo-compare-col:last-child { border-bottom: 0; } .rcm-seo-util-grid { grid-template-columns: 1fr; gap: 56px; } .rcm-seo-pricing-row { grid-template-columns: 1fr; gap: 6px; } .rcm-seo-section { padding: 70px 0; } .rcm-seo-pair { grid-template-columns: 1fr; gap: 18px; } .rcm-seo-pair-arrow { transform: rotate(90deg); } }