/* ============================================================================ theme-ro.css — reveste o clone com a pegada editorial do Ro.co Carregado por ÚLTIMO no , sobrescreve os tokens shadcn do bundle. Estratégia: redefinir as CSS variables (muda o tema inteiro de forma coerente) + poucos overrides estruturais mirando as classes do funil. ========================================================================= */ /* ---- paleta: creme premium + preto quente, monocromático editorial ---- */ :root, :root.dark, .dark { --background: #f4efe7; /* creme de fundo */ --foreground: #171310; /* quase-preto quente */ --card: #ffffff; --card-foreground: #171310; --popover: #ffffff; --popover-foreground: #171310; --primary: #171310; /* preto — CTA e estado selecionado */ --primary-foreground: #f8f5ef; --secondary: #ece5d9; --secondary-foreground: #171310; --muted: #e7dfd1; /* trilho da barra de progresso */ --muted-foreground: #6f665a; --accent: #ede6da; --accent-foreground: #171310; --destructive: #b5432f; --destructive-foreground: #ffffff; --border: #ddd3c3; --input: #d4c9b6; --ring: #171310; --radius: .6rem; /* cantos contidos: rounded-xl≈13px, editorial */ --font-sans: "Source Sans 3", system-ui, -apple-system, sans-serif; --font-serif: "Fraunces", Georgia, "Times New Roman", serif; --sidebar: #f4efe7; --sidebar-foreground: #171310; --sidebar-primary: #171310; --sidebar-primary-foreground: #f8f5ef; --sidebar-accent: #ece5d9; --sidebar-accent-foreground: #171310; --sidebar-border: #ddd3c3; --sidebar-ring: #171310; /* zera as sombras azuladas herdadas do tema Twitter */ --shadow-color: rgba(23, 19, 16, .10); } html, body { background: var(--background); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- tipografia editorial: serif nos títulos ---- */ h1, h2, h3, .text-2xl, .text-3xl, .text-4xl, .text-5xl { font-family: var(--font-serif); font-weight: 500; letter-spacing: -.02em; line-height: 1.08; } h1.text-2xl, h1.text-3xl { font-weight: 500; } /* barra superior "We ship exclusively..." — deixa preta editorial */ .bg-primary { } /* ========================================================================= FUNIL (get-started) — telas de pergunta Classes reais mapeadas do bundle: - Container: .max-w-lg.mx-auto.px-4.py-8 - Título: h1.text-2xl.md:text-3xl.font-bold - ProgressBar:.h-1.bg-muted > .bg-primary - Opção: .w-full.p-4.rounded-xl.border-2.text-left.transition-all - Yes/No: .p-4.rounded-xl.border-2 - Inputs: .h-14.text-lg.px-4.rounded-xl ========================================================================= */ /* mais respiro e título maior */ .max-w-lg.mx-auto { max-width: 34rem; } main h1.text-2xl { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.6rem); margin-bottom: 1.75rem; } main p.text-muted-foreground { font-size: 1.05rem; } /* barra de progresso mais fina e arredondada */ .h-1.bg-muted { height: 3px; border-radius: 999px; } /* cartões de opção — borda fina (radius herda do --radius), hover que levanta, selecionado (border-primary) vira contorno preto sólido */ [class*="border-2"][class*="rounded-xl"], [class*="border-2"][class*="rounded-lg"] { border-width: 1px; padding: 1.15rem 1.25rem; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease; } button[class*="border-2"][class*="rounded-xl"]:hover, label[class*="border-2"][class*="rounded-xl"]:hover { border-color: var(--foreground); box-shadow: 0 6px 22px -12px rgba(23, 19, 16, .35); transform: translateY(-1px); } /* estado selecionado do site usa border-primary; reforça o contorno preto */ [class*="border-primary"] { border-color: var(--foreground) !important; box-shadow: inset 0 0 0 1px var(--foreground); } /* inputs mais altos (radius herda do --radius) */ .h-14 { height: 3.5rem; } /* ========================================================================= BOTÕES — CTA preto em formato pill (assinatura Ro) Mira SÓ o botão sólido primário: ele tem `text-primary-foreground`. NÃO usar [class*="bg-primary"]: as opções carregam `hover:bg-primary/5` e seriam capturadas, virando pílulas. (foi o bug do radius stadium) ========================================================================= */ button[class*="text-primary-foreground"], a[class*="text-primary-foreground"] { border-radius: 999px; font-family: var(--font-sans); font-weight: 600; letter-spacing: .01em; } button[class*="text-primary-foreground"]:hover { filter: brightness(1.12); } /* botões-contorno (Learn More etc.) acompanham o preto */ button[class*="border"][class*="rounded-full"], a[class*="border"][class*="rounded-full"] { border-color: var(--foreground); }