/*
* Critical CSS for web-trainer.
* Loaded via in [locale]/layout.tsx
* so the page works under strict CSP (nonce mode, no 'unsafe-inline' for styles).
*
* ⚠️ DO NOT duplicate Tailwind utility classes here — Next.js inserts the
* Tailwind BEFORE this file in , so same-specificity utilities
* here would permanently beat Tailwind responsive variants
* (e.g. .flex-col here would beat sm:flex-row everywhere).
*
* NOTE: Keep in sync with apps/web-client/app/[locale]/layout.tsx criticalCSS.
*/
:root {
color-scheme: dark;
--background: #111318;
--background-muted: #1A1D24;
--foreground: #0F172A;
--brand: #EA580C;
--brand-light: #F97316;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
background-color: var(--background);
color: #f1f5f9;
min-height: 100vh;
font-family: var(--font-geist-sans), system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* Header fixed height – custom class, safe from Tailwind conflicts */
.site-header {
height: 4rem;
}
/* Hero/profile section minimum heights – prevents CLS during content/font loading */
.min-h-\[420px\] {
min-height: 420px;
}
.min-h-\[2\.5em\] {
min-height: 2.5em;
}
.min-h-\[3em\] {
min-height: 3em;
}
.min-h-\[52px\] {
min-height: 52px;
}
/* Container layout stability – corePlugins.container is disabled in Tailwind config */
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: 72rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
/* Tag Assistant CLS fix */
iframe.__TAG_ASSISTANT_BADGE {
position: fixed !important;
z-index: 9999 !important;
top: 0;
}
/* Footer fixed minimum height – prevents CLS */
.min-h-\[88px\] {
min-height: 88px;
}
.min-h-\[72px\] {
min-height: 72px;
}
.min-h-\[40px\] {
min-height: 40px;
}
footer {
contain: layout;
}
/* Responsive CLS min-heights */
@media (min-width: 640px) {
.sm\:min-h-\[480px\] {
min-height: 480px;
}
}
@media (min-width: 1024px) {
.lg\:min-h-\[520px\] {
min-height: 520px;
}
}
/* Loading skeleton animation */
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #1a1d24;
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: #4b5563;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #6b7280;
}