/* ========================================================================== PROJECTS THEME Tech/NOC styling for pages using Keeps /assets/css/base.css unchanged. ========================================================================== */ body.projects { --project-bg: #020805; --project-panel: rgba(6, 18, 12, 0.88); --project-panel-strong: rgba(10, 26, 17, 0.94); --project-line: rgba(0, 208, 128, 0.30); --project-line-soft: rgba(89, 128, 103, 0.22); --project-text: #d8f5e5; --project-muted: #7b9687; --project-cyan: #00d080; --project-green: #22c55e; --project-red: #ef4444; --project-yellow: #eab308; background: radial-gradient(circle at 15% 10%, rgba(0, 208, 128, 0.10), transparent 32rem), radial-gradient(circle at 80% 25%, rgba(34, 197, 94, 0.08), transparent 28rem), linear-gradient(rgba(0, 208, 128, 0.030) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 208, 128, 0.030) 1px, transparent 1px), var(--project-bg); background-size: auto, auto, 32px 32px, 32px 32px, auto; color: var(--project-text); font-family: ui-monospace, Menlo, Consolas, monospace; } body.projects a { color: var(--project-cyan); text-decoration: none; } body.projects a:hover { text-decoration: underline; } /* Page shell: wide dashboard instead of narrow article */ body.projects .post-wrapper, body.projects .projects-wrapper { width: min(1560px, calc(100vw - 2.5rem)); max-width: none; margin: 92px auto 0; padding: 1.1rem; background: rgba(2, 8, 5, 0.62); border: 1px solid var(--project-line-soft); border-radius: 18px; box-shadow: 0 0 40px rgba(0, 208, 128, 0.07), inset 0 0 24px rgba(0, 208, 128, 0.030); } body.projects .project-page-header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-end; margin-bottom: 1rem; padding: 0.35rem 0.35rem 0.85rem; border-bottom: 1px solid var(--project-line-soft); } body.projects .project-title-block h1, body.projects h1 { margin: 0; color: #d8f5e5; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-family: ui-monospace, Menlo, Consolas, monospace; } body.projects .project-kicker { margin-bottom: 0.25rem; color: var(--project-cyan); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.82; } body.projects .post-meta { color: var(--project-muted); font-size: 0.78rem; opacity: 0.82; text-align: right; white-space: nowrap; } body.projects .post-content { font-family: ui-monospace, Menlo, Consolas, monospace; line-height: 1.45; font-size: 0.95rem; opacity: 1; } body.projects .read-more { display: inline-flex; align-items: center; margin: 1rem 0.35rem 0; padding: 0.45rem 0.75rem; border: 1px solid var(--project-line-soft); border-radius: 999px; color: var(--project-muted); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; } body.projects .read-more:hover { color: #d8f5e5; border-color: var(--project-line); text-decoration: none; } /* Generic project index cards */ body.projects .post-list, body.projects .placards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } body.projects .post-card, body.projects .card { background: var(--project-panel); border: 1px solid var(--project-line-soft); border-radius: 14px; padding: 1rem; box-shadow: inset 0 0 18px rgba(0, 208, 128, 0.025); } body.projects .post-card:hover, body.projects .card:hover { transform: translateY(-2px); border-color: var(--project-line); box-shadow: 0 0 22px rgba(0, 208, 128, 0.16); } /* Network map / NOC dashboard */ .noc-dashboard { display: grid; grid-template-columns: repeat( auto-fit, minmax(280px, 1fr) ); gap: 1rem; align-items: start; } .noc-section { min-width: 0; background: rgba(8, 20, 13, 0.68); border: 1px solid var(--project-line-soft); border-radius: 16px; padding: 1rem; } .noc-section h2 { display: flex; justify-content: center; align-items: center; min-height: 2.1rem; margin: 0 0 0.85rem; color: #a9d7b8; opacity: 0.9; font-size: 0.86rem; font-weight: 800; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; border: 1px solid rgba(0, 208, 128, 0.24); border-radius: 999px; background: rgba(2, 8, 5, 0.76); } .cluster-section { min-width: 700px; grid-column: 1 / -1; } .machine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 0.75rem; } /* Phones / narrow screens */ @media (max-width: 700px) { .noc-dashboard { grid-template-columns: 1fr; } .cluster-section { grid-column: auto; min-width: 0; } .machine-grid { grid-template-columns: 1fr; } } .machine-card { position: relative; min-height: 104px; background: #101612; border: 1px solid #284236; border-top: 4px solid #64748b; border-radius: 14px; padding: 0.8rem; text-align: center; box-shadow: inset 0 0 18px rgba(123, 150, 135, 0.045); transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } .machine-card:hover { transform: translateY(-2px); } .machine-card.up { border-top-color: var(--project-green); box-shadow: inset 0 0 20px rgba(34, 197, 94, 0.055), 0 0 14px rgba(34, 197, 94, 0.08); } .machine-card.down { border-top-color: var(--project-red); box-shadow: inset 0 0 20px rgba(239, 68, 68, 0.055), 0 0 14px rgba(239, 68, 68, 0.08); } .machine-card.unknown { border-top-color: var(--project-yellow); box-shadow: inset 0 0 20px rgba(234, 179, 8, 0.055), 0 0 14px rgba(234, 179, 8, 0.08); } .machine-name { color: #e5fdf0; text-shadow: 0 0 4px rgba(0,208,128,0.12); font-weight: 900; font-size: 0.92rem; letter-spacing: 0.04em; margin-bottom: 0.3rem; overflow-wrap: anywhere; } .machine-ip, .machine-last { color: #7b9687; } .machine-ip { font-size: 0.74rem; margin-bottom: 0.55rem; } .machine-status { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.22rem 0.58rem; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .machine-status.up { background: rgba(20, 83, 45, 0.9); color: #bbf7d0; } .machine-status.down { background: rgba(127, 29, 29, 0.9); color: #fecaca; } .machine-status.unknown { background: rgba(113, 63, 18, 0.9); color: #fde68a; } .machine-last { margin-top: 0.55rem; font-size: 0.68rem; line-height: 1.35; } /* Rack-style acropolis gateway */ .cluster-rack { display: grid; gap: 0.85rem; } .gateway-zone { position: relative; display: grid; place-items: center; padding-bottom: 1.35rem; } .gateway-zone::after { content: ""; position: absolute; bottom: 0.15rem; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 208, 128, 0.72), transparent); box-shadow: 0 0 12px rgba(0, 208, 128, 0.45); } .gateway-card { width: min(100%, 460px); min-height: 118px; border-width: 1px; border-top-width: 5px; background: linear-gradient(180deg, rgba(7, 45, 25, 0.62), rgba(2, 8, 5, 0.92)); } .gateway-label { margin-bottom: 0.55rem; color: #8ee6b1; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; } .rack-flow-label { position: relative; color: #8ee6b1; font-size: 0.72rem; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; opacity: 0.9; } .rack-flow-label::before { content: "↓"; display: block; color: var(--project-cyan); font-size: 1.1rem; line-height: 1; margin-bottom: 0.1rem; } .cluster-nodes { border: 1px dashed rgba(0, 208, 128, 0.24); border-radius: 16px; padding: 0.9rem; background: rgba(2, 8, 5, 0.48); } .empty-state { color: var(--project-muted); border: 1px dashed var(--project-line-soft); border-radius: 12px; padding: 1rem; text-align: center; } @media (max-width: 1100px) { .noc-dashboard { grid-template-columns: 1fr; } } @media (max-width: 700px) { body.projects .post-wrapper, body.projects .projects-wrapper { width: min(100vw - 1rem, 1560px); margin-top: 76px; padding: 0.6rem; } body.projects .project-page-header, .noc-header { display: block; } body.projects .post-meta, .noc-updated { margin-top: 0.45rem; text-align: left; white-space: normal; } .machine-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); } } .post-meta { opacity: 0.45; font-size: 0.8rem; letter-spacing: 0.08em; } .projects h1 { margin-bottom: 0.25rem; } /* Project index shell */ body.projects .projects-wrapper { width: min(860px, calc(100vw - 2.5rem)); margin: 140px auto 0; padding: 3rem 2.4rem; background: rgba(2, 8, 5, 0.62); border: 1px solid var(--project-line-soft); border-radius: 12px; box-shadow: inset 0 0 3px rgba(0, 208, 128, 0.06), 0 0 14px rgba(0, 208, 128, 0.08); } /* Project index title */ body.projects .section-title { margin: 0 0 2rem; color: var(--project-cyan); font-size: 1.4rem; letter-spacing: 0.10em; text-transform: uppercase; } /* Project index should read like a list, not a dashboard grid */ body.projects .projects-wrapper .post-list { display: grid; grid-template-columns: 1fr; gap: 1.8rem; } /* Project index cards */ body.projects .projects-wrapper .post-card { padding: 1.6rem 1.9rem; background: rgba(6, 18, 12, 0.76); border: 1px solid var(--project-line-soft); border-radius: 10px; } /* Card title sizing */ body.projects .projects-wrapper .post-card h2 { margin: 0 0 0.4rem; font-size: 1.15rem; } /* Preview readability */ body.projects .projects-wrapper .post-preview { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.7; font-size: 1.05rem; opacity: 0.92; } body.projects .projects-wrapper .post-list { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }