517 lines
11 KiB
CSS
517 lines
11 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--background: #ffffff;
|
|
--foreground: #111111;
|
|
--color-red: #c00021; /* Portuguese flag red (high contrast) */
|
|
--color-green: #006a3d; /* Portuguese flag green (high contrast) */
|
|
--color-focus: #1a73e8; /* Accessible focus color */
|
|
--color-muted: #666666;
|
|
--color-border: #e5e7eb;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-inter);
|
|
}
|
|
|
|
/* Force light mode; remove automatic dark scheme */
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-inter), system-ui, -apple-system, Segoe UI, Roboto,
|
|
Ubuntu, Cantarell, Noto Sans, sans-serif;
|
|
transition: background-color 200ms ease, color 200ms ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Typography baseline */
|
|
h1 { font-size: 2rem; line-height: 1.25; }
|
|
h2 { font-size: 1.5rem; line-height: 1.3; }
|
|
h3 { font-size: 1.25rem; line-height: 1.3; }
|
|
p { font-size: 1rem; line-height: 1.6; color: var(--foreground); }
|
|
.muted { color: var(--color-muted); }
|
|
|
|
/* Markdown content */
|
|
.markdown-content {
|
|
display: block;
|
|
}
|
|
.markdown-content h1,
|
|
.markdown-content h2,
|
|
.markdown-content h3 { margin-top: 1.25rem; margin-bottom: 0.75rem; }
|
|
.markdown-content p, .markdown-content ul, .markdown-content ol { margin-bottom: 0.75rem; }
|
|
.markdown-content ul { padding-left: 1.25rem; list-style: disc; }
|
|
.markdown-content ol { padding-left: 1.25rem; list-style: decimal; }
|
|
.markdown-content a { text-decoration: underline; }
|
|
|
|
/* Markdown blockquote */
|
|
.markdown-blockquote {
|
|
border-left: 4px solid var(--color-green);
|
|
padding: 0.75rem 1.25rem;
|
|
margin: 1.25rem 0;
|
|
background: rgba(0, 106, 61, 0.05);
|
|
font-style: italic;
|
|
color: var(--foreground);
|
|
}
|
|
.markdown-blockquote p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Markdown code */
|
|
.markdown-code-inline {
|
|
background: rgba(0, 0, 0, 0.06);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 4px;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
font-size: 0.9em;
|
|
color: var(--color-red);
|
|
}
|
|
.markdown-pre {
|
|
background: #f5f5f5;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
overflow-x: auto;
|
|
margin: 1rem 0;
|
|
}
|
|
.markdown-pre code {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
/* Markdown table */
|
|
.markdown-table-wrapper {
|
|
overflow-x: auto;
|
|
margin: 1.25rem 0;
|
|
}
|
|
.markdown-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
.markdown-table th,
|
|
.markdown-table td {
|
|
padding: 0.75rem 1rem;
|
|
text-align: left;
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
.markdown-table th {
|
|
background: rgba(0, 106, 61, 0.08);
|
|
font-weight: 700;
|
|
color: var(--foreground);
|
|
}
|
|
.markdown-table tr:nth-child(even) {
|
|
background: rgba(0, 0, 0, 0.02);
|
|
}
|
|
.markdown-table tr:hover {
|
|
background: rgba(0, 106, 61, 0.03);
|
|
}
|
|
|
|
/* Markdown horizontal rule */
|
|
.markdown-hr {
|
|
border: none;
|
|
border-top: 2px solid var(--color-border);
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
/* Markdown images */
|
|
.markdown-img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
margin: 1.25rem 0;
|
|
display: block;
|
|
}
|
|
|
|
/* Layout utilities */
|
|
.container {
|
|
width: 100%;
|
|
max-width: 72rem; /* ~1152px */
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
/* Hero */
|
|
.hero {
|
|
padding: 3rem 0;
|
|
animation: fade-in-up 400ms ease both;
|
|
}
|
|
.hero .title {
|
|
font-size: 2.25rem;
|
|
font-weight: 800;
|
|
}
|
|
.hero .subtitle {
|
|
margin-top: 0.5rem;
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
/* Carousel */
|
|
.carousel {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--color-border);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.carousel-viewport {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 320px;
|
|
background: #f8f8f8;
|
|
}
|
|
.carousel-slide {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0;
|
|
transition: opacity 250ms ease;
|
|
}
|
|
.carousel-slide.active {
|
|
opacity: 1;
|
|
}
|
|
.carousel-controls {
|
|
position: absolute;
|
|
inset: auto 0 0 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
padding: 0.5rem 0.75rem;
|
|
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
|
|
}
|
|
.carousel-btn {
|
|
background: rgba(255,255,255,0.9);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 999px;
|
|
width: 36px;
|
|
height: 36px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.25rem;
|
|
cursor: pointer;
|
|
}
|
|
.carousel-btn:hover,
|
|
.carousel-btn:focus-visible {
|
|
background: #fff;
|
|
border-color: var(--color-green);
|
|
}
|
|
.carousel-dots {
|
|
display: inline-flex;
|
|
gap: 0.4rem;
|
|
}
|
|
.carousel-dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
border: 1px solid #fff;
|
|
background: rgba(255,255,255,0.6);
|
|
cursor: pointer;
|
|
}
|
|
.carousel-dot.active {
|
|
background: #fff;
|
|
}
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 999px;
|
|
padding: 0.5rem 1rem;
|
|
border: 1px solid var(--color-border);
|
|
transition: opacity 150ms ease, transform 150ms ease, background-color 150ms ease, color 150ms ease;
|
|
}
|
|
.btn-primary {
|
|
background-color: var(--color-green);
|
|
color: #fff;
|
|
border-color: var(--color-green);
|
|
}
|
|
.btn-primary:hover, .btn-primary:focus-visible { opacity: 0.92; transform: translateY(-1px); }
|
|
.btn-outline { background-color: #fff; color: var(--foreground); }
|
|
.btn-outline:hover, .btn-outline:focus-visible { transform: translateY(-1px); }
|
|
|
|
/* Skip link for keyboard users */
|
|
.skip-link {
|
|
position: absolute;
|
|
left: -999px;
|
|
top: -999px;
|
|
background: #fff;
|
|
color: #000;
|
|
border: 2px solid var(--color-focus);
|
|
padding: 0.5rem 0.75rem;
|
|
z-index: 1000;
|
|
}
|
|
.skip-link:focus {
|
|
left: 0.75rem;
|
|
top: 0.75rem;
|
|
}
|
|
|
|
/* Header & navigation */
|
|
.app-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
background-color: #ffffff;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
|
|
}
|
|
.nav {
|
|
position: relative;
|
|
}
|
|
.top-accent {
|
|
height: 6px;
|
|
background-color: var(--color-red);
|
|
}
|
|
.logo {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
.nav-toggle {
|
|
display: none;
|
|
}
|
|
.nav-list {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
}
|
|
.nav-list a,
|
|
.nav-label {
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: 999px;
|
|
transition: background-color 150ms ease, transform 150ms ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
.nav-label {
|
|
cursor: pointer;
|
|
}
|
|
.nav-list a:hover,
|
|
.nav-list a:focus-visible,
|
|
.nav-label:hover {
|
|
background-color: rgba(0,0,0,0.06);
|
|
transform: translateY(-1px);
|
|
}
|
|
.nav-list a.active,
|
|
.nav-label.active {
|
|
background-color: rgba(0,0,0,0.06);
|
|
font-weight: 700;
|
|
}
|
|
.nav-item {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.nav-item.has-sub > .submenu {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
min-width: 220px;
|
|
background: #fff;
|
|
border: 1px solid var(--color-border);
|
|
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
|
|
padding: 0.5rem;
|
|
border-radius: 10px;
|
|
z-index: 60;
|
|
}
|
|
.nav-item.has-sub:hover > .submenu,
|
|
.nav-item.has-sub:focus-within > .submenu {
|
|
display: block;
|
|
}
|
|
.submenu a { display: block; padding: 0.5rem 0.75rem; border-radius: 8px; }
|
|
.submenu a:hover, .submenu a:focus-visible { background: rgba(0,0,0,0.06); }
|
|
.lang-switcher {
|
|
display: inline-flex;
|
|
gap: 0.25rem;
|
|
background: var(--color-red);
|
|
color: #fff;
|
|
border-radius: 999px;
|
|
padding: 0.25rem;
|
|
}
|
|
.lang-switcher a {
|
|
font-weight: 700;
|
|
color: #fff;
|
|
padding: 0.375rem 0.625rem;
|
|
border-radius: 999px;
|
|
}
|
|
.lang-switcher a.current {
|
|
background: rgba(255,255,255,0.2);
|
|
}
|
|
|
|
/* Footer */
|
|
.app-footer {
|
|
border-top: 4px solid var(--color-red);
|
|
margin-top: auto;
|
|
}
|
|
.footer-main {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
.footer-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
.footer-left > p {
|
|
margin: 0;
|
|
}
|
|
.footer-links {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
margin-left: auto;
|
|
}
|
|
.footer-links a {
|
|
text-decoration: underline;
|
|
font-size: 0.875rem;
|
|
color: var(--color-muted);
|
|
}
|
|
.footer-links a:hover,
|
|
.footer-links a:focus-visible {
|
|
color: var(--foreground);
|
|
}
|
|
.footer-attribution {
|
|
font-size: 0.75rem;
|
|
color: var(--color-muted);
|
|
}
|
|
.footer-attribution a {
|
|
color: var(--color-muted);
|
|
text-decoration: underline;
|
|
}
|
|
.footer-attribution a:hover,
|
|
.footer-attribution a:focus-visible {
|
|
color: var(--foreground);
|
|
}
|
|
|
|
/* Subnav bar */
|
|
.subnav-bar {
|
|
border-top: 1px solid var(--color-border);
|
|
background: #fff;
|
|
}
|
|
.subnav {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0;
|
|
}
|
|
.subnav a {
|
|
padding: 0.375rem 0.625rem;
|
|
border-radius: 999px;
|
|
}
|
|
.subnav a.active,
|
|
.subnav a:hover,
|
|
.subnav a:focus-visible {
|
|
background: rgba(0,0,0,0.06);
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fade-in-up {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Respect reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.hero, .markdown-content { animation: none; }
|
|
.nav-list a, .btn { transition: none; }
|
|
}
|
|
|
|
/* Focus styles */
|
|
:where(a, button, input, select, textarea, summary, [role="button"]):focus,
|
|
:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible,
|
|
:where(a, button, input, select, textarea, summary, [role="button"]):focus-within {
|
|
outline: 3px solid var(--color-focus);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Responsive navigation */
|
|
@media (max-width: 768px) {
|
|
.nav-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 2px solid var(--foreground);
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
font-size: 1.25rem;
|
|
}
|
|
.nav-list {
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
position: fixed;
|
|
top: calc(60px + 6px);
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: calc(100vh - 60px - 6px);
|
|
background: #ffffff;
|
|
border-bottom: 1px solid var(--color-border);
|
|
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
|
|
padding: 1rem;
|
|
z-index: 100;
|
|
overflow-y: auto;
|
|
}
|
|
.nav-list[data-expanded="true"] {
|
|
display: flex;
|
|
}
|
|
.nav-item {
|
|
width: 100%;
|
|
}
|
|
.nav-item.has-sub > .submenu {
|
|
position: static;
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
box-shadow: none;
|
|
border: none;
|
|
background: rgba(0,0,0,0.03);
|
|
padding: 0.5rem 0.75rem;
|
|
margin-top: 0.25rem;
|
|
min-width: auto;
|
|
}
|
|
.nav-item.has-sub > .submenu.expanded {
|
|
display: flex;
|
|
}
|
|
.nav-item-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
}
|
|
.nav-submenu-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
font-size: 1rem;
|
|
}
|
|
.nav-submenu-toggle::after {
|
|
content: "▼";
|
|
font-size: 0.625rem;
|
|
transition: transform 150ms ease;
|
|
}
|
|
.nav-submenu-toggle[aria-expanded="true"]::after {
|
|
transform: rotate(180deg);
|
|
}
|
|
.submenu a {
|
|
display: block;
|
|
padding: 0.375rem 0;
|
|
}
|
|
}
|