84 lines
2.6 KiB
CSS
84 lines
2.6 KiB
CSS
/* Royal Armory Palette */
|
|
:root {
|
|
--ra-ink: #000030;
|
|
--ra-plum: #3f0a57;
|
|
--ra-magenta: #85106b;
|
|
--ra-ruby: #b02c2c;
|
|
--ra-bronze: #b8673e;
|
|
--ra-amber: #d9932b;
|
|
--ra-gold: #f0bd71;
|
|
--ra-cream: #ffe3ba;
|
|
|
|
--ra-bg: var(--ra-ink);
|
|
--ra-panel: #0b0b3f;
|
|
--ra-copper: #6f3b2b;
|
|
--ra-ruby-dark: #8c2323;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body {
|
|
margin: 0;
|
|
background: var(--ra-bg);
|
|
color: var(--ra-cream);
|
|
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
a { color: var(--ra-gold); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
|
|
header, footer { background: linear-gradient(0deg, rgba(64,10,87,0.25), rgba(64,10,87,0.25)); }
|
|
main { padding: 1rem; }
|
|
|
|
.link { word-break: break-all; text-underline-offset: 3px; }
|
|
|
|
.bar-wrap { width: 100%; background: rgba(240,189,113,0.12); height: 12px; }
|
|
.bar { height: 12px; background: linear-gradient(90deg, var(--ra-amber), var(--ra-gold)); }
|
|
|
|
.btn-more { background: var(--ra-plum); padding: 6px 10px; border-radius: 10px; font-weight: 600; color: var(--ra-cream); }
|
|
|
|
.more-list[data-expanded="false"] { display: none; }
|
|
.more-list[data-expanded="true"] { display: block; }
|
|
|
|
/* utilities */
|
|
.max-w-3xl { max-width: 48rem; }
|
|
.max-w-5xl { max-width: 64rem; }
|
|
.mx-auto { margin-left: auto; margin-right: auto; }
|
|
.p-6 { padding: 1.5rem; }
|
|
.p-5 { padding: 1.25rem; }
|
|
.p-4 { padding: 1rem; }
|
|
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
|
|
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
|
|
.py-10{ padding-top: 2.5rem; padding-bottom: 2.5rem; }
|
|
.mt-2 { margin-top: 0.5rem; }
|
|
.mt-4 { margin-top: 1rem; }
|
|
.mt-6 { margin-top: 1.5rem; }
|
|
.mb-1 { margin-bottom: 0.25rem; }
|
|
.mb-2 { margin-bottom: 0.5rem; }
|
|
.space-y-1 > * + * { margin-top: 0.25rem; }
|
|
.space-y-6 > * + * { margin-top: 1.5rem; }
|
|
.rounded-2xl { border-radius: 1rem; }
|
|
.rounded-xl { border-radius: 0.75rem; }
|
|
.shadow { box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
|
|
.font-bold { font-weight: 700; }
|
|
.font-semibold { font-weight: 600; }
|
|
.text-sm { font-size: 0.875rem; }
|
|
.text-xl { font-size: 1.25rem; }
|
|
.text-3xl { font-size: 1.875rem; }
|
|
.opacity-70 { opacity: 0.7; }
|
|
.opacity-80 { opacity: 0.8; }
|
|
.border { border-width: 1px; }
|
|
.border-b { border-bottom-width: 1px; }
|
|
.flex { display: flex; }
|
|
.items-center { align-items: center; }
|
|
.items-baseline { align-items: baseline; }
|
|
.justify-between { justify-content: space-between; }
|
|
.gap-2 { gap: 0.5rem; }
|
|
.gap-4 { gap: 1rem; }
|
|
.min-w-0 { min-width: 0; }
|
|
.shrink-0 { flex-shrink: 0; }
|
|
.break-all { word-break: break-all; }
|
|
.w-3 { width: 0.75rem; }
|
|
.h-3 { height: 0.75rem; }
|
|
input, button { border: none; }
|
|
button { cursor: pointer; }
|