/* ── @property typed CSS variables (animatable, Safari 16.4+) ─── */ @property --ring-score { syntax: ''; initial-value: 0; inherits: false; } /* ═══════════════════════════════════════════════════════════════════ Greenacres Design System — v2.1 World-class dark intelligence platform UI Benchmarked against: Linear, Vercel, Raycast, Stripe ═══════════════════════════════════════════════════════════════════ */ /* ── Design tokens ────────────────────────────────────────────────── */ :root { /* ── Greenacres Dark Palette v3.0 ───────────────────────────── */ /* Surfaces — forest green, not cold blue */ --bg: #0a110d; /* Deep Forest */ --bg-raised: #1c2520; /* Moss */ --bg-card: #26312a; /* Sage */ --bg-hover: #33403a; /* Fern */ --bg-active: #3f4e47; /* Deep Fern */ /* Borders */ --border: #2f3b35; /* Bark */ --border-h: #3d4e45; --border-a: rgba(16,185,129,.35); /* Text — 4 levels */ --fg: #f1f7f3; /* Mist */ --fg-dim: #a3b0a8; /* Lichen */ --fg-muted: #7d8a80; --fg-faint: #4a5a52; /* Brand palette — emerald hero */ --accent: #10b981; /* Greenacres Emerald (was teal) */ --accent-2: #22d3ee; /* Cyan info (was pink) */ --green: #10b981; /* Same as accent — the brand colour */ --amber: #d97706; --red: #ef4444; /* Glow variants */ --glow-accent: rgba(16,185,129,.15); --glow-green: rgba(16,185,129,.2); /* Radii — consistent scale */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --radius: var(--r-lg); --radius-sm: var(--r-md); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2); --shadow-md: 0 4px 16px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25); --shadow-lg: 0 12px 40px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.3); --shadow-glow: 0 0 0 1px rgba(16,185,129,.3), 0 4px 20px var(--glow-accent); /* Typography */ --font: 'DM Sans', system-ui, -apple-system, sans-serif; --font-serif: 'Instrument Serif', Georgia, serif; --font-mono: 'SF Mono', 'Fira Code', ui-monospace, monospace; /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --max-w: 1120px; color-scheme: dark; } /* ── Light mode ─────────────────────────────────────────────────── */ /* Activated by .light class on (JS toggle) or device preference */ @media (prefers-color-scheme: light) { :root:not(.dark) { --bg: #f8faf5; --bg-raised: #f1f4ef; --bg-card: #e8ede7; --bg-hover: #dfe6e0; --bg-active: #d4ded5; --border: #c5d0c7; --border-h: #b5c4b8; --fg: #0f1c16; --fg-dim: #44544b; --fg-muted: #6b7d73; --fg-faint: #9aab9e; --glow-accent: rgba(16,185,129,.2); --glow-green: rgba(16,185,129,.25); color-scheme: light; } } /* Manual .light class override (JS toggle wins over device preference) */ html.light { --bg: #f8faf5; --bg-raised: #f1f4ef; --bg-card: #e8ede7; --bg-hover: #dfe6e0; --bg-active: #d4ded5; --border: #c5d0c7; --border-h: #b5c4b8; --fg: #0f1c16; --fg-dim: #44544b; --fg-muted: #6b7d73; --fg-faint: #9aab9e; --glow-accent: rgba(16,185,129,.2); --glow-green: rgba(16,185,129,.25); color-scheme: light; } /* .dark class locks dark regardless of device */ html.dark { color-scheme: dark; } /* ── Reset & base ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* UX-GLOBAL: clip overflow at root — self-healing, beats all per-page styles. clip (not hidden) avoids breaking sticky/fixed positioning contexts. */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; max-width: 100%; } body { font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; display: flex; min-height: 100vh; } a { color: inherit; text-decoration: none; } /* Subtle film grain — adds depth at minimal performance cost */ body::before { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E"); background-size: 200px; opacity: .3; } html.light body::before { opacity: .15; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--bg-active); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-h); } /* Text selection */ ::selection { background: rgba(16,185,129,.2); color: var(--fg); } /* Focus visible — keyboard navigation */ :focus-visible { outline: 2px solid rgba(16,185,129,.6); outline-offset: 2px; border-radius: 4px; } /* ── Heading scale ───────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--fg); } h1 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); } h2 { font-size: 1.25rem; font-weight: 600; } h3 { font-size: 1rem; font-weight: 600; } /* ── Page hero — inner page header (all sub-pages) ─────────────── */ .page-hero { padding: 36px 32px 28px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgba(16,185,129,.04) 0%, transparent 100%); } .page-hero h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -.02em; color: var(--fg); } .page-hero h1 em { font-style: italic; color: var(--green); } .page-hero p { margin-top: 8px; font-size: 14px; color: var(--fg-dim); line-height: 1.6; max-width: 640px; } /* ── Sidebar layout ──────────────────────────────────────────────── */ .sidebar { width: 228px; flex-shrink: 0; position: fixed; top: 0; left: 0; height: 100vh; background: var(--bg-raised); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 200; overflow-y: auto; overflow-x: hidden; } .sb-brand { display: flex; align-items: center; gap: 11px; padding: 20px 18px 16px; font-weight: 700; font-size: 16px; letter-spacing: -.025em; color: var(--fg); border-bottom: 1px solid var(--border); flex-shrink: 0; text-decoration: none; transition: opacity .15s; } .sb-brand:hover { opacity: .85; } .sb-logo { width: 32px; height: 32px; flex-shrink: 0; } .sb-nav { flex: 1; padding: 10px 10px 8px; display: flex; flex-direction: column; gap: 1px; } .sb-section { padding: 16px 12px 5px; font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--fg-muted); margin-top: 2px; } .sb-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 500; color: var(--fg-dim); transition: color .15s, background .15s; text-decoration: none; white-space: nowrap; min-height: 40px; } .sb-link svg { flex-shrink: 0; opacity: .65; transition: opacity .15s; } .sb-link:hover { color: var(--fg); background: var(--bg-hover); } .sb-link:hover svg { opacity: .9; } .sb-link.active { color: var(--green); background: rgba(16,185,129,.09); border-left: 2px solid var(--green); padding-left: 10px; } .sb-link.active svg { opacity: 1; color: var(--green); } .sb-foot { padding: 14px 18px; font-size: 11px; color: var(--fg-muted); border-top: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sb-version { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; background: rgba(16,185,129,.08); color: var(--green); border: 1px solid rgba(16,185,129,.2); } .sb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px rgba(16,185,129,.6); } .site-body { flex: 1; margin-left: 228px; min-width: 0; display: flex; flex-direction: column; } /* UX-GLOBAL: .page-content must have explicit width so max-width+margin:auto center correctly. Without width:100%, flex column item + margin:auto = intrinsic sizing, causing tables inside to resolve width:100% as auto (unbounded), blowing content past body and triggering clip. */ .page-content { width: 100%; } /* ── Mobile sidebar ─────────────────────────────────────────────── */ .sb-toggle { display: none; position: fixed; top: 13px; left: 14px; z-index: 201; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px; color: var(--fg-dim); cursor: pointer; align-items: center; justify-content: center; transition: border-color .15s; } .sb-toggle:hover { border-color: var(--border-h); color: var(--fg); } .sb-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 199; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } @media (max-width: 768px) { .sidebar { transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1); box-shadow: none; } .sidebar.open { transform: translateX(0); box-shadow: 8px 0 48px rgba(0,0,0,.5); } .sb-overlay.visible { display: block; } .site-body { margin-left: 0; padding-top: 56px; } .sb-toggle { display: flex; } } /* Suppress legacy topnav */ .sidebar ~ .site-body .topnav, .topnav { display: none; } /* ── Site footer ─────────────────────────────────────────────────── */ .site-footer { padding: 16px 32px 28px; font-size: 12px; color: var(--fg-faint); border-top: 1px solid var(--border); margin-top: auto; } /* ── Card system ─────────────────────────────────────────────────── */ .card { position: relative; display: flex; flex-direction: column; padding: 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); transition: border-color .2s, transform .2s, box-shadow .2s; animation: fadeUp .5s ease both; } .card:hover { border-color: var(--border-h); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Card accent tops */ .card-dashboard { border-top: 2px solid rgba(168,237,234,.3); } .card-controls { border-top: 2px solid rgba(242,196,212,.3); } .card-analytics { border-top: 2px solid rgba(129,140,248,.3); } .card-status { border-top: 2px solid rgba(61,218,150,.3); } .card-admin { border-top: 2px solid rgba(148,163,184,.2); } .card-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); margin-bottom: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--fg-dim); transition: color .2s, background .2s, border-color .2s; } .card:hover .card-icon { color: var(--accent); background: rgba(168,237,234,.07); border-color: rgba(168,237,234,.2); } .card h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 6px; } .card p { font-size: 13.5px; color: var(--fg-dim); line-height: 1.55; flex: 1; } .card-arrow { position: absolute; top: 24px; right: 22px; font-size: 16px; color: var(--fg-faint); transition: color .2s, transform .2s; } .card:hover .card-arrow { color: var(--accent); transform: translateX(3px); } /* ── Grid systems ────────────────────────────────────────────────── */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } /* ── Dashboard tiles ─────────────────────────────────────────────── */ .tiles-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; } @media (max-width: 960px) { .tiles-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .tiles-grid { grid-template-columns: 1fr; } } .tile { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; transition: border-color .2s, box-shadow .2s; } .tile:hover { border-color: rgba(168,237,234,.22); box-shadow: 0 4px 20px rgba(0,0,0,.25); } .tile-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; } .tile-label { font-size: 11.5px; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .06em; flex: 1; } .tile-val { font-size: 28px; font-weight: 700; letter-spacing: -.03em; color: var(--fg); line-height: 1; } .tile-sub { font-size: 12.5px; color: var(--fg-muted); line-height: 1.45; } /* Tile badges */ .tile-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; display: inline-flex; align-items: center; } .tile-badge-green { background: rgba(61,218,150,.12); color: var(--green); border: 1px solid rgba(61,218,150,.2); } .tile-badge-red { background: rgba(240,112,112,.12); color: var(--red); border: 1px solid rgba(240,112,112,.2); } .tile-badge-orange { background: rgba(245,166,35,.12); color: var(--amber); border: 1px solid rgba(245,166,35,.2); } .tile-badge-teal { background: rgba(168,237,234,.1); color: var(--accent); border: 1px solid rgba(168,237,234,.18); } /* Tile metric split */ .tile-metric-row { display: flex; gap: 0; margin-top: 4px; } .tile-metric { flex: 1; text-align: center; } .tile-metric + .tile-metric { border-left: 1px solid var(--border); } .metric-val { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--fg); line-height: 1.1; } .metric-key { font-size: 11px; color: var(--fg-muted); margin-top: 2px; } /* Tile progress bar */ .tile-bar-wrap { margin-top: 8px; } .tile-bar { height: 3px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; } .tile-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .7s ease; } .tile-bar-purple { background: #a78bfa; } /* Tile button */ .tile-btn { padding: 7px 14px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--bg-hover); color: var(--fg-dim); font-size: 12.5px; font-family: var(--font); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .tile-btn:hover { background: rgba(255,255,255,.08); color: var(--fg); border-color: var(--border-h); } .tile-btn-red { border-color: rgba(240,112,112,.25); color: var(--red); } .tile-btn-red:hover { background: rgba(240,112,112,.1); border-color: rgba(240,112,112,.4); } /* Docker pills */ .docker-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; } .dp { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 20px; font-size: 12.5px; border: 1px solid var(--border); background: var(--bg-hover); color: var(--fg-dim); } .dp-up { border-color: rgba(61,218,150,.2); color: var(--green); } .dp-down { border-color: rgba(240,112,112,.2); color: var(--red); } /* ── Service pills ────────────────────────────────────────────────── */ .services-grid { display: flex; flex-wrap: wrap; gap: 10px; } .service-pill { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); transition: border-color .2s, box-shadow .2s; text-decoration: none; } .service-pill:hover { border-color: var(--border-h); box-shadow: var(--shadow-sm); } .service-pill span { font-weight: 600; font-size: 14px; color: var(--fg); } .service-pill small { color: var(--fg-muted); font-size: 12.5px; margin-left: 2px; } /* ── Network cards ────────────────────────────────────────────────── */ .network-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .net-card { padding: 22px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); transition: border-color .2s; } .net-card:hover { border-color: var(--border-h); } .net-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .net-badge { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; padding: 3px 11px; border-radius: 999px; background: rgba(168,237,234,.08); color: var(--accent); border: 1px solid rgba(168,237,234,.15); } .net-badge.opi { background: rgba(242,196,212,.08); color: var(--accent-2); border-color: rgba(242,196,212,.15); } .net-ip { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--fg); margin-bottom: 4px; } .net-desc { font-size: 13px; color: var(--fg-muted); } /* ── Bulletin / info cards ────────────────────────────────────────── */ .bulletin-card { padding: 22px 26px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); color: var(--fg-dim); font-size: 14px; line-height: 1.65; } /* ── General content sections (docs/ai/dev pages) ────────────────── */ .ds { margin-top: 48px; } .ds h2 { font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: 1.4rem; margin-bottom: 20px; letter-spacing: -.01em; color: var(--fg); } /* Table system — global */ /* UX-GLOBAL: overflow-x:auto!important beats any per-page