/* --- MANIFEST / CARBON COPY SYSTEM & FONTS --- */ /* Supports light + dark via [data-theme="light"] / [data-theme="dark"] on . Falls back to system preference (prefers-color-scheme) when no data-theme is set. */ @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap'); :root { /* Default palette = dark (used until JS applies a theme, and as no-JS fallback) */ --bg-main: #15130d; --bg-surface: #1d1a12; --bg-surface-elevated: #232016; --border-main: rgba(245, 239, 224, 0.08); --border-active: rgba(245, 239, 224, 0.24); --accent-stamp: #6fa8ff; --accent-hazard: #ffa24f; --accent-ok: #4fdb96; --accent-alert: #ff7a6c; --text-pure: #f5efdf; --text-main: #cdc4ac; --text-muted: #746c56; --text-dark: #15130d; --ink-rgb: 245, 239, 224; /* channel values for grid/scanline textures */ --stamp-bg-rgb: 21, 19, 13; /* translucent backing behind the VERIFIED stamp */ --shadow-rgb: 0, 0, 0; /* drop-shadow color channels */ --stamp-blend: screen; --avatar-filter: grayscale(0.35) contrast(1.05) brightness(0.95); --terminal-bg: #100e09; --font-display: 'Archivo Black', sans-serif; --font-sans: 'IBM Plex Sans', sans-serif; --font-mono: 'IBM Plex Mono', monospace; --radius-lg: 2px; --radius-md: 2px; --radius-sm: 1px; --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition-theme: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } /* Explicit dark theme (same values as :root default, kept for clarity/override safety) */ [data-theme="dark"] { --bg-main: #15130d; --bg-surface: #1d1a12; --bg-surface-elevated: #232016; --border-main: rgba(245, 239, 224, 0.08); --border-active: rgba(245, 239, 224, 0.24); --accent-stamp: #6fa8ff; --accent-hazard: #ffa24f; --accent-ok: #4fdb96; --accent-alert: #ff7a6c; --text-pure: #f5efdf; --text-main: #cdc4ac; --text-muted: #746c56; --text-dark: #15130d; --ink-rgb: 245, 239, 224; --stamp-bg-rgb: 21, 19, 13; --shadow-rgb: 0, 0, 0; --stamp-blend: screen; --avatar-filter: grayscale(0.35) contrast(1.05) brightness(0.95); --terminal-bg: #100e09; } /* Light theme — "paper manifest" */ [data-theme="light"] { --bg-main: #f2ece0; --bg-surface: #e9e1cd; --bg-surface-elevated: #fffbf2; --border-main: rgba(26, 22, 15, 0.14); --border-active: rgba(26, 22, 15, 0.4); --accent-stamp: #1f4fa3; --accent-hazard: #d9660b; --accent-ok: #2f6d4f; --accent-alert: #b3261e; --text-pure: #17140f; --text-main: #3a352b; --text-muted: #8a8168; --text-dark: #fffbf2; --ink-rgb: 26, 22, 15; --stamp-bg-rgb: 255, 251, 242; --shadow-rgb: 26, 22, 15; --stamp-blend: multiply; --avatar-filter: grayscale(0.35) contrast(1.05) sepia(0.08); --terminal-bg: #fbf5e6; } /* No-JS / no explicit choice yet: honor system preference */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg-main: #f2ece0; --bg-surface: #e9e1cd; --bg-surface-elevated: #fffbf2; --border-main: rgba(26, 22, 15, 0.14); --border-active: rgba(26, 22, 15, 0.4); --accent-stamp: #1f4fa3; --accent-hazard: #d9660b; --accent-ok: #2f6d4f; --accent-alert: #b3261e; --text-pure: #17140f; --text-main: #3a352b; --text-muted: #8a8168; --text-dark: #fffbf2; --ink-rgb: 26, 22, 15; --stamp-bg-rgb: 255, 251, 242; --shadow-rgb: 26, 22, 15; --stamp-blend: multiply; --avatar-filter: grayscale(0.35) contrast(1.05) sepia(0.08); --terminal-bg: #fbf5e6; } } /* --- BASE ARCHITECTURE --- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { transition: var(--transition-theme); } body { background-color: var(--bg-main); background-image: repeating-linear-gradient(rgba(var(--ink-rgb), 0.035) 0px, rgba(var(--ink-rgb), 0.035) 1px, transparent 1px, transparent 32px), radial-gradient(rgba(var(--ink-rgb), 0.05) 0.6px, transparent 0.6px); background-size: auto, 6px 6px; background-attachment: fixed; color: var(--text-main); font-family: var(--font-sans); min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 140px 24px 60px 24px; -webkit-font-smoothing: antialiased; position: relative; transition: var(--transition-theme); } /* Perforated tear-strip along the very top of the page */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 9px; background-color: var(--text-pure); background-image: radial-gradient(circle, var(--bg-main) 3px, transparent 3.2px); background-size: 18px 9px; background-position: 9px center; z-index: 1001; transition: var(--transition-theme); } .container { width: 100%; max-width: 780px; display: flex; flex-direction: column; gap: 16px; opacity: 0; animation: manifest-stamp-in 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards; } @keyframes manifest-stamp-in { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: scale(1); } } /* --- LETTERHEAD NAVBAR --- */ .navbar { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); width: calc(100% - 40px); max-width: 1100px; height: 54px; background: var(--bg-surface-elevated); border: 1px solid var(--border-active); border-radius: var(--radius-md); display: flex; justify-content: space-between; align-items: center; padding: 0 16px; z-index: 1000; box-shadow: 3px 3px 0 rgba(var(--shadow-rgb), 0.35); transition: var(--transition-theme); } .nav-logo { font-family: var(--font-display); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-pure); text-decoration: none; } .nav-logo span { color: var(--accent-stamp); } .nav-links { display: flex; align-items: center; gap: 8px; } .nav-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; color: var(--text-muted); border: 1px dashed var(--border-active); border-radius: var(--radius-sm); transition: var(--transition-fast); } .nav-btn.dev-btn:hover { color: var(--text-pure); border-style: solid; border-color: var(--border-active); background: var(--bg-surface); } .nav-btn.discord-btn { background: transparent; color: var(--accent-stamp); border: 1px solid var(--accent-stamp); } .nav-btn.discord-btn:hover { background: var(--accent-stamp); color: var(--text-dark); } .nav-avatar { width: 14px; height: 14px; border-radius: 50%; filter: grayscale(1) contrast(1.1); } .nav-btn:hover .nav-avatar { filter: grayscale(0); } /* Theme toggle (gear) button */ .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; font-size: 0.85rem; color: var(--text-muted); background: transparent; border: 1px dashed var(--border-active); border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-fast); } .theme-toggle-btn:hover { color: var(--text-pure); border-style: solid; border-color: var(--border-active); background: var(--bg-surface); transform: rotate(45deg); } /* --- HEADER / TITLE BLOCK --- */ .hub-header { text-align: center; padding: 15px 0; } .avatar-mainframe { display: inline-block; margin-bottom: 12px; width: 76px; height: 76px; position: relative; } .hub-avatar { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); border: 2px solid var(--text-pure); filter: var(--avatar-filter); transition: var(--transition-fast); } .avatar-mainframe:hover .hub-avatar { filter: grayscale(0); } /* Ink stamp badge, overlapping the avatar corner */ .avatar-mainframe::after { content: 'VERIFIED'; position: absolute; bottom: -8px; right: -22px; font-family: var(--font-mono); font-size: 0.5rem; font-weight: 700; letter-spacing: 1.5px; color: var(--accent-alert); border: 2px solid var(--accent-alert); padding: 2px 5px; border-radius: var(--radius-sm); transform: rotate(-9deg); background: rgba(var(--stamp-bg-rgb), 0.7); mix-blend-mode: var(--stamp-blend); pointer-events: none; } .hub-title { font-family: var(--font-display); font-size: 2rem; font-weight: 400; text-transform: uppercase; color: var(--text-pure); letter-spacing: 0.5px; } .hub-tagline { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1.5px; margin-top: 6px; } .hub-tagline::before, .hub-tagline::after { content: '—'; margin: 0 8px; opacity: 0.5; } /* --- FORM PANEL SYSTEM --- */ .panel { position: relative; background: var(--bg-surface-elevated); border: 1px solid var(--border-main); border-radius: var(--radius-lg); padding: 20px; box-shadow: 3px 3px 0 rgba(var(--shadow-rgb), 0.3); transition: var(--transition-fast), var(--transition-theme); } .panel:hover { border-color: var(--border-active); box-shadow: 4px 4px 0 rgba(var(--shadow-rgb), 0.4); transform: translate(-1px, -1px); } /* Registration corner marks, like a technical drawing */ .panel::before, .panel::after { content: ''; position: absolute; width: 9px; height: 9px; pointer-events: none; } .panel::before { top: -1px; left: -1px; border-top: 2px solid var(--accent-stamp); border-left: 2px solid var(--accent-stamp); } .panel::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--accent-hazard); border-right: 2px solid var(--accent-hazard); } .panel-title { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-pure); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px dashed var(--border-main); display: flex; align-items: center; justify-content: space-between; } .panel-title span:first-child { display: flex; align-items: center; gap: 6px; } .panel-title i { color: var(--text-muted); } .panel:hover .panel-title i { color: var(--text-pure); } .panel-title .badge { font-size: 0.6rem; color: var(--text-muted); background: var(--bg-main); padding: 2px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border-main); } /* --- LOG TERMINAL --- */ .cron-terminal { background: var(--terminal-bg); background-image: repeating-linear-gradient(rgba(var(--ink-rgb), 0.03) 0px, rgba(var(--ink-rgb), 0.03) 1px, transparent 1px, transparent 3px); border: 1px dashed var(--border-main); border-radius: var(--radius-md); padding: 14px; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.6; color: var(--text-main); transition: var(--transition-theme); } .live-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-ok); background: transparent; border: 1px solid var(--accent-ok); padding: 1px 5px; border-radius: var(--radius-sm); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; } .live-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-ok); animation: pulse-dot 1.6s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* --- ROSTER / IDENTITY NODES --- */ .holo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .profile-node { background: var(--bg-surface); border: 1px dashed var(--border-main); border-radius: var(--radius-md); padding: 28px 12px 20px 12px; text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; transition: var(--transition-fast), var(--transition-theme); } .node-overlay-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .profile-node i.avatar-fallback { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 10px; transition: var(--transition-fast); } .profile-node h4 { font-family: var(--font-sans); font-weight: 600; font-size: 0.82rem; color: var(--text-main); } .profile-node span { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-muted); } .profile-node:hover { background: var(--bg-surface-elevated); border-style: solid; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(var(--shadow-rgb), 0.35); } .profile-node:nth-child(1):hover { border-color: var(--accent-stamp); } .profile-node:nth-child(1):hover i.avatar-fallback { color: var(--accent-stamp); } .profile-node:nth-child(2):hover { border-color: var(--accent-alert); } .profile-node:nth-child(2):hover i.avatar-fallback { color: var(--accent-alert); } .profile-node:nth-child(3):hover { border-color: var(--accent-ok); } .profile-node:nth-child(3):hover i.avatar-fallback { color: var(--accent-ok); } /* --- COMPACT STATUS CONTROL --- */ .status-config-box { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 4px; background: var(--bg-main); border: 1px solid var(--border-main); padding: 2px 6px; border-radius: var(--radius-sm); z-index: 5; } .status-indicator { width: 6px; height: 6px; border-radius: 50%; display: inline-block; transition: var(--transition-fast); } .status-indicator.online { background-color: var(--accent-ok); box-shadow: 0 0 4px var(--accent-ok); } .status-indicator.idle { background-color: var(--accent-hazard); box-shadow: 0 0 4px var(--accent-hazard); } .status-indicator.offline { background-color: var(--text-muted); box-shadow: none; } .status-selector { background: transparent; border: none; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.55rem; font-weight: 700; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; } .status-selector option { background: var(--bg-surface-elevated); color: var(--text-main); } .status-config-box:hover .status-selector { color: var(--text-pure); } /* --- REPOSITORY LOG LINE --- */ .oss-container { display: flex; align-items: center; justify-content: space-between; background: var(--bg-surface); border: 1px dashed var(--border-main); border-radius: var(--radius-md); padding: 12px 16px; text-decoration: none; color: var(--text-main); transition: var(--transition-fast), var(--transition-theme); } .oss-container:hover { border-style: solid; border-color: var(--accent-stamp); background: var(--bg-surface-elevated); } .oss-meta { display: flex; align-items: center; gap: 12px; } .oss-meta i.fa-github { font-size: 1.4rem; color: var(--text-muted); transition: var(--transition-fast); } .oss-container:hover i.fa-github { color: var(--text-pure); } .oss-details h4 { font-family: var(--font-sans); font-weight: 600; font-size: 0.85rem; color: var(--text-pure); } .oss-details p { font-size: 0.7rem; color: var(--text-muted); } .oss-stats { display: flex; gap: 8px; font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-muted); } /* --- SPONSORED / AD SLOT --- */ .adsbygoogle { display: block; min-height: 90px; background: var(--bg-main); border: 1px dashed var(--border-main); border-radius: var(--radius-sm); position: relative; transition: var(--transition-theme); } .adsbygoogle:empty::before { content: 'AD_SLOT // AWAITING PAYLOAD'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); pointer-events: none; white-space: nowrap; } /* --- REQUISITION / ACTION LINK --- */ .join-interface { display: flex; justify-content: space-between; align-items: center; gap: 20px; } .join-desc { font-size: 0.8rem; line-height: 1.5; color: var(--text-muted); } .action-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 160px; padding: 10px 16px; background: var(--bg-surface-elevated); border: 2px solid var(--text-pure); color: var(--text-pure); font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1px; text-decoration: none; border-radius: var(--radius-sm); box-shadow: 3px 3px 0 var(--text-pure); transition: var(--transition-fast); } .action-link:hover { background: var(--text-pure); color: var(--text-dark); } .action-link:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--text-pure); } /* --- FOOTER --- */ .hub-footer { text-align: center; margin-top: 8px; padding-top: 14px; border-top: 1px dashed var(--border-main); font-family: var(--font-mono); font-size: 0.55rem; color: var(--text-muted); letter-spacing: 2px; text-transform: uppercase; } /* --- RESPONSIVENESS MATRIX --- */ @media (max-width: 768px) { .holo-grid { grid-template-columns: 1fr; gap: 8px; } .oss-container { flex-direction: column; gap: 10px; text-align: center; } .oss-meta { flex-direction: column; gap: 4px; } .join-interface { flex-direction: column; text-align: center; gap: 14px; } .action-link { width: 100%; } } @media (max-width: 540px) { .navbar { width: calc(100% - 16px); top: 10px; padding: 0 12px; } body { padding-top: 100px; padding-left: 10px; padding-right: 10px; } .nav-btn span { display: none; } .hub-title { font-size: 1.6rem; } .panel { padding: 16px; } .avatar-mainframe::after { right: -8px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .theme-toggle-btn:hover { transform: none; } }