mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-15 18:53:06 +00:00
198de05c18
Gives authenticated /campanha pages a navigable rail (logo, nav, user/Sair) so the internal area feels like a real app instead of a bare layout.
343 lines
10 KiB
CSS
343 lines
10 KiB
CSS
@import 'tailwindcss';
|
||
|
||
@plugin 'tailwindcss-animate';
|
||
@import 'tw-animate-css';
|
||
@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);
|
||
--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;
|
||
}
|
||
|
||
[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
|
||
(campanha) layout, so it never affects the public (frontend) pages. */
|
||
[data-theme='campaign'] {
|
||
--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;
|
||
}
|
||
|
||
/*
|
||
* 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-child)]: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 */
|
||
}
|
||
}
|