/* Page-level styles shared across all RbD site pages — V2 Adds blog-page chrome (ticker, blueprint bar, article grid, sidebar, share row, FTC, related-reads carousel, FAQ, lead-magnet, dark mode). Mirrors the live production blog at renderedbydesign.com/blog/*. */ html, body { margin: 0; overflow-x: clip; } body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: var(--page-bg-light, url("/backgrounds/hub/blog-index_light.png")); background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 0.15; } /* ─── Per-style data-style palette hook (Plan #72) ──────────────────────── Style-cluster blogs set as a forward-looking hookpoint for per-style backgrounds. No per-style overrides are wired today — cluster blogs fall through to the default /backgrounds/hub/blog-index_light.png so they match the V3 control visual language (dense cream pencil-sketch wash). The /backgrounds/lookbooks/ PNGs are product-page art (small object cluster on white) and don't work as full-bleed background-cover; per-style dense PNGs need to be authored before this hook can be re-enabled. */ .rbd-bg-navy::before { opacity: 0.18; mix-blend-mode: screen; } main { position: relative; z-index: 1; } a { color: inherit; } /* Buttons */ .btn-primary { font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 15px; padding: 14px 22px; border-radius: 10px; border: none; background: var(--rbd-navy); color: var(--rbd-cream); cursor: pointer; transition: background 180ms var(--ease-std); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .btn-primary:hover { background: #243456; color: var(--rbd-cream); } .btn-secondary { font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 15px; padding: 14px 22px; border-radius: 10px; background: transparent; color: var(--rbd-navy); border: 1.5px solid var(--rbd-navy); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: background 180ms; } .btn-secondary:hover { background: rgba(26,39,68,0.05); } .rbd-section { padding: 96px 48px 64px; max-width: 1200px; margin: 0 auto; position: relative; } .rbd-section-tight { padding: 48px 48px; max-width: 1200px; margin: 0 auto; position: relative; } .eyebrow { font-family: "Inter Tight", sans-serif; font-size: 12px; font-weight: 500; color: var(--rbd-charcoal); text-transform: uppercase; letter-spacing: 0.14em; } .rbd-card { background: #fff; border: 1px solid var(--rbd-border); border-radius: 14px; transition: box-shadow 180ms var(--ease-std), transform 180ms var(--ease-std); box-shadow: var(--sh-1); } .rbd-card:hover { box-shadow: var(--sh-3); transform: translateY(-2px); } .tnum { font-variant-numeric: tabular-nums; } .gold { color: var(--rbd-gold); } .cream { color: var(--rbd-cream); } /* ========================================================================= Blog page chrome — added in V2. ========================================================================= */ /* --- Ticker tape --- */ .ticker-tape { height: 36px; background: var(--rbd-navy); overflow: hidden; display: flex; align-items: center; position: relative; z-index: 60; } .ticker-tape__track { display: flex; gap: 48px; white-space: nowrap; animation: rbd-marquee 30s linear infinite; padding-left: 48px; } .ticker-tape__text { font-family: var(--rbd-font-body); font-size: 12px; letter-spacing: 0.35px; color: var(--rbd-cream); } @keyframes rbd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --- Blueprint bar (sticky header on blog pages) --- */ .blueprint-bar { position: sticky; top: 0; z-index: 55; background: rgba(250, 248, 245, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rbd-hairline); padding: 16px 48px; } .blueprint-bar__row1 { display: flex; align-items: center; justify-content: space-between; max-width: 1302px; margin: 0 auto; } .blueprint-bar__social { display: flex; gap: 16px; } .blueprint-bar__social a { color: var(--rbd-charcoal); display: inline-flex; transition: color 180ms var(--ease-std), transform 180ms var(--ease-std); } .blueprint-bar__social a:hover { color: var(--rbd-gold); transform: scale(1.1); } .blueprint-bar__logo { font-family: var(--rbd-font-display); font-weight: 700; font-size: 20px; color: var(--rbd-navy); letter-spacing: -0.02em; text-decoration: none; } .blueprint-bar__search { color: var(--rbd-charcoal); cursor: pointer; transition: color 180ms var(--ease-std); } .blueprint-bar__search:hover { color: var(--rbd-gold); } .blueprint-bar__nav { display: flex; justify-content: center; gap: 32px; padding-top: 12px; max-width: 1302px; margin: 0 auto; } .blueprint-bar__nav a { font-family: var(--rbd-font-display); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--rbd-navy); text-decoration: none; transition: color 180ms var(--ease-std); } .blueprint-bar__nav a:hover { color: var(--rbd-gold); } /* --- Article hero (above the grid) --- */ .article-hero { text-align: center; padding: 48px 24px 24px; max-width: 880px; margin: 0 auto; position: relative; z-index: 1; } .article-hero__eyebrow { font-family: var(--rbd-font-body); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rbd-fg3); margin-bottom: 14px; } .article-hero h1 { font-family: var(--rbd-font-display); font-weight: 700; font-size: 52px; line-height: 1.05; letter-spacing: -0.025em; color: var(--rbd-navy); margin: 0 0 20px; text-wrap: balance; } .article-hero__lede { font-family: var(--rbd-font-body); font-size: 19px; line-height: 1.5; color: var(--rbd-charcoal); max-width: 680px; margin: 0 auto 28px; } .hero-image-wrap { position: relative; display: inline-block; width: 100%; max-width: 1100px; } .hero-image-wrap > .rbd-hero-figure { border: 1px solid var(--rbd-hairline); overflow: hidden; box-shadow: var(--sh-3); } .hero-card { position: absolute; padding: 16px; font-family: var(--rbd-font-body); } .hero-card--front { width: 280px; background: var(--rbd-cream); border: 1px solid var(--rbd-navy); box-shadow: var(--sh-3); transform: rotate(-7deg); bottom: 24px; right: 24px; z-index: 2; text-align: left; } .hero-card--front .hero-card__title { font-family: var(--rbd-font-display); font-weight: 700; font-size: 18px; color: var(--rbd-navy); margin-bottom: 8px; } .hero-card--front .hero-card__detail { font-size: 12px; color: var(--rbd-charcoal); line-height: 1.5; } .hero-card--back { width: 260px; background: #fff; border: 1px solid var(--rbd-gold); transform: rotate(4deg); bottom: 48px; right: 64px; z-index: 1; opacity: 0.95; text-align: center; } .hero-card--back p { margin: 0; font-family: var(--rbd-font-display); font-weight: 500; font-size: 14px; color: var(--rbd-navy); } /* --- Article grid (main + sticky sidebar) --- 2-column grid with explicit widths. Gap widened from the live blog's 32 so the sidebar reads as a distinct column, not tacked onto main. max-width chosen so total content (810 + gap + 360 + padding) fits exactly with no leftover, keeping the layout balanced at any viewport. */ .article-grid { display: grid; grid-template-columns: minmax(0, 810px) 360px; gap: 72px; max-width: 1346px; /* 810 + 72 + 360 + 2×52 padding */ margin: 0 auto; padding: 24px 52px 0; position: relative; z-index: 1; } .article-content { min-width: 0; } .article-content [id] { scroll-margin-top: 96px; } /* --- Sidebar --- */ .article-sidebar { position: sticky; top: 96px; align-self: start; } .sidebar-widget { margin-bottom: 32px; } .sidebar-widget__title { font-family: var(--rbd-font-display); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--rbd-navy); margin-bottom: 14px; border-bottom: 1px solid var(--rbd-navy); padding-bottom: 8px; } .sidebar-card { background: var(--rbd-cream); padding: 16px; margin-bottom: 12px; } .sidebar-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; margin-bottom: 12px; display: block; } .sidebar-card__title { font-family: var(--rbd-font-display); font-weight: 700; font-size: 16px; color: var(--rbd-navy); margin-bottom: 4px; } .sidebar-card__meta { font-family: var(--rbd-font-body); font-size: 13px; color: var(--rbd-charcoal); margin-bottom: 8px; } .sidebar-card__link { font-family: var(--rbd-font-body); font-weight: 500; font-size: 13px; color: var(--rbd-gold); text-decoration: none; } .sidebar-card__link:hover { color: var(--rbd-navy); } .sidebar-video__thumb { width: 100%; max-width: 280px; /* keep the 9:16 short from going huge */ aspect-ratio: 9 / 16; margin: 0 auto 8px; /* center within widget */ background: var(--rbd-cream); border: 1px solid var(--rbd-hairline); display: flex; align-items: center; justify-content: center; overflow: hidden; } .sidebar-video__title { font-family: var(--rbd-font-body); font-size: 13px; color: var(--rbd-charcoal); line-height: 1.5; } /* --- TOC widget (collapsible) --- */ .toc { background: var(--rbd-cream); padding: 14px 18px; margin-bottom: 24px; } .toc summary { font-family: var(--rbd-font-display); font-weight: 700; font-size: 14px; color: var(--rbd-navy); text-transform: uppercase; letter-spacing: 0.14em; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; } .toc summary::-webkit-details-marker { display: none; } .toc summary::before { content: ""; display: inline-block; width: 0; height: 0; border-left: 6px solid var(--rbd-charcoal); border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform 240ms var(--ease-std); } .toc[open] summary::before { transform: rotate(90deg); } .toc nav { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; } .toc nav a { font-family: var(--rbd-font-body); font-size: 14px; color: var(--rbd-charcoal); text-decoration: none; padding: 4px 0; transition: color 150ms var(--ease-std), padding-left 150ms var(--ease-std); } .toc nav a:hover { color: var(--rbd-gold); padding-left: 4px; } /* --- Related-reads carousel --- */ .related-reads { position: relative; background: var(--rbd-cream); padding: 14px; margin-bottom: 24px; } .related-reads__track { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .related-reads__track::-webkit-scrollbar { display: none; } .related-reads__card { min-width: 180px; scroll-snap-align: start; flex-shrink: 0; text-decoration: none; } .related-reads__card-title { font-family: var(--rbd-font-display); font-weight: 700; font-size: 14px; color: var(--rbd-navy); margin: 8px 0 4px; line-height: 1.3; } .related-reads__card-link { font-family: var(--rbd-font-body); font-size: 12px; color: var(--rbd-gold); } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; background: var(--rbd-off-white); border: 1px solid var(--rbd-navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--rbd-charcoal); z-index: 2; } .carousel-btn--prev { left: -12px; } .carousel-btn--next { right: -12px; } /* --- FTC disclosure banner --- */ .ftc-disclosure { background: #FEF9EE; border-left: 3px solid var(--rbd-gold); padding: 10px 16px; margin: 0 0 24px; font-family: var(--rbd-font-body); font-size: 13px; line-height: 1.5; color: var(--rbd-charcoal); } .ftc-disclosure strong { color: var(--rbd-navy); } /* --- Share row --- */ .share-row { display: flex; justify-content: center; gap: 14px; padding: 32px 0; } .share-row a, .share-row button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--rbd-charcoal); background: transparent; border: 1px solid var(--rbd-navy); cursor: pointer; transition: color 180ms var(--ease-std), border-color 180ms var(--ease-std); } .share-row a:hover, .share-row button:hover { color: var(--rbd-gold); border-color: var(--rbd-gold); } /* --- Stripe CTA button (sidebar product spotlight) --- */ .btn-shop { display: block; width: 100%; padding: 12px 18px; font-family: var(--rbd-font-display); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; text-align: center; color: var(--rbd-navy); background: transparent; border: 1px solid var(--rbd-navy); cursor: pointer; text-decoration: none; transition: background 180ms var(--ease-std), color 180ms var(--ease-std); } .btn-shop:hover { background: var(--rbd-navy); color: var(--rbd-cream); } /* --- FAQ accordion --- */ .faq-list { display: flex; flex-direction: column; gap: 0; } .faq-item { border-bottom: 1px solid var(--rbd-hairline); padding: 14px 0; } .faq-item summary { font-family: var(--rbd-font-display); font-weight: 700; font-size: 17px; color: var(--rbd-navy); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-family: var(--rbd-font-display); font-weight: 400; font-size: 22px; color: var(--rbd-gold); flex-shrink: 0; } .faq-item[open] summary::after { content: "−"; } .faq-item .faq-answer { margin-top: 10px; font-family: var(--rbd-font-body); font-size: 15px; line-height: 1.6; color: var(--rbd-charcoal); } /* --- Lead-magnet (Klaviyo) container --- */ .lead-magnet { background: #FDF6EC; border: 1px solid var(--rbd-gold); padding: 24px; margin: 32px 0; text-align: center; } .lead-magnet h3 { font-family: var(--rbd-font-display); font-weight: 700; font-size: 22px; color: var(--rbd-navy); margin: 0 0 8px; } .lead-magnet p { font-family: var(--rbd-font-body); font-size: 14px; color: var(--rbd-charcoal); margin: 0 0 16px; } /* --- Blueprint backdrop (faint SVG behind a section) --- */ .blueprint-backdrop { position: relative; isolation: isolate; } .blueprint-backdrop > .blueprint-backdrop__svg { position: absolute; inset: 0; z-index: -1; opacity: 0.08; pointer-events: none; } /* --- Responsive: tablet --- */ @media (max-width: 1024px) { .article-grid { grid-template-columns: minmax(0, 1fr); padding: 16px 24px 0; gap: 32px; } /* Stack sidebar widgets vertically on tablet — 2-col tiles caused unbalanced track widths (TOC squished, Related Reads spilling). */ .article-sidebar { position: static; display: block; grid-template-columns: none; } .blueprint-bar { padding: 12px 24px; } } /* --- Responsive: mobile --- */ @media (max-width: 768px) { .article-hero h1 { font-size: 32px; } .article-hero__lede { font-size: 16px; } .article-grid { padding: 12px 16px 0; } .article-sidebar { grid-template-columns: 1fr; } .blueprint-bar { padding: 10px 16px; } .blueprint-bar__nav { gap: 14px; flex-wrap: wrap; } .ticker-tape__text { font-size: 11px; } .ticker-tape__track { animation-duration: 18s; } .hero-card--front { width: 200px; padding: 10px; bottom: 12px; right: 12px; } .hero-card--front .hero-card__title { font-size: 14px; } .hero-card--back { width: 180px; bottom: 28px; right: 44px; padding: 10px; } .hero-card--back p { font-size: 11px; } /* Stack ANY multi-column inline grid on mobile (tier blocks, "Keep reading", newsletter ribbon's 1.2fr 1fr, etc.). */ main [style*="grid-template-columns: 1fr 1fr"], main [style*="grid-template-columns: 1.2fr 1fr"], main [style*="grid-template-columns: repeat(3, 1fr)"], main [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; } /* Newsletter ribbon form: stack input + button vertically too. */ form > div[style*="display: flex"][style*="gap"] { flex-direction: column; } form input[type="email"] { width: 100%; } /* Comparison table — let it scroll horizontally instead of squashing. */ #compared > div[style*="grid-template-columns"] { overflow-x: auto; } /* Sidebar: drop the grid layout on mobile so widgets are plain blocks constrained to the parent width (otherwise grid intrinsic min-width lets children blow out the track). */ .article-sidebar { display: block; grid-template-columns: none; } .sidebar-widget, .related-reads { max-width: 100%; } /* Re-enable carousel arrows on mobile so users can scroll Related Reads when there's no swipe affordance. */ .carousel-btn { display: flex; } } /* --- Dark mode --- Redefine the semantic fg* tokens so any inline color that uses them (var(--rbd-fg1), var(--rbd-fg2), var(--rbd-fg3)) flips automatically. --rbd-navy / --rbd-cream / --rbd-gold stay as literal brand colors so text inside white/cream cards still reads. */ @media (prefers-color-scheme: dark) { :root { --rbd-fg1: var(--rbd-cream); --rbd-fg2: rgba(245, 230, 211, 0.85); --rbd-fg3: rgba(245, 230, 211, 0.6); --rbd-hairline: rgba(245, 230, 211, 0.15); --rbd-border: rgba(245, 230, 211, 0.2); } body { background-color: var(--rbd-navy); color: var(--rbd-cream); } body::before { background-image: var(--page-bg-dark, url("/backgrounds/hub/blog-index_dark.png")); opacity: 0.25; } .blueprint-bar { background: rgba(26, 39, 68, 0.92); border-bottom-color: rgba(245, 230, 211, 0.15); } .blueprint-bar__logo, .blueprint-bar__nav a, .blueprint-bar__social a { color: var(--rbd-cream); } .article-hero h1 { color: var(--rbd-cream); } .article-hero__lede { color: rgba(245, 230, 211, 0.85); } .toc { background: rgba(245, 230, 211, 0.08); } .toc summary { color: var(--rbd-cream); } .toc nav a { color: rgba(245, 230, 211, 0.85); } .toc summary::before { border-left-color: var(--rbd-cream); } .ftc-disclosure { background: rgba(245, 230, 211, 0.06); color: rgba(245, 230, 211, 0.85); } .ftc-disclosure strong { color: var(--rbd-cream); } .sidebar-widget__title { color: var(--rbd-cream); border-bottom-color: rgba(245, 230, 211, 0.3); } .sidebar-card { background: rgba(245, 230, 211, 0.06); } .sidebar-card__title { color: var(--rbd-cream); } .sidebar-card__meta { color: rgba(245, 230, 211, 0.7); } /* Sidebar cards with inline light backgrounds (e.g. Tool spotlight using #FDF6EC gold-tint) keep their bg in dark mode — force their text dark so it doesn't end up cream-on-cream. */ .sidebar-card[style*="#FDF6EC"] .sidebar-card__title, .sidebar-card[style*="FDF6EC"] .sidebar-card__title, .sidebar-card[style*="#FDF6EC"] .sidebar-card__meta, .sidebar-card[style*="FDF6EC"] .sidebar-card__meta { color: var(--rbd-navy); } .sidebar-video__title { color: rgba(245, 230, 211, 0.85); } .related-reads { background: rgba(245, 230, 211, 0.06); } .related-reads__card-title { color: var(--rbd-cream); } .share-row a, .share-row button { color: var(--rbd-cream); border-color: rgba(245, 230, 211, 0.3); } .btn-shop { color: var(--rbd-cream); border-color: rgba(245, 230, 211, 0.4); } .btn-shop:hover { background: var(--rbd-cream); color: var(--rbd-navy); } .faq-item { border-color: rgba(245, 230, 211, 0.15); } .faq-item summary { color: var(--rbd-cream); } .faq-item .faq-answer { color: rgba(245, 230, 211, 0.85); } .lead-magnet { background: rgba(212, 169, 106, 0.08); } .lead-magnet h3 { color: var(--rbd-cream); } .lead-magnet p { color: rgba(245, 230, 211, 0.85); } }