1223 lines
26 KiB
SCSS
1223 lines
26 KiB
SCSS
@use "./base.scss";
|
|
@use "./variables.scss" as *;
|
|
|
|
:root,
|
|
:root[saved-theme="light"],
|
|
:root[saved-theme="dark"] {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
body {
|
|
background:
|
|
radial-gradient(circle at 78% 14%, rgba(255, 138, 42, 0.18), transparent 18%),
|
|
radial-gradient(circle at 18% 10%, rgba(89, 183, 255, 0.14), transparent 24%),
|
|
radial-gradient(circle at 52% 0%, rgba(42, 81, 138, 0.18), transparent 28%),
|
|
linear-gradient(180deg, #03070d 0%, #07111a 44%, #09141f 100%);
|
|
color: var(--darkgray);
|
|
}
|
|
|
|
.page {
|
|
position: relative;
|
|
max-width: 1680px;
|
|
padding: 0 1.2rem 2.5rem;
|
|
}
|
|
|
|
.page::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background-image:
|
|
linear-gradient(rgba(89, 183, 255, 0.035) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(89, 183, 255, 0.035) 1px, transparent 1px);
|
|
background-size: 28px 28px;
|
|
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 95%);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.page > #quartz-body > .left.sidebar:empty,
|
|
.page > #quartz-body > .right.sidebar:empty {
|
|
display: none;
|
|
}
|
|
|
|
@media all and ($desktop) {
|
|
.page > #quartz-body:has(> .left.sidebar:empty):has(> .right.sidebar:not(:empty)) {
|
|
grid-template-columns: minmax(0, 1fr) 300px;
|
|
grid-template-areas:
|
|
"grid-header grid-sidebar-right"
|
|
"grid-center grid-sidebar-right"
|
|
"grid-footer grid-sidebar-right";
|
|
}
|
|
|
|
.page > #quartz-body:has(> .left.sidebar:empty):has(> .right.sidebar:empty) {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-areas:
|
|
"grid-header"
|
|
"grid-center"
|
|
"grid-footer";
|
|
}
|
|
}
|
|
|
|
@media all and not ($desktop) {
|
|
.page > #quartz-body:has(> .left.sidebar:empty) {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-areas:
|
|
"grid-header"
|
|
"grid-center"
|
|
"grid-sidebar-right"
|
|
"grid-footer";
|
|
}
|
|
}
|
|
|
|
.page > #quartz-body .center,
|
|
.page > #quartz-body footer {
|
|
max-width: none;
|
|
}
|
|
|
|
.page > #quartz-body .left.sidebar {
|
|
gap: 0;
|
|
padding: 2.4rem 1rem 0 0;
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
.page > #quartz-body .center > .page-header {
|
|
margin-top: 2.4rem;
|
|
}
|
|
|
|
.page > #quartz-body .center > .page-footer {
|
|
margin-top: 1.4rem;
|
|
}
|
|
|
|
.page > #quartz-body .center header {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 1rem 1.25rem;
|
|
align-items: start;
|
|
margin: 0 0 1rem;
|
|
padding: 1rem 1.15rem 1.05rem;
|
|
border: 1px solid rgba(89, 183, 255, 0.12);
|
|
border-radius: 22px;
|
|
background:
|
|
radial-gradient(circle at 82% 50%, rgba(255, 138, 42, 0.16), transparent 22%),
|
|
linear-gradient(135deg, rgba(7, 12, 19, 0.98), rgba(12, 20, 31, 0.95));
|
|
box-shadow:
|
|
0 20px 44px rgba(0, 0, 0, 0.24),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.page > #quartz-body .center header > .search {
|
|
max-width: 9rem;
|
|
width: 100%;
|
|
justify-self: end;
|
|
}
|
|
|
|
.aetheria-titlebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.aetheria-titlebar-top {
|
|
display: flex;
|
|
gap: 1rem;
|
|
min-width: 0;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.aetheria-titlebar-copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.18rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.aetheria-titlebar-title,
|
|
.aetheria-titlebar-title a {
|
|
margin: 0;
|
|
color: var(--dark);
|
|
font-family: var(--titleFont);
|
|
font-size: clamp(2.1rem, 4vw, 3.3rem);
|
|
font-weight: 200;
|
|
line-height: 0.92;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.aetheria-titlebar-tagline {
|
|
margin: 0;
|
|
color: rgba(183, 199, 217, 0.84);
|
|
font-family: var(--titleFont);
|
|
font-size: 0.88rem;
|
|
font-weight: 200;
|
|
letter-spacing: 0.02em;
|
|
line-height: 1.4;
|
|
text-transform: none;
|
|
max-width: 68ch;
|
|
}
|
|
|
|
.aetheria-titlebar-nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
.aetheria-nav-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 2.15rem;
|
|
padding: 0.3rem 0.8rem;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(89, 183, 255, 0.16);
|
|
background: rgba(89, 183, 255, 0.06);
|
|
color: #dce7f6;
|
|
font-family: var(--titleFont);
|
|
font-size: 0.92rem;
|
|
font-weight: 300;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.aetheria-nav-chip:hover,
|
|
.aetheria-nav-chip.active {
|
|
background: rgba(255, 138, 42, 0.16);
|
|
border-color: rgba(255, 138, 42, 0.42);
|
|
color: #fff3e8;
|
|
}
|
|
|
|
.aetheria-titlebar-community {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-left: auto;
|
|
flex: 0 0 auto;
|
|
padding-top: 0.1rem;
|
|
}
|
|
|
|
.aetheria-nav-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 4.7rem;
|
|
height: 4.7rem;
|
|
padding: 0;
|
|
color: rgba(236, 242, 250, 0.96);
|
|
line-height: 0;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.aetheria-nav-icon svg {
|
|
display: block;
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
fill: currentColor;
|
|
filter: drop-shadow(0 0 0.7rem rgba(89, 183, 255, 0.32));
|
|
}
|
|
|
|
.aetheria-nav-icon:hover,
|
|
.aetheria-nav-icon:focus-visible {
|
|
color: #fff3e8;
|
|
}
|
|
|
|
.aetheria-nav-icon:hover svg,
|
|
.aetheria-nav-icon:focus-visible svg {
|
|
filter: drop-shadow(0 0 0.35rem rgba(255, 138, 42, 0.28));
|
|
}
|
|
|
|
.page > #quartz-body .center > .popover-hint {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.breadcrumbs {
|
|
margin: 0 0 0.8rem;
|
|
color: rgba(183, 199, 217, 0.76);
|
|
font-family: var(--titleFont);
|
|
font-size: 0.82rem;
|
|
font-weight: 300;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.breadcrumbs a {
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.article-title,
|
|
article > h1,
|
|
article > h2,
|
|
article > h3,
|
|
article > h4,
|
|
article > h5,
|
|
article > h6 {
|
|
font-family: var(--titleFont);
|
|
letter-spacing: 0.015em;
|
|
}
|
|
|
|
.article-title {
|
|
margin: 0;
|
|
font-size: clamp(2rem, 3vw, 2.85rem);
|
|
font-weight: 200;
|
|
line-height: 0.96;
|
|
}
|
|
|
|
.aetheria-author-meta {
|
|
margin: 0.4rem 0 0;
|
|
color: rgba(220, 231, 246, 0.9);
|
|
font-family: var(--titleFont);
|
|
font-size: 0.98rem;
|
|
font-weight: 300;
|
|
letter-spacing: 0.08em;
|
|
line-height: 1.2;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.content-meta {
|
|
margin-top: 0.55rem;
|
|
color: rgba(183, 199, 217, 0.78);
|
|
}
|
|
|
|
.page > #quartz-body .center > article {
|
|
background:
|
|
linear-gradient(180deg, rgba(10, 16, 24, 0.98), rgba(8, 14, 22, 0.96)),
|
|
linear-gradient(180deg, rgba(89, 183, 255, 0.02), rgba(255, 138, 42, 0.02));
|
|
border: 1px solid rgba(89, 183, 255, 0.09);
|
|
border-radius: 24px;
|
|
box-shadow:
|
|
0 24px 52px rgba(0, 0, 0, 0.26),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
|
padding: 1.45rem 1.7rem 1.9rem;
|
|
}
|
|
|
|
.page > #quartz-body .center > article > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.page > #quartz-body .right.sidebar {
|
|
gap: 1rem;
|
|
padding: 2.4rem 0 0 1rem;
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
.toc,
|
|
.backlinks {
|
|
border-radius: 18px;
|
|
border: 1px solid rgba(89, 183, 255, 0.08);
|
|
background: linear-gradient(180deg, rgba(12, 19, 29, 0.9), rgba(8, 14, 22, 0.86));
|
|
padding: 0.95rem 1rem;
|
|
box-shadow:
|
|
0 18px 36px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.toc h3,
|
|
.backlinks h3 {
|
|
margin-top: 0;
|
|
font-size: 1rem;
|
|
font-weight: 300;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.aetheria-overview-sidebar {
|
|
width: 100%;
|
|
align-self: start;
|
|
max-height: calc(100vh - 3.2rem);
|
|
overflow: auto;
|
|
padding-right: 0.2rem;
|
|
}
|
|
|
|
.aetheria-overview-sidebar-inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.9rem;
|
|
padding: 1rem 1rem 1.1rem;
|
|
border-radius: 22px;
|
|
border: 1px solid rgba(89, 183, 255, 0.08);
|
|
background:
|
|
radial-gradient(circle at 86% 18%, rgba(255, 138, 42, 0.08), transparent 24%),
|
|
linear-gradient(180deg, rgba(10, 16, 24, 0.95), rgba(8, 13, 21, 0.93));
|
|
box-shadow:
|
|
0 18px 34px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.aetheria-overview-branch,
|
|
.aetheria-overview-tagline,
|
|
.aetheria-overview-summary,
|
|
.aetheria-overview-group-title {
|
|
margin: 0;
|
|
}
|
|
|
|
.aetheria-overview-branch,
|
|
.aetheria-overview-branch a {
|
|
color: var(--dark);
|
|
font-family: var(--titleFont);
|
|
font-size: 1.05rem;
|
|
font-weight: 300;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.aetheria-overview-tagline {
|
|
color: rgba(215, 226, 240, 0.92);
|
|
font-family: var(--titleFont);
|
|
font-size: 0.84rem;
|
|
font-weight: 200;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.aetheria-overview-summary {
|
|
color: rgba(175, 192, 211, 0.88);
|
|
font-size: 0.93rem;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.aetheria-overview-nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.95rem;
|
|
}
|
|
|
|
.aetheria-overview-group {
|
|
padding-top: 0.85rem;
|
|
border-top: 1px solid rgba(89, 183, 255, 0.08);
|
|
}
|
|
|
|
.aetheria-overview-group:first-child {
|
|
padding-top: 0;
|
|
border-top: none;
|
|
}
|
|
|
|
.aetheria-overview-group-title {
|
|
color: rgba(255, 138, 42, 0.96);
|
|
font-family: var(--titleFont);
|
|
font-size: 0.72rem;
|
|
font-weight: 300;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.aetheria-overview-links {
|
|
list-style: none;
|
|
margin: 0.45rem 0 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.18rem;
|
|
}
|
|
|
|
.aetheria-overview-links li {
|
|
margin: 0;
|
|
}
|
|
|
|
.aetheria-overview-links a {
|
|
display: block;
|
|
padding: 0.18rem 0 0.18rem 0.72rem;
|
|
border-left: 2px solid transparent;
|
|
color: rgba(220, 231, 246, 0.84);
|
|
font-size: 0.94rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.aetheria-overview-links a:hover,
|
|
.aetheria-overview-links a.active {
|
|
color: #fff3e8;
|
|
}
|
|
|
|
.aetheria-overview-links li.active > a,
|
|
.aetheria-overview-links a.active {
|
|
border-left-color: rgba(255, 138, 42, 0.9);
|
|
}
|
|
|
|
.page-listing .section-li {
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
|
|
.page-listing .section-li > .section {
|
|
display: grid;
|
|
grid-template-columns: fit-content(8em) 1fr;
|
|
gap: 0.9rem;
|
|
padding: 0.9rem 1rem;
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(89, 183, 255, 0.08);
|
|
background: linear-gradient(180deg, rgba(14, 21, 32, 0.92), rgba(10, 16, 25, 0.9));
|
|
}
|
|
|
|
.page-listing .section-li .desc h3 a {
|
|
color: var(--dark);
|
|
}
|
|
|
|
.aetheria-article-index {
|
|
padding: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.aetheria-article-card-list {
|
|
display: grid;
|
|
gap: 0.85rem;
|
|
}
|
|
|
|
.aetheria-article-card {
|
|
margin: 0;
|
|
border-radius: 18px;
|
|
border: 1px solid rgba(89, 183, 255, 0.1);
|
|
background:
|
|
radial-gradient(circle at 90% 12%, rgba(255, 138, 42, 0.09), transparent 24%),
|
|
linear-gradient(135deg, rgba(12, 19, 29, 0.92), rgba(8, 14, 22, 0.9));
|
|
box-shadow:
|
|
0 16px 32px rgba(0, 0, 0, 0.18),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.025);
|
|
}
|
|
|
|
.aetheria-article-card-link {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
padding: 1rem 1.05rem;
|
|
color: inherit;
|
|
}
|
|
|
|
.aetheria-article-card-head {
|
|
display: grid;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.aetheria-article-card h2 {
|
|
margin: 0;
|
|
color: #fff3e8;
|
|
font-family: var(--titleFont);
|
|
font-size: 1.12rem;
|
|
font-weight: 300;
|
|
letter-spacing: 0.03em;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.aetheria-article-card-meta,
|
|
.aetheria-article-card-description {
|
|
margin: 0;
|
|
}
|
|
|
|
.aetheria-article-card-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.35rem;
|
|
color: rgba(255, 138, 42, 0.9);
|
|
font-family: var(--titleFont);
|
|
font-size: 0.78rem;
|
|
font-weight: 300;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.aetheria-article-card-description {
|
|
color: rgba(220, 231, 246, 0.84);
|
|
font-size: 0.95rem;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.aetheria-home-hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
|
|
gap: 1rem;
|
|
margin: 1.15rem 0 1.6rem;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.aetheria-hero-panel,
|
|
.aetheria-media-card,
|
|
.aetheria-embed-frame,
|
|
.aetheria-section-shell {
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(89, 183, 255, 0.1);
|
|
background: linear-gradient(180deg, rgba(13, 20, 31, 0.96), rgba(8, 13, 21, 0.92));
|
|
box-shadow:
|
|
0 18px 36px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.aetheria-home-hero > .aetheria-hero-panel,
|
|
.aetheria-home-hero > .aetheria-media-card {
|
|
background:
|
|
radial-gradient(circle at 84% 18%, rgba(255, 138, 42, 0.09), transparent 24%),
|
|
linear-gradient(180deg, rgba(13, 20, 31, 0.96), rgba(8, 13, 21, 0.92));
|
|
}
|
|
|
|
.aetheria-hero-panel {
|
|
padding: 1.2rem 1.3rem;
|
|
}
|
|
|
|
.aetheria-hero-panel > :first-child,
|
|
.aetheria-media-card > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.aetheria-kicker {
|
|
margin: 0 0 0.7rem;
|
|
color: rgba(255, 138, 42, 0.96);
|
|
font-family: var(--titleFont);
|
|
font-size: 0.76rem;
|
|
font-weight: 300;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.aetheria-media-card {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.8rem;
|
|
padding: 0.8rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.aetheria-media-card img {
|
|
width: 100%;
|
|
aspect-ratio: 16 / 10;
|
|
object-fit: cover;
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(89, 183, 255, 0.12);
|
|
background: rgba(5, 10, 18, 0.9);
|
|
}
|
|
|
|
.aetheria-media-card video {
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
object-fit: cover;
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(89, 183, 255, 0.12);
|
|
background: rgba(5, 10, 18, 0.9);
|
|
}
|
|
|
|
.aetheria-media-card.is-wide img {
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
.aetheria-media-card.is-portrait {
|
|
max-width: 520px;
|
|
}
|
|
|
|
.aetheria-media-card.is-portrait img {
|
|
aspect-ratio: 9 / 14;
|
|
}
|
|
|
|
.aetheria-media-card p,
|
|
.aetheria-section-body p {
|
|
color: rgba(183, 199, 217, 0.88);
|
|
font-size: 0.94rem;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.aetheria-video-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
|
|
gap: 1rem;
|
|
margin: 1.15rem 0 1.6rem;
|
|
}
|
|
|
|
.aetheria-embed-frame {
|
|
margin: 1.2rem 0 1.4rem;
|
|
padding: 0.8rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.aetheria-embed-frame iframe {
|
|
width: 100%;
|
|
min-height: 640px;
|
|
border: 0;
|
|
border-radius: 14px;
|
|
background: #050a11;
|
|
}
|
|
|
|
.aetheria-ink-player {
|
|
display: grid;
|
|
gap: 1rem;
|
|
margin: 1.3rem 0;
|
|
padding: 1rem;
|
|
border: 1px solid rgba(89, 183, 255, 0.14);
|
|
border-radius: 22px;
|
|
background:
|
|
radial-gradient(circle at 90% 12%, rgba(255, 138, 42, 0.12), transparent 22%),
|
|
linear-gradient(180deg, rgba(5, 10, 17, 0.96), rgba(8, 13, 21, 0.94));
|
|
box-shadow:
|
|
0 18px 38px rgba(0, 0, 0, 0.24),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.aetheria-ink-status {
|
|
margin: 0;
|
|
color: rgba(255, 138, 42, 0.96);
|
|
font-family: var(--titleFont);
|
|
font-size: 0.8rem;
|
|
font-weight: 300;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.aetheria-ink-transcript {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.85rem;
|
|
max-height: 62vh;
|
|
overflow: auto;
|
|
padding: 1rem;
|
|
border: 1px solid rgba(89, 183, 255, 0.1);
|
|
border-radius: 18px;
|
|
background:
|
|
linear-gradient(180deg, rgba(10, 17, 26, 0.92), rgba(6, 11, 18, 0.9)),
|
|
repeating-linear-gradient(
|
|
180deg,
|
|
rgba(89, 183, 255, 0.025),
|
|
rgba(89, 183, 255, 0.025) 1px,
|
|
transparent 1px,
|
|
transparent 12px
|
|
);
|
|
}
|
|
|
|
.aetheria-ink-line,
|
|
.aetheria-ink-end,
|
|
.aetheria-ink-error {
|
|
margin: 0;
|
|
color: rgba(224, 235, 248, 0.94);
|
|
font-size: 1rem;
|
|
line-height: 1.68;
|
|
}
|
|
|
|
.aetheria-ink-end {
|
|
color: rgba(255, 219, 186, 0.92);
|
|
font-family: var(--titleFont);
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.aetheria-ink-error {
|
|
color: #ffb7a6;
|
|
}
|
|
|
|
.aetheria-ink-choices {
|
|
display: grid;
|
|
gap: 0.65rem;
|
|
}
|
|
|
|
.aetheria-ink-choice,
|
|
.aetheria-ink-restart {
|
|
cursor: pointer;
|
|
border: 1px solid rgba(89, 183, 255, 0.18);
|
|
border-radius: 999px;
|
|
background: rgba(89, 183, 255, 0.07);
|
|
color: #e7f1ff;
|
|
font-family: var(--bodyFont);
|
|
font-size: 0.98rem;
|
|
line-height: 1.35;
|
|
text-align: left;
|
|
transition:
|
|
border-color 160ms ease,
|
|
background 160ms ease,
|
|
transform 160ms ease;
|
|
}
|
|
|
|
.aetheria-ink-choice {
|
|
padding: 0.75rem 0.95rem;
|
|
}
|
|
|
|
.aetheria-ink-choice:hover,
|
|
.aetheria-ink-choice:focus-visible,
|
|
.aetheria-ink-restart:hover,
|
|
.aetheria-ink-restart:focus-visible {
|
|
border-color: rgba(255, 138, 42, 0.5);
|
|
background: rgba(255, 138, 42, 0.14);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.aetheria-ink-variables {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.aetheria-ink-variable {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
padding: 0.25rem 0.55rem;
|
|
border: 1px solid rgba(89, 183, 255, 0.12);
|
|
border-radius: 999px;
|
|
background: rgba(89, 183, 255, 0.045);
|
|
color: rgba(211, 226, 244, 0.8);
|
|
font-family: var(--codeFont);
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.aetheria-ink-variable-value {
|
|
color: rgba(255, 184, 116, 0.92);
|
|
}
|
|
|
|
.aetheria-ink-restart {
|
|
justify-self: start;
|
|
padding: 0.55rem 0.85rem;
|
|
}
|
|
|
|
.aetheria-ink-player-cinematic {
|
|
position: relative;
|
|
gap: 0.85rem;
|
|
padding: clamp(0.8rem, 2vw, 1.1rem);
|
|
border-color: rgba(255, 198, 120, 0.2);
|
|
background:
|
|
radial-gradient(circle at 16% 12%, rgba(255, 198, 120, 0.12), transparent 24%),
|
|
radial-gradient(circle at 82% 10%, rgba(104, 172, 255, 0.1), transparent 26%),
|
|
linear-gradient(180deg, rgba(7, 8, 12, 0.98), rgba(9, 13, 19, 0.96));
|
|
overflow: hidden;
|
|
}
|
|
|
|
.aetheria-ink-player-cinematic::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background:
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
|
|
background-size: 42px 42px;
|
|
opacity: 0.18;
|
|
mix-blend-mode: screen;
|
|
}
|
|
|
|
.aetheria-ink-cinematic-stage {
|
|
position: relative;
|
|
min-height: clamp(560px, 72vh, 820px);
|
|
border-radius: 24px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255, 198, 120, 0.18);
|
|
background: #05070b;
|
|
box-shadow:
|
|
0 28px 68px rgba(0, 0, 0, 0.44),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
.aetheria-ink-visual,
|
|
.aetheria-ink-visual-plate,
|
|
.aetheria-ink-visual-scrim {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
.aetheria-ink-visual-plate {
|
|
background-position: center;
|
|
background-size: cover;
|
|
opacity: 0;
|
|
transform: scale(1.035);
|
|
filter: saturate(1.08) contrast(1.02) brightness(0.86);
|
|
transition:
|
|
opacity 780ms ease,
|
|
transform 1400ms ease;
|
|
}
|
|
|
|
.aetheria-ink-visual-plate.is-active {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.aetheria-ink-visual-scrim {
|
|
background:
|
|
radial-gradient(circle at 50% 32%, transparent 0%, rgba(0, 0, 0, 0.1) 34%, rgba(0, 0, 0, 0.7) 100%),
|
|
linear-gradient(180deg, rgba(3, 5, 8, 0.18), rgba(3, 5, 8, 0.82));
|
|
}
|
|
|
|
.aetheria-ink-visual-caption {
|
|
position: absolute;
|
|
top: 1rem;
|
|
left: 1rem;
|
|
margin: 0;
|
|
padding: 0.4rem 0.65rem;
|
|
border: 1px solid rgba(255, 198, 120, 0.24);
|
|
border-radius: 999px;
|
|
background: rgba(5, 8, 13, 0.62);
|
|
color: rgba(255, 225, 184, 0.92);
|
|
font-family: var(--titleFont);
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.aetheria-ink-section {
|
|
position: absolute;
|
|
inset: auto clamp(0.85rem, 3vw, 2rem) clamp(0.85rem, 3vw, 2rem);
|
|
display: grid;
|
|
place-items: end stretch;
|
|
}
|
|
|
|
.aetheria-ink-section-text {
|
|
max-width: min(760px, 100%);
|
|
padding: clamp(1rem, 2.3vw, 1.45rem);
|
|
border: 1px solid rgba(255, 198, 120, 0.18);
|
|
border-radius: 24px;
|
|
background:
|
|
linear-gradient(135deg, rgba(7, 10, 15, 0.72), rgba(10, 16, 23, 0.54)),
|
|
radial-gradient(circle at 14% 0%, rgba(255, 198, 120, 0.14), transparent 26%);
|
|
box-shadow:
|
|
0 20px 54px rgba(0, 0, 0, 0.42),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.aetheria-ink-section-text .aetheria-ink-line {
|
|
color: rgba(246, 241, 226, 0.96);
|
|
font-size: clamp(1.05rem, 1.8vw, 1.32rem);
|
|
line-height: 1.65;
|
|
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
|
|
}
|
|
|
|
.aetheria-ink-section-text.is-entering {
|
|
animation: aetheriaInkTextIn 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
|
|
}
|
|
|
|
.aetheria-ink-section-text.is-exiting {
|
|
animation: aetheriaInkTextOut 220ms ease both;
|
|
}
|
|
|
|
.aetheria-ink-player-cinematic .aetheria-ink-choices {
|
|
position: relative;
|
|
z-index: 1;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
|
|
}
|
|
|
|
.aetheria-ink-player-cinematic .aetheria-ink-choice {
|
|
border-radius: 18px;
|
|
border-color: rgba(255, 198, 120, 0.2);
|
|
background:
|
|
linear-gradient(135deg, rgba(17, 23, 31, 0.92), rgba(8, 12, 17, 0.86)),
|
|
radial-gradient(circle at 0% 0%, rgba(255, 198, 120, 0.12), transparent 30%);
|
|
color: rgba(248, 240, 225, 0.94);
|
|
box-shadow:
|
|
0 12px 26px rgba(0, 0, 0, 0.24),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
.aetheria-ink-player-cinematic .aetheria-ink-choice:hover,
|
|
.aetheria-ink-player-cinematic .aetheria-ink-choice:focus-visible {
|
|
border-color: rgba(255, 198, 120, 0.62);
|
|
background:
|
|
linear-gradient(135deg, rgba(40, 30, 18, 0.94), rgba(13, 16, 21, 0.9)),
|
|
radial-gradient(circle at 10% 0%, rgba(255, 198, 120, 0.22), transparent 34%);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.aetheria-ink-continue {
|
|
justify-self: center;
|
|
}
|
|
|
|
.aetheria-ink-continue,
|
|
.aetheria-ink-player-cinematic .aetheria-ink-restart {
|
|
position: relative;
|
|
z-index: 1;
|
|
cursor: pointer;
|
|
padding: 0.65rem 1rem;
|
|
border: 1px solid rgba(255, 198, 120, 0.28);
|
|
border-radius: 999px;
|
|
background: rgba(255, 198, 120, 0.1);
|
|
color: rgba(255, 235, 205, 0.94);
|
|
font-family: var(--titleFont);
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
transition:
|
|
background 160ms ease,
|
|
border-color 160ms ease,
|
|
transform 160ms ease;
|
|
}
|
|
|
|
.aetheria-ink-continue:hover,
|
|
.aetheria-ink-continue:focus-visible,
|
|
.aetheria-ink-player-cinematic .aetheria-ink-restart:hover,
|
|
.aetheria-ink-player-cinematic .aetheria-ink-restart:focus-visible {
|
|
border-color: rgba(255, 198, 120, 0.6);
|
|
background: rgba(255, 198, 120, 0.18);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.aetheria-ink-continue[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.aetheria-ink-player-cinematic .aetheria-ink-variables[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.aetheria-ink-player-cinematic .aetheria-ink-variables {
|
|
position: relative;
|
|
z-index: 1;
|
|
justify-content: center;
|
|
}
|
|
|
|
.aetheria-ink-player-cinematic .aetheria-ink-status,
|
|
.aetheria-ink-player-cinematic .aetheria-ink-restart {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
@keyframes aetheriaInkTextIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(18px) scale(0.985);
|
|
filter: blur(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
filter: blur(0);
|
|
}
|
|
}
|
|
|
|
@keyframes aetheriaInkTextOut {
|
|
from {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
filter: blur(0);
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
transform: translateY(-8px);
|
|
filter: blur(8px);
|
|
}
|
|
}
|
|
|
|
.aetheria-section-header h2 {
|
|
display: block;
|
|
margin: 0;
|
|
color: var(--dark);
|
|
font-family: var(--titleFont);
|
|
font-size: clamp(1.4rem, 2.1vw, 2rem);
|
|
font-weight: 200;
|
|
line-height: 0.92;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.aetheria-section-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.45rem;
|
|
margin-top: 1.15rem;
|
|
}
|
|
|
|
.aetheria-section {
|
|
position: relative;
|
|
}
|
|
|
|
.aetheria-section-shell {
|
|
display: grid;
|
|
grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
|
|
gap: 1.25rem;
|
|
align-items: start;
|
|
padding: 1.1rem;
|
|
border-radius: 24px;
|
|
border-color: rgba(89, 183, 255, 0.14);
|
|
background: linear-gradient(180deg, rgba(8, 13, 21, 0.8), rgba(8, 13, 21, 0.72));
|
|
overflow: hidden;
|
|
box-shadow:
|
|
0 22px 44px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
|
backdrop-filter: blur(14px);
|
|
}
|
|
|
|
.aetheria-section-media {
|
|
min-width: 0;
|
|
align-self: start;
|
|
}
|
|
|
|
.aetheria-section-media > .aetheria-media-card {
|
|
display: block;
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.aetheria-section-media > .aetheria-media-card img {
|
|
min-height: 280px;
|
|
}
|
|
|
|
.aetheria-section-copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.9rem;
|
|
min-width: 0;
|
|
padding: 0.15rem 0.1rem 0.2rem;
|
|
}
|
|
|
|
.aetheria-section-header {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0.8rem 0.95rem 0.85rem;
|
|
border: 1px solid rgba(89, 183, 255, 0.1);
|
|
border-radius: 20px;
|
|
background: linear-gradient(135deg, rgba(10, 16, 24, 0.9), rgba(17, 24, 35, 0.82));
|
|
box-shadow:
|
|
0 14px 28px rgba(0, 0, 0, 0.16),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
|
min-width: 0;
|
|
}
|
|
|
|
.aetheria-section-header > *,
|
|
.aetheria-section-body,
|
|
.aetheria-section-copy {
|
|
min-width: 0;
|
|
}
|
|
|
|
.aetheria-section-header h2 a {
|
|
color: inherit;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
letter-spacing: inherit;
|
|
text-transform: inherit;
|
|
}
|
|
|
|
.aetheria-section-body > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.aetheria-section-body p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.search .search-button,
|
|
.search .search-bar {
|
|
border-color: rgba(89, 183, 255, 0.14);
|
|
background: rgba(10, 16, 24, 0.94);
|
|
color: var(--darkgray);
|
|
}
|
|
|
|
.search .search-button {
|
|
border-radius: 999px;
|
|
min-height: 2.3rem;
|
|
}
|
|
|
|
.search .search-button:hover,
|
|
.search .search-bar:focus {
|
|
border-color: rgba(255, 138, 42, 0.36);
|
|
}
|
|
|
|
.search .search-space > * {
|
|
background: rgba(9, 15, 23, 0.98);
|
|
}
|
|
|
|
.search .search-layout {
|
|
border-color: rgba(89, 183, 255, 0.12);
|
|
}
|
|
|
|
.search .result-card:hover,
|
|
.search .result-card:focus,
|
|
.search .result-card.focus {
|
|
background: rgba(89, 183, 255, 0.08);
|
|
}
|
|
|
|
a,
|
|
.folder-container > div > a,
|
|
.folder-container > div > button span {
|
|
color: var(--secondary);
|
|
}
|
|
|
|
a.internal {
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
line-height: inherit;
|
|
}
|
|
|
|
a:hover,
|
|
.folder-container > div > a:hover,
|
|
.folder-icon:hover,
|
|
.explorer-content ul li > a.active {
|
|
color: var(--tertiary);
|
|
}
|
|
|
|
@media all and not ($desktop) {
|
|
.page > #quartz-body .left.sidebar {
|
|
position: initial;
|
|
height: auto;
|
|
padding: 0;
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
.aetheria-overview-sidebar {
|
|
max-height: none;
|
|
overflow: visible;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.page > #quartz-body .right.sidebar {
|
|
padding: 0;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.aetheria-home-hero {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
@media all and ($mobile) {
|
|
.page > #quartz-body {
|
|
grid-template-areas:
|
|
"grid-header"
|
|
"grid-center"
|
|
"grid-sidebar-left"
|
|
"grid-sidebar-right"
|
|
"grid-footer";
|
|
}
|
|
|
|
.page {
|
|
padding: 0 0.7rem 1.8rem;
|
|
}
|
|
|
|
.page > #quartz-body .center > .page-header {
|
|
margin-top: 1.3rem;
|
|
}
|
|
|
|
.page > #quartz-body .center header {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
padding: 0.95rem 0.95rem 1rem;
|
|
}
|
|
|
|
.page > #quartz-body .center header > .search {
|
|
max-width: none;
|
|
justify-self: stretch;
|
|
}
|
|
|
|
.aetheria-titlebar-title,
|
|
.aetheria-titlebar-title a {
|
|
font-size: 1.9rem;
|
|
}
|
|
|
|
.page > #quartz-body .center > article {
|
|
padding: 1.15rem 1rem 1.45rem;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.aetheria-overview-sidebar-inner {
|
|
padding: 0.95rem 0.95rem 1rem;
|
|
}
|
|
|
|
.aetheria-section-shell {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
padding: 0.95rem;
|
|
}
|
|
|
|
.aetheria-section-header {
|
|
padding: 0.8rem 0.85rem 0.85rem;
|
|
}
|
|
|
|
.aetheria-section-copy {
|
|
padding: 0;
|
|
}
|
|
|
|
.aetheria-hero-panel {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.aetheria-embed-frame iframe {
|
|
min-height: 520px;
|
|
}
|
|
}
|