GRA: Difference between revisions

From HUIJIA FUN
m Edit
m Category
 
(7 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     -->
<!--  Central Chapter-Navigation Hub · EN HUIJIA FUN             -->
<!--  Chapter-Navigation Hub · EN HUIJIA FUN                      -->
<!--                                                              -->
<!--  (A) Timeless skin overrides (B) #vgr-marinaqua-nav         -->
<!--  LAYER 1 — MEDIAWIKI MARKUP (categories)                     -->
<!-- ============================================================ -->
<!--  LAYER 2 — SCOPED HTML / CSS / JS                            -->
<!--    · (A) full-page skin overrides — top bar, sidebar,        -->
<!--          right rail, content card (whole-page water env)      -->
<!--    · (B) #vgr-marinaqua-nav component (one-row-one-chapter)  -->
<!--  {{Theme-HJ}} omitted: this page ships its own water skin.    -->
<!-- ============================================================= -->
 
 
<!-- ====================================================== -->
<!--  LAYER 2 : SCOPED IMMERSIVE COMPONENT + SKIN OVERRIDE  -->
<!-- ====================================================== -->


<html>
<html>
<div id="vgr-marinaqua-nav">
<div id="vgr-marinaqua-nav">


<!-- ---------- STYLES ---------- -->
<style>
<style>
/* =====================================================
* VGR · MARINAQUA CENTRAL HUB  (v3.0 EN)
* Theme: Silence / Still Water / Dormant Sect
* Palette: water-blue  ⇄  turquoise-verdant-green
* (A) full-page Timeless overrides (chrome + content)
* (B) #vgr-marinaqua-nav component (one row / chapter)
* ===================================================== */
@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:   #03171f;
     --mq-abyss:#03171f; --mq-deep:#07303a; --mq-tide:#0d4f5c;
    --mq-deep:     #07303a;
     --mq-blue:#98C1C0; --mq-jade:#2fb89a; --mq-jade-dim:#1c7d6e;
    --mq-tide:     #0d4f5c;
     --mq-mist:#98C1C0; --mq-pale:#e7f6f3; --mq-locked:#426a72;
     --mq-blue:     #98C1C0;
     --mq-radius:14px;
    --mq-jade:     #2fb89a;
     --mq-serif:'Lora',serif; --mq-display:'Montserrat',sans-serif; --mq-mono:'JetBrains Mono',monospace;
    --mq-jade-dim: #1c7d6e;
     --mq-mist:     #98C1C0;
    --mq-pale:     #e7f6f3;
    --mq-locked:   #426a72;
     --mq-radius:   14px;
     --mq-serif:   'Lora', serif;
    --mq-display: 'Montserrat', sans-serif;
    --mq-mono:     'JetBrains Mono', monospace;
}
}


/* =====================================================
/* ===== (A) SKIN OVERRIDES ===== */
* (A) SKIN OVERRIDES — full Timeless chrome → water
* ===================================================== */


/* page canvas */
/* 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 (header) ---- */
/* 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; }
        margin-top: 48px !important;
    }
}
}
/* site title "HUIJIA FUN" */
 
.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;
}
}


/* top-bar search pill */
/* sidebar font */
 
#mw-related-navigation span, #mw-site-navigation span, .sidebar-inner li a:before { color: var(--mq-mist) !important; }
/* top-bar icons (bell / inbox / upload / avatar) */
#mw-header .mw-ui-icon::before,
#personal .mw-ui-icon::before { filter: invert(0.9) hue-rotate(120deg) saturate(0.6) !important; }


/* ---- FONT COLOR ---- */
/* left sidebar */
#mw-related-navigation span, #mw-site-navigation span, .sidebar-inner li a:before{ color: var(--mq-mist) !important; }
#mw-site-navigation, #mw-related-navigation, .sidebar-chunk, .mw-portlet, #site-navigation, #site-tools {
 
/* ---- LEFT SIDEBAR ---- */
#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;
}
}
/* sidebar section labels (Navigation / Archive Area / …) */
#mw-panel a, .sidebar-chunk a, #mw-site-navigation a, #mw-related-navigation a, .mw-portlet a {
.sidebar-chunk h2, #mw-panel h3, .portal h3,
     color: var(--mq-mist) !important;
.vector-menu-heading, .mw-portlet h3 {
     color: var(--mq-jade) !important;
    border-bottom: 1px solid rgba(47,184,154,0.22) !important;
}
}
/* sidebar links */
#mw-panel a:hover, .sidebar-chunk a:hover, .mw-portlet a:hover { color: var(--mq-jade) !important; }
#mw-panel a, .sidebar-chunk a, #mw-site-navigation a,
#mw-panel .mw-ui-icon::before, .sidebar-chunk .mw-ui-icon::before {
#mw-related-navigation a, .mw-portlet a {
     filter: invert(0.85) sepia(1) hue-rotate(120deg) saturate(2.2) !important;
     color: var(--mq-mist) !important;
}
}
#mw-panel a:hover, .sidebar-chunk a:hover, .mw-portlet a:hover {
.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;
/* sidebar icons → aqua */
#mw-panel .mw-ui-icon::before,
.sidebar-chunk .mw-ui-icon::before {
    filter: invert(0.85) sepia(1) hue-rotate(120deg) saturate(2.2) !important;
}
}


/* ---- RIGHT RAIL (Page tools / Categories) ---- */
/* 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 → glass over water */
/* 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 {
/* skin content headings */
#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"] {
/* preview warning box → muted glass */
#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 ===== */
* (B) COMPONENT — #vgr-marinaqua-nav
* ===================================================== */


#vgr-marinaqua-nav {
#vgr-marinaqua-nav {
     position: relative;
     position: relative; margin: -25px -30px 0 -30px; padding: 0;
    margin: -25px -30px 0 -30px;
     color: var(--mq-mist); font-family: var(--mq-serif); line-height: 1.75;
    padding: 0;
     border-radius: var(--mq-radius); overflow: hidden;
     color: var(--mq-mist);
    font-family: var(--mq-serif);
    line-height: 1.75;
     border-radius: var(--mq-radius);
    overflow: hidden;
     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),
            rgba(31,143,176,0.06) 0px, rgba(31,143,176,0.06) 2px,
         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);
            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);
     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} }
    0%,100% { transform: scale(1);   opacity: 0.32; }
    50%     { transform: scale(1.07); opacity: 0.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; }
    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;
    letter-spacing: 0.45em; text-transform: uppercase;
    text-transform: uppercase; color: var(--mq-jade); opacity: 0.85; margin: 0 0 18px; padding-left: 0.45em;
    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);
    font-size: clamp(1.8em, 4.4vw, 3em); line-height: 1.1;
    line-height: 1.1; letter-spacing: -0.01em; margin: 0;
    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;
    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;
    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);
    -webkit-text-fill-color: var(--mq-mist);
    opacity: 0.92;
}
}
#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);
    position: relative;
}
}
#vgr-marinaqua-nav .mq-glyph::after {
#vgr-marinaqua-nav .mq-glyph::after {
     content: "◈"; position: absolute; top: -0.72em; left: 50%;
     content: "◈"; position: absolute; top: -0.8em; left: 50%; transform: translateX(-50%);
    transform: translateX(-50%); color: var(--mq-jade);
    color: var(--mq-jade); padding: 0 10px; font-size: 0.9em;
    background: var(--mq-abyss); 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;
    margin: 0 auto 46px; padding: 0 32px; text-align: center;
    text-align: center; font-style: italic; font-size: 1.05em; color: var(--mq-mist); opacity: 0.8;
    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;
    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;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--mq-jade);
}
#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-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);
    border-radius: 4px;
    transition: width 1.7s cubic-bezier(0.16,1,0.3,1);
}
}


/* =========================================
/* list + volume groups */
* CHAPTER LIST — ONE ROW PER CHAPTER
* ========================================= */
#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;
    display: flex; flex-direction: column; gap: 12px;
     max-width: 880px; margin: 0 auto; padding: 0 28px 16px;
     max-width: 880px; margin: 0 auto;
}
    padding: 0 28px 16px;
#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;
    gap: 22px; padding: 20px 26px;
     border-radius: var(--mq-radius); border: 1px solid rgba(47,184,154,0.18);
     border-radius: var(--mq-radius);
    border: 1px solid rgba(47,184,154,0.18);
     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;
    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),
                border-color 0.4s ease, box-shadow 0.4s ease;
}
}
/* leading phase index */
#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);
    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);
    padding-right: 18px; line-height: 1;
}
}
#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;
    letter-spacing: 0.22em; text-transform: uppercase;
    text-transform: uppercase; color: var(--mq-jade-dim); display: block; margin-bottom: 6px;
    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);
    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;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
}
#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;
    font-size: 0.64em; letter-spacing: 0.16em;
     text-transform: uppercase; opacity: 0.72; white-space: nowrap;
     text-transform: uppercase; opacity: 0.72;
    white-space: nowrap;
}
}
/* available rows */
#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%;
    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);
    transition: left 0.7s ease;
}
}
#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 { color: var(--mq-jade); }
#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); }
/* locked rows */
#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;
    cursor: default;
}
}
#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-index { color: var(--mq-locked); border-right-color: rgba(66,106,114,0.18); }
#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-name { color: var(--mq-locked); filter: blur(0.4px); }
#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-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); }
    content: " 🌊"; opacity: 0.3; filter: grayscale(0.4);
}


/* coming soon abyss */
/* 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;
    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);
    font-size: clamp(2em, 7vw, 4.6em); letter-spacing: 0.18em;
    letter-spacing: 0.18em; text-transform: uppercase; margin: 0; color: transparent;
    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;
    opacity: 0.55; animation: mq-fade 7s ease-in-out infinite;
}
@keyframes mq-fade {
    0%,100% { opacity: 0.35; letter-spacing: 0.18em; }
    50%    { opacity: 0.7;  letter-spacing: 0.24em; }
}
}
@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;
    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;
}
}
/* footer */
.mw-footer-container { background-color: var(--mq-abyss) !important;  }
.mw-footer-container a{ color: var(--mq-mist) !important; }
/* #vgr-marinaqua-nav .mq-foot {
    position: relative; z-index: 2; text-align: center;
    padding: 0 28px 40px; font-family: var(--mq-mono);
    font-size: 0.64em; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--mq-jade-dim); opacity: 0.6;
} */


/* 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; }
    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 396: 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-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 ---------- -->
<!-- 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 &middot; Side Story</p>
     <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>
</header>
<blockquote class="mq-epigraph">
<blockquote class="mq-epigraph">
     He did not die so much as fall quiet &mdash; and the quiet, in turn, became a doctrine.
     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>
        <span>Translation Progress</span>
     <div class="mq-meter-track"><div class="mq-meter-fill" data-fill="18.75"></div></div>
        <span>3 / 16</span>
    </div>
     <div class="mq-meter-track">
        <div class="mq-meter-fill" data-fill="18.75"></div>
    </div>
</div>
</div>


<!-- ===== CHAPTER LIST (one row per chapter) ===== -->
<nav class="mq-list">
<nav class="mq-list">


     <!-- Available 1–3 -->
     <!-- 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">&#9656; Read now</span>
         <span class="mq-status">▸ Read now</span>
     </a>
     </a>
     <a class="mq-row is-open mq-reveal" href="/wiki/Master_Marinaqua/Chapter_2">
     <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">[Chapter Title]</p></span>
         <span class="mq-body"><span class="mq-phase">Phase 2</span><p class="mq-name">The Scripture Hall</p></span>
         <span class="mq-status">&#9656; Read now</span>
         <span class="mq-status">▸ Read now</span>
     </a>
     </a>
     <a class="mq-row is-open mq-reveal" href="/wiki/Master_Marinaqua/Chapter_3">
     <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">[Chapter Title]</p></span>
         <span class="mq-body"><span class="mq-phase">Phase 3</span><p class="mq-name">The Hallmod Temple</p></span>
         <span class="mq-status">&#9656; Read now</span>
         <span class="mq-status">▸ Read now</span>
     </a>
     </a>
    <!-- Locked 4–16 -->
     <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 461: 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 466: Line 340:
</nav>
</nav>


<!-- ===== COMING SOON ABYSS ===== -->
<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">Verdant Green Revelation &middot; EN HUIJIA FUN &middot; en.huijia.fun</p>
     <p class="mq-cs-note">Marina Malinti · a@huijia.fun</p>
</section>
</section>


<!-- ---------- SCRIPT ---------- -->
<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 (entries) {
             var io = new IntersectionObserver(function(es){
                 entries.forEach(function (e) {
                 es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add("is-visible"); io.unobserve(e.target); } });
                    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); }
            setTimeout(function () {
                fill.style.width = (fill.getAttribute("data-fill") || "0") + "%";
            }, 400);
        }
     }
     }
     if (document.readyState === "loading") {
     if(document.readyState === "loading"){ document.addEventListener("DOMContentLoaded", run); }
        document.addEventListener("DOMContentLoaded", run);
     else { run(); }
     } else { run(); }
})();
})();
</script>
</script>


</div><!-- /#vgr-marinaqua-nav -->
</div>
</html>
</html>
 
[[Category:Portfolio Area-Apocrypha]]
 
<!-- ========================== -->
<!--  LAYER 1 : CATEGORIES      -->
<!-- ========================== -->
 
[[Category:Mythos]]
[[Category:Apocrypha]]
[[Category:Navigation Pages]]

Latest revision as of 09:29, 5 July 2026


Verdant Green Revelation · The Apocrypha

Master Marinaqua, Not Laid to Rest Silence of His Sect

He did not die so much as fall quiet - and the quiet, in turn, became a doctrine.

Translation Progress3 / 16

Coming Soon

Marina Malinti · [email protected]