initial commit
This commit is contained in:
ryan
@@ -0,0 +1,617 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg: #17140f;
|
||||
--surface: rgba(31, 27, 21, .94);
|
||||
--surface-2: #272118;
|
||||
--line: #4a4033;
|
||||
--text: #f4efe6;
|
||||
--muted: #cfc3b3;
|
||||
--accent: #d3a85b;
|
||||
--accent-2: #7aa889;
|
||||
--danger: #d97070;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
font-family: "GFS Neohellenic", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at 36% 22%, rgba(211, 168, 91, .12), transparent 34%),
|
||||
linear-gradient(90deg, rgba(14, 13, 11, .54), rgba(14, 13, 11, .9)),
|
||||
url("/static/img/styx.png") center / cover fixed,
|
||||
var(--bg);
|
||||
}
|
||||
|
||||
a { color: var(--accent); text-decoration: none; }
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
position: fixed;
|
||||
z-index: 21;
|
||||
top: 20px;
|
||||
right: 28px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
min-height: 36px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.home-link { display: none; }
|
||||
|
||||
.navlinks {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.navlinks form { margin: 0; }
|
||||
|
||||
.navlinks button {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.nav-button,
|
||||
.register-flyout > summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 36px;
|
||||
border: 1px solid rgba(211, 168, 91, .46);
|
||||
border-radius: 7px;
|
||||
background: rgba(31, 27, 21, .9);
|
||||
color: var(--accent);
|
||||
padding: 0 13px;
|
||||
font-family: "Cinzel", "GFS Didot", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
|
||||
font-size: .9rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: .03em;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-button:hover,
|
||||
.register-flyout > summary:hover {
|
||||
border-color: rgba(211, 168, 91, .72);
|
||||
background: rgba(45, 36, 24, .94);
|
||||
color: #efbd73;
|
||||
}
|
||||
|
||||
.shell {
|
||||
align-self: center;
|
||||
justify-self: end;
|
||||
width: min(440px, calc(100vw - 32px));
|
||||
margin: 0 9vw 8vh 0;
|
||||
justify-self: end;
|
||||
padding: 34px;
|
||||
border: 1px solid rgba(255, 255, 255, .1);
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
box-shadow: 0 24px 80px rgba(0, 0, 0, .38);
|
||||
}
|
||||
|
||||
.shell:has(.landing) {
|
||||
justify-self: stretch;
|
||||
width: auto;
|
||||
margin: 0 auto 7vh;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.shell-wide {
|
||||
width: min(1080px, calc(100vw - 32px));
|
||||
justify-self: center;
|
||||
margin: 72px 0 8vh;
|
||||
padding-top: 44px;
|
||||
}
|
||||
|
||||
.landing {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.myth-panel {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
max-width: 980px;
|
||||
padding: 16px 0 34px;
|
||||
text-align: center;
|
||||
text-shadow: 0 2px 24px rgba(0, 0, 0, .62);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.myth-panel img {
|
||||
width: clamp(164px, 15vw, 236px);
|
||||
height: clamp(164px, 15vw, 236px);
|
||||
margin-bottom: 24px;
|
||||
filter: drop-shadow(0 18px 38px rgba(0, 0, 0, .55));
|
||||
}
|
||||
|
||||
.kicker {
|
||||
margin: 0 0 18px;
|
||||
color: var(--accent);
|
||||
font-family: "Cinzel", "GFS Didot", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
|
||||
font-size: clamp(1.05rem, 1.55vw, 1.45rem);
|
||||
font-weight: 600;
|
||||
letter-spacing: .06em;
|
||||
}
|
||||
|
||||
.myth-panel h1 {
|
||||
max-width: none;
|
||||
margin: 0 0 28px;
|
||||
color: var(--accent);
|
||||
font-family: "Cinzel", "GFS Didot", Georgia, serif;
|
||||
font-size: clamp(4.2rem, 8vw, 8.6rem);
|
||||
font-weight: 600;
|
||||
line-height: .95;
|
||||
letter-spacing: .01em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.myth-copy {
|
||||
max-width: 860px;
|
||||
margin-bottom: 42px;
|
||||
color: #efe5d6;
|
||||
font-size: clamp(1.25rem, 2.1vw, 2rem);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.crossing-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(220px, 1fr));
|
||||
gap: clamp(26px, 5vw, 76px);
|
||||
width: min(780px, 100%);
|
||||
}
|
||||
|
||||
.crossing-item {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-content: start;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.crossing-item h2 {
|
||||
margin: 0 0 10px;
|
||||
color: var(--text);
|
||||
font-family: "GFS Neohellenic", Inter, sans-serif;
|
||||
font-size: clamp(1.2rem, 1.7vw, 1.55rem);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.crossing-item p {
|
||||
max-width: 28ch;
|
||||
margin: 0 0 18px;
|
||||
color: var(--muted);
|
||||
font-size: clamp(1.02rem, 1.3vw, 1.25rem);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.choice-disclosure {
|
||||
position: relative;
|
||||
width: min(280px, 100%);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.choice-disclosure summary {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 42px;
|
||||
border: 1px solid rgba(211, 168, 91, .46);
|
||||
border-radius: 7px;
|
||||
background: rgba(31, 27, 21, .9);
|
||||
color: var(--accent);
|
||||
padding: 0 14px;
|
||||
font-family: "Cinzel", "GFS Didot", Georgia, serif;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.choice-disclosure summary::-webkit-details-marker { display: none; }
|
||||
|
||||
.choice-disclosure summary::after {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: 10px;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 5px solid currentColor;
|
||||
}
|
||||
|
||||
.choice-disclosure[open] summary::after { transform: rotate(180deg); }
|
||||
|
||||
.dropdown-card {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: calc(100% + 10px);
|
||||
left: 50%;
|
||||
display: grid;
|
||||
min-width: 320px;
|
||||
padding: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, .12);
|
||||
border-radius: 8px;
|
||||
background: rgba(21, 18, 14, .98);
|
||||
box-shadow: 0 18px 44px rgba(0, 0, 0, .46);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.dropdown-card a, .domain-chip {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
min-height: 40px;
|
||||
border-radius: 6px;
|
||||
padding: 0 10px;
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.dropdown-card a:hover { background: rgba(211, 168, 91, .12); }
|
||||
|
||||
.dropdown-card span {
|
||||
color: var(--muted);
|
||||
font-size: .84rem;
|
||||
}
|
||||
|
||||
.dropdown-card .request-domain {
|
||||
justify-content: center;
|
||||
margin-top: 8px;
|
||||
background: var(--accent);
|
||||
color: #1a1308;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.dropdown-card .request-domain:hover { background: #e0bb76; }
|
||||
|
||||
|
||||
.register-flyout {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
top: 20px;
|
||||
right: 138px;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
.register-flyout > summary::-webkit-details-marker { display: none; }
|
||||
|
||||
.register-flyout > summary::after {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: 9px;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 5px solid currentColor;
|
||||
}
|
||||
|
||||
.register-flyout[open] > summary::after { transform: rotate(180deg); }
|
||||
|
||||
.register-flyout .register-card {
|
||||
position: absolute;
|
||||
top: calc(100% + 12px);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
width: min(440px, calc(100vw - 32px));
|
||||
padding: 34px;
|
||||
border: 1px solid rgba(255, 255, 255, .1);
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
box-shadow: 0 24px 80px rgba(0, 0, 0, .38);
|
||||
}
|
||||
|
||||
.identity {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.identity h1 {
|
||||
color: var(--text);
|
||||
font-family: "Cinzel", "GFS Didot", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
|
||||
font-size: 1.55rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: .03em;
|
||||
}
|
||||
|
||||
.identity p, .register-card label, .register-card input, .register-card .fineprint {
|
||||
font-family: "GFS Neohellenic", "GFS Didot", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
|
||||
}
|
||||
|
||||
.identity img {
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
h1, h2, p { margin-top: 0; }
|
||||
|
||||
h1 {
|
||||
margin-bottom: 8px;
|
||||
font-size: 1.65rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
p, .fineprint {
|
||||
color: var(--muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.stack, .grid-form {
|
||||
display: grid;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.grid-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
|
||||
label {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
color: var(--muted);
|
||||
font-size: .95rem;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--line);
|
||||
background: #15120e;
|
||||
color: var(--text);
|
||||
padding: 0 12px;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
input:disabled { opacity: .64; }
|
||||
|
||||
button, .primary {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background: var(--accent);
|
||||
color: #1a1308;
|
||||
padding: 0 16px;
|
||||
font-family: "GFS Neohellenic", "GFS Didot", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
|
||||
font-size: 1.08rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.small {
|
||||
min-height: 32px;
|
||||
padding: 0 10px;
|
||||
font-size: .86rem;
|
||||
}
|
||||
|
||||
.danger { background: var(--danger); }
|
||||
|
||||
.notice {
|
||||
padding: 12px 14px;
|
||||
border: 1px solid rgba(122, 168, 137, .4);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
background: rgba(122, 168, 137, .14);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.error {
|
||||
border-color: rgba(217, 112, 112, .5);
|
||||
background: rgba(217, 112, 112, .14);
|
||||
}
|
||||
|
||||
.fineprint {
|
||||
margin: 18px 0 0;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.pagehead {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--line);
|
||||
color: var(--accent);
|
||||
background: var(--surface-2);
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin-top: 22px;
|
||||
padding-top: 22px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: .92rem;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 12px 10px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .08);
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.actions form { margin: 0; }
|
||||
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
border-radius: 999px;
|
||||
background: rgba(211, 168, 91, .14);
|
||||
color: var(--accent);
|
||||
padding: 0 9px;
|
||||
font-size: .78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
.register-flyout {
|
||||
right: 134px;
|
||||
}
|
||||
|
||||
.register-flyout .register-card {
|
||||
width: min(420px, calc(100vw - 32px));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.topbar {
|
||||
top: auto;
|
||||
right: 16px;
|
||||
bottom: max(16px, env(safe-area-inset-bottom));
|
||||
min-height: 36px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.shell {
|
||||
align-self: start;
|
||||
justify-self: center;
|
||||
margin: 18px 16px 96px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.shell-wide {
|
||||
margin-top: 78px;
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
.shell:has(.landing) { margin: 4px 16px 104px; }
|
||||
|
||||
.register-flyout {
|
||||
position: fixed;
|
||||
top: auto;
|
||||
bottom: max(16px, env(safe-area-inset-bottom));
|
||||
left: 16px;
|
||||
right: auto;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.register-flyout .register-card {
|
||||
position: fixed;
|
||||
z-index: 30;
|
||||
top: auto;
|
||||
bottom: calc(max(16px, env(safe-area-inset-bottom)) + 48px);
|
||||
left: 16px;
|
||||
right: auto;
|
||||
width: min(420px, calc(100vw - 32px));
|
||||
max-height: calc(100vh - 112px);
|
||||
overflow: auto;
|
||||
margin-top: 0;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
.register-flyout > summary::after {
|
||||
border-top: 0;
|
||||
border-bottom: 5px solid currentColor;
|
||||
}
|
||||
|
||||
.register-flyout[open] > summary::after { transform: rotate(180deg); }
|
||||
|
||||
.myth-panel { padding: 0; transform: none; }
|
||||
|
||||
.myth-panel img {
|
||||
width: 132px;
|
||||
height: 132px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.kicker { margin-bottom: 14px; font-size: .98rem; }
|
||||
|
||||
.myth-panel h1 {
|
||||
white-space: normal;
|
||||
font-size: 2.65rem;
|
||||
}
|
||||
|
||||
.myth-copy {
|
||||
margin-bottom: 26px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.crossing-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.crossing-item { min-height: 0; }
|
||||
|
||||
.dropdown-card {
|
||||
position: static;
|
||||
min-width: 100%;
|
||||
margin-top: 10px;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.grid-form { grid-template-columns: 1fr; }
|
||||
|
||||
table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-purge {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .45;
|
||||
}
|
||||
Reference in New Issue
Block a user