/* Two-column flex layout. Children stack at full width on narrow viewports and split horizontally on wide ones — the modifier picks the desktop ratio. */ .row { display: flex; flex-flow: row wrap; align-content: flex-start; } .col-half, .col-brand, .col-menu { width: 100%; } @media (min-width: 768px) { .col-half { width: 50%; } .col-brand { width: 58.3333%; } /* logo + brand text */ .col-menu { width: 41.6667%; } /* main nav */ } /* Horizontal menu with hoverable dropdowns (replaces Pure CSS .menu-*) */ .menu-list, .menu-dropdown { list-style: none; margin: 0; padding: 0; } .menu-item { display: inline-block; position: relative; vertical-align: middle; } .menu-link { display: block; text-decoration: none; white-space: nowrap; } .menu-dropdown { position: absolute; top: 100%; left: 0; z-index: 3; background: var(--bg-dropdown); } .menu-item details { display: inline-block; } .menu-item summary { list-style: none; cursor: pointer; } .menu-item summary:hover { text-decoration: underline; } .menu-item summary::-webkit-details-marker { display: none; } /* Design tokens */ :root { color-scheme: light dark; --radius: 13px; --text-color: #000; --text-muted: #6d6d6d; --link-color: #0088CC; --bg-page: #2c323d; --bg-card: #fbfbfb; --bg-dropdown: #fff; --border-color: #e6e6e6; --bg-screenshot: #bbbbbb; --ss-accent: #e44d26; --na-accent: #407e0d; } @media (prefers-color-scheme: dark) { :root { --text-color: #e6e6e6; --text-muted: #a0a0a0; --link-color: #4ab8e8; --bg-page: #16181d; --bg-card: #1e2229; --bg-dropdown: #1e2229; --border-color: #3a4150; --bg-screenshot: #555; --ss-accent: #ff7045; --na-accent: #7bc241; } } /* Per-app accent: app subpages carry .sysstat or .netanalyzer on so app-themed rules below can reference one --accent token. */ body.sysstat { --accent: var(--ss-accent); } body.netanalyzer { --accent: var(--na-accent); } /* Brand-name color helpers, used wherever an app name appears (header brand text, and on the home page where both apps are listed). */ .ss-color { color: var(--ss-accent); } .na-color { color: var(--na-accent); } /* Pagefind UI ships its own :root rule for these variables; we need higher specificity than :root to win the cascade. */ #search { --pagefind-ui-scale: 0.7; } @media (prefers-color-scheme: dark) { #search { --pagefind-ui-primary: var(--text-color); --pagefind-ui-text: var(--text-color); --pagefind-ui-background: var(--bg-page); --pagefind-ui-border: var(--border-color); --pagefind-ui-tag: var(--border-color); } } /* General appearance */ html { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } hr { border: 0; } p, em, li, ul, ol, blockquote { font-size: 14px; line-height: 22px; } footer { color: var(--text-muted); font-size: 14px; text-align: center; margin-top: -6px; padding-bottom: 20px; padding-left: 36px; padding-right: 36px; } .bullet-list, .md ul, .md ol { padding-bottom: 20px; font-size: 14px; display: block; } .bullet-list li, .md li { padding-bottom: 5px; margin-left: 17px; } .md p { padding-bottom: 25px; } h1, h2, h3, h4, h5, h6 { padding-bottom: 25px; margin-bottom: 0px; font-weight: normal; } h5, .faq-category, .help main h3 { font-weight: bold; padding-bottom: 12px; } .faq-category, .help main h3 { font-size: 0.83em; } a { text-decoration: none; color: var(--accent, var(--link-color)); } body { color: var(--text-color); background: var(--bg-page); } a:hover { text-decoration: underline; } /* Common */ .main-container { margin: auto; max-width: 840px; } .site-wrapper { border-radius: var(--radius); margin: 25px 4px; background: var(--bg-card); } header > .row > .col-brand { display: flex; align-items: flex-start; } header > .row > .col-brand > * + * { margin-left: 15px; } .logo-image { margin-top: 32px; } .logo-text { margin-top: 44px; padding-bottom: 25px; font-size: 2em; line-height: 1.2; } .page-title { font-size: 1.5em; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; -webkit-clip-path: inset(50%); clip-path: inset(50%); white-space: nowrap; } .row { padding-left: 18px; padding-right: 18px; } .menu { margin-top: 48px; display: flex; justify-content: flex-end; } .menu-link, .menu-link:visited { font-size: 14px; padding: .75em .5em; color: var(--text-muted); } .menu-link.current, .menu-link.current:visited { color: var(--accent); font-weight: 500; } .menu-dropdown { border: 1px solid var(--border-color); } .menu-dropdown .menu-link { padding: .75em 1em; } .padded { padding-bottom: 25px; } .padded-light { padding-bottom: 5px; } .md li p { padding-bottom: 0px; } .padded-sides { padding-left: 18px; padding-right: 18px; } .separator, .separator-stacked { border-top: 1px solid var(--border-color); margin-bottom: 25px; display: block; } .separator { margin-left: 36px; margin-right: 36px; } /* Shown only when .col-half siblings stack on narrow viewports; redundant when they're side-by-side. */ .separator-stacked { display: none; } /* Index page */ .index-logo-text { color: var(--text-muted); padding-top: 44px; padding-bottom: 33px; text-align: center; font-size: 2em; line-height: 1.2; } a.blue-link { color: var(--link-color); } a.index-next, a.index-prev { font-size: 15px; } /* Chevron via Material Symbols ligature on a pseudo-element. color inherits from the .blue-link parent so the arrow matches the text. */ a.index-next::after, a.index-prev::before { font-family: 'Material Symbols Outlined'; font-weight: 300; font-size: 11px; vertical-align: middle; /* inline-block opts the pseudo-element out of the parent link's text-decoration so the chevron isn't underlined on hover. */ display: inline-block; } a.index-next::after { content: 'arrow_forward_ios'; margin-left: 2px; margin-right: -2px; /* trim intrinsic right padding inside the glyph cell */ } a.index-prev::before { content: 'arrow_back_ios_new'; margin-right: 2px; margin-left: -2px; /* trim intrinsic left padding inside the glyph cell */ } img.index-icon { margin-right: 20px; float: left; } .index-screenshot { background-color: var(--bg-screenshot); margin-left:18px; margin-right:18px; margin-top: 8px; margin-bottom: 33px; border-radius: var(--radius); border: 1px solid var(--border-color); /* keep the 320x320 bitmap pixel-exact; the border lives outside */ box-sizing: content-box; } .index-second-align { text-align: right; } /* App page */ .swiper { margin: 5px 18px 12px auto; width: 320px; height: 320px; border-radius: var(--radius); border: 1px solid var(--border-color); /* keep the 320x320 slides pixel-exact; the border lives outside */ box-sizing: content-box; } .swiper-slide { border-radius: var(--radius); } .slider-caption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.7); padding: 5px 10px 7px 10px; text-align: center; color: #fff; font-size: 14px; } .app-video { display: block; margin-top: 30px; margin-bottom: 27px; /* Match the .separator divider so the video aligns with it at every size. */ margin-left: 36px; margin-right: 36px; } .app-video lite-youtube { /* Cap the width and center within .app-video so the video stays centered on wide screens (lite-youtube otherwise left-aligns at its 720px default). */ max-width: 570px; margin-left: auto; margin-right: auto; border-radius: var(--radius); overflow: hidden; } .app-media-container { margin-bottom: 18px; /* Pushed to the bottom of the col-half (which opts into flex column via .col-flex) so it aligns with the rating block in the opposite column. Falls back to 0 in non-flex parents — harmless. */ margin-top: auto; } .app-appstore-row { display: flex; flex-wrap: wrap; align-items: flex-end; } .app-appstore-row > * + * { margin-left: 16px; } .app-appstore-item { display: flex; flex-direction: column; align-items: center; } .app-appstore-item > * + * { margin-top: 2px; } .app-appstore-link { font-size: 12px; color: var(--link-color); } /* App Store rating block — shown in the same col-half as the hero carousel, pushed to the bottom of the column (parent opts into flex column via .col-flex) so its bottom edge aligns with the App Store badges in the opposite column. Bottom margin matches .app-media-container so both end at the same Y. */ .app-rating { display: flex; flex-direction: column; align-items: center; width: 320px; margin: auto 18px 18px auto; } .app-rating > * + * { margin-top: 6px; } /* Opt-in flex column for the hero col-halves so the auto margin-top above pushes the badges / rating to the bottom edge. Applied only where needed (overview pages) — other .col-half usages (home page, feature sections) keep their default block flow, which matters for things like float on .index-icon. */ .col-half.col-flex { display: flex; flex-direction: column; } .app-rating-stars { position: relative; width: fit-content; font-size: 22px; line-height: 1; letter-spacing: 1px; } .app-rating-stars-bg { color: var(--text-muted); opacity: 0.5; } .app-rating-stars-fg { position: absolute; top: 0; right: auto; bottom: 0; left: 0; color: #f5a623; overflow: hidden; white-space: nowrap; } .app-rating-meta { font-size: 12px; color: var(--text-muted); } .app-rating-meta strong { color: var(--text-color); font-weight: 700; } /* Help page */ .help-image { display: block; margin-left: auto; margin-right: auto; font-size: 28px; line-height: 1; font-weight: 300; opacity: 0.7; } .fixed-size-image { width: 28px; height: 28px; overflow: hidden; margin-right: 15px; float: left; } .help-index { font-size: 19px; font-weight: normal; padding-top: 2px; padding-bottom: 25px; display: block; } /************************/ @media only screen and (max-width: 767px) { .main-container { max-width: 560px; } .site-wrapper { margin: 10px 4px; } .logo-text { width: 180px; margin-top: 25px; padding-bottom: 6px; } .index-logo-text { padding-top: 25px; margin-left: 20px; margin-right: 20px; } .separator { margin-left: 20px; margin-right: 20px; } .row { padding-left: 10px; padding-right: 10px; } .padded-sides { padding-left: 10px; padding-right: 10px; } a.index-screenshot-link { display: none; } .separator-stacked { display: block; } .menu { margin-top: 0; justify-content: flex-start; } .swiper { margin: 5px auto 12px auto; } .app-rating { margin: 0 auto 28px auto; } .app-video { margin-left: 20px; margin-right: 20px; } } @media only screen and (max-width: 370px) { .main-container { min-width: 320px; } .site-wrapper { min-width: 320px; margin: 10px 0px; } .row { padding-left: 0px; padding-right: 0px; } .separator { margin-left: 10px; margin-right: 10px; } .app-video { margin-left: 10px; margin-right: 10px; } .swiper { border: none; } }