/* Custom styles: square image, fonts, animations */ :root { --pt-serif: 'PT Serif', serif; --mono: 'JetBrains Mono', monospace; } body { font-family: var(--pt-serif); background-color: white; color: #1e293b; /* default slate-800 text */ transition: background-color 0.3s, color 0.3s; } /* square image wrapper */ .square { position: relative; width: 100%; padding-top: 100%; /* 1:1 aspect ratio */ overflow: hidden; } .square img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .animate-fade { animation: fadeInUp 450ms ease both; } /* smaller text for monospace elements */ code, pre, .mono { font-family: var(--mono); } /* background overlay tweak */ main.container { position: relative; z-index: 2; } /* DARK MODE STYLES */ .dark body { background-color: #0f172a; /* slate-900 */ color: #e2e8f0; /* slate-200 */ } /* Headers, paragraphs, links, list items */ .dark h1, .dark h2, .dark h3, .dark h4, .dark p, .dark li, .dark a, .dark label { color: #e2e8f0; /* slate-200 */ } /* Background for white bg elements (cards, forms, sections, asides) */ .dark .bg-white { background-color: #1e293b !important; /* slate-800 */ color: #cbd5e1; /* slate-300 */ } /* Navbar and header */ .dark header { background-color: #1e293b; /* slate-800 */ box-shadow: 0 1px 3px rgb(100 116 139 / 0.5); color: #e2e8f0; } .dark header a { color: #e2e8f0; } .dark header a:hover { background-color: #334155; /* slate-700 */ color: #e2e8f0; } /* Special nav bg color toggles */ .dark header .bg-slate-900 { background-color: #e2e8f0 !important; /* slate-200 */ color: #1e293b !important; /* slate-900 */ } .dark header .bg-slate-200 { background-color: #1e293b !important; /* slate-800 */ color: #e2e8f0 !important; /* slate-200 */ } /* Mobile menu */ .dark #mobile-menu { background-color: #1e293b; border-top-color: #334155; } .dark #mobile-menu a { color: #e2e8f0; } .dark #mobile-menu a:hover { background-color: #334155; } /* Buttons */ .dark button, .dark button:hover { background-color: transparent; color: #e2e8f0; } .dark button:hover { background-color: #334155; } /* Form inputs and textarea */ .dark input, .dark textarea { background-color: transparent; border-color: #475569; /* slate-600 */ color: #cbd5e1; /* slate-300 */ } .dark input::placeholder, .dark textarea::placeholder { color: #64748b; /* slate-500 */ } /* Hover states for links and buttons */ .dark a:hover, .dark button:hover { background-color: #334155; color: #e2e8f0; } /* Horizontal rule */ .dark hr { border-color: #475569; } /* Background for inline-block buttons and links */ .dark a.inline-block.bg-slate-900, .dark button.bg-slate-900 { background-color: #334155; color: white; } .dark a.inline-block.bg-slate-900:hover, .dark button.bg-slate-900:hover { background-color: #475569; } /* Span badges */ .dark span.bg-slate-100 { background-color: #475569; color: #e2e8f0; } /* Force text white on key elements */ .dark h3, .dark h4, .dark h2, .dark p, .dark a, .dark li { color: #e2e8f0; } .logo-dark { display: none; } .dark .logo-dark { display: block; } .dark .logo-light { display: none; } /* logo swap (works whether .dark is on or ) */ .logo-dark { display: none; } .logo-light { display: block; } /* when a .dark ancestor exists, swap logos */ .dark .logo-dark { display: block; } .dark .logo-light { display: none; } /* welcome message colors */ #welcome-msg { color: #1e293b; /* default dark-ish for light mode */ } .dark #welcome-msg { color: #e2e8f0 !important; /* light text for dark mode */ } /* a little extra: ensure cards & elements follow dark mode properly */ .dark .bg-white { background-color: #1e293b !important; color: #e2e8f0; } .dark .text-slate-600 { color: #94a3b8 !important; } /* if you keep that util */ /* Guide card theme fixes */ .guide-card { background-color: #ffffff; color: #1e293b; /* slate-800ish for light mode */ border: 1px solid #e5e7eb; /* light border */ } /* Dark mode styles */ .dark .guide-card { background-color: #1e293b; /* slate-800 */ color: #e2e8f0; /* slate-200 */ border: 1px solid #334155; /* slate-700ish */ } .dark .navbar-text, .dark .navbar-button { color: #e2e8f0 !important; background-color: transparent !important; } .dark .navbar-button:hover { background-color: #334155 !important; color: #e2e8f0 !important; } .dark button#dark-toggle, .dark span, .dark a { color: #e2e8f0 !important; } .dark a.bg-red-600 { background-color: #b91c1c !important; /* lighter red */ } .dark a.bg-red-600:hover { background-color: #7f1d1d !important; } .dark a.bg-slate-900 { background-color: #334155 !important; color: #e2e8f0 !important; } .dark a.bg-slate-900:hover { background-color: #475569 !important; color: #e2e8f0 !important; } .dark button#dark-toggle:hover { background-color: #475569 !important; color: #e2e8f0 !important; } .welcome-username { color: #1e293b; /* slate-800 (dark-ish for light mode) */ transition: color 0.3s ease; } .dark .welcome-username { color: #e2e8f0; /* slate-200 for dark mode */ } /* Footer links - always cyan, ignore theme */ footer .footer-link, footer .footer-link:visited { color: #00ffff !important; /* forced cyan color */ text-decoration: underline; } footer .footer-link:hover { color: #00cccc !important; /* slightly darker on hover */ } /* Extra: ensure dark-mode inherited colors can't override it */ footer .footer-link, footer .footer-link * { color: #00ffff !important; }