/* Font styles are loaded via inter.css */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 400; line-height: 1.5; } /* Application layout (h-screen) needs overflow control for proper fixed layout */ body.h-screen { height: 100vh; overflow: hidden; display: flex; flex-direction: column; } /* The main flex container should take remaining space */ body.h-screen > div.flex { flex: 1; min-height: 0; /* Critical for proper flex overflow handling */ } /* DEVISE/MINIMAL LAYOUT: FIXED HEADER & SCROLLABLE CONTENT --------------------------------------------------------- This is the definitive, battle-tested solution for creating a layout where the header is fixed and only the main content area scrolls. This prevents the full-page scrollbar that covers the navbar. THEORY: 1. We lock the `` to the viewport's height and prevent it from scrolling. 2. We then target the specific *inner* flex container (`.flex-col.flex-1`) that wraps both the header and main content. 3. By applying `overflow-y: auto` to this container, it becomes the scrollable element. Because the header within it is `flex-none`, it remains fixed at the top, while the `main` element (`flex-1`) takes the remaining space and scrolls. */ body:not(.h-screen) { height: 100vh; overflow-y: hidden; /* Prevent the entire page from scrolling */ } body:not(.h-screen) .flex-col.flex-1 { overflow-y: auto; /* Allow THIS container to scroll, leaving header untouched */ } /* This container must fill the viewport to provide a boundary for the flex children */ body:not(.h-screen) .min-h-screen { height: 100vh; } /* The main content area is the only element that should scroll */ body:not(.h-screen) main { overflow-y: auto; overflow-x: hidden; } /* Honeypot field - hide from users but keep accessible to bots */ div[class^="url_"] { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Original delta artwork */ .bg-radial-gradient { background: radial-gradient(circle at center, rgba(255, 140, 0, 0.15), transparent 70%); } .dark .bg-radial-gradient { background: radial-gradient(circle at center, rgba(6, 182, 212, 0.15), transparent 70%); } .delta-symbol { position: fixed; left: 50vw; transform: translate3d(-50%, -50%, 0) rotate(0deg); font-size: 200vw; font-weight: 700; line-height: 1; transform-origin: center; will-change: transform, opacity; contain: layout paint style; transform-style: preserve-3d; backface-visibility: hidden; opacity: 0; margin: 0; padding: 0; border: 0; } .delta-symbol.delta-middle { top: 50vh; } .delta-symbol.delta-middle.delta-1 { font-size: 210vw; color: rgba(255, 140, 0, 0.06); animation: fade-in 1s ease-out forwards, color-rotate-cw 330s linear infinite 1s; } .delta-symbol.delta-middle.delta-2 { font-size: 200vw; color: rgba(255, 120, 20, 0.06); animation: fade-in 1s ease-out forwards, color-rotate-ccw 330s linear infinite 1s; } .dark .delta-symbol.delta-middle.delta-1 { color: rgba(19, 78, 74, 0.03); animation: fade-in 1s ease-out forwards, color-rotate-cw-dark 330s linear infinite 1s; } .dark .delta-symbol.delta-middle.delta-2 { color: rgba(30, 64, 175, 0.03); animation: fade-in 1s ease-out forwards, color-rotate-ccw-dark 330s linear infinite 1s; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .page-fade-in { animation: page-enter 1.2s ease-out both; } @keyframes page-enter { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes color-rotate-cw { 0% { color: rgba(255, 140, 0, 0.12); transform: translate3d(-50%, -50%, 0) rotate(0deg); } 33% { color: rgba(255, 165, 30, 0.12); transform: translate3d(-50%, -50%, 0) rotate(120deg); } 66% { color: rgba(255, 120, 20, 0.12); transform: translate3d(-50%, -50%, 0) rotate(240deg); } 100% { color: rgba(255, 140, 0, 0.12); transform: translate3d(-50%, -50%, 0) rotate(360deg); } } @keyframes color-rotate-ccw { 0% { color: rgba(255, 120, 20, 0.12); transform: translate3d(-50%, -50%, 0) rotate(0deg); } 33% { color: rgba(255, 140, 0, 0.12); transform: translate3d(-50%, -50%, 0) rotate(-120deg); } 66% { color: rgba(255, 165, 30, 0.12); transform: translate3d(-50%, -50%, 0) rotate(-240deg); } 100% { color: rgba(255, 120, 20, 0.12); transform: translate3d(-50%, -50%, 0) rotate(-360deg); } } @keyframes color-rotate-cw-dark { 0% { color: rgba(19, 78, 74, 0.1); transform: translate3d(-50%, -50%, 0) rotate(0deg); } 33% { color: rgba(51, 65, 85, 0.1); transform: translate3d(-50%, -50%, 0) rotate(120deg); } 66% { color: rgba(30, 64, 175, 0.1); transform: translate3d(-50%, -50%, 0) rotate(240deg); } 100% { color: rgba(19, 78, 74, 0.1); transform: translate3d(-50%, -50%, 0) rotate(360deg); } } @keyframes color-rotate-ccw-dark { 0% { color: rgba(30, 64, 175, 0.1); transform: translate3d(-50%, -50%, 0) rotate(0deg); } 33% { color: rgba(19, 78, 74, 0.1); transform: translate3d(-50%, -50%, 0) rotate(-120deg); } 66% { color: rgba(51, 65, 85, 0.1); transform: translate3d(-50%, -50%, 0) rotate(-240deg); } 100% { color: rgba(30, 64, 175, 0.1); transform: translate3d(-50%, -50%, 0) rotate(-360deg); } } @media (prefers-reduced-motion: reduce) { .delta-symbol { animation: none !important; } .page-fade-in { animation: none !important; } .delta-symbol.delta-middle.delta-1 { color: rgba(255, 140, 0, 0.03); } .delta-symbol.delta-middle.delta-2 { color: rgba(255, 120, 20, 0.03); } .dark .delta-symbol.delta-middle.delta-1 { color: rgba(19, 78, 74, 0.03); } .dark .delta-symbol.delta-middle.delta-2 { color: rgba(30, 64, 175, 0.03); } } @media (max-width: 768px) { .delta-symbol { animation: none !important; opacity: 1; } .delta-symbol.delta-middle.delta-1 { color: rgba(255, 140, 0, 0.05); font-size: 100vw !important; transform: translate3d(-50%, -50%, 0) rotate(15deg) !important; } .delta-symbol.delta-middle.delta-2 { color: rgba(255, 120, 20, 0.05); font-size: 95vw !important; transform: translate3d(-50%, -50%, 0) rotate(-15deg) !important; } .dark .delta-symbol.delta-middle.delta-1 { color: rgba(19, 78, 74, 0.05); } .dark .delta-symbol.delta-middle.delta-2 { color: rgba(30, 64, 175, 0.05); } } main { flex: 1; padding: 1rem; @media (min-width: 1024px) { padding: 1.5rem; } } a { color: inherit; text-decoration: inherit; &:hover, &:focus { color: inherit; text-decoration: inherit; } } ul { list-style: none; } ol { list-style: none; } .table { width: 100%; th, td { padding: 0.5rem; text-align: left; } } .table-responsive { overflow-x: auto; }