665157a0c0
A primeira dobra da home pública agora acompanha as referências do Penpot em 393, 768, 1024, 1280, 1366 e 1920 px. No desktop, a escala e a posição horizontal das fotos dependem somente da largura: Solla, Lula e Wagner ficam ancorados ao rodapé real do hero mesmo quando o conteúdo aumenta a seção, e um palco centralizado de 1920 px preserva a proximidade entre retrato e texto em monitores ultrawide. E2E fixa a geometria das seis referências, transições de proporção, desktops baixos, ultrawide e os overrides da WCAG 1.4.12; o caso de regressão também roda no Firefox.
1122 lines
32 KiB
CSS
1122 lines
32 KiB
CSS
@import 'tailwindcss';
|
||
|
||
@plugin 'tailwindcss-animate';
|
||
@import 'tw-animate-css';
|
||
@import 'shadcn/tailwind.css';
|
||
|
||
@custom-variant dark (&:is(.dark *));
|
||
@source "../../**/*.{js,ts,jsx,tsx,mdx}";
|
||
|
||
@theme {
|
||
--breakpoint-2xs: 23.75rem;
|
||
--breakpoint-xs: 26.25rem;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
-webkit-font-smoothing: antialiased;
|
||
color-scheme: light;
|
||
}
|
||
|
||
html,
|
||
body,
|
||
#app {
|
||
height: 100%;
|
||
}
|
||
|
||
@theme inline {
|
||
--color-background: var(--background);
|
||
--color-foreground: var(--foreground);
|
||
--font-sans: var(--font-sans);
|
||
--font-mono: var(--font-geist-mono);
|
||
--color-sidebar-ring: var(--sidebar-ring);
|
||
--color-sidebar-border: var(--sidebar-border);
|
||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||
--color-sidebar-accent: var(--sidebar-accent);
|
||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||
--color-sidebar-primary: var(--sidebar-primary);
|
||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||
--color-sidebar: var(--sidebar);
|
||
--color-chart-5: var(--chart-5);
|
||
--color-chart-4: var(--chart-4);
|
||
--color-chart-3: var(--chart-3);
|
||
--color-chart-2: var(--chart-2);
|
||
--color-chart-1: var(--chart-1);
|
||
--color-ring: var(--ring);
|
||
--color-input: var(--input);
|
||
--color-border: var(--border);
|
||
--color-destructive: var(--destructive);
|
||
--color-accent-foreground: var(--accent-foreground);
|
||
--color-accent: var(--accent);
|
||
--color-muted-foreground: var(--muted-foreground);
|
||
--color-muted: var(--muted);
|
||
--color-secondary-foreground: var(--secondary-foreground);
|
||
--color-secondary: var(--secondary);
|
||
--color-primary-foreground: var(--primary-foreground);
|
||
--color-primary: var(--primary);
|
||
--color-popover-foreground: var(--popover-foreground);
|
||
--color-popover: var(--popover);
|
||
--color-card-foreground: var(--card-foreground);
|
||
--color-card: var(--card);
|
||
--color-scope-border: var(--scope-border);
|
||
--color-scope-foreground: var(--scope-foreground);
|
||
--color-scope: var(--scope);
|
||
--color-tse-foreground: var(--tse-foreground);
|
||
--color-tse: var(--tse);
|
||
--color-support-engaged-foreground: var(--support-engaged-foreground);
|
||
--color-support-engaged: var(--support-engaged);
|
||
--color-support-to-approach-foreground: var(--support-to-approach-foreground);
|
||
--color-support-to-approach: var(--support-to-approach);
|
||
--color-support-disputed-foreground: var(--support-disputed-foreground);
|
||
--color-support-disputed: var(--support-disputed);
|
||
--color-support-remembered-foreground: var(--support-remembered-foreground);
|
||
--color-support-remembered: var(--support-remembered);
|
||
--color-support-negative-foreground: var(--support-negative-foreground);
|
||
--color-support-negative: var(--support-negative);
|
||
--color-estimate-confirmed-foreground: var(--estimate-confirmed-foreground);
|
||
--color-estimate-confirmed: var(--estimate-confirmed);
|
||
--color-estimate-pending-foreground: var(--estimate-pending-foreground);
|
||
--color-estimate-pending: var(--estimate-pending);
|
||
--color-cadence-overdue: var(--cadence-overdue);
|
||
--radius-sm: calc(var(--radius) - 4px);
|
||
--radius-md: calc(var(--radius) - 2px);
|
||
--radius-lg: var(--radius);
|
||
--radius-xl: calc(var(--radius) + 4px);
|
||
--radius-2xl: calc(var(--radius) + 8px);
|
||
--radius-3xl: calc(var(--radius) + 12px);
|
||
--radius-4xl: calc(var(--radius) + 16px);
|
||
}
|
||
|
||
:root {
|
||
--card: oklch(0.25 0.025 171);
|
||
--card-foreground: oklch(0.98 0.004 197.1);
|
||
--popover: oklch(1 0 0);
|
||
--popover-foreground: oklch(0.18 0.01 223.9);
|
||
--primary: oklch(0.9 0.14 143);
|
||
--primary-foreground: oklch(0.2 0.015 171);
|
||
--secondary: oklch(0.31 0.02 171);
|
||
--secondary-foreground: oklch(0.98 0.004 197.1);
|
||
--muted: oklch(0.29 0.02 171);
|
||
--muted-foreground: oklch(0.9 0.01 197.1);
|
||
--accent: oklch(0.34 0.025 171);
|
||
--accent-foreground: oklch(0.98 0.004 197.1);
|
||
--destructive: oklch(0.577 0.245 27.325);
|
||
--border: oklch(0.7 0.015 197.1 / 20%);
|
||
--input: oklch(0.7 0.015 197.1 / 20%);
|
||
--ring: oklch(0.9 0.14 143);
|
||
--chart-1: oklch(0.81 0.117 11.638);
|
||
--chart-2: oklch(0.645 0.246 16.439);
|
||
--chart-3: oklch(0.586 0.253 17.585);
|
||
--chart-4: oklch(0.514 0.222 16.935);
|
||
--chart-5: oklch(0.455 0.188 13.697);
|
||
--radius: 0.875rem;
|
||
--sidebar: oklch(0.25 0.025 171);
|
||
--sidebar-foreground: oklch(0.98 0.004 197.1);
|
||
--sidebar-primary: oklch(0.9 0.14 143);
|
||
--sidebar-primary-foreground: oklch(0.2 0.015 171);
|
||
--sidebar-accent: oklch(0.31 0.02 171);
|
||
--sidebar-accent-foreground: oklch(0.98 0.004 197.1);
|
||
--sidebar-border: oklch(0.7 0.015 197.1 / 20%);
|
||
--sidebar-ring: oklch(0.9 0.14 143);
|
||
--background: #ae1603;
|
||
--foreground: oklch(0.98 0.004 197.1);
|
||
--field-background: #ffffff;
|
||
--field-foreground: #000000;
|
||
--field-placeholder: rgb(0 0 0 / 80%);
|
||
--field-border: rgb(255 255 255 / 80%);
|
||
--field-disabled-background: rgb(255 255 255 / 70%);
|
||
--field-disabled-foreground: rgb(0 0 0 / 70%);
|
||
--field-icon: rgb(0 0 0 / 60%);
|
||
/* Brand header bar. Defined on :root so it is inherited by every theme
|
||
(including "editorial") and stays the same red regardless of palette. */
|
||
--site-header: #ae1603;
|
||
--site-header-foreground: #fff8f2;
|
||
--site-header-muted: rgb(255 248 242 / 72%);
|
||
--site-header-border: rgb(255 255 255 / 18%);
|
||
}
|
||
|
||
/* Light, neutral editorial palette for the public Posts pages (listings +
|
||
article). Mirrors the shadcn token contract with a brand-red primary. */
|
||
[data-theme='editorial'] {
|
||
--background: #f6f4f3;
|
||
--foreground: #201b1a;
|
||
--card: #ffffff;
|
||
--card-foreground: #201b1a;
|
||
--popover: #ffffff;
|
||
--popover-foreground: #201b1a;
|
||
--primary: #c51414;
|
||
--primary-foreground: #ffffff;
|
||
--secondary: #efe9e7;
|
||
--secondary-foreground: #4a3f3d;
|
||
--muted: #efe9e7;
|
||
--muted-foreground: #6c615e;
|
||
--accent: #f3edeb;
|
||
--accent-foreground: #201b1a;
|
||
--destructive: #b42318;
|
||
--border: rgb(32 27 26 / 12%);
|
||
--input: rgb(32 27 26 / 16%);
|
||
--ring: #c51414;
|
||
}
|
||
|
||
/* Paleta da página de campanha 2026 (home pública jorgesolla1313).
|
||
Extraída da geometria do rascunho Penpot (15/08/2026): vermelho #a21c1c,
|
||
amarelo #ffe607, problema #47130e, bandeiras #ebe9e9, cards #f9faff.
|
||
Aplicado via data-theme="campaign-site" no layout da home. */
|
||
[data-theme='campaign-site'] {
|
||
--background: #ffffff;
|
||
--foreground: #000000;
|
||
--pt-red: #a21c1c;
|
||
--pt-red-dark: #47130e;
|
||
--pt-yellow: #ffe607;
|
||
--pt-yellow-ink: #000000;
|
||
--campaign-cream: #fff8f2;
|
||
--campaign-ink: #000000;
|
||
--campaign-muted: #6c615e;
|
||
--campaign-surface: #f9faff;
|
||
--campaign-band: #ebe9e9;
|
||
--campaign-line: rgb(0 0 0 / 12%);
|
||
--campaign-content-inset: clamp(20px, calc(25.36vw - 79.64px), 180px);
|
||
}
|
||
|
||
/* Campaign home geometry is interpolated between the approved Penpot boards.
|
||
Copy stays in normal flow so browser text-spacing preferences can expand the
|
||
hero; only the photographic composition is positioned absolutely. */
|
||
.campaign-hero {
|
||
--campaign-hero-height: max(
|
||
clamp(745px, calc(933.42px - 47.95vw), 780px),
|
||
clamp(745px, calc(41.6vw + 581.51px), 901px)
|
||
);
|
||
min-height: var(--campaign-hero-height);
|
||
height: auto;
|
||
}
|
||
|
||
.campaign-hero-stage {
|
||
max-width: 1920px;
|
||
min-height: var(--campaign-hero-height);
|
||
height: auto;
|
||
}
|
||
|
||
/* Penpot uses the wide official lockup on phones/tablets. Its PNG canvas is
|
||
square and mostly transparent, so the element follows the board geometry. */
|
||
.campaign-home-logo {
|
||
--campaign-logo-size: clamp(356px, calc(38.93vw + 203px), 502px);
|
||
top: clamp(-166px, calc(-11.47vw - 77.92px), -123px);
|
||
left: clamp(0px, calc(33.6vw - 113.05px), 145px);
|
||
width: var(--campaign-logo-size);
|
||
height: var(--campaign-logo-size);
|
||
background-image: url('/Prancheta%206%403x.png');
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: contain;
|
||
}
|
||
|
||
.campaign-hero-portrait {
|
||
top: clamp(53px, calc(9.33vw + 16.32px), 88px);
|
||
left: calc(50% - 211px + clamp(8.5px, calc(3.07vw - 3.55px), 20px));
|
||
width: 422px;
|
||
height: auto;
|
||
aspect-ratio: 422 / 469;
|
||
}
|
||
|
||
.campaign-hero-portrait-image {
|
||
top: -3.63%;
|
||
left: 0.24%;
|
||
width: 106.4%;
|
||
}
|
||
|
||
.campaign-hero-ally {
|
||
z-index: 0;
|
||
width: 177px;
|
||
height: auto;
|
||
}
|
||
|
||
.campaign-hero-ally--rui {
|
||
top: clamp(144px, calc(9.33vw + 107.32px), 179px);
|
||
left: calc(50% - 218.5px + clamp(0px, calc(3.07vw - 12.05px), 11.5px));
|
||
}
|
||
|
||
.campaign-hero-ally--wagner {
|
||
top: clamp(148px, calc(9.33vw + 111.32px), 183px);
|
||
left: calc(50% - 265.5px + clamp(0px, calc(3.07vw - 12.05px), 11.5px));
|
||
}
|
||
|
||
.campaign-hero-ally--jeronimo {
|
||
top: clamp(140px, calc(9.33vw + 103.32px), 175px);
|
||
left: calc(50% + 27.5px + clamp(0px, calc(3.07vw - 12.05px), 11.5px));
|
||
}
|
||
|
||
.campaign-hero-ally--lula {
|
||
top: clamp(179px, calc(9.33vw + 142.32px), 214px);
|
||
left: calc(50% + 65.5px + clamp(0px, calc(3.07vw - 12.05px), 11.5px));
|
||
z-index: 2;
|
||
width: 216px;
|
||
}
|
||
|
||
.campaign-hero-overlay {
|
||
top: clamp(300px, calc(9.33vw + 263.32px), 335px);
|
||
left: 50%;
|
||
width: 100vw;
|
||
height: 245px;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.campaign-hero-content {
|
||
min-height: var(--campaign-hero-height);
|
||
padding-top: clamp(462px, calc(9.33vw + 425.32px), 497px);
|
||
padding-bottom: clamp(14px, calc(28.34px - 1.87vw), 21px);
|
||
}
|
||
|
||
.campaign-hero-title {
|
||
width: min(100%, clamp(392px, calc(38.67vw + 240.04px), 537px));
|
||
margin-right: auto;
|
||
margin-left: auto;
|
||
text-align: center;
|
||
font-size: clamp(32px, calc(4.27vw + 15.23px), 48px);
|
||
}
|
||
|
||
.campaign-hero-copy {
|
||
width: min(calc(100% - 40px), clamp(327px, calc(24.8vw + 229.54px), 420px));
|
||
margin-top: clamp(13px, calc(4.59vw - 4.73px), 30.5px);
|
||
margin-left: clamp(20px, calc(31.2vw - 98.62px), 141px);
|
||
font-size: clamp(14px, calc(1.07vw + 9.81px), 18px);
|
||
}
|
||
|
||
.campaign-hero-actions {
|
||
width: max-content;
|
||
margin-top: clamp(16px, calc(6.85vw - 5.92px), 31px);
|
||
margin-right: clamp(18px, calc(52.27vw - 187.43px), 214px);
|
||
margin-left: auto;
|
||
gap: clamp(10px, calc(3.73vw - 4.67px), 24px);
|
||
}
|
||
|
||
.campaign-hero-action {
|
||
min-height: clamp(44px, calc(4.27vw + 27.23px), 60px);
|
||
height: auto;
|
||
font-size: clamp(17px, calc(0.27vw + 15.95px), 18px);
|
||
}
|
||
|
||
.campaign-hero-action--secondary {
|
||
width: clamp(145px, calc(3.47vw + 131.38px), 158px);
|
||
}
|
||
|
||
.campaign-hero-action--primary {
|
||
width: clamp(112px, calc(12.27vw + 63.79px), 158px);
|
||
}
|
||
|
||
.campaign-hero-action-detail,
|
||
.campaign-hero-action-long {
|
||
display: none;
|
||
}
|
||
|
||
.campaign-hero-accolades {
|
||
width: max-content;
|
||
margin-top: clamp(16px, calc(6.13vw - 8.09px), 39px);
|
||
margin-right: clamp(18px, calc(5.07vw - 1.91px), 37px);
|
||
margin-left: auto;
|
||
align-items: flex-end;
|
||
gap: 2px;
|
||
text-align: right;
|
||
font-size: clamp(10px, calc(0.53vw + 7.9px), 12px);
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.campaign-hero-accolade-secondary {
|
||
display: none;
|
||
}
|
||
|
||
.campaign-proof {
|
||
height: clamp(88px, calc(9.33vw + 51.32px), 123px);
|
||
}
|
||
|
||
.campaign-proof-list {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
align-items: center;
|
||
gap: 23px;
|
||
}
|
||
|
||
.campaign-proof-value {
|
||
font-size: clamp(24px, calc(3.2vw + 11.42px), 36px);
|
||
}
|
||
|
||
.campaign-proof-label {
|
||
font-size: clamp(10px, calc(2.13vw + 1.62px), 18px);
|
||
line-height: 1.15;
|
||
}
|
||
|
||
.campaign-problem {
|
||
height: clamp(659px, calc(774.22px - 11.25vw), 730px);
|
||
}
|
||
|
||
.campaign-flags {
|
||
height: clamp(368px, calc(419.93px - 5.08vw), 400px);
|
||
}
|
||
|
||
.campaign-section-eyebrow,
|
||
.campaign-section-title,
|
||
.campaign-section-copy {
|
||
left: var(--campaign-content-inset);
|
||
}
|
||
|
||
.campaign-section-eyebrow {
|
||
font-size: clamp(10px, calc(0.32vw + 8.75px), 12px);
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.campaign-section-title {
|
||
font-size: clamp(22px, calc(0.32vw + 20.75px), 24px);
|
||
line-height: 1.07;
|
||
}
|
||
|
||
.campaign-section-copy {
|
||
font-size: clamp(14px, calc(0.32vw + 12.75px), 16px);
|
||
}
|
||
|
||
.campaign-problem-eyebrow {
|
||
top: 35px;
|
||
}
|
||
|
||
.campaign-problem-title {
|
||
top: clamp(59px, calc(1.11vw + 54.64px), 66px);
|
||
width: min(
|
||
calc(100% - var(--campaign-content-inset) - var(--campaign-content-inset)),
|
||
clamp(331px, calc(45.17vw + 153.49px), 616px)
|
||
);
|
||
}
|
||
|
||
.campaign-problem-copy {
|
||
top: clamp(127px, calc(157.83px - 3.01vw), 146px);
|
||
width: min(
|
||
calc(100% - var(--campaign-content-inset) - 20px),
|
||
clamp(327px, calc(61.65vw + 84.72px), 716px)
|
||
);
|
||
}
|
||
|
||
.campaign-problem-carousel {
|
||
top: clamp(191px, calc(278.63px - 8.56vw), 245px);
|
||
}
|
||
|
||
.campaign-flags-eyebrow {
|
||
top: clamp(33px, calc(39.49px - 0.63vw), 37px);
|
||
}
|
||
|
||
.campaign-flags-title {
|
||
top: clamp(62px, calc(68.49px - 0.63vw), 66px);
|
||
width: min(
|
||
calc(100% - var(--campaign-content-inset) - var(--campaign-content-inset)),
|
||
clamp(331px, calc(52.77vw + 123.6px), 664px)
|
||
);
|
||
}
|
||
|
||
.campaign-flags-copy {
|
||
top: clamp(130px, calc(160.83px - 3.01vw), 149px);
|
||
width: min(
|
||
calc(100% - var(--campaign-content-inset) - 20px),
|
||
clamp(327px, calc(63.87vw + 76px), 730px)
|
||
);
|
||
}
|
||
|
||
.campaign-flags-carousel {
|
||
top: clamp(215px, calc(285px - 17.81vw), 228px);
|
||
}
|
||
|
||
[data-theme='campaign-site'] [data-carousel='problem'] [data-carousel-track] {
|
||
gap: clamp(10px, calc(1.74vw + 3.16px), 21px);
|
||
}
|
||
|
||
[data-theme='campaign-site'] [data-carousel='flags'] [data-carousel-track] {
|
||
gap: clamp(10px, calc(0.63vw + 7.51px), 14px);
|
||
}
|
||
|
||
[data-theme='campaign-site'] [data-carousel-chips] {
|
||
gap: clamp(6px, calc(0.16vw + 5.37px), 7px);
|
||
}
|
||
|
||
@media (min-width: 24.5625rem) {
|
||
.campaign-flags-carousel {
|
||
top: clamp(184px, calc(234.31px - 4.91vw), 215px);
|
||
}
|
||
}
|
||
|
||
@media (min-width: 40rem) {
|
||
.campaign-hero-action-detail,
|
||
.campaign-hero-action-long {
|
||
display: block;
|
||
}
|
||
|
||
.campaign-hero-action-short {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 64rem) {
|
||
[data-theme='campaign-site'] {
|
||
--campaign-desktop-portrait-width: clamp(465px, calc(26.45vw + 194.15px), 702px);
|
||
--campaign-desktop-portrait-height: clamp(517px, calc(29.41vw + 215.84px), 781px);
|
||
--campaign-desktop-hero-height: max(
|
||
var(--campaign-desktop-portrait-height),
|
||
clamp(477px, min(clamp(543px, 52.8vw, 1014px), calc(-16.79vw + 108.01dvh + 26.8px)), 871px)
|
||
);
|
||
--campaign-proof-min-height: clamp(124px, calc(244px - 9.38vw), 148px);
|
||
--campaign-proof-max-height: clamp(148px, calc(6.81vw + 78.3px), 209px);
|
||
}
|
||
|
||
.campaign-hero {
|
||
--campaign-hero-height: var(--campaign-desktop-hero-height);
|
||
}
|
||
|
||
.campaign-home-logo {
|
||
top: clamp(55px, calc(15.23vw - 101px), 94px);
|
||
left: clamp(47px, calc(6.64vw - 21px), 64px);
|
||
width: clamp(197px, calc(23.44vw - 43px), 257px);
|
||
height: clamp(150px, calc(17.97vw - 34px), 196px);
|
||
transform: none;
|
||
background-image: url('/Prancheta%203%403x.png');
|
||
background-position: clamp(-56.75px, calc(-5.37vw + 12px), -43px)
|
||
clamp(-87.55px, calc(-8.03vw + 15.2px), -67px);
|
||
background-size: 143.65% 189.3%;
|
||
}
|
||
|
||
.campaign-hero-portrait {
|
||
top: auto;
|
||
bottom: 0;
|
||
left: clamp(153px, calc(33.59vw - 191px), 239px);
|
||
width: var(--campaign-desktop-portrait-width);
|
||
aspect-ratio: 465 / 517;
|
||
}
|
||
|
||
.campaign-hero-portrait-image {
|
||
top: -3.67%;
|
||
left: 0.25%;
|
||
width: 106.45%;
|
||
}
|
||
|
||
.campaign-hero-ally {
|
||
top: auto;
|
||
bottom: var(--campaign-ally-bottom, 0px);
|
||
width: clamp(177px, calc(6.14vw + 93.16px), 211px);
|
||
}
|
||
|
||
.campaign-hero-ally--rui {
|
||
left: clamp(-27px, calc(37.89vw - 415px), 70px);
|
||
--campaign-ally-bottom: clamp(67px, calc(102px - 2.73vw), 74px);
|
||
}
|
||
|
||
.campaign-hero-ally--wagner {
|
||
left: clamp(-75px, calc(37.89vw - 463px), 22px);
|
||
--campaign-ally-bottom: 0px;
|
||
z-index: 1;
|
||
}
|
||
|
||
.campaign-hero-ally--jeronimo {
|
||
left: clamp(63px, calc(31.25vw - 257px), 143px);
|
||
--campaign-ally-bottom: clamp(49px, calc(1.56vw + 33px), 53px);
|
||
z-index: 1;
|
||
}
|
||
|
||
.campaign-hero-ally--lula {
|
||
left: clamp(-8px, calc(37.89vw - 396px), 89px);
|
||
width: clamp(238px, calc(8.3vw + 124.6px), 284px);
|
||
--campaign-ally-bottom: 0px;
|
||
}
|
||
|
||
.campaign-hero-overlay {
|
||
display: none;
|
||
}
|
||
|
||
.campaign-hero-content {
|
||
--campaign-hero-content-right: clamp(47px, calc(40.23vw - 365px), 150px);
|
||
padding-top: clamp(106px, calc(8.2vw + 22px), 127px);
|
||
padding-bottom: 11px;
|
||
}
|
||
|
||
.campaign-hero-title {
|
||
width: 392px;
|
||
margin-right: var(--campaign-hero-content-right);
|
||
margin-left: auto;
|
||
text-align: right;
|
||
font-size: 36px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.campaign-hero-copy {
|
||
width: 418px;
|
||
margin-top: 19.6px;
|
||
margin-right: var(--campaign-hero-content-right);
|
||
margin-left: auto;
|
||
text-align: right;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.campaign-hero-actions {
|
||
margin-top: 29px;
|
||
margin-right: var(--campaign-hero-content-right);
|
||
margin-left: auto;
|
||
gap: 24px;
|
||
}
|
||
|
||
.campaign-hero-action {
|
||
width: 158px;
|
||
min-height: 60px;
|
||
height: auto;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.campaign-hero-action-detail,
|
||
.campaign-hero-action-long,
|
||
.campaign-hero-accolade-secondary {
|
||
display: block;
|
||
}
|
||
|
||
.campaign-hero-action-short {
|
||
display: none;
|
||
}
|
||
|
||
.campaign-hero-accolades {
|
||
margin-top: clamp(64px, calc(169px - 8.2vw), 85px);
|
||
margin-right: 0;
|
||
margin-left: 559px;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
text-align: left;
|
||
font-size: 12px;
|
||
line-height: 15px;
|
||
}
|
||
|
||
.campaign-proof {
|
||
height: clamp(
|
||
var(--campaign-proof-min-height),
|
||
calc(100dvh - var(--campaign-desktop-hero-height)),
|
||
var(--campaign-proof-max-height)
|
||
);
|
||
}
|
||
|
||
.campaign-proof-list {
|
||
grid-template-columns: 147px 178px 183px;
|
||
align-items: start;
|
||
justify-content: space-between;
|
||
gap: 0;
|
||
padding-top: clamp(17px, calc(47px - 2.34vw), 23px);
|
||
}
|
||
|
||
.campaign-proof-value {
|
||
font-size: 36px;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.campaign-proof-label {
|
||
font-size: 18px;
|
||
line-height: 1.25;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 80rem) {
|
||
.campaign-hero-portrait {
|
||
left: clamp(239px, calc(100vw - 1041px), 325px);
|
||
}
|
||
|
||
.campaign-home-logo {
|
||
top: clamp(45px, calc(823.3px - 56.98vw), 94px);
|
||
left: clamp(64px, calc(8.14vw - 40.19px), 71px);
|
||
width: clamp(257px, calc(43.02vw - 293.7px), 294px);
|
||
height: clamp(196px, calc(32.56vw - 220.74px), 224px);
|
||
background-position: clamp(-64.92px, calc(64.85px - 9.5vw), -56.75px)
|
||
clamp(-100.05px, calc(98.5px - 14.54vw), -87.55px);
|
||
}
|
||
|
||
.campaign-hero-ally--rui {
|
||
left: clamp(70px, calc(83.72vw - 1001.63px), 142px);
|
||
--campaign-ally-bottom: clamp(64px, calc(111.65px - 3.49vw), 67px);
|
||
}
|
||
|
||
.campaign-hero-ally--wagner {
|
||
left: clamp(22px, calc(87.21vw - 1094.28px), 97px);
|
||
--campaign-ally-bottom: 0px;
|
||
}
|
||
|
||
.campaign-hero-ally--jeronimo {
|
||
left: clamp(143px, calc(93.02vw - 1047.7px), 223px);
|
||
--campaign-ally-bottom: clamp(49px, calc(112.53px - 4.65vw), 53px);
|
||
}
|
||
|
||
.campaign-hero-ally--lula {
|
||
left: clamp(89px, calc(87.21vw - 1027.28px), 164px);
|
||
--campaign-ally-bottom: 0px;
|
||
}
|
||
|
||
.campaign-hero-content {
|
||
--campaign-hero-content-right: clamp(150px, calc(72.09vw - 772.8px), 212px);
|
||
padding-top: clamp(106px, calc(439.56px - 24.42vw), 127px);
|
||
}
|
||
|
||
.campaign-hero-accolades {
|
||
margin-top: clamp(64px, calc(122.09vw - 1498.8px), 169px);
|
||
margin-left: clamp(559px, calc(186.05vw - 1822.4px), 719px);
|
||
}
|
||
|
||
.campaign-proof-list {
|
||
padding-top: clamp(17px, calc(19.77vw - 236.02px), 34px);
|
||
}
|
||
}
|
||
|
||
@media (min-width: 85.375rem) {
|
||
.campaign-hero-portrait {
|
||
left: clamp(325px, calc(35.92vw - 165.7px), 524px);
|
||
}
|
||
|
||
.campaign-home-logo {
|
||
top: clamp(45px, calc(7.4vw - 56.1px), 86px);
|
||
left: clamp(71px, calc(22.38vw - 234.8px), 195px);
|
||
width: clamp(294px, calc(16.43vw + 69.6px), 385px);
|
||
height: clamp(224px, calc(12.64vw + 51.4px), 294px);
|
||
background-position: clamp(-85px, calc(-3.63vw - 15.35px), -64.92px)
|
||
clamp(-131px, calc(-5.6vw - 23.6px), -100.05px);
|
||
}
|
||
|
||
.campaign-hero-ally--rui {
|
||
left: clamp(142px, calc(30.51vw - 274.7px), 311px);
|
||
--campaign-ally-bottom: clamp(64px, calc(2.17vw + 34.4px), 76px);
|
||
}
|
||
|
||
.campaign-hero-ally--wagner {
|
||
left: clamp(97px, calc(28.88vw - 297.5px), 257px);
|
||
--campaign-ally-bottom: 0px;
|
||
}
|
||
|
||
.campaign-hero-ally--jeronimo {
|
||
left: clamp(223px, calc(35.56vw - 262.8px), 420px);
|
||
--campaign-ally-bottom: clamp(49px, calc(1.44vw + 29.27px), 57px);
|
||
}
|
||
|
||
.campaign-hero-ally--lula {
|
||
left: clamp(164px, calc(32.31vw - 277.4px), 343px);
|
||
--campaign-ally-bottom: 0px;
|
||
}
|
||
|
||
.campaign-hero-content {
|
||
--campaign-hero-content-right: clamp(212px, calc(1.44vw + 192.27px), 220px);
|
||
padding-top: clamp(106px, calc(15.16vw - 101.1px), 190px);
|
||
padding-bottom: clamp(7px, calc(24.32px - 0.9vw), 12px);
|
||
}
|
||
|
||
.campaign-hero-title {
|
||
width: clamp(392px, calc(38.81vw - 138.1px), 607px);
|
||
font-size: clamp(36px, calc(2.17vw + 6.41px), 48px);
|
||
}
|
||
|
||
.campaign-hero-copy {
|
||
width: clamp(418px, calc(26.71vw + 53.05px), 566px);
|
||
margin-top: clamp(19.6px, calc(3.83vw - 32.68px), 40.8px);
|
||
font-size: clamp(18px, calc(1.08vw + 3.2px), 24px);
|
||
}
|
||
|
||
.campaign-hero-actions {
|
||
margin-top: clamp(29px, calc(6.68vw - 62.23px), 66px);
|
||
gap: clamp(24px, calc(0.36vw + 19.07px), 26px);
|
||
}
|
||
|
||
.campaign-hero-action {
|
||
width: clamp(158px, calc(2.89vw + 118.55px), 174px);
|
||
min-height: clamp(60px, calc(1.08vw + 45.2px), 66px);
|
||
height: auto;
|
||
font-size: clamp(18px, calc(0.36vw + 13.07px), 20px);
|
||
}
|
||
|
||
.campaign-hero-accolades {
|
||
margin-top: clamp(169px, calc(5.87vw + 88.76px), 201.5px);
|
||
margin-left: clamp(719px, calc(73.83vw - 289.5px), 1128px);
|
||
font-size: clamp(11px, calc(0.36vw + 7.07px), 14px);
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.campaign-proof-list {
|
||
padding-top: clamp(30px, calc(1.08vw + 19.2px), 40px);
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
[data-theme='campaign-site'] [data-carousel-track] {
|
||
scroll-behavior: auto;
|
||
}
|
||
}
|
||
|
||
/* Full-bleed carousel viewport with content-aligned first cards. The scroller
|
||
reaches both browser edges; only its initial item follows the page gutter. */
|
||
[data-theme='campaign-site'] [data-carousel] {
|
||
--campaign-carousel-inset: var(--campaign-content-inset);
|
||
}
|
||
|
||
[data-theme='campaign-site'] [data-carousel-track],
|
||
[data-theme='campaign-site'] [data-carousel-chips] {
|
||
padding-left: var(--campaign-carousel-inset);
|
||
padding-right: var(--campaign-carousel-inset);
|
||
}
|
||
|
||
[data-theme='campaign-site'] [data-carousel-track] {
|
||
scroll-padding-left: var(--campaign-carousel-inset);
|
||
}
|
||
|
||
.campaign-action-feedback {
|
||
transition:
|
||
transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
|
||
opacity 120ms ease-out,
|
||
background-color 180ms ease-out,
|
||
filter 180ms ease-out;
|
||
}
|
||
|
||
@media (hover: hover) and (pointer: fine) {
|
||
.campaign-action-feedback:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
}
|
||
|
||
.campaign-action-feedback:active {
|
||
opacity: 0.8;
|
||
transform: scale(0.99);
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.campaign-action-feedback {
|
||
transition: none;
|
||
}
|
||
|
||
.campaign-action-feedback:hover,
|
||
.campaign-action-feedback:active {
|
||
transform: none;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 64rem) {
|
||
[data-theme='campaign-site'] {
|
||
--campaign-content-inset: max(180px, calc((100vw - 1152px) / 2 + 32px));
|
||
}
|
||
}
|
||
|
||
[data-theme='petition'] {
|
||
--background: #fff8f2;
|
||
--foreground: #2c2522;
|
||
--card: #ffffff;
|
||
--card-foreground: #2c2522;
|
||
--popover: #ffffff;
|
||
--popover-foreground: #2c2522;
|
||
--primary: #c51414;
|
||
--primary-foreground: #ffffff;
|
||
--secondary: #ffe8df;
|
||
--secondary-foreground: #5f1715;
|
||
--muted: #f4e7de;
|
||
--muted-foreground: #675c56;
|
||
--accent: #ffcf2e;
|
||
--accent-foreground: #332300;
|
||
--border: rgb(189 119 104 / 24%);
|
||
--input: rgb(189 119 104 / 32%);
|
||
--ring: #c51414;
|
||
--destructive: #b42318;
|
||
--petition-hero: #b6120f;
|
||
--petition-hero-foreground: #fffaf5;
|
||
--petition-hero-muted: #ffe2d6;
|
||
--petition-hero-chip: rgb(255 255 255 / 12%);
|
||
--petition-hero-chip-foreground: #fff7ed;
|
||
--petition-hero-glow: rgb(255 207 46 / 24%);
|
||
--petition-hero-depth: rgb(122 0 0 / 35%);
|
||
--petition-hero-cta: #ffcf2e;
|
||
--petition-hero-cta-foreground: #332300;
|
||
--petition-form-section: #f6ebe4;
|
||
--field-background: #ffffff;
|
||
--field-foreground: #2c2522;
|
||
--field-placeholder: rgb(44 37 34 / 58%);
|
||
--field-border: #ddc7bc;
|
||
--field-disabled-background: #ece0d9;
|
||
--field-disabled-foreground: rgb(44 37 34 / 55%);
|
||
--field-icon: rgb(44 37 34 / 58%);
|
||
}
|
||
|
||
/* Clean, neutral light palette for the internal /campanha area (login +
|
||
management panel). Mirrors the shadcn token contract with a brand-red
|
||
primary and defines the --field-* tokens so the custom Input renders with a
|
||
visible border on the white card. Applied via data-theme="campaign" on the
|
||
(campaign) layout, so it never affects the public (frontend) pages. */
|
||
[data-theme='campaign'] {
|
||
--radius: 0.5rem;
|
||
--background: #ffffff;
|
||
--foreground: #1c1917;
|
||
--card: #ffffff;
|
||
--card-foreground: #1c1917;
|
||
--popover: #ffffff;
|
||
--popover-foreground: #1c1917;
|
||
--primary: #c51414;
|
||
--primary-foreground: #ffffff;
|
||
--secondary: #f5f5f4;
|
||
--secondary-foreground: #292524;
|
||
--muted: #f4f4f5;
|
||
--muted-foreground: #6b7280;
|
||
--accent: #f4f4f5;
|
||
--accent-foreground: #1c1917;
|
||
--destructive: #b42318;
|
||
--border: rgb(28 25 23 / 12%);
|
||
--input: rgb(28 25 23 / 16%);
|
||
--ring: #c51414;
|
||
--field-background: #ffffff;
|
||
--field-foreground: #1c1917;
|
||
--field-placeholder: rgb(28 25 23 / 50%);
|
||
--field-border: #d6d3d1;
|
||
--field-disabled-background: #f5f5f4;
|
||
--field-disabled-foreground: rgb(28 25 23 / 55%);
|
||
--field-icon: rgb(28 25 23 / 55%);
|
||
/* Light rail for the campaign app shell (not the public-site dark sidebar). */
|
||
--sidebar: #fafaf9;
|
||
--sidebar-foreground: #1c1917;
|
||
--sidebar-primary: #c51414;
|
||
--sidebar-primary-foreground: #ffffff;
|
||
--sidebar-accent: #f5f5f4;
|
||
--sidebar-accent-foreground: #1c1917;
|
||
--sidebar-border: rgb(28 25 23 / 12%);
|
||
--sidebar-ring: #c51414;
|
||
--scope: #fff5ed;
|
||
--scope-foreground: #6b2d15;
|
||
--scope-border: #e8c5ae;
|
||
--tse: #f1f3f5;
|
||
--tse-foreground: #3f4854;
|
||
--support-engaged: #dcfce7;
|
||
--support-engaged-foreground: #166534;
|
||
--support-to-approach: #eef0f3;
|
||
--support-to-approach-foreground: #46505c;
|
||
--support-disputed: #fef3c7;
|
||
--support-disputed-foreground: #92400e;
|
||
--support-remembered: #e0e7ff;
|
||
--support-remembered-foreground: #3730a3;
|
||
--support-negative: #fee2e2;
|
||
--support-negative-foreground: #991b1b;
|
||
--estimate-confirmed: #dcfce7;
|
||
--estimate-confirmed-foreground: #166534;
|
||
--estimate-pending: #fef3c7;
|
||
--estimate-pending-foreground: #92400e;
|
||
--cadence-overdue: #b42318;
|
||
}
|
||
|
||
[data-theme='campaign']
|
||
:is(
|
||
[data-slot='input'],
|
||
[data-slot='input-group'],
|
||
[data-slot='combobox-trigger'],
|
||
[data-slot='native-select'],
|
||
[data-slot='select-trigger']
|
||
) {
|
||
border-radius: var(--radius-md);
|
||
}
|
||
|
||
/* B183 — Safari iOS auto-zooms any form control whose computed font-size is
|
||
below 16px when focused, and a standalone PWA does not always restore the
|
||
scale when the keyboard closes. One unlayered rule for touch phones (coarse
|
||
pointer, no hover) keeps every campaign input — omnibox, Command search,
|
||
native selects, textareas — at the 16px threshold in any orientation, while
|
||
desktop keeps its own size utilities (unlayered beats the utilities layer). */
|
||
@media (pointer: coarse) and (hover: none) {
|
||
[data-theme='campaign'] :is(input, select, textarea, [contenteditable='true']) {
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
|
||
/* The public-site base `h1` is centered + display-sized for article heroes.
|
||
Campaign dashboard headings are left-aligned section titles, so undo the
|
||
base centering and text balancing here; each heading keeps its own
|
||
size/weight utility classes. The base `p { not-first:mt-6 }` is also for
|
||
article body flow — campaign layouts space subtitles via flex gap, so the
|
||
extra top margin would stack on top of the gap and create a large gap
|
||
between a title and its subtitle. */
|
||
[data-theme='campaign'] h1 {
|
||
text-align: left;
|
||
text-wrap: initial;
|
||
}
|
||
|
||
[data-theme='campaign'] p {
|
||
margin-top: 0;
|
||
}
|
||
|
||
/*
|
||
* Cropped full-width Solla mark for the campaign sidebar.
|
||
* Source SVG viewBox is 430.9×300.5 but ink sits roughly in y 134–188 —
|
||
* size the box to ink height and pin the mask on the ink’s vertical center.
|
||
*/
|
||
.campaign-logo {
|
||
aspect-ratio: 430.9 / 64;
|
||
mask-image: url(/LOGO_SOLLA_BRANCO.svg);
|
||
mask-size: 100% auto;
|
||
mask-repeat: no-repeat;
|
||
/* Ink vertical center ≈ (134.4 + 187.8) / 2 / 300.5 */
|
||
mask-position: center 53.6%;
|
||
-webkit-mask-image: url(/LOGO_SOLLA_BRANCO.svg);
|
||
-webkit-mask-size: 100% auto;
|
||
-webkit-mask-repeat: no-repeat;
|
||
-webkit-mask-position: center 53.6%;
|
||
}
|
||
|
||
.dark {
|
||
--background: oklch(0.148 0.004 228.8);
|
||
--foreground: oklch(0.987 0.002 197.1);
|
||
--card: oklch(0.218 0.008 223.9);
|
||
--card-foreground: oklch(0.987 0.002 197.1);
|
||
--popover: oklch(0.218 0.008 223.9);
|
||
--popover-foreground: oklch(0.987 0.002 197.1);
|
||
--primary: oklch(0.925 0.005 214.3);
|
||
--primary-foreground: oklch(0.218 0.008 223.9);
|
||
--secondary: oklch(0.275 0.011 216.9);
|
||
--secondary-foreground: oklch(0.987 0.002 197.1);
|
||
--muted: oklch(0.275 0.011 216.9);
|
||
--muted-foreground: oklch(0.723 0.014 214.4);
|
||
--accent: oklch(0.275 0.011 216.9);
|
||
--accent-foreground: oklch(0.987 0.002 197.1);
|
||
--destructive: oklch(0.704 0.191 22.216);
|
||
--border: oklch(1 0 0 / 10%);
|
||
--input: oklch(1 0 0 / 15%);
|
||
--ring: oklch(0.56 0.021 213.5);
|
||
--chart-1: oklch(0.81 0.117 11.638);
|
||
--chart-2: oklch(0.645 0.246 16.439);
|
||
--chart-3: oklch(0.586 0.253 17.585);
|
||
--chart-4: oklch(0.514 0.222 16.935);
|
||
--chart-5: oklch(0.455 0.188 13.697);
|
||
--sidebar: oklch(0.218 0.008 223.9);
|
||
--sidebar-foreground: oklch(0.987 0.002 197.1);
|
||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||
--sidebar-primary-foreground: oklch(0.987 0.002 197.1);
|
||
--sidebar-accent: oklch(0.275 0.011 216.9);
|
||
--sidebar-accent-foreground: oklch(0.987 0.002 197.1);
|
||
--sidebar-border: oklch(1 0 0 / 10%);
|
||
--sidebar-ring: oklch(0.56 0.021 213.5);
|
||
}
|
||
|
||
@layer base {
|
||
* {
|
||
@apply border-border outline-ring/50;
|
||
}
|
||
|
||
body {
|
||
@apply text-foreground;
|
||
background-color: var(--background);
|
||
background-image: linear-gradient(to top, #ae1603 0%, #c86112 100%);
|
||
}
|
||
|
||
h1 {
|
||
@apply scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance;
|
||
}
|
||
|
||
h2 {
|
||
@apply scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0;
|
||
}
|
||
|
||
h3 {
|
||
@apply scroll-m-20 text-2xl font-semibold tracking-tight;
|
||
}
|
||
|
||
h4 {
|
||
@apply scroll-m-20 text-xl font-semibold tracking-tight;
|
||
}
|
||
|
||
p {
|
||
@apply leading-7 not-first:mt-6;
|
||
}
|
||
|
||
blockquote {
|
||
@apply mt-6 border-l-2 pl-6 italic;
|
||
}
|
||
|
||
ul {
|
||
@apply my-6 ml-6 list-disc [&>li]:mt-2;
|
||
}
|
||
|
||
code {
|
||
@apply bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
|
||
}
|
||
|
||
small {
|
||
@apply text-sm leading-none font-medium;
|
||
}
|
||
|
||
button,
|
||
select {
|
||
cursor: pointer;
|
||
}
|
||
|
||
html {
|
||
@apply font-sans;
|
||
}
|
||
}
|
||
|
||
@layer utilities {
|
||
.scrollbar-hide {
|
||
-ms-overflow-style: none; /* IE and Edge */
|
||
scrollbar-width: none; /* Firefox */
|
||
}
|
||
|
||
.scrollbar-hide::-webkit-scrollbar {
|
||
display: none; /* Chrome, Safari */
|
||
}
|
||
|
||
/* B167 — the chat Panel's footprint is hidden by this class instead of RRP's
|
||
imperative collapse: `display:none !important` beats the `display:flex`
|
||
react-resizable-panels writes inline on the Panel element on every render,
|
||
so hiding survives RRP's own (async, viewport-driven) re-layouts. */
|
||
.b167-ai-chat-hidden {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
/* MARK: Calendar (shadcn radix-nova) — cell geometry tokens for the day grid.
|
||
`--cell-size`/`--cell-radius` are consumed by ui/calendar.tsx classNames. */
|
||
.cn-calendar {
|
||
@apply p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)];
|
||
}
|
||
|
||
.cn-calendar-dropdown-root {
|
||
@apply border-input has-focus:ring-ring/50 border has-focus:border-ring has-focus:ring-3;
|
||
}
|
||
|
||
.cn-calendar-caption-label {
|
||
@apply h-6 pr-1 pl-1.5;
|
||
}
|
||
|
||
/* E16 — municipality dossier print view: compact A4 typography (one step down
|
||
the DESIGN.md ramp: body text-sm→text-xs, section titles text-base→text-sm),
|
||
sections kept whole across page breaks. Chrome hiding lives in `print:`
|
||
utilities on the campaign layout/components; this block only tunes the
|
||
dossier itself. */
|
||
@media print {
|
||
@page {
|
||
size: A4;
|
||
margin: 14mm;
|
||
}
|
||
html,
|
||
body,
|
||
#app {
|
||
height: auto;
|
||
}
|
||
|
||
[data-dossier] {
|
||
font-size: 0.75rem;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
[data-dossier] section {
|
||
break-inside: avoid;
|
||
padding: 0.75rem;
|
||
}
|
||
|
||
[data-dossier] h2 {
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
[data-dossier] a {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
|
||
/* Badges carry meaning by fill (prioridade, tendência, classe territorial);
|
||
without this the printer drops the background and every badge prints as
|
||
identical grey text. */
|
||
[data-dossier] [data-slot='badge'] {
|
||
print-color-adjust: exact;
|
||
-webkit-print-color-adjust: exact;
|
||
border: 1px solid rgb(0 0 0 / 20%);
|
||
}
|
||
}
|