GRA: Difference between revisions
From HUIJIA FUN
PlurimodSU (talk | contribs) m Edit |
PlurimodSU (talk | contribs) m Category |
||
| (8 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<!-- | <!-- ============================================================ --> | ||
<!-- MASTER MARINAQUA, NOT LAID TO REST: SILENCE OF HIS SECT | <!-- MASTER MARINAQUA, NOT LAID TO REST: SILENCE OF HIS SECT --> | ||
<!-- | <!-- Chapter-Navigation Hub · EN HUIJIA FUN --> | ||
<!-- (A) Timeless skin overrides (B) #vgr-marinaqua-nav --> | |||
<!-- ============================================================ --> | |||
<!-- | |||
<!-- ====== | |||
<html> | <html> | ||
<div id="vgr-marinaqua-nav"> | <div id="vgr-marinaqua-nav"> | ||
<style> | <style> | ||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Lora:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@600;800&display=swap'); | @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Lora:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@600;800&display=swap'); | ||
:root { | :root { | ||
--mq-abyss: | --mq-abyss:#03171f; --mq-deep:#07303a; --mq-tide:#0d4f5c; | ||
--mq-blue:#98C1C0; --mq-jade:#2fb89a; --mq-jade-dim:#1c7d6e; | |||
--mq-mist:#98C1C0; --mq-pale:#e7f6f3; --mq-locked:#426a72; | |||
--mq-blue: | --mq-radius:14px; | ||
--mq-serif:'Lora',serif; --mq-display:'Montserrat',sans-serif; --mq-mono:'JetBrains Mono',monospace; | |||
--mq-mist: | |||
--mq-radius: | |||
--mq-serif: | |||
} | } | ||
/* ===== | /* ===== (A) SKIN OVERRIDES ===== */ | ||
/* | /* canvas */ | ||
html, body, | html, body, #mw-content-block, #mw-content-wrapper, .mw-body, | ||
#mw-content-block, #mw-content-wrapper, .mw-body, | |||
.mw-wiki-logo, #mw-header-container { | .mw-wiki-logo, #mw-header-container { | ||
background-color: var(--mq-abyss) !important; | background-color: var(--mq-abyss) !important; | ||
| Line 64: | Line 33: | ||
} | } | ||
/* | /* top bar */ | ||
#mw-header-container, .mw-header, | #mw-header-container, .mw-header, #mw-header-nav-hack, #mw-header { | ||
#mw-header-nav-hack, #mw-header { | |||
background: linear-gradient(180deg, #062b34 0%, var(--mq-abyss) 100%) !important; | background: linear-gradient(180deg, #062b34 0%, var(--mq-abyss) 100%) !important; | ||
border-bottom: 1px solid rgba(47,184,154,0.22) !important; | border-bottom: 1px solid rgba(47,184,154,0.22) !important; | ||
| Line 72: | Line 40: | ||
} | } | ||
@media screen and (min-width: 1100px) { | @media screen and (min-width: 1100px) { | ||
#mw-content-container { | #mw-content-container { margin-top: 48px !important; } | ||
} | } | ||
/* site title | |||
.mw-wiki-logo, #p-logo-text a, .mw-logo-container, | /* site title + icons */ | ||
#mw-header .mw-portlet-logo a, h1#firstHeading { | .mw-wiki-logo, #p-logo-text a, .mw-logo-container, #mw-header .mw-portlet-logo a, h1#firstHeading { | ||
color: var(--mq-jade) !important; | color: var(--mq-jade) !important; | ||
} | |||
#mw-header .mw-ui-icon::before, #personal .mw-ui-icon::before { | |||
filter: invert(0.9) hue-rotate(120deg) saturate(0.6) !important; | |||
} | } | ||
/* | /* sidebar font */ | ||
#mw-related-navigation span, #mw-site-navigation span, .sidebar-inner li a:before { color: var(--mq-mist) !important; } | |||
#mw- | |||
/* | /* left sidebar */ | ||
#mw-site-navigation, #mw-related-navigation, .sidebar-chunk, .mw-portlet, #site-navigation, #site-tools { | |||
#mw-site-navigation, #mw-related-navigation, | |||
.sidebar-chunk, .mw-portlet, #site-navigation, #site-tools { | |||
background-color: transparent !important; | background-color: transparent !important; | ||
color: var(--mq-mist) !important; | color: var(--mq-mist) !important; | ||
| Line 102: | Line 64: | ||
border-radius: var(--mq-radius) !important; | border-radius: var(--mq-radius) !important; | ||
} | } | ||
#mw-panel a, .sidebar-chunk a, #mw-site-navigation a, #mw-related-navigation a, .mw-portlet a { | |||
.sidebar-chunk | color: var(--mq-mist) !important; | ||
color: var(--mq- | |||
} | } | ||
#mw-panel a:hover, .sidebar-chunk a:hover, .mw-portlet a:hover { color: var(--mq-jade) !important; } | |||
#mw-panel a, .sidebar-chunk a, | #mw-panel .mw-ui-icon::before, .sidebar-chunk .mw-ui-icon::before { | ||
#mw- | filter: invert(0.85) sepia(1) hue-rotate(120deg) saturate(2.2) !important; | ||
} | } | ||
#mw-panel | .sidebar-chunk h2, #mw-panel h3, .portal h3, .vector-menu-heading, .mw-portlet h3 { | ||
color: var(--mq-jade) !important; | color: var(--mq-jade) !important; | ||
border-bottom: 1px solid rgba(47,184,154,0.22) !important; | |||
} | } | ||
/* | /* right rail */ | ||
#mw-related-navigation, .mw-body-after-content, | #mw-related-navigation, .mw-body-after-content, #right-navigation, .page-tools, .mw-portlet-tb { | ||
#right-navigation, .page-tools, .mw-portlet-tb { | |||
background-color: transparent !important; | background-color: transparent !important; | ||
} | } | ||
.mw-body-after-content .sidebar-chunk, | .mw-body-after-content .sidebar-chunk, #mw-related-navigation .sidebar-chunk { | ||
#mw-related-navigation .sidebar-chunk { | |||
background-color: rgba(7,48,58,0.45) !important; | background-color: rgba(7,48,58,0.45) !important; | ||
} | } | ||
/* content card | /* content card */ | ||
#mw-content { | #mw-content { | ||
background-color: #03171F !important; | background-color: #03171F !important; | ||
background-image: none !important; | background-image: none !important; | ||
border: 1px solid rgba(47, 184, 154, 0.20) !important; | border: 1px solid rgba(47,184,154,0.20) !important; | ||
box-shadow: 0 20px 60px rgba(0,0,0,0.55) !important; | box-shadow: 0 20px 60px rgba(0,0,0,0.55) !important; | ||
backdrop-filter: blur(3px); | backdrop-filter: blur(3px); | ||
color: var(--mq-mist) !important; | color: var(--mq-mist) !important; | ||
} | } | ||
#mw-content h1, #mw-content h2, #mw-content .firstHeading, .mw-body h1.firstHeading { | |||
#mw-content h1, #mw-content h2, | |||
#mw-content .firstHeading, .mw-body h1.firstHeading { | |||
color: var(--mq-jade) !important; | color: var(--mq-jade) !important; | ||
border-bottom-color: rgba(47,184,154,0.25) !important; | border-bottom-color: rgba(47,184,154,0.25) !important; | ||
| Line 151: | Line 100: | ||
#mw-content a { color: var(--mq-blue) !important; } | #mw-content a { color: var(--mq-blue) !important; } | ||
#mw-content a:hover { color: var(--mq-jade) !important; } | #mw-content a:hover { color: var(--mq-jade) !important; } | ||
#mw-content .previewnote, #mw-content .mw-message-box, #mw-content div[class*="preview"] { | |||
#mw-content .previewnote, #mw-content .mw-message-box, | |||
#mw-content div[class*="preview"] { | |||
background-color: rgba(31,143,176,0.10) !important; | background-color: rgba(31,143,176,0.10) !important; | ||
border: 1px solid rgba(47,184,154,0.30) !important; | border: 1px solid rgba(47,184,154,0.30) !important; | ||
| Line 160: | Line 106: | ||
border-radius: var(--mq-radius) !important; | border-radius: var(--mq-radius) !important; | ||
} | } | ||
.mw-body h1.firstHeading { display: none !important; } | |||
/* footer */ | |||
.mw-footer-container { background-color: var(--mq-abyss) !important; } | |||
.mw-footer-container a { color: var(--mq-mist) !important; } | |||
/* ===== | /* ===== (B) COMPONENT ===== */ | ||
#vgr-marinaqua-nav { | #vgr-marinaqua-nav { | ||
position: relative; | position: relative; margin: -25px -30px 0 -30px; padding: 0; | ||
color: var(--mq-mist); font-family: var(--mq-serif); line-height: 1.75; | |||
border-radius: var(--mq-radius); overflow: hidden; | |||
color: var(--mq-mist); | |||
border-radius: var(--mq-radius); | |||
background: | background: | ||
radial-gradient(120% 80% at 50% -8%, #0d5260 0%, transparent 55%), | radial-gradient(120% 80% at 50% -8%, #0d5260 0%, transparent 55%), | ||
| Line 184: | Line 127: | ||
position: absolute; inset: 0; pointer-events: none; opacity: 0.4; | position: absolute; inset: 0; pointer-events: none; opacity: 0.4; | ||
background: | background: | ||
repeating-radial-gradient(circle at 38% 14%, | repeating-radial-gradient(circle at 38% 14%, rgba(31,143,176,0.06) 0px, rgba(31,143,176,0.06) 2px, transparent 3px, transparent 64px), | ||
repeating-radial-gradient(circle at 66% 20%, rgba(47,184,154,0.05) 0px, rgba(47,184,154,0.05) 2px, transparent 3px, transparent 80px); | |||
repeating-radial-gradient(circle at 66% 20%, | |||
animation: mq-breathe 16s ease-in-out infinite; | animation: mq-breathe 16s ease-in-out infinite; | ||
} | } | ||
@keyframes mq-breathe { | @keyframes mq-breathe { 0%,100%{transform:scale(1);opacity:.32} 50%{transform:scale(1.07);opacity:.5} } | ||
} | |||
/* header */ | /* header */ | ||
#vgr-marinaqua-nav .mq-header { | #vgr-marinaqua-nav .mq-header { position: relative; z-index: 2; text-align: center; padding: 72px 28px 50px; } | ||
} | |||
#vgr-marinaqua-nav .mq-eyebrow { | #vgr-marinaqua-nav .mq-eyebrow { | ||
font-family: var(--mq-mono); font-size: 0.72em; | font-family: var(--mq-mono); font-size: 0.72em; letter-spacing: 0.45em; | ||
text-transform: uppercase; color: var(--mq-jade); opacity: 0.85; margin: 0 0 18px; padding-left: 0.45em; | |||
} | } | ||
#vgr-marinaqua-nav .mq-title { | #vgr-marinaqua-nav .mq-title { | ||
font-family: var(--mq-display); font-weight: 800; | font-family: var(--mq-display); font-weight: 800; font-size: clamp(1.8em,4.4vw,3em); | ||
line-height: 1.1; letter-spacing: -0.01em; margin: 0; | |||
background: linear-gradient(110deg, var(--mq-pale) 10%, var(--mq-jade) 55%, var(--mq-blue) 100%); | background: linear-gradient(110deg, var(--mq-pale) 10%, var(--mq-jade) 55%, var(--mq-blue) 100%); | ||
-webkit-background-clip: text; background-clip: text; | -webkit-background-clip: text; background-clip: text; color: transparent; | ||
text-shadow: 0 0 34px rgba(47,184,154,0.25); | text-shadow: 0 0 34px rgba(47,184,154,0.25); | ||
} | } | ||
#vgr-marinaqua-nav .mq-title .mq-sub { | #vgr-marinaqua-nav .mq-title .mq-sub { | ||
display: block; font-weight: 600; font-size: 0.46em; | display: block; font-weight: 600; font-size: 0.46em; letter-spacing: 0.06em; margin-top: 16px; | ||
color: var(--mq-mist); -webkit-text-fill-color: var(--mq-mist); opacity: 0.92; | |||
color: var(--mq-mist); | |||
} | } | ||
#vgr-marinaqua-nav .mq-glyph { | #vgr-marinaqua-nav .mq-glyph { | ||
display: block; margin: 28px auto 0; width: 72px; height: 1px; | display: block; margin: 28px auto 0; width: 72px; height: 1px; position: relative; | ||
background: linear-gradient(90deg, transparent, var(--mq-jade), transparent); | background: linear-gradient(90deg, transparent, var(--mq-jade), transparent); | ||
} | } | ||
#vgr-marinaqua-nav .mq-glyph::after { | #vgr-marinaqua-nav .mq-glyph::after { | ||
content: "◈"; position: absolute; top: -0. | content: "◈"; position: absolute; top: -0.8em; left: 50%; transform: translateX(-50%); | ||
color: var(--mq-jade); padding: 0 10px; font-size: 0.9em; | |||
} | } | ||
/* epigraph */ | /* epigraph */ | ||
#vgr-marinaqua-nav .mq-epigraph { | #vgr-marinaqua-nav .mq-epigraph { | ||
position: relative; z-index: 2; max-width: 580px; | position: relative; z-index: 2; max-width: 580px; margin: 0 auto 46px; padding: 0 32px; | ||
text-align: center; font-style: italic; font-size: 1.05em; color: var(--mq-mist); opacity: 0.8; | |||
} | } | ||
/* progress meter */ | /* progress meter */ | ||
#vgr-marinaqua-nav .mq-meter { | #vgr-marinaqua-nav .mq-meter { | ||
position: relative; z-index: 2; max-width: 620px; | position: relative; z-index: 2; max-width: 620px; margin: 0 auto 58px; padding: 0 32px; | ||
font-family: var(--mq-mono); font-size: 0.74em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mq-jade); | |||
font-family: var(--mq-mono); font-size: 0.74em; | |||
} | } | ||
#vgr-marinaqua-nav .mq-meter-label { display: flex; justify-content: space-between; margin-bottom: 8px; opacity: 0.85; } | |||
#vgr-marinaqua-nav .mq-meter-track { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.07); overflow: hidden; } | |||
#vgr-marinaqua-nav .mq-meter-fill { | #vgr-marinaqua-nav .mq-meter-fill { | ||
height: 100%; width: 0; | height: 100%; width: 0; border-radius: 4px; | ||
background: linear-gradient(90deg, var(--mq-blue), var(--mq-jade)); | background: linear-gradient(90deg, var(--mq-blue), var(--mq-jade)); | ||
box-shadow: 0 0 12px var(--mq-jade); | box-shadow: 0 0 12px var(--mq-jade); transition: width 1.7s cubic-bezier(0.16,1,0.3,1); | ||
} | } | ||
/* | /* list + volume groups */ | ||
#vgr-marinaqua-nav .mq-list { | #vgr-marinaqua-nav .mq-list { | ||
position: relative; z-index: 2; | position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; | ||
max-width: 880px; margin: 0 auto; padding: 0 28px 16px; | |||
max-width: 880px; margin: 0 auto; | } | ||
#vgr-marinaqua-nav .mq-volume { | |||
display: flex; align-items: center; gap: 16px; margin: 26px 4px 6px; | |||
font-family: var(--mq-mono); font-size: 0.72em; letter-spacing: 0.28em; text-transform: uppercase; color: var(--mq-jade); | |||
} | } | ||
#vgr-marinaqua-nav .mq-volume:first-child { margin-top: 4px; } | |||
#vgr-marinaqua-nav .mq-volume::before { content: "❖"; color: var(--mq-blue); font-size: 1.1em; } | |||
#vgr-marinaqua-nav .mq-volume::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(47,184,154,0.4), transparent); } | |||
#vgr-marinaqua-nav .mq-volume .mq-vol-sub { letter-spacing: 0.12em; color: var(--mq-jade-dim); margin-left: -6px; } | |||
#vgr-marinaqua-nav .mq-row { | #vgr-marinaqua-nav .mq-row { | ||
position: relative; display: flex; align-items: center; | position: relative; display: flex; align-items: center; gap: 22px; padding: 20px 26px; | ||
border-radius: var(--mq-radius); border: 1px solid rgba(47,184,154,0.18); | |||
border-radius: var(--mq-radius); | |||
background: linear-gradient(100deg, rgba(13,79,92,0.5), rgba(3,23,31,0.55)); | background: linear-gradient(100deg, rgba(13,79,92,0.5), rgba(3,23,31,0.55)); | ||
backdrop-filter: blur(2px); | backdrop-filter: blur(2px); text-decoration: none !important; color: inherit; overflow: hidden; | ||
transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.4s ease, box-shadow 0.4s ease; | |||
transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), | |||
} | } | ||
#vgr-marinaqua-nav .mq-row .mq-index { | #vgr-marinaqua-nav .mq-row .mq-index { | ||
flex: 0 0 auto; width: 58px; text-align: center; | flex: 0 0 auto; width: 58px; text-align: center; line-height: 1; | ||
font-family: var(--mq-mono); font-weight: 700; | font-family: var(--mq-mono); font-weight: 700; font-size: 1.4em; color: var(--mq-blue); | ||
border-right: 1px solid rgba(47,184,154,0.18); padding-right: 18px; | |||
border-right: 1px solid rgba(47,184,154,0.18); | |||
} | } | ||
#vgr-marinaqua-nav .mq-row .mq-body { flex: 1 1 auto; min-width: 0; } | #vgr-marinaqua-nav .mq-row .mq-body { flex: 1 1 auto; min-width: 0; } | ||
#vgr-marinaqua-nav .mq-row .mq-phase { | #vgr-marinaqua-nav .mq-row .mq-phase { | ||
font-family: var(--mq-mono); font-size: 0.64em; | font-family: var(--mq-mono); font-size: 0.64em; letter-spacing: 0.22em; | ||
text-transform: uppercase; color: var(--mq-jade-dim); display: block; margin-bottom: 6px; | |||
} | } | ||
#vgr-marinaqua-nav .mq-row .mq-name { | #vgr-marinaqua-nav .mq-row .mq-name { | ||
font-family: var(--mq-display); font-weight: 600; | font-family: var(--mq-display); font-weight: 600; font-size: 1.12em; color: var(--mq-pale); | ||
line-height: 1.3; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; | |||
line-height: 1.3; margin: 0; | |||
} | } | ||
#vgr-marinaqua-nav .mq-row .mq-status { | #vgr-marinaqua-nav .mq-row .mq-status { | ||
flex: 0 0 auto; font-family: var(--mq-mono); | flex: 0 0 auto; font-family: var(--mq-mono); font-size: 0.64em; letter-spacing: 0.16em; | ||
text-transform: uppercase; opacity: 0.72; white-space: nowrap; | |||
text-transform: uppercase; opacity: 0.72; | |||
} | } | ||
#vgr-marinaqua-nav .mq-row.is-open:hover { | #vgr-marinaqua-nav .mq-row.is-open:hover { | ||
transform: translateX(6px); border-color: var(--mq-jade); | transform: translateX(6px); border-color: var(--mq-jade); | ||
| Line 319: | Line 222: | ||
} | } | ||
#vgr-marinaqua-nav .mq-row.is-open::before { | #vgr-marinaqua-nav .mq-row.is-open::before { | ||
content: ""; position: absolute; top: 0; left: -120%; | content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; | ||
background: linear-gradient(100deg, transparent, rgba(47,184,154,0.10), transparent); transition: left 0.7s ease; | |||
background: linear-gradient(100deg, transparent, rgba(47,184,154,0.10), transparent); | |||
} | } | ||
#vgr-marinaqua-nav .mq-row.is-open:hover::before { left: 160%; } | #vgr-marinaqua-nav .mq-row.is-open:hover::before { left: 160%; } | ||
#vgr-marinaqua-nav .mq-row.is-open .mq-index | #vgr-marinaqua-nav .mq-row.is-open .mq-index, #vgr-marinaqua-nav .mq-row.is-open .mq-status { color: var(--mq-jade); } | ||
#vgr-marinaqua-nav .mq-row.is-open .mq-status { color: var(--mq-jade); } | |||
#vgr-marinaqua-nav .mq-row.is-locked { | #vgr-marinaqua-nav .mq-row.is-locked { | ||
border-color: rgba(66,106,114,0.22); | border-color: rgba(66,106,114,0.22); | ||
background: linear-gradient(100deg, rgba(7,48,58,0.3), rgba(3,23,31,0.42)); | background: linear-gradient(100deg, rgba(7,48,58,0.3), rgba(3,23,31,0.42)); cursor: default; | ||
} | } | ||
#vgr-marinaqua-nav .mq-row.is-locked .mq-index | #vgr-marinaqua-nav .mq-row.is-locked .mq-index { color: var(--mq-locked); border-right-color: rgba(66,106,114,0.18); } | ||
#vgr-marinaqua-nav .mq-row.is-locked .mq-name | #vgr-marinaqua-nav .mq-row.is-locked .mq-name { color: var(--mq-locked); filter: blur(0.4px); } | ||
#vgr-marinaqua-nav .mq-row.is-locked .mq-phase | #vgr-marinaqua-nav .mq-row.is-locked .mq-phase { color: var(--mq-jade-dim); opacity: 0.5; } | ||
#vgr-marinaqua-nav .mq-row.is-locked .mq-status { color: var(--mq-locked); } | #vgr-marinaqua-nav .mq-row.is-locked .mq-status { color: var(--mq-locked); } | ||
#vgr-marinaqua-nav .mq-row.is-locked .mq-status::after { | #vgr-marinaqua-nav .mq-row.is-locked .mq-status::after { content: " 🌊"; opacity: 0.3; filter: grayscale(0.4); } | ||
} | |||
/* coming soon | /* coming soon */ | ||
#vgr-marinaqua-nav .mq-comingsoon { | #vgr-marinaqua-nav .mq-comingsoon { | ||
position: relative; z-index: 2; margin: 44px 0 0; | position: relative; z-index: 2; margin: 44px 0 0; padding: 96px 28px 116px; text-align: center; | ||
background: | background: | ||
radial-gradient(120% 140% at 50% 120%, #05242c 0%, transparent 60%), | radial-gradient(120% 140% at 50% 120%, #05242c 0%, transparent 60%), | ||
| Line 350: | Line 245: | ||
} | } | ||
#vgr-marinaqua-nav .mq-cs-word { | #vgr-marinaqua-nav .mq-cs-word { | ||
font-family: var(--mq-display); font-weight: 800; | font-family: var(--mq-display); font-weight: 800; font-size: clamp(2em,7vw,4.6em); | ||
letter-spacing: 0.18em; text-transform: uppercase; margin: 0; color: transparent; | |||
background: linear-gradient(180deg, var(--mq-jade) 0%, var(--mq-blue) 60%, var(--mq-deep) 130%); | background: linear-gradient(180deg, var(--mq-jade) 0%, var(--mq-blue) 60%, var(--mq-deep) 130%); | ||
-webkit-background-clip: text; background-clip: text; | -webkit-background-clip: text; background-clip: text; opacity: 0.55; animation: mq-fade 7s ease-in-out infinite; | ||
} | } | ||
@keyframes mq-fade { 0%,100%{opacity:.35;letter-spacing:.18em} 50%{opacity:.7;letter-spacing:.24em} } | |||
#vgr-marinaqua-nav .mq-cs-note { | #vgr-marinaqua-nav .mq-cs-note { | ||
margin-top: 22px; font-family: var(--mq-mono); | margin-top: 22px; font-family: var(--mq-mono); font-size: 0.72em; letter-spacing: 0.3em; | ||
text-transform: uppercase; color: var(--mq-jade-dim); opacity: 0.8; | text-transform: uppercase; color: var(--mq-jade-dim); opacity: 0.8; | ||
} | } | ||
/* reveal */ | /* reveal */ | ||
#vgr-marinaqua-nav .mq-reveal { | #vgr-marinaqua-nav .mq-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; } | ||
} | |||
#vgr-marinaqua-nav .mq-reveal.is-visible { opacity: 1; transform: translateY(0); } | #vgr-marinaqua-nav .mq-reveal.is-visible { opacity: 1; transform: translateY(0); } | ||
| Line 395: | Line 271: | ||
} | } | ||
@media (prefers-reduced-motion: reduce) { | @media (prefers-reduced-motion: reduce) { | ||
#vgr-marinaqua-nav .mq-ripple, | #vgr-marinaqua-nav .mq-ripple, #vgr-marinaqua-nav .mq-cs-word { animation: none; } | ||
#vgr-marinaqua-nav .mq-reveal { opacity: 1; transform: none; transition: none; } | #vgr-marinaqua-nav .mq-reveal { opacity: 1; transform: none; transition: none; } | ||
} | } | ||
</style> | </style> | ||
<!-- | <!-- markup --> | ||
<div class="mq-ripple"></div> | <div class="mq-ripple"></div> | ||
<header class="mq-header"> | <header class="mq-header"> | ||
<p class="mq-eyebrow">Verdant Green Revelation | <p class="mq-eyebrow">Verdant Green Revelation · The Apocrypha</p> | ||
<h1 class="mq-title"> | <h1 class="mq-title"> | ||
Master Marinaqua, Not Laid to Rest | Master Marinaqua, Not Laid to Rest | ||
<span class="mq-sub">Silence of His Sect</span> | <span class="mq-sub">Silence of His Sect</span> | ||
</h1> | </h1> | ||
</header> | |||
<span class="mq-glyph"></span> | <span class="mq-glyph"></span> | ||
<blockquote class="mq-epigraph"> | <blockquote class="mq-epigraph"> | ||
He did not die so much as fall quiet | He did not die so much as fall quiet - and the quiet, in turn, became a doctrine. | ||
</blockquote> | </blockquote> | ||
<div class="mq-meter mq-reveal"> | <div class="mq-meter mq-reveal"> | ||
<div class="mq-meter-label"> | <div class="mq-meter-label"><span>Translation Progress</span><span>3 / 16</span></div> | ||
<div class="mq-meter-track"><div class="mq-meter-fill" data-fill="18.75"></div></div> | |||
<div class="mq-meter-track"> | |||
</div> | </div> | ||
<nav class="mq-list"> | <nav class="mq-list"> | ||
<!-- | <!-- Volume I · Phases 1–5 --> | ||
<div class="mq-volume mq-reveal">Volume I <span class="mq-vol-sub">· Phases 1–5</span></div> | |||
<a class="mq-row is-open mq-reveal" href="/GRA1"> | <a class="mq-row is-open mq-reveal" href="/GRA1"> | ||
<span class="mq-index">01</span> | <span class="mq-index">01</span> | ||
<span class="mq-body"><span class="mq-phase">Phase 1</span><p class="mq-name">Marinaqua's Practice</p></span> | <span class="mq-body"><span class="mq-phase">Phase 1</span><p class="mq-name">Marinaqua's Practice</p></span> | ||
<span class="mq-status"> | <span class="mq-status">▸ Read now</span> | ||
</a> | </a> | ||
<a class="mq-row is-open mq-reveal" href="/ | <a class="mq-row is-open mq-reveal" href="/GRA2"> | ||
<span class="mq-index">02</span> | <span class="mq-index">02</span> | ||
<span class="mq-body"><span class="mq-phase">Phase 2</span><p class="mq-name"> | <span class="mq-body"><span class="mq-phase">Phase 2</span><p class="mq-name">The Scripture Hall</p></span> | ||
<span class="mq-status"> | <span class="mq-status">▸ Read now</span> | ||
</a> | </a> | ||
<a class="mq-row is-open mq-reveal" href="/ | <a class="mq-row is-open mq-reveal" href="/GRA3"> | ||
<span class="mq-index">03</span> | <span class="mq-index">03</span> | ||
<span class="mq-body"><span class="mq-phase">Phase 3</span><p class="mq-name"> | <span class="mq-body"><span class="mq-phase">Phase 3</span><p class="mq-name">The Hallmod Temple</p></span> | ||
<span class="mq-status"> | <span class="mq-status">▸ Read now</span> | ||
</a> | </a> | ||
<span class="mq-row is-locked mq-reveal"><span class="mq-index">04</span><span class="mq-body"><span class="mq-phase">Phase 4</span><p class="mq-name">[Chapter Title]</p></span><span class="mq-status">Beneath the surface</span></span> | <span class="mq-row is-locked mq-reveal"><span class="mq-index">04</span><span class="mq-body"><span class="mq-phase">Phase 4</span><p class="mq-name">[Chapter Title]</p></span><span class="mq-status">Beneath the surface</span></span> | ||
<span class="mq-row is-locked mq-reveal"><span class="mq-index">05</span><span class="mq-body"><span class="mq-phase">Phase 5</span><p class="mq-name">[Chapter Title]</p></span><span class="mq-status">Beneath the surface</span></span> | <span class="mq-row is-locked mq-reveal"><span class="mq-index">05</span><span class="mq-body"><span class="mq-phase">Phase 5</span><p class="mq-name">[Chapter Title]</p></span><span class="mq-status">Beneath the surface</span></span> | ||
<!-- Volume II · Phases 6–14 --> | |||
<div class="mq-volume mq-reveal">Volume II <span class="mq-vol-sub">· Phases 6–14</span></div> | |||
<span class="mq-row is-locked mq-reveal"><span class="mq-index">06</span><span class="mq-body"><span class="mq-phase">Phase 6</span><p class="mq-name">[Chapter Title]</p></span><span class="mq-status">Beneath the surface</span></span> | <span class="mq-row is-locked mq-reveal"><span class="mq-index">06</span><span class="mq-body"><span class="mq-phase">Phase 6</span><p class="mq-name">[Chapter Title]</p></span><span class="mq-status">Beneath the surface</span></span> | ||
<span class="mq-row is-locked mq-reveal"><span class="mq-index">07</span><span class="mq-body"><span class="mq-phase">Phase 7</span><p class="mq-name">[Chapter Title]</p></span><span class="mq-status">Beneath the surface</span></span> | <span class="mq-row is-locked mq-reveal"><span class="mq-index">07</span><span class="mq-body"><span class="mq-phase">Phase 7</span><p class="mq-name">[Chapter Title]</p></span><span class="mq-status">Beneath the surface</span></span> | ||
| Line 460: | Line 331: | ||
<span class="mq-row is-locked mq-reveal"><span class="mq-index">13</span><span class="mq-body"><span class="mq-phase">Phase 13</span><p class="mq-name">[Chapter Title]</p></span><span class="mq-status">Beneath the surface</span></span> | <span class="mq-row is-locked mq-reveal"><span class="mq-index">13</span><span class="mq-body"><span class="mq-phase">Phase 13</span><p class="mq-name">[Chapter Title]</p></span><span class="mq-status">Beneath the surface</span></span> | ||
<span class="mq-row is-locked mq-reveal"><span class="mq-index">14</span><span class="mq-body"><span class="mq-phase">Phase 14</span><p class="mq-name">[Chapter Title]</p></span><span class="mq-status">Beneath the surface</span></span> | <span class="mq-row is-locked mq-reveal"><span class="mq-index">14</span><span class="mq-body"><span class="mq-phase">Phase 14</span><p class="mq-name">[Chapter Title]</p></span><span class="mq-status">Beneath the surface</span></span> | ||
<!-- Volume III · Phases 15–16 --> | |||
<div class="mq-volume mq-reveal">Volume III <span class="mq-vol-sub">· Phases 15–16</span></div> | |||
<span class="mq-row is-locked mq-reveal"><span class="mq-index">15</span><span class="mq-body"><span class="mq-phase">Phase 15</span><p class="mq-name">[Chapter Title]</p></span><span class="mq-status">Beneath the surface</span></span> | <span class="mq-row is-locked mq-reveal"><span class="mq-index">15</span><span class="mq-body"><span class="mq-phase">Phase 15</span><p class="mq-name">[Chapter Title]</p></span><span class="mq-status">Beneath the surface</span></span> | ||
<span class="mq-row is-locked mq-reveal"><span class="mq-index">16</span><span class="mq-body"><span class="mq-phase">Phase 16</span><p class="mq-name">[Chapter Title]</p></span><span class="mq-status">Beneath the surface</span></span> | <span class="mq-row is-locked mq-reveal"><span class="mq-index">16</span><span class="mq-body"><span class="mq-phase">Phase 16</span><p class="mq-name">[Chapter Title]</p></span><span class="mq-status">Beneath the surface</span></span> | ||
| Line 465: | Line 340: | ||
</nav> | </nav> | ||
<section class="mq-comingsoon"> | <section class="mq-comingsoon"> | ||
<p class="mq-cs-word">Coming Soon</p> | <p class="mq-cs-word">Coming Soon</p> | ||
<p class="mq-cs-note"> | <p class="mq-cs-note">Marina Malinti · a@huijia.fun</p> | ||
</section> | </section> | ||
<script> | <script> | ||
(function () { | (function(){ | ||
"use strict"; | "use strict"; | ||
var root = document.getElementById("vgr-marinaqua-nav"); | var root = document.getElementById("vgr-marinaqua-nav"); | ||
if (!root) return; | if(!root) return; | ||
function run() { | function run(){ | ||
var reveals = root.querySelectorAll(".mq-reveal"); | var reveals = root.querySelectorAll(".mq-reveal"); | ||
if ("IntersectionObserver" in window) { | if("IntersectionObserver" in window){ | ||
var io = new IntersectionObserver(function ( | var io = new IntersectionObserver(function(es){ | ||
es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add("is-visible"); io.unobserve(e.target); } }); | |||
}, {threshold:0.08}); | |||
reveals.forEach(function(el){ io.observe(el); }); | |||
}, { threshold: 0.08 }); | |||
reveals.forEach(function (el) { io.observe(el); }); | |||
} else { | } else { | ||
reveals.forEach(function (el) { el.classList.add("is-visible"); }); | reveals.forEach(function(el){ el.classList.add("is-visible"); }); | ||
} | } | ||
var fill = root.querySelector(".mq-meter-fill"); | var fill = root.querySelector(".mq-meter-fill"); | ||
if (fill) { | if(fill){ setTimeout(function(){ fill.style.width = (fill.getAttribute("data-fill")||"0") + "%"; }, 400); } | ||
} | } | ||
if (document.readyState === "loading") { | if(document.readyState === "loading"){ document.addEventListener("DOMContentLoaded", run); } | ||
else { run(); } | |||
})(); | })(); | ||
</script> | </script> | ||
</div | </div> | ||
</html> | </html> | ||
[[Category:Portfolio Area-Apocrypha]] | |||
[[Category:Apocrypha | |||
Latest revision as of 09:29, 5 July 2026
