/* ============================================================ it.JO — Hosting panel design system Palette taken from the it.JO brand: deep navy ink (#050E21), a blue→violet accent gradient (#1554FA → #6963FC), and cool navy-tinted neutrals, so this panel reads as a real subsection of it.jo, not a bolted-on admin tool. ============================================================ */ /* Manrope — the it.jo typeface, self-hosted (matches the marketing site's weights). */ @font-face { font-family: Manrope; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/manrope-latin-400.woff2") format("woff2"); } @font-face { font-family: Manrope; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/manrope-latin-500.woff2") format("woff2"); } @font-face { font-family: Manrope; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/manrope-latin-600.woff2") format("woff2"); } @font-face { font-family: Manrope; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/manrope-latin-700.woff2") format("woff2"); } @font-face { font-family: Manrope; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/manrope-latin-800.woff2") format("woff2"); } :root { /* Deep navy ground (the it.jo ink), a shade or two lighter than pure black so the surface reads as "it.jo" even before the accent shows up anywhere. */ --ink: #f2f5fb; --body-text: #c6d0e2; --muted: #94a0b8; /* Brighter blue on the dark ground so links and fills stay legible; the darker, contrast-passing #1554FA is used on the light theme below. */ --accent: #5b82ff; --accent-dark: #829dff; --accent-tint: rgba(91, 130, 255, 0.16); --brand-grad: linear-gradient(95deg, #5b82ff, #8f8bff); /* Repurposed as "hairline / hover" tokens against the navy ground, darkest to lightest, matching the original light-theme naming so every existing rule that reaches for sage-50/100/200 keeps working unchanged. */ --sage-50: #0e1830; --sage-100: #1a2846; --sage-200: #26375c; --white: #0a1226; --surface: #0a1226; --on-accent: #081029; --danger: #ff7a68; --danger-tint: rgba(255, 122, 104, 0.14); --warning: #f0b34f; --warning-tint: rgba(240, 179, 79, 0.14); --success: #5ec93f; --success-tint: rgba(94, 201, 63, 0.14); --info-tint: rgba(120, 160, 220, 0.14); --radius-pill: 999px; --radius-md: 16px; --radius-sm: 10px; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px -12px rgba(0, 0, 0, 0.5); --font-display: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-body: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --header-bg: rgba(10, 18, 38, 0.85); } /* Light variant, opted into via [data-theme="light"] on (toggled + persisted by site.js) -- every rule in this file reaches for these same token names, so nothing below this block needs to know which theme is active. */ :root[data-theme="light"] { --ink: #050e21; --body-text: #47506a; --muted: #5a6478; --accent: #1554fa; --accent-dark: #0e3fd0; --accent-tint: #e7edff; --brand-grad: linear-gradient(95deg, #1554fa, #6963fc); --sage-50: #f4f6fb; --sage-100: #e1e6f0; --sage-200: #d2dae8; --white: #ffffff; --surface: #ffffff; --on-accent: #ffffff; --danger: #d6493d; --danger-tint: #fceeec; --warning: #b3791a; --warning-tint: #fbf1de; --success: #2e9e4f; --success-tint: #e8f6ec; --info-tint: #eef3fb; --shadow-card: 0 1px 2px rgba(5, 14, 33, 0.04), 0 8px 24px -12px rgba(5, 14, 33, 0.12); --header-bg: rgba(255, 255, 255, 0.85); } * { box-sizing: border-box; } html { font-size: 15px; } @media (min-width: 768px) { html { font-size: 16px; } } html, body { height: 100%; } html { overflow-x: hidden; } body { margin: 0; font-family: var(--font-body); color: var(--body-text); background: var(--white); display: flex; flex-direction: column; min-height: 100vh; max-width: 100vw; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--ink); font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; } h1 { font-size: 2rem; margin: 0 0 0.5rem; } h2 { font-size: 1.375rem; margin: 2rem 0 0.75rem; } h3 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; } a { color: var(--accent-dark); text-decoration: none; } a:hover { color: var(--accent); text-decoration: underline; } p { line-height: 1.6; max-width: 62ch; } ::selection { background: var(--accent-tint); color: var(--ink); } /* ---------------------------------------------------------- layout shell */ .pc-shell { flex: 1 0 auto; width: 100%; max-width: 1080px; margin: 0 auto; padding: 2rem 1.5rem 3rem; } .container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; } /* --------------------------------------------------------- impersonation */ .pc-impersonation-bar { background: var(--warning-tint); color: var(--warning); padding: 0.6rem 1.5rem; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; font-size: 0.88rem; border-bottom: 1px solid var(--sage-200); } .pc-impersonation-bar strong { color: var(--ink); } .pc-impersonation-return { font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: var(--warning); background: var(--surface); border: 1.5px solid var(--sage-200); border-radius: var(--radius-pill); padding: 0.3rem 0.9rem; cursor: pointer; } .pc-impersonation-return:hover { background: var(--warning-tint); } /* ------------------------------------------------------------ app shell */ .pc-app-shell { width: 100%; min-height: 100vh; } .pc-sidebar { width: 232px; background: var(--surface); border-right: 1px solid var(--sage-100); padding: 1.5rem 1rem; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; z-index: 20; transition: top 0.15s ease; } /* The sidebar is fixed (always stays put on scroll, never sticky-drifts), so it's out of the normal flow entirely — .pc-app-main reserves the matching space with a margin instead of a flex layout. */ body.pc-has-impbar .pc-sidebar { top: 48px; } .pc-sidebar .pc-brand { padding: 0 0.5rem; margin-bottom: 1.75rem; } .pc-sidenav { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; } .pc-sidenav-link { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.75rem; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--body-text); position: relative; transition: background-color 0.15s ease, color 0.15s ease; } .pc-sidenav-link:hover { background: var(--sage-50); color: var(--ink); text-decoration: none; } .pc-sidenav-link.active { background: var(--accent); color: var(--on-accent); } .pc-sidenav-link.active:hover { background: var(--accent-dark); color: var(--on-accent); } .pc-sidenav-link.active::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--surface); margin-left: auto; } .pc-sidenav-icon { width: 18px; height: 18px; flex-shrink: 0; } /* Group label in the sidebar ("Your hosting" / "Server administration"), shown to administrators. */ .pc-sidenav-heading { margin: 0.9rem 0.75rem 0.25rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); } .pc-sidenav-heading:first-child { margin-top: 0.2rem; } /* Sub-navigation shown under a sidebar item once its section is the active page -- jumps to an anchor on that same page rather than a separate route, since the content (DNS records, mailboxes, smarthost) is one tightly related whole, not distinct pages. */ .pc-subnav { display: flex; flex-direction: column; gap: 0.05rem; margin: 0.15rem 0 0.3rem 2.15rem; padding-left: 0.65rem; border-left: 1.5px solid var(--sage-100); } .pc-subnav a { font-family: var(--font-body); font-size: 0.83rem; font-weight: 500; color: var(--muted); padding: 0.32rem 0.5rem; border-radius: var(--radius-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-subnav a:hover { background: var(--sage-50); color: var(--ink); text-decoration: none; } .pc-subnav a.active { background: var(--accent-tint); color: var(--accent-dark); font-weight: 600; } .pc-sidebar-footer { border-top: 1px solid var(--sage-100); padding-top: 1rem; margin-top: 1rem; } .pc-user-chip { display: flex; align-items: center; gap: 0.6rem; } .pc-user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-dark); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pc-user-chip-text { display: flex; flex-direction: column; min-width: 0; flex: 1; } .pc-user-chip-email { font-size: 0.82rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-user-chip-role { font-size: 0.74rem; color: var(--muted); } .pc-user-chip-signout { background: none; border: none; color: var(--muted); padding: 0.35rem; border-radius: var(--radius-sm); display: flex; flex-shrink: 0; } .pc-user-chip-signout:hover { background: var(--sage-50); color: var(--danger); } .pc-user-chip-signout svg { width: 18px; height: 18px; } .pc-app-main { margin-left: 232px; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; } .pc-app-main .pc-shell { flex: 1 0 auto; max-width: 1080px; } /* On narrow screens the navigation stays on the left as a compact icon rail rather than becoming a horizontal strip along the top. The earlier top-bar treatment turned the nav into a horizontally scrolling row, which put later items off-screen with nothing indicating they were there, and cost vertical space on exactly the screens with least of it. A fixed rail keeps every destination visible and keeps the app's left-hand navigation model identical on every device. */ @media (max-width: 860px) { .pc-app-main { margin-left: 68px; } .pc-sidebar { width: 68px; padding: 1rem 0.35rem; align-items: stretch; } .pc-sidebar .pc-brand { justify-content: center; margin-bottom: 1rem; } .pc-brand-logo { height: 22px; } /* Icon above a small label: the label is what keeps a rail navigable — an icon-only rail needs the user to already know what each glyph means. */ .pc-sidenav-link { flex-direction: column; gap: 0.2rem; padding: 0.5rem 0.15rem; font-size: 0.6rem; line-height: 1.15; text-align: center; border-radius: var(--radius-sm); hyphens: auto; } .pc-sidenav-icon { width: 20px; height: 20px; } /* No room for words in the icon rail: the group label becomes a thin divider. */ .pc-sidenav-heading { font-size: 0; height: 1px; margin: 0.45rem 0.35rem; background: var(--sage-100); } .pc-sidenav-heading:first-child { display: none; } /* The dot indicator assumed a horizontal row with room at its end. The active item is already filled with the accent colour, which reads clearly at this size. */ .pc-sidenav-link.active::after { display: none; } /* No room for an indent rail; sub-items sit directly under their parent instead. */ .pc-subnav { margin: 0.1rem 0 0.3rem; padding-left: 0; border-left: none; align-items: stretch; } .pc-subnav a { font-size: 0.58rem; line-height: 1.15; text-align: center; padding: 0.3rem 0.1rem; } .pc-sidebar-footer { padding-top: 0.75rem; margin-top: 0.75rem; } /* Avatar and the two icon buttons can't sit in a row this narrow, so they stack. */ .pc-user-chip { flex-direction: column; align-items: center; gap: 0.35rem; } .pc-user-chip-text { display: none; } .pc-user-avatar { width: 28px; height: 28px; font-size: 0.8rem; } } /* Phone: a slightly narrower rail, to give the content back what it can. */ @media (max-width: 560px) { .pc-app-main { margin-left: 58px; } .pc-sidebar { width: 58px; padding: 0.75rem 0.25rem; } .pc-sidenav-link { font-size: 0.55rem; padding: 0.45rem 0.1rem; } .pc-sidenav-icon { width: 18px; height: 18px; } .pc-subnav a { font-size: 0.54rem; } /* The initial adds nothing once the email beside it is gone; the controls matter more. */ .pc-user-avatar { display: none; } } /* ---------------------------------------------------------------- header */ .pc-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--sage-100); background: var(--header-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .pc-header-inner { max-width: 1080px; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; } .pc-brand { display: flex; align-items: center; gap: 0.65rem; flex-shrink: 0; } .pc-brand-logo { height: 26px; width: auto; display: block; } .pc-brand-logo-chip { display: inline-flex; align-items: center; border-radius: 8px; padding: 0; } /* A tenant's own uploaded logo may be dark-on-transparent, so on the dark ground it still gets a light backing chip; the it.jo house mark does not need one because it ships a white-letterform variant (see .pc-brand-logo--* below). */ .pc-brand-logo-chip.on-dark { background: #0c1730; padding: 0.3rem 0.6rem; } .pc-brand-logo-chip.on-light { background: var(--surface); padding: 0.3rem 0.6rem; border-radius: 8px; } /* The it.jo wordmark comes in two cuts: a dark one for light backgrounds and a white-letterform one for dark. Show whichever suits the active theme so the mark sits cleanly on the surface with no backing box. */ .pc-brand-logo--dark { display: none; } .pc-brand-logo--light { display: block; } :root[data-theme="light"] .pc-brand-logo--dark { display: block; } :root[data-theme="light"] .pc-brand-logo--light { display: none; } .pc-brand-mark-sm { display: inline-block; width: 1.4em; height: 1.4em; background: url("/img/itjo-logo-mark.png") center / contain no-repeat; vertical-align: middle; } .pc-brand-suffix { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; color: var(--accent-dark); background: var(--accent-tint); padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.04em; } .pc-nav { display: flex; align-items: center; gap: 1.5rem; flex: 1; } .pc-nav a { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--body-text); } .pc-nav a:hover, .pc-nav a.active { color: var(--ink); text-decoration: none; } .pc-header-right { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; } .pc-user-email { font-size: 0.85rem; color: var(--muted); display: none; } @media (min-width: 640px) { .pc-user-email { display: inline; } } .navbar-toggler { display: none; } .pc-theme-toggle-header { background: none; border: 1.5px solid var(--sage-200); color: var(--muted); border-radius: var(--radius-pill); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pc-theme-toggle-header:hover { color: var(--ink); border-color: var(--accent); } .pc-theme-toggle-header svg { width: 17px; height: 17px; } /* ------------------------------------------------------------- footer */ .pc-footer { flex-shrink: 0; border-top: 1px solid var(--sage-100); padding: 1.5rem; text-align: center; font-size: 0.85rem; color: var(--muted); } /* -------------------------------------------------------------- buttons */ .btn { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; border-radius: var(--radius-pill); padding: 0.55rem 1.25rem; border: 1.5px solid transparent; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease; } .btn:active { transform: translateY(1px); } .btn-primary, .btn-danger { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } /* The it.jo signature: the primary action carries the blue->violet gradient. */ .btn-primary { background-image: var(--brand-grad); border-color: transparent; color: #ffffff; } .btn-primary:hover, .btn-primary:focus { filter: brightness(1.06); color: #ffffff; } .btn-danger { background: var(--danger); border-color: var(--danger); } .btn-danger:hover, .btn-danger:focus { background: #b93b30; border-color: #b93b30; color: var(--on-accent); } .btn-outline-secondary, .btn-outline-primary { background: var(--surface); border-color: var(--sage-200); color: var(--ink); } .btn-outline-secondary:hover, .btn-outline-primary:hover { background: var(--sage-50); border-color: var(--accent); color: var(--ink); } .btn-outline-danger { background: var(--surface); border-color: var(--sage-200); color: var(--danger); } .btn-outline-danger:hover { background: var(--danger-tint); border-color: var(--danger); color: var(--danger); } .btn-outline-warning { background: var(--surface); border-color: var(--sage-200); color: var(--warning); } .btn-outline-warning:hover { background: var(--warning-tint); border-color: var(--warning); color: var(--warning); } .btn-link { color: var(--body-text); font-weight: 600; border-radius: var(--radius-sm); padding: 0.55rem 0.75rem; } .btn-link:hover { color: var(--ink); text-decoration: none; background: var(--sage-50); } .btn-sm { padding: 0.35rem 0.85rem; font-size: 0.82rem; } /* --------------------------------------------------------------- forms */ .form-label { font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; color: var(--ink); margin-bottom: 0.3rem; } .form-control, .form-select { font-family: var(--font-body); border: 1.5px solid var(--sage-200); border-radius: var(--radius-sm); padding: 0.55rem 0.8rem; color: var(--ink); background: var(--surface); } .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-text { color: var(--muted); font-size: 0.82rem; } textarea.form-control { border-radius: var(--radius-sm); } /* --------------------------------------------------------------- tables */ .table { --bs-table-bg: transparent; font-family: var(--font-body); font-variant-numeric: tabular-nums; border-collapse: separate; border-spacing: 0; } .table thead th { font-family: var(--font-display); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1.5px solid var(--sage-200); padding: 0.6rem 0.75rem; } .table td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--sage-100); color: var(--ink); vertical-align: middle; } .table tbody tr:hover td { background: var(--sage-50); } /* --------------------------------------------------------------- badges */ .badge { font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.02em; border-radius: var(--radius-pill); padding: 0.3rem 0.65rem; /* A bare .badge with no .bg-* modifier had no background and no colour of its own, so it fell through to Bootstrap's own rule — whose colour is set for a coloured background that was never applied. The result was an unreadable label on a light card: the engine name on the Databases tab looked like an empty column rather than text. Every variant below still overrides both, so this only affects a badge used on its own. */ background: var(--sage-100); color: var(--body-text); /* Keeps the pill sitting on the text baseline next to whatever it labels, and stops a two-word engine name such as "SQL Server" wrapping inside the pill. */ display: inline-block; line-height: 1; white-space: nowrap; vertical-align: baseline; } /* Every variant used anywhere in the panel is covered here. A variant that is missing does not fail visibly — it silently falls through to Bootstrap's own colours, which are a different palette entirely, so a stray Bootstrap blue appears in the middle of a green design system. That is exactly how bg-primary and bg-info slipped in. If a new variant is used in a view, it needs a line here. */ .badge.bg-success { background: var(--success-tint) !important; color: var(--success) !important; } .badge.bg-danger { background: var(--danger-tint) !important; color: var(--danger) !important; } .badge.bg-warning { background: var(--warning-tint) !important; color: var(--warning) !important; } .badge.bg-secondary { background: var(--sage-100) !important; color: var(--body-text) !important; } .badge.bg-primary { background: var(--accent-tint) !important; color: var(--accent-dark) !important; } .badge.bg-info { background: var(--info-tint) !important; color: var(--body-text) !important; } /* Bootstrap pairs its own .bg-* with white text. Ours are tinted backgrounds with dark text, so that utility has to be neutralised or "Default" and "Installed" render white-on-pale. */ .badge.bg-primary, .badge.bg-info, .badge.bg-secondary { --bs-bg-opacity: 1; } /* ------------------------------------------------- database engine chip */ /* The engine shown as a mark plus its name, in the product's own colour, so the type reads at a glance instead of as another word in a row of text. */ .pc-engine { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem 0.25rem 0.45rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--pc-engine-colour) 12%, transparent); color: var(--pc-engine-colour); font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; line-height: 1; white-space: nowrap; vertical-align: baseline; } .pc-engine svg { width: 1.05rem; height: 1.05rem; flex: none; } /* The tint is mixed from the brand colour, so it needs lifting in dark mode where a 12% wash over a dark ground is invisible. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pc-engine { background: color-mix(in srgb, var(--pc-engine-colour) 22%, transparent); color: color-mix(in srgb, var(--pc-engine-colour) 70%, white); } } :root[data-theme="dark"] .pc-engine { background: color-mix(in srgb, var(--pc-engine-colour) 22%, transparent); color: color-mix(in srgb, var(--pc-engine-colour) 70%, white); } /* ------------------------------------------------------------ live figures */ /* Marks a panel that keeps itself current, so nobody goes looking for a refresh button. */ .pc-live { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; color: var(--muted); padding: 0 0.4rem; } .pc-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: pc-live-pulse 2s ease-in-out infinite; } /* When polling fails the dot stops and turns amber. A figure that has quietly stopped updating while still looking live is worse than one that says it is stale. */ .pc-live.pc-live-stalled .pc-live-dot { background: var(--warning); animation: none; } .pc-live.pc-live-stalled { color: var(--warning); } @keyframes pc-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* A figure that has just changed is briefly highlighted, so movement is noticed rather than silently replacing the number someone was reading. */ .pc-live-changed { animation: pc-live-flash 1.2s ease-out; } @keyframes pc-live-flash { 0% { background: var(--accent-tint); } 100% { background: transparent; } } @media (prefers-reduced-motion: reduce) { .pc-live-dot { animation: none; } .pc-live-changed { animation: none; } } /* --------------------------------------------------------- live traffic panel */ .pc-livepanel { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; padding: 1rem 1.1rem; margin-bottom: 1.25rem; border: 1px solid var(--sage-200); border-radius: var(--radius-md); background: var(--sage-50); } .pc-livepanel-item { display: flex; flex-direction: column; gap: 0.15rem; } .pc-livepanel-value { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--ink); line-height: 1.1; /* Digits change every few seconds; tabular figures stop the row jittering as they do. */ font-variant-numeric: tabular-nums; } .pc-livepanel-label { color: var(--muted); font-size: 0.78rem; } .pc-livepanel-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 0.78rem; max-width: none; } /* ------------------------------------------------------------ breakdowns */ .pc-breakdown-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.75rem 2rem; margin-top: 1rem; } .pc-breakdown { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .pc-breakdown th { text-align: left; font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 0 0.5rem 0.4rem 0; border-bottom: 1px solid var(--sage-200); } .pc-breakdown th:not(:first-child), .pc-breakdown td:not(:first-child) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .pc-breakdown td { padding: 0.4rem 0.5rem 0.4rem 0; border-bottom: 1px solid var(--sage-100); color: var(--body-text); } /* The first cell carries a bar sized by its share of the busiest row, so the shape of the distribution reads without a separate chart. Behind the text, not beside it, so a long URL still gets the full width. */ .pc-breakdown td:first-child { position: relative; max-width: 0; width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 0.4rem; } .pc-breakdown td:first-child::before { content: ""; position: absolute; inset: 2px auto 2px 0; width: var(--pc-bar, 0%); background: var(--accent-tint); border-radius: var(--radius-sm); z-index: 0; } .pc-breakdown td:first-child { isolation: isolate; } /* ---------------------------------------------------------- file editor */ /* Sized to the viewport rather than to the file: a config file and a 3,000-line template should open the same shape, with the editor itself taking the space and the header and footer staying put. */ /* Both classes, not just .pc-editor. The editor is a .pc-dialog too, and .pc-dialog is defined far below this point with width:100% and max-width:380px. At equal specificity the later rule wins, so a single .pc-editor selector here was silently overridden and the editor opened at 380px however wide it was told to be. Matching both classes outranks it regardless of source order. */ .pc-dialog.pc-editor { /* Wider and taller than the panel's other dialogs, deliberately. Those hold a handful of fields; this holds code, where a wrapped line is genuinely harder to read and a short box means constant scrolling. */ width: min(88vw, 82rem); max-width: none; height: min(92vh, 60rem); max-height: none; padding: 0; } .pc-editor-form { display: flex; flex-direction: column; height: 100%; } .pc-editor-head { display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.25rem 0.75rem; border-bottom: 1px solid var(--sage-200); } .pc-editor-head h3 { margin: 0; } .pc-editor-head .pc-dialog-sub { margin: 0.2rem 0 0; } .pc-editor-close { margin-left: auto; font-size: 1.6rem; line-height: 1; color: var(--muted); text-decoration: none; padding: 0 0.3rem; } .pc-editor-close:hover { color: var(--ink); text-decoration: none; } /* The gutter and the textarea sit side by side and scroll together. They must agree on font, size and line-height to the pixel — any difference and the numbers drift further from their lines the further down the file you look, which is worse than no numbers at all. The shared values live here so the two cannot be changed independently. */ .pc-editor-body { flex: 1; display: flex; min-height: 0; /* lets the children scroll instead of stretching the dialog */ overflow: hidden; } .pc-editor-gutter, .pc-editor-area, .pc-editor-mirror { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 0.85rem; line-height: 1.55; padding-top: 1rem; padding-bottom: 1rem; } /* An invisible copy of the text, laid out at exactly the editor's width. Long lines wrap, so one line of a file is not one row on screen — a 300-character line might take four. The only reliable way to know how many rows each line occupies is to lay it out and measure it, which is what this does, off-screen, in a single pass. */ .pc-editor-mirror { position: absolute; visibility: hidden; pointer-events: none; top: 0; left: 0; z-index: -1; white-space: pre-wrap; overflow-wrap: break-word; tab-size: 4; padding-top: 0; padding-bottom: 0; } .pc-editor-gutter { flex: 0 0 auto; padding-left: 0.9rem; padding-right: 0.7rem; margin: 0; text-align: right; color: var(--muted); background: var(--sage-50); border-right: 1px solid var(--sage-200); user-select: none; /* selecting the file should not drag the numbers in */ overflow: hidden; /* scrolled by script, in step with the textarea */ white-space: pre; font-variant-numeric: tabular-nums; } /* The editor takes all remaining height. A fixed rows count left a short file floating in a tall box and a long one scrolling inside a small one. */ .pc-editor-area { flex: 1; width: 100%; border: none; border-radius: 0; resize: none; padding-left: 1rem; padding-right: 1.25rem; tab-size: 4; color: var(--ink); background: var(--surface); outline: none; /* Wrapped, not scrolled sideways. Reading code by dragging a horizontal scrollbar means never seeing a long line whole, and it hides the right-hand end of the file entirely — easy to miss that anything is there. Wrapping keeps every character on screen. The gutter compensates for the extra rows this creates; see the mirror above. */ white-space: pre-wrap; overflow-wrap: break-word; overflow-x: hidden; overflow-y: auto; } .pc-editor-foot { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-top: 1px solid var(--sage-200); background: var(--sage-50); } /* ------------------------------------------------------------ delete flow */ /* Wider than a normal dialog: step one lists everything that will be destroyed, and that list has to be readable rather than scrolled past. */ .pc-delete-flow { max-width: 34rem; } .pc-delete-flow h3 { margin-top: 0; } .pc-delete-list { margin: 0 0 1.1rem; padding-left: 1.2rem; text-align: left; line-height: 1.7; } .pc-delete-list strong { color: var(--ink); } /* ------------------------------------------------------- dialog internals */ /* Dialogs had grown walls of prose with no hierarchy: a label, an input, a hint, a paragraph of explanation and a warning all at the same weight. These give them a spine — one subtitle under the heading, consistent field spacing, quiet hints, and one warning line. */ .pc-dialog-sub { margin: -0.35rem 0 1.1rem; color: var(--muted); font-size: 0.9rem; } .pc-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1.1rem; text-align: left; } .pc-field-hint { color: var(--muted); font-size: 0.8rem; } /* A choice is a real decision, so each option gets its own row with the consequence stated underneath rather than a checkbox trailing a paragraph. */ .pc-choice { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.6rem 0.7rem; border: 1px solid var(--sage-200); border-radius: var(--radius-md); cursor: pointer; } .pc-choice + .pc-choice { margin-top: 0.4rem; } .pc-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); } .pc-choice input { margin-top: 0.15rem; flex: none; } .pc-choice span { display: flex; flex-direction: column; gap: 0.15rem; } .pc-choice strong { font-weight: 600; } .pc-choice em { font-style: normal; color: var(--muted); font-size: 0.83rem; line-height: 1.35; } .pc-dialog-warn { margin: 0 0 1.1rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-md); background: var(--warning-tint); color: var(--warning); font-size: 0.83rem; line-height: 1.4; text-align: left; } /* --------------------------------------------------------------- alerts */ .alert { border: none; border-radius: var(--radius-md); padding: 0.85rem 1.1rem; font-size: 0.92rem; } .alert-success { background: var(--success-tint); color: var(--success); } .alert-danger { background: var(--danger-tint); color: var(--danger); } .alert-warning { background: var(--warning-tint); color: var(--warning); } /* ---------------------------------------------------------------- cards */ .pc-card { background: var(--surface); border: 1px solid var(--sage-100); border-radius: var(--radius-md); padding: 1.5rem; box-shadow: var(--shadow-card); } .pc-stat { display: flex; flex-direction: column; gap: 0.15rem; } .pc-stat-value { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--accent-dark); } .pc-stat-label { font-size: 0.82rem; color: var(--muted); } /* -------------------------------------------------------- dashboard tiles */ .pc-dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1.5rem 0; } .pc-site-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 0.5rem; } .pc-site-tile { display: flex; flex-direction: column; gap: 0.5rem; color: inherit; text-decoration: none; } .pc-site-tile:hover { text-decoration: none; color: inherit; } .pc-site-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .pc-site-tile-name { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 0.98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-site-tile-domain { font-size: 0.82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-site-tile-foot { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.35rem; } .pc-site-tile-runtime { font-family: var(--font-display); font-weight: 600; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent-dark); background: var(--accent-tint); padding: 0.15rem 0.5rem; border-radius: var(--radius-pill); } /* ------------------------------------------------------------- activity */ .pc-activity-list { list-style: none; margin: 0; padding: 0; } .pc-activity-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem 0; border-bottom: 1px solid var(--sage-100); font-size: 0.88rem; flex-wrap: wrap; } .pc-activity-item:last-child { border-bottom: none; } .pc-activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .pc-activity-dot.ok { background: var(--success); } .pc-activity-dot.fail { background: var(--danger); } .pc-activity-action { font-family: var(--font-display); font-weight: 600; color: var(--ink); } .pc-activity-detail { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; } .pc-activity-time { margin-left: auto; color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; } /* -------------------------------------------------------- auth / hero */ .pc-auth-wrap { min-height: calc(100vh - 130px); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 2rem 1.5rem; } .pc-auth-bg { position: absolute; inset: 0; z-index: 0; opacity: 0.55; pointer-events: none; } .pc-auth-card { position: relative; z-index: 1; width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--sage-100); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 2.25rem 2rem; } .pc-auth-card h1 { font-size: 1.5rem; } /* A small it.jo brand dot (blue->violet), used where a page wants a bare brand accent. */ .pc-brand-dot { border-radius: 50%; background: var(--brand-grad); } .pc-auth-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 0.4rem; display: block; } /* -------------------------------------------------------------- landing */ .pc-hero { position: relative; overflow: hidden; border-radius: var(--radius-md); background: radial-gradient(600px 300px at 50% -80px, var(--accent-tint), transparent 70%), var(--sage-50); padding: 4rem 2rem 3rem; text-align: center; margin-bottom: 0; } .pc-hero-bg { position: absolute; inset: 0; opacity: 0.6; } .pc-hero-content { position: relative; z-index: 1; } .pc-hero-icon { display: block; margin: 0 auto 1.5rem; } .pc-hero h1 { font-size: 2.75rem; max-width: 30ch; margin: 0 auto 1.1rem; } .pc-hero h1 .accent { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .pc-hero p { max-width: 44ch; margin: 0 auto 2rem; font-size: 1.05rem; } .pc-hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } /* Small rounded pill with a live-looking dot, echoing the "part of it.jo" style badges used across the company's other product pages -- signals this panel belongs to the same family rather than reading as a bolted-on tool. */ .pc-eyebrow-pill { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--sage-50); border: 1px solid var(--sage-100); color: var(--body-text); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.02em; text-transform: uppercase; padding: 0.4rem 0.9rem; border-radius: var(--radius-pill); margin-bottom: 1.75rem; } .pc-eyebrow-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-grad); flex-shrink: 0; } /* Stats strip -- a full-bleed banded row directly under the hero, same device the reference site uses to state hard facts before any persuasion copy. */ .pc-stats-strip { border: 1px solid var(--sage-100); border-radius: var(--radius-md); background: var(--sage-50); margin: 0 0 4rem; overflow: hidden; } .pc-stats-strip-inner { display: grid; grid-template-columns: repeat(4, 1fr); } .pc-stat-cell { text-align: center; padding: 2rem 0.75rem; border-right: 1px solid var(--sage-100); } .pc-stat-cell:last-child { border-right: none; } .pc-stat-cell .num { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--accent-dark); } .pc-stat-cell .label { margin-top: 0.25rem; font-size: 0.82rem; font-weight: 600; color: var(--muted); } @media (max-width: 700px) { .pc-stats-strip-inner { grid-template-columns: repeat(2, 1fr); } .pc-stat-cell:nth-child(-n+2) { border-bottom: 1px solid var(--sage-100); } } /* How-it-works numbered steps */ .pc-how { background: var(--sage-50); border: 1px solid var(--sage-100); border-radius: var(--radius-md); padding: 3rem 2rem; margin-bottom: 4rem; } .pc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .pc-step-num { font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; color: var(--on-accent); background: var(--accent); width: 2.15rem; height: 2.15rem; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; } .pc-step h3 { margin: 0 0 0.5rem; font-size: 1.03rem; } .pc-step p { margin: 0; font-size: 0.9rem; color: var(--muted); } @media (max-width: 760px) { .pc-steps { grid-template-columns: 1fr; } } /* CTA band */ .pc-cta-band { text-align: center; padding: 0 0 4rem; } .pc-cta-card { background: var(--sage-50); border: 1px solid var(--sage-100); border-radius: 24px; padding: 3.5rem 2.5rem; max-width: 640px; margin: 0 auto; } .pc-cta-card h2 { margin: 0 0 0.75rem; } .pc-cta-card p { color: var(--muted); margin: 0 0 1.75rem; } .pc-section-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-dark); display: block; text-align: center; margin-bottom: 0.4rem; } .pc-section-title { text-align: center; font-size: 1.6rem; margin: 0 auto 2.25rem; max-width: 34ch; } .pc-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-bottom: 3rem; } .pc-feature { display: flex; flex-direction: column; gap: 0.5rem; } .pc-feature-num { font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; color: var(--accent-dark); background: var(--accent-tint); width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 0.4rem; } .pc-feature-num svg { width: 22px; height: 22px; } .pc-feature h3 { margin: 0; font-size: 1.02rem; } .pc-feature p { margin: 0; font-size: 0.9rem; } /* ------------------------------------------------------- page structure */ .pc-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; } .pc-page-header h1 { margin-bottom: 0.35rem; } .pc-page-eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; margin-bottom: 0.6rem; } .pc-page-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.92rem; color: var(--muted); } .pc-page-meta a { color: var(--body-text); } .pc-page-meta a:hover { color: var(--accent-dark); } .pc-page-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .pc-section { margin-bottom: 2.25rem; } .pc-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.9rem; } .pc-section-head h2 { margin: 0; } .pc-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; align-items: start; } @media (max-width: 760px) { .pc-grid-2 { grid-template-columns: 1fr; } } .pc-card h2:first-child, .pc-card h3:first-child { margin-top: 0; } .pc-card-hint { color: var(--muted); font-size: 0.85rem; margin: -0.5rem 0 1rem; line-height: 1.55; } .pc-field-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-end; } .pc-field-row .form-control { min-width: 180px; flex: 1; } .pc-empty-state { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.85rem; } .pc-danger-card { border-color: var(--sage-200); background: linear-gradient(180deg, var(--surface), var(--danger-tint) 340%); } /* ---- row-based control-panel layout ---- A traditional hosting panel reads as dense, scannable rows, not a wall of cards. One shared row primitive serves both the Websites list and the feature lists inside a site, so the two never drift apart visually. */ .pc-rows { border: 1px solid var(--sage-100); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; } .pc-row { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem 1rem; align-items: center; padding: 0.85rem 1.15rem; border-bottom: 1px solid var(--sage-50); } .pc-row:last-child { border-bottom: none; } .pc-row:hover { background: var(--sage-50); } .pc-row-main { min-width: 0; } .pc-row-title { font-weight: 600; color: var(--ink); font-size: 0.95rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .pc-row-sub { color: var(--muted); font-size: 0.85rem; margin-top: 0.15rem; overflow-wrap: anywhere; } /* A badge that is also a control. Where a badge reports a setting, it is the thing people click to change that setting. Wrapping it in a real