/* ========================================================== FMRG Theme: EDN — Ego-ist Diagnostic Network 赛博诊疗站 "System Integrity First." Usage: add class="theme-edn" to .page DARK CYBERPUNK — neon cyan on deep blue-black, HUD grid ========================================================== */ .theme-edn{ /* — Color System (dark: neon cyan on deep blue-black) — */ --ink: #d8eef0; --muted: #5a8090; --line: #1a3848; --thin: rgba(0,255,240,.08); --bg: #080e14; --accent: #00e5d0; /* neon cyan-teal */ --accent-light: rgba(0,229,208,.06); --accent-mid: rgba(0,229,208,.22); /* — Secondary accent (warm highlight for contrast) — */ --accent2: #f02e65; /* hot pink for chips / alert tags */ --accent2-light: rgba(240,46,101,.06); --accent2-mid: rgba(240,46,101,.20); /* — Borders — */ --b1: 1px solid var(--line); --b0: 1px solid var(--thin); /* — Letterhead — */ --lh-h: 120px; --lh-logo-h: 68px; --lh-pad-x: 22px; --lh-gap: 14px; /* — Background Texture — */ --grid-opacity-1: .07; /* small grid */ --grid-opacity-2: .05; /* large grid */ --scan-opacity: .035; /* scan lines */ --hud-accent-opacity:.08; /* — Watermark — */ --wm-opacity: .06; --wm-color: var(--accent); --wm-rotate: 0deg; --wm-letterspace: .35em; /* — Stamp — */ --stamp-size: 128px; --stamp-ink: var(--accent); --stamp-opacity: .25; --stamp-rotate: -4deg; --stamp-x: 0px; --stamp-y: 0px; /* — Footer Banner — */ --fb-bg: rgba(0,229,208,.04); --fb-border: rgba(0,229,208,.18); color: var(--ink); } /* ========================================================== PAGE — dark frame with neon glow ========================================================== */ .page.theme-edn{ box-shadow: 0 0 1px rgba(0,229,208,.20), 0 0 30px rgba(0,229,208,.06), 0 8px 40px rgba(0,0,0,.50); border-color: rgba(0,229,208,.12); } /* ========================================================== COMPONENT BACKGROUNDS — dark glass panels ========================================================== */ .page.theme-edn .header, .page.theme-edn .subject, .page.theme-edn .summary, .page.theme-edn .sections, .page.theme-edn .items, .page.theme-edn .footer{ background: rgba(0,229,208,.02); } .page.theme-edn .summary .box, .page.theme-edn .tl-item, .page.theme-edn .sign-box{ background: rgba(0,229,208,.03); } .page.theme-edn .kv-key{ background: rgba(0,229,208,.03); } .page.theme-edn .avatar-slot{ background: rgba(0,229,208,.02); } .page.theme-edn .avatar-img{ border-color: rgba(0,229,208,.18); background: rgba(0,229,208,.03); } .page.theme-edn .items-table th{ background: rgba(0,229,208,.05); font-family: var(--mono); letter-spacing: .04em; color: var(--accent); } /* ========================================================== TITLE PAGE COVER - dark text box background ========================================================== */ .page.theme-edn.title-page .cover-card, .page.theme-edn.cover-page .cover-card{ background: rgba(0,12,18,.82); border-color: rgba(0,229,208,.35); box-shadow: inset 0 0 0 1px rgba(0,229,208,.14); } .page.theme-edn.title-page .cover-grid .k, .page.theme-edn.cover-page .cover-grid .k{ background: rgba(0,229,208,.07); } .page.theme-edn.title-page .cover-grid .v, .page.theme-edn.cover-page .cover-grid .v{ background: rgba(0,229,208,.02); } /* ========================================================== LETTERHEAD — HUD gradient + neon glow separator ========================================================== */ .page.theme-edn .letterhead{ background: linear-gradient(to bottom, rgba(0,229,208,.05) 0%, rgba(0,229,208,.015) 50%, transparent 100% ); border-bottom: none; box-shadow: inset 0 -2px 0 0 rgba(0,229,208,.40), inset 0 -4px 6px -2px rgba(0,229,208,.10); } /* ========================================================== HUD BACKGROUND — Grid + Scan Lines (brighter for dark bg) ========================================================== */ .page.theme-edn::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: /* L1 — small grid (horizontal) */ repeating-linear-gradient( to bottom, rgba(0,229,208,var(--grid-opacity-1)) 0px, rgba(0,229,208,var(--grid-opacity-1)) 1px, transparent 1px, transparent 24px ), /* L2 — small grid (vertical) */ repeating-linear-gradient( to right, rgba(0,229,208,var(--grid-opacity-1)) 0px, rgba(0,229,208,var(--grid-opacity-1)) 1px, transparent 1px, transparent 24px ), /* L3 — large grid (horizontal) */ repeating-linear-gradient( to bottom, rgba(0,229,208,var(--grid-opacity-2)) 0px, rgba(0,229,208,var(--grid-opacity-2)) 1px, transparent 1px, transparent 96px ), /* L4 — large grid (vertical) */ repeating-linear-gradient( to right, rgba(0,229,208,var(--grid-opacity-2)) 0px, rgba(0,229,208,var(--grid-opacity-2)) 1px, transparent 1px, transparent 96px ), /* L5 — scan lines */ repeating-linear-gradient( to bottom, rgba(0,229,208,var(--scan-opacity)) 0px, rgba(0,229,208,var(--scan-opacity)) 1px, transparent 1px, transparent 4px ), /* L6 — vignette (dark edges) */ radial-gradient( ellipse at 50% 50%, transparent 40%, rgba(0,0,0,.35) 100% ); } /* ========================================================== CORNER DATA BLOCK — bottom-right diagnostic badge (neon) ========================================================== */ .page.theme-edn::after{ content:""; position:absolute; z-index:0; pointer-events:none; right: 12px; bottom: 12px; width: 60px; height: 36px; background: repeating-linear-gradient( to right, rgba(0,229,208,var(--hud-accent-opacity)) 0px, rgba(0,229,208,var(--hud-accent-opacity)) 3px, transparent 3px, transparent 5px ); border: 1px solid rgba(0,229,208,.12); border-radius: 2px; } /* ========================================================== WATERMARK — neon glow mono, no rotation ========================================================== */ .page.theme-edn .watermark .wm-text{ font-family: var(--mono); font-size: 64px; letter-spacing: var(--wm-letterspace); transform: rotate(var(--wm-rotate)); text-shadow: 0 0 30px rgba(0,229,208,.15); } /* ========================================================== CHIP — neon system tag ========================================================== */ .page.theme-edn .chip{ border-color: var(--accent-mid); color: var(--accent); background: var(--accent-light); border-radius: 3px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; } /* ========================================================== SECTION TITLE — neon numbered ========================================================== */ .page.theme-edn .section-title .small{ font-family: var(--mono); color: var(--accent); opacity: .8; } /* ========================================================== STAMP — neon status seal ========================================================== */ .page.theme-edn .stamp{ transform: rotate(var(--stamp-rotate)); border-width: 1.5px; border-color: rgba(0,229,208,.35); color: var(--accent); font-family: var(--mono); box-shadow: 0 0 12px rgba(0,229,208,.08); } .page.theme-edn .stamp span{ font-size: 10px; letter-spacing: .16em; } /* ========================================================== FOOTER BANNER — neon HUD panel ========================================================== */ .page.theme-edn .footer-banner{ background: var(--fb-bg); border-color: var(--fb-border); } .page.theme-edn .fb-badge{ font-family: var(--mono); background: rgba(0,229,208,.06); border-color: var(--accent-mid); color: var(--accent); } .page.theme-edn .fb-org{ color: var(--ink); opacity: .75; } .page.theme-edn .fb-logo{ filter: brightness(1.6); } /* ========================================================== HEADER META — mono diagnostic-log feel ========================================================== */ .page.theme-edn .meta-k{ font-family: var(--mono); } .page.theme-edn .lh-meta .lh-tag{ border-color: var(--accent-mid); color: var(--accent); box-shadow: 0 0 6px rgba(0,229,208,.10); }