/* ============================================================ QRTudo — Theme: Yellow Universe Overrides design-system.css for a YELLOW page background (inspired by hero-mockup-b). Load AFTER design-system.css. Activate with . Strategy: page bg -> yellow, on-bg text -> black, dark cards KEPT (they read well on yellow), yellow-text accents -> purple, primary buttons -> black/yellow, featured plan -> purple. ============================================================ */ /* ── PAGE ─────────────────────────────────────────────── */ body.theme-yellow { background: var(--yellow); color: var(--black); --band: #FAFAF7; /* calm off-white for mid-page content sections */ } body.theme-yellow::before { background-image: linear-gradient(rgba(0,0,0,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.045) 1px, transparent 1px); } /* ── BANDING — yellow bookends (hero + CTA + footer), off-white middle ── */ .theme-yellow #problema, .theme-yellow #recursos, .theme-yellow #tipos-c, .theme-yellow #painel, .theme-yellow #analytics, .theme-yellow #precos, .theme-yellow #faq, .theme-yellow .page-sect.band { background: var(--band); position: relative; z-index: 1; } /* ── NAV — solid black bar (cleaner than translucent over yellow) ── */ .theme-yellow .nav { background: var(--black); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: rgba(255,255,255,0.08); } /* ── HERO ─────────────────────────────────────────────── */ .theme-yellow .hero-h1 .line-yellow { color: var(--purple); } .theme-yellow .hero-h1 .line-ghost { -webkit-text-stroke: 1.5px rgba(0,0,0,0.25); } .theme-yellow .hero-sub { color: rgba(0,0,0,0.6); } .theme-yellow .hero-eyebrow { color: rgba(0,0,0,0.55); } .theme-yellow .eyebrow-line { background: rgba(0,0,0,0.3); } /* ── TYPE PILLS ───────────────────────────────────────── */ .theme-yellow .type-pill { color: rgba(0,0,0,0.55); border-color: rgba(0,0,0,0.2); } .theme-yellow .type-pill:hover { border-color: var(--purple); color: var(--purple); } .theme-yellow .type-pill.active { background: var(--black); border-color: var(--black); color: var(--white); } /* ── SEARCH BAR ───────────────────────────────────────── */ .theme-yellow .search-bar { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.18); } .theme-yellow .search-bar:focus-within { border-color: var(--purple); background: rgba(82,15,245,0.04); } .theme-yellow .search-bar-icon { color: rgba(0,0,0,0.35); } .theme-yellow .search-bar:focus-within .search-bar-icon { color: var(--purple); } .theme-yellow .search-input { color: var(--black); } .theme-yellow .search-input::placeholder { color: rgba(0,0,0,0.3); } .theme-yellow .search-btn { background: var(--black); color: var(--yellow); } .theme-yellow .search-hint { color: rgba(0,0,0,0.4); } /* ── PROOF PILLS ──────────────────────────────────────── */ .theme-yellow .proof-pill { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: rgba(0,0,0,0.55); } .theme-yellow .proof-pill strong { color: rgba(0,0,0,0.85); } .theme-yellow .proof-pill i { color: var(--purple); } /* ── GENERATOR PANEL (give it a dark card surface on yellow) ── */ .theme-yellow .qr-customize { background: var(--mid); } /* ── SECTION HEADINGS ─────────────────────────────────── */ .theme-yellow .sect-line { background: rgba(0,0,0,0.18); } .theme-yellow .sect-label { color: rgba(0,0,0,0.45); } .theme-yellow .page-h2 { color: var(--black); } .theme-yellow .page-h2 .ph-ghost { -webkit-text-stroke: 1.2px rgba(0,0,0,0.22); } .theme-yellow .page-h2 .ph-yellow { color: var(--purple); } .theme-yellow .sect-sub { color: rgba(0,0,0,0.55); } /* ── ANALYTICS COPY (dashboard card stays dark) ───────── */ .theme-yellow .a-label { color: rgba(0,0,0,0.45); } .theme-yellow .a-label-line { background: rgba(0,0,0,0.2); } .theme-yellow .analytics-h2 { color: var(--black); } .theme-yellow .analytics-h2 .ah-yellow { color: var(--purple); } .theme-yellow .analytics-sub { color: rgba(0,0,0,0.6); } /* Analytics bullets: pale-yellow chip + white text are invisible on the band */ .theme-yellow .a-stat-icon { background: var(--yellow); border-color: rgba(0,0,0,0.12); } .theme-yellow .a-stat-icon i { color: var(--black); } .theme-yellow .a-stat-text { color: rgba(0,0,0,0.7); } .theme-yellow .a-stat-text strong { color: var(--black); } /* ── CAROUSEL (left copy on band; phone stays as-is) ── */ .theme-yellow .te-title { color: var(--black); } .theme-yellow .te-type-label { color: rgba(0,0,0,0.55); } .theme-yellow .te-desc { color: rgba(0,0,0,0.6); } .theme-yellow .tc-feature { color: rgba(0,0,0,0.7); } .theme-yellow .tc-pill { color: rgba(0,0,0,0.5); border-color: rgba(0,0,0,0.2); } .theme-yellow .tc-pill:hover { color: var(--black); border-color: rgba(0,0,0,0.4); background: rgba(255,229,0,0.22); } /* Selected category pill -> primary yellow + black text (a11y) */ .theme-yellow .tc-pill.tc-active { background: var(--yellow); border-color: rgba(0,0,0,0.18); color: var(--black); } /* Category icon tile: adopt the per-type brand color (--tc-accent) with an a11y-contrasted glyph (--tc-fg); falls back to yellow/black if no type accent. */ .theme-yellow .te-icon-wrap { background: var(--tc-accent, var(--yellow)); border-color: transparent; color: var(--tc-fg, var(--black)); } /* Yellow CTA needs an edge on the near-white band (text contrast already AA) */ .theme-yellow .te-cta-hero { border: 1px solid rgba(0,0,0,0.14); } /* ── PRICING (non-featured cards stay dark; featured -> purple) ── */ .theme-yellow .price-card.featured { background: var(--purple); border-color: var(--purple); } .theme-yellow .price-card.featured .price-name { color: rgba(255,255,255,0.75); } .theme-yellow .price-card.featured .price-amount { color: #fff; } .theme-yellow .price-card.featured .price-tagline { color: rgba(255,255,255,0.6); } .theme-yellow .price-card.featured .price-feats li { color: rgba(255,255,255,0.85); } .theme-yellow .price-card.featured .price-feats li i { color: var(--yellow); } .theme-yellow .price-card.featured .price-badge { background: var(--black); color: var(--yellow); } /* ── CTA SECTION ──────────────────────────────────────── */ .theme-yellow .cta-sect { border-top-color: rgba(0,0,0,0.08); } .theme-yellow .cta-h2 { color: var(--black); } .theme-yellow .cta-h2 .cta-yellow { color: var(--purple); } .theme-yellow .cta-h2 .cta-ghost { -webkit-text-stroke: 1.5px rgba(0,0,0,0.2); } .theme-yellow .cta-sub { color: rgba(0,0,0,0.55); } .theme-yellow .cta-btn-primary { background: var(--black); color: var(--yellow); } .theme-yellow .cta-btn-secondary { color: rgba(0,0,0,0.6); border-color: rgba(0,0,0,0.2); } .theme-yellow .cta-btn-secondary:hover { border-color: var(--purple); color: var(--purple); } .theme-yellow .cta-micro { color: rgba(0,0,0,0.45); } .theme-yellow .cta-micro i { color: var(--purple); } /* ── DOCS/READING pages (blog, conformidade): off-white page, not full yellow. Yellow stays an accent; dark navbar/footer sit cleanly; content bands blend with the page. ───────── */ body.theme-yellow.docs { background: var(--band); } body.theme-yellow.docs::before { background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px); } /* "Última atualização" line — was invisible (white) on the band */ .theme-yellow .legal-updated { color: rgba(0,0,0,0.5); } /* Footer zone — off-white so the dark footer doesn't sit on yellow body */ .theme-yellow .footer-zone { background: var(--band); } /* ── BLOG/ARTICLE elements on the off-white band ─────── */ .theme-yellow .breadcrumb { color: rgba(0,0,0,0.5); } .theme-yellow .breadcrumb a { color: rgba(0,0,0,0.6); } .theme-yellow .breadcrumb a:hover { color: var(--purple); } .theme-yellow .blog-cat { color: rgba(0,0,0,0.6); border-color: rgba(0,0,0,0.2); } .theme-yellow .blog-cat:hover { color: var(--purple); border-color: var(--purple); } .theme-yellow .blog-cat.active { background: var(--black); border-color: var(--black); color: var(--white); } .theme-yellow .article-cat { color: var(--purple); } .theme-yellow .article-h1 { color: var(--black); } .theme-yellow .article-dek { color: rgba(0,0,0,0.62); } .theme-yellow .byline-name { color: var(--black); } .theme-yellow .byline-role, .theme-yellow .byline-meta { color: rgba(0,0,0,0.55); } .theme-yellow .toc-title { color: rgba(0,0,0,0.5); } .theme-yellow .toc a { color: rgba(0,0,0,0.6); border-left-color: rgba(0,0,0,0.15); } .theme-yellow .toc a:hover, .theme-yellow .toc a.active { color: var(--purple); border-left-color: var(--purple); } .theme-yellow .article-hero-cap { color: rgba(0,0,0,0.5); } .theme-yellow .share-label { color: rgba(0,0,0,0.55); } /* ── FOOTER ───────────────────────────────────────────── */ .theme-yellow .page-footer { border-top-color: rgba(0,0,0,0.1); } .theme-yellow .footer-logo { color: var(--black); } .theme-yellow .footer-links a { color: rgba(0,0,0,0.5); } .theme-yellow .footer-links a:hover { color: rgba(0,0,0,0.85); } .theme-yellow .footer-copy { color: rgba(0,0,0,0.4); }