/* PublicWWW / HiddenWWW theme on top of Bootstrap 5.3. * * Light and dark are both driven by data-bs-theme on , which the server * sets from a cookie (see templates/header.php). When the visitor has made no * choice the attribute is absent and prefers-color-scheme decides, so the page * is correct on the very first paint - no flash, and no JavaScript anywhere. */ /* ---------------------------------------------------------------- palette */ :root { --pw-brand: #1a6fd4; /* was #3276b1 - same family, cleaner */ --pw-brand-hover: #1559ab; --pw-page: #f4f6f9; --pw-surface: #ffffff; --pw-border: #e2e6ec; --pw-text: #1f2933; --pw-muted: #6b7784; --pw-code: #0b4fa2; --pw-mark: #fff3bf; --pw-header-line: #1a6fd4; --pw-img-pad: transparent; --pw-bar-track: #e3e8ef; --pw-search-border: #9aa7b6; --pw-search-border-hover: #6b7784; } [data-bs-theme="dark"] { --pw-brand: #6ea8fe; --pw-brand-hover: #8fbcff; --pw-page: #11161d; --pw-surface: #1a212b; --pw-border: #2b3542; --pw-text: #dfe6ef; --pw-muted: #93a1b1; --pw-code: #86b7ff; --pw-mark: #4a3f14; --pw-header-line: #2b5fa5; --pw-img-pad: #e9edf2; --pw-bar-track: #2a3340; --pw-search-border: #4a5768; --pw-search-border-hover: #6a7889; } @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) { --pw-brand: #6ea8fe; --pw-brand-hover: #8fbcff; --pw-page: #11161d; --pw-surface: #1a212b; --pw-border: #2b3542; --pw-text: #dfe6ef; --pw-muted: #93a1b1; --pw-code: #86b7ff; --pw-mark: #4a3f14; --pw-header-line: #2b5fa5; --pw-img-pad: #e9edf2; --pw-bar-track: #2a3340; --pw-search-border: #4a5768; --pw-search-border-hover: #6a7889; } } /* Hand the palette to Bootstrap so its own components follow along. */ :root, [data-bs-theme="dark"] { --bs-primary: var(--pw-brand); --bs-link-color: var(--pw-brand); --bs-link-hover-color: var(--pw-brand-hover); --bs-body-color: var(--pw-text); --bs-body-bg: var(--pw-page); --bs-border-color: var(--pw-border); --bs-secondary-color: var(--pw-muted); } /* ------------------------------------------------------------------- base */ body { background: var(--pw-page); color: var(--pw-text); font-size: 15px; line-height: 1.55; -webkit-text-size-adjust: 100%; } a { color: var(--pw-brand); text-decoration: none; } a:hover { color: var(--pw-brand-hover); text-decoration: underline; } h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; } h1 { font-size: 1.9rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.15rem; } .text-muted, .pw-muted { color: var(--pw-muted) !important; } /* The old markup wraps most content in .section / .service-wrapper. Keep the * names so nothing has to be renamed, but give them a modern surface. */ .section { padding: 28px 0; } .section-white { background: var(--pw-surface); } .service-wrapper { background: var(--pw-surface); border: 1px solid var(--pw-border); border-radius: 10px; padding: 20px; margin-bottom: 22px; } /* ----------------------------------------------------------------- header */ .pw-header { background: var(--pw-surface); border-bottom: 1px solid var(--pw-border); box-shadow: 0 1px 3px rgba(16, 24, 40, .04); position: sticky; top: 0; z-index: 1020; } [data-bs-theme="dark"] .pw-header { box-shadow: none; } .pw-header .pw-bar { display: flex; align-items: center; gap: 4px; min-height: 56px; } .pw-logo { font-weight: 700; font-size: 1.12rem; color: var(--pw-text) !important; white-space: nowrap; margin-right: 10px; } .pw-logo:hover { text-decoration: none; color: var(--pw-brand) !important; } /* The mark and the wordmark read as one logo, so the icons inherit the * logo's colour instead of keeping their own - in the resting state and * on hover alike. */ .pw-logo .bi { color: inherit; } .pw-nav { display: flex; align-items: center; gap: 2px; } .pw-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 8px; color: var(--pw-text); white-space: nowrap; } .pw-nav a:hover { background: rgba(26, 111, 212, .09); text-decoration: none; } .pw-nav a.active { color: var(--pw-brand); font-weight: 600; } .pw-spacer { flex: 1 1 auto; } /* Theme switch: three plain links, no script. The server marks the live one. */ .pw-theme { display: inline-flex; border: 1px solid var(--pw-border); border-radius: 8px; overflow: hidden; } .pw-theme a { padding: 6px 9px; color: var(--pw-muted); line-height: 1; display: inline-flex; align-items: center; } .pw-theme a:hover { background: rgba(26, 111, 212, .09); color: var(--pw-brand); text-decoration: none; } .pw-theme a.on { background: var(--pw-brand); color: #fff; } /* Mobile menu without JavaScript: a hidden checkbox drives the panel. */ .pw-burger, .pw-burger-cb { display: none; } @media (max-width: 991.98px) { .pw-burger { display: inline-flex; align-items: center; padding: 8px 10px; border: 1px solid var(--pw-border); border-radius: 8px; color: var(--pw-text); cursor: pointer; font-size: 1.1rem; } .pw-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--pw-surface); border-bottom: 1px solid var(--pw-border); box-shadow: 0 8px 20px rgba(16, 24, 40, .10); padding: 6px; } .pw-burger-cb:checked ~ .pw-nav { display: flex; } .pw-nav a { padding: 12px 14px; border-radius: 8px; } .pw-header .pw-bar { position: relative; } } /* ----------------------------------------------------------------- search */ .pw-search { display: flex; gap: 8px; } .pw-search .form-control { font-size: 1rem; } .pw-search .btn { white-space: nowrap; } @media (max-width: 575.98px) { .pw-search .form-control { font-size: 16px; } /* stops iOS zooming in */ .pw-search .btn { padding-left: 14px; padding-right: 14px; } .pw-search .btn .pw-btn-text { display: none; } /* icon only, keeps it short */ } /* --------------------------------------------------------------- controls */ .btn-primary { --bs-btn-bg: var(--pw-brand); --bs-btn-border-color: var(--pw-brand); --bs-btn-hover-bg: var(--pw-brand-hover); --bs-btn-hover-border-color: var(--pw-brand-hover); --bs-btn-active-bg: var(--pw-brand-hover); } .form-control, .form-select { background: var(--pw-surface); border-color: var(--pw-border); color: var(--pw-text); } .form-control:focus { border-color: var(--pw-brand); box-shadow: 0 0 0 .2rem rgba(26, 111, 212, .18); background: var(--pw-surface); color: var(--pw-text); } .badge { font-weight: 600; } /* ------------------------------------------------------------------ table */ .table { --bs-table-bg: transparent; color: var(--pw-text); } .table > :not(caption) > * > * { border-bottom-color: var(--pw-border); } .table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pw-muted); font-weight: 600; border-bottom: 1px solid var(--pw-border); } /* ------------------------------------------------------------------ footer */ .pw-footer { background: var(--pw-surface); border-top: 1px solid var(--pw-border); margin-top: 40px; padding: 28px 0 20px; color: var(--pw-muted); } .pw-footer h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pw-muted); margin-bottom: 12px; } .pw-footer a { color: var(--pw-text); } .pw-footer a:hover { color: var(--pw-brand); } .pw-footer ul { list-style: none; padding: 0; margin: 0; } .pw-footer li { margin-bottom: 7px; } .pw-copyright { border-top: 1px solid var(--pw-border); margin-top: 20px; padding-top: 16px; font-size: .86rem; } /* ------------------------------------------------------- legacy shims * Markup still carrying Bootstrap 3 names, kept working so the migration can * proceed page by page instead of in one risky sweep. */ .hidden-xs { } @media (max-width: 767.98px) { .hidden-xs { display: none !important; } } .visible-xs { display: none !important; } @media (max-width: 767.98px) { .visible-xs { display: inline-block !important; } } .btn-default { --bs-btn-color: var(--pw-text); --bs-btn-bg: var(--pw-surface); --bs-btn-border-color: var(--pw-border); --bs-btn-hover-bg: rgba(26, 111, 212, .08); --bs-btn-hover-border-color: var(--pw-brand); --bs-btn-hover-color: var(--pw-text); } .well { background: var(--pw-surface); border: 1px solid var(--pw-border); border-radius: 10px; padding: 18px; } .label { display: inline-block; padding: .3em .55em; font-size: .78em; font-weight: 600; border-radius: 6px; color: #fff; } .label-info { background: var(--pw-brand); } .label-primary { background: var(--pw-brand); } .label-default { background: var(--pw-muted); } .label-warning { background: #b7791f; } .label-danger { background: #c0392b; } .label-success { background: #2f855a; } /* Brand logos are mostly dark-on-transparent PNGs; give them a light backing * plate in the dark theme so they stay legible. The docs gallery is listed * here too: it is the same tiles, and it lost the .service-wrapper the old * examples page wrapped them in. */ .service-wrapper a > img, .pw-docs-gallery a > img { background: var(--pw-img-pad); border-radius: 8px; padding: 4px 8px; box-sizing: content-box; max-width: 100%; height: auto; } /* ================= redesign fixes, round 2 ================= */ /* (1) The logo mark is the brand - chevrons hug the lens. */ .pw-logo .pw-mark { color: inherit; white-space: nowrap; } .pw-logo .pw-mark .bi { font-size: .8em; vertical-align: 0; } /* the chevrons are thin at this size - thicken them with a matching stroke */ .pw-logo .pw-mark .bi-chevron-left, .pw-logo .pw-mark .bi-chevron-right { -webkit-text-stroke: 1.7px currentColor; } .pw-logo .pw-mark .bi-search { font-size: 1em; margin: 0 -1px; } /* (6) Results table: pin the colours to our own variables so the cell text * never depends on how a given browser resolves Bootstrap's emphasis colour * (Chromium was rendering it dark-on-dark). */ .table { --bs-table-bg: transparent; --bs-table-color: var(--pw-text); color: var(--pw-text); } .table > :not(caption) > * > * { color: var(--pw-text); background-color: transparent; } .table thead th { color: var(--pw-muted); } .table a { color: var(--pw-brand); } /* (7,8) Header row: nav and the two right-hand groups must not shrink or drift * toward the logo when the window narrows. The single flexible gap sits * between the logo and everything else. */ .pw-header .pw-bar { flex-wrap: nowrap; } .pw-logo { flex: 0 0 auto; } .pw-nav { flex: 0 1 auto; } .pw-theme { flex: 0 0 auto; margin-left: 8px; } /* the desktop spacer after the logo pushes the rest to the right edge */ .pw-header .pw-bar > .pw-spacer { display: none; } @media (min-width: 992px) { .pw-logo { margin-right: 20px; order: 0; } .pw-header .pw-bar > .pw-spacer { display: block; order: 1; } /* flexible gap after the logo */ .pw-nav { order: 2; } /* nav sits on the right, by the switch */ .pw-nav .pw-spacer { display: none; } /* the in-nav spacer is for mobile only */ .pw-theme { order: 3; } } /* (2) Example tiles: equal height/width cells, logo centered, signature * centered underneath. */ .pw-example { text-align: center; padding: 14px 10px; margin-bottom: 8px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; background: transparent; border: 0; border-radius: 0; } /* Logos come in every size; give them one display box and let the small ones * scale up to fill it (contain keeps aspect ratio, never distorts). */ .pw-example .pw-thumb { height: 56px; display: flex; align-items: center; justify-content: center; } .pw-example .pw-thumb img { max-height: 48px; max-width: 100%; width: auto; height: auto; object-fit: contain; } .pw-example .pw-sig { display: block; width: 100%; text-align: center; word-break: break-word; font-size: .92rem; } /* (9) Tabs on the examples page - styled without Bootstrap's JS tab plugin, * they are just links to other sections. */ .nav-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--pw-border); list-style: none; padding: 0; margin: 0 0 22px; } .nav-tabs > li > a { display: inline-block; padding: 9px 14px; border-radius: 8px 8px 0 0; color: var(--pw-muted); border: 1px solid transparent; border-bottom: none; } .nav-tabs > li > a:hover { color: var(--pw-brand); background: rgba(26,111,212,.07); text-decoration: none; } .nav-tabs > li.active > a { color: var(--pw-text); background: var(--pw-surface); border-color: var(--pw-border); font-weight: 600; } /* (10) The open-in-new-tab icon next to result URLs. */ .pw-ext { color: var(--pw-muted); margin-right: 5px; } .pw-ext:hover { color: var(--pw-brand); } /* (3,4,5,6) Login / signup / forgot forms still use Bootstrap 3 layout * classes (row/col gutters, form-horizontal, col-sm-offset). Instead of * rewriting each of the five form blocks, normalise the structure here: * the empty gutter column collapses, the column holding the form goes full * width, and .basic-login centers itself in it. */ .section .row > [class*="col-"]:empty { display: none; } /* Center the whole column that holds the form, so the links below it ("Don't * have an account?" / "Forgot password?") share the form's left edge. */ .section .row > [class*="col-"]:has(.basic-login) { flex: 0 0 100%; max-width: 420px; width: 100%; margin: 0 auto; text-align: left; } .basic-login { max-width: 100%; margin: 0; } .basic-login .form-group { margin-bottom: 18px; } .basic-login .control-label { display: block; margin-bottom: 6px; font-weight: 600; } .basic-login .col-sm-9, .basic-login .col-sm-3, .basic-login .col-sm-offset-3 { width: 100%; max-width: 100%; margin-left: 0; padding: 0; } /* clear space above the submit button so it is not glued to the last field */ .basic-login .form-group:last-of-type { margin-top: 26px; } /* (3) form submit buttons are solid brand blue like the search button, so * they never read as another input field */ .basic-login .btn { width: 100%; --bs-btn-color: #fff; --bs-btn-bg: var(--pw-brand); --bs-btn-border-color: var(--pw-brand); --bs-btn-hover-bg: var(--pw-brand-hover); --bs-btn-hover-border-color: var(--pw-brand-hover); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--pw-brand-hover); } /* the offset column was the label gutter; not needed once labels stack */ .col-sm-offset-3 { margin-left: 0; } /* space between a field and the button that follows it */ .basic-login .btn { margin-top: 4px; } .basic-login .form-control { margin-bottom: 4px; } /* the old "cols-sm-10" typo and the empty gutter columns collapse cleanly */ .basic-login .col-sm-9, .basic-login .col-sm-3 { width: 100%; } /* (7,8) The colour switch must never be clipped. In the tablet band the nav * is a burger panel, so the bar only holds the logo, the burger and the * switch - which always fit. The switch keeps to the right and never shrinks. */ @media (max-width: 991.98px) { .pw-header .pw-bar { flex-wrap: nowrap; } .pw-nav { position: absolute; } /* out of the bar's flow */ .pw-logo { flex: 1 1 auto; } /* logo takes the slack... */ .pw-burger { margin-left: auto; order: 2; } /* ...pushing burger to the right */ .pw-theme { order: 3; margin-left: 8px; } /* next to the burger */ } /* A .label used as a link (the "use cases" / "examples" buttons) must keep its * white-on-colour text on hover - the link-hover colour was close to the badge * background and the text all but vanished. Do not change the colour on hover, * just underline it. */ a.label { color: #fff; } a.label:hover, a.label:focus { color: #fff; text-decoration: underline; } /* Home page reuses .pw-example without a .pw-thumb wrapper: normalise any * direct image the same way and drop the
spacers the old markup used. */ .pw-example br { display: none; } /* On the home page the image sits in a plain (no .pw-thumb). Give that * first link the same fixed thumb box as /examples so the logos match. */ .pw-example > a:first-child { display: flex; align-items: center; justify-content: center; height: 56px; width: 100%; } .pw-example > a:first-child img { max-height: 48px; max-width: 100%; width: auto; height: auto; object-fit: contain; } .pw-example > a { display: block; width: 100%; text-align: center; word-break: break-word; } .pw-example > a:not(.pw-thumb):not(:first-child) { font-size: .9rem; line-height: 1.3; } /* (4) Sticky footer: keep the footer at the bottom of the viewport on short * pages (login, forgot). body is a column that fills the height and #wrap * grows to take the slack. */ html, body { height: 100%; } body { display: flex; flex-direction: column; min-height: 100vh; } #wrap { flex: 1 0 auto; } .pw-footer { flex-shrink: 0; } /* The "Need more results? ... query syntax" hint sits between the search box * and the result count. Pull it up toward the field and leave more room below, * so it reads as belonging to the input, not to the count. */ .pw-searchhint { display: block; margin-top: 6px; margin-bottom: 22px; } /* The search box is the main thing on the page, so its idle border must read * clearly - the default input border is too faint. Give it a stronger border * and a touch more height in both themes; it still lifts on focus. */ .pw-search .form-control, .pw-search #maininput { border: 2px solid var(--pw-search-border); padding-top: .5rem; padding-bottom: .5rem; } .pw-search .form-control:hover, .pw-search #maininput:hover { border-color: var(--pw-search-border-hover); } .pw-search .form-control:focus, .pw-search #maininput:focus { border-color: var(--pw-brand); box-shadow: 0 0 0 .2rem rgba(26, 111, 212, .18); } /* results page: the query field is a plain #maininput inside a table, not a * .pw-search flex row, so target it directly too */ #maininput { border: 2px solid var(--pw-search-border); } #maininput:hover { border-color: var(--pw-search-border-hover); } #maininput:focus { border-color: var(--pw-brand); box-shadow: 0 0 0 .2rem rgba(26, 111, 212, .18); } /* ===================== search results ===================== */ .pw-results-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; } .pw-results-count { margin: 0; font-size: 1.15rem; } .pw-results-count { color: var(--pw-text); } .pw-results-actions { display: flex; flex-wrap: wrap; gap: 6px; } .pw-results-actions a { text-decoration: none; } .pw-results { display: flex; flex-direction: column; } .pw-result { display: flex; gap: 16px; padding: 12px 4px; } /* rank: quiet metadata in its own left column, aligned figures */ .pw-result-rank { flex: 0 0 74px; color: var(--pw-muted); font-variant-numeric: tabular-nums; font-size: .9rem; padding-top: 2px; white-space: nowrap; } .pw-result-body { flex: 1 1 auto; min-width: 0; } .pw-result-url { font-size: 1.02rem; line-height: 1.4; margin-bottom: 6px; word-break: break-word; } .pw-result-url a { color: var(--pw-brand); font-weight: 500; } .pw-result-url .pw-ext { margin-right: 6px; color: var(--pw-muted); } .pw-result-url a:hover .pw-ext { color: var(--pw-brand); } .pw-result-same { margin-left: 10px; font-size: .85rem; color: var(--pw-muted); } .pw-result-locked { display: flex; align-items: center; gap: 10px; color: var(--pw-muted); } /* Wide enough, and the results become three aligned columns - rank, url, match - instead of the url and its snippets stacked. A url is short and a snippet is long, so stacking them left a ragged left edge and pushed every result further down the page. The whole list is one grid rather than a flex row per result, because that is what makes the url column size itself to the longest url on the page and stay aligned down every row. fit-content caps it so one enormous url cannot take the row; below that cap the column simply grows to fit, which is the point - no url gets wrapped or cut while there is width to spare. display:contents lifts the cells out of their wrappers into the grid, so every row must contribute exactly three of them. That is why the template emits an empty snippets cell when a result has none: two cells would push the next row's rank into the snippet column. Below 992px none of this applies and the old stacked layout stands - there is no room for three columns on a phone. */ @media (min-width: 992px) { .pw-results { display: grid; /* The url track: never below 32%, so it does not jump about as you page through and the urls stay where your eye left them, and never above 48%, so one long url cannot take the row. fit-content() is not allowed inside minmax(), so the ceiling is a max-width on the cell - an item's own max-width clamps what it contributes to a max-content track, which comes to the same thing. */ grid-template-columns: max-content minmax(32%, max-content) minmax(0, 1fr); column-gap: 22px; /* So the ceiling below can be a share of this list rather than of the window - the two differ by the page margins and by which container width the breakpoint is on. */ container-type: inline-size; } /* An item's own max-width clamps what it contributes to a max-content track, so this is the 48% ceiling. A browser too old for container queries ignores it and gets the natural width, which is a few per cent wider at the narrowest desktop and correct everywhere above it. */ .pw-result-url { max-width: 48cqw; } .pw-result, .pw-result .pw-result-body { display: contents; } /* The row padding lived on .pw-result, which no longer generates a box. */ .pw-result-rank, .pw-result-url, .pw-result-snips { padding: 12px 0; } .pw-result-url { margin-bottom: 0; } } /* snippets: monospace code, each on its own line, match highlighted */ .pw-result-snips { display: flex; flex-direction: column; gap: 3px; } .pw-snip { display: block; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: .84rem; line-height: 1.5; color: var(--pw-muted); background: transparent; white-space: pre-wrap; word-break: break-all; overflow-wrap: anywhere; padding: 0; } .pw-snip mark { background: var(--pw-mark); color: var(--pw-text); padding: 0 1px; border-radius: 2px; font-weight: 600; } .pw-snip-more { font-size: .82rem; color: var(--pw-muted); font-style: italic; } /* phones: rank moves above the url as a small chip, body takes full width */ @media (max-width: 575.98px) { .pw-result { flex-direction: column; gap: 6px; } .pw-result-rank { flex: none; font-size: .78rem; padding: 0; } .pw-result-rank::before { content: "rank "; opacity: .7; } .pw-result-locked { flex-wrap: wrap; } } /* (1) locked-row buttons ("Upgrade to view" / "Sign up to view"): the theme's * brand blue goes light in dark mode, so white text on it was low-contrast and * the surrounding muted link colour bled through. Pin a solid readable blue * with white text in both themes. */ .pw-result-locked .btn { --bs-btn-color: #fff; --bs-btn-bg: #1a6fd4; --bs-btn-border-color: #1a6fd4; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1559ab; --bs-btn-hover-border-color: #1559ab; color: #fff; font-weight: 600; } /* (2) Pagination: the markup is Bootstrap 3 (.pagination > li > a). Give it the * look of separate BS5 page buttons. */ .pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 24px 0 8px; justify-content: center; } .pagination > li > a { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--pw-border); border-radius: 8px; background: var(--pw-surface); color: var(--pw-brand); text-decoration: none; font-variant-numeric: tabular-nums; } .pagination > li > a:hover { background: rgba(26, 111, 212, .09); border-color: var(--pw-brand); text-decoration: none; } .pagination > li.active > a { background: var(--pw-brand); border-color: var(--pw-brand); color: #fff; font-weight: 600; } .pagination > li.disabled > a { color: var(--pw-muted); background: transparent; border-color: transparent; cursor: default; pointer-events: none; } /* ===================== profile ===================== */ .pw-profile { max-width: 780px; padding-bottom: 30px; } .pw-card { background: var(--pw-surface); border: 1px solid var(--pw-border); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; } .pw-card-label { display: block; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pw-muted); margin-bottom: 4px; } .pw-section-title { font-size: .95rem; font-weight: 600; color: var(--pw-muted); margin: 22px 0 10px; } /* account + plan cards: content left, actions right, stacking on phones */ .pw-account, .pw-plan { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .pw-account-id { min-width: 0; } .pw-account-value { font-size: 1.05rem; font-weight: 600; word-break: break-all; } .pw-account-value code { font-size: 1rem; color: var(--pw-text); background: transparent; padding: 0; } .pw-account-note { font-size: .84rem; color: var(--pw-muted); margin-top: 4px; } .pw-account-actions, .pw-plan a.btn { flex: 0 0 auto; } .pw-account-actions { display: flex; flex-wrap: wrap; gap: 8px; } .pw-plan-name { font-size: 1.25rem; font-weight: 700; } .pw-plan-valid { font-size: .9rem; color: var(--pw-muted); margin-top: 3px; } .pw-plan-warn { color: var(--pw-danger, #d9534f); } .pw-plan.is-free { border-style: dashed; } /* daily quotas: the bar fills with what has been used today */ .pw-quotas .pw-quota + .pw-quota { margin-top: 16px; } .pw-quota-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; } .pw-quota-label { font-weight: 500; } .pw-quota-num { font-size: .88rem; color: var(--pw-muted); font-variant-numeric: tabular-nums; } .pw-quota-num b { color: var(--pw-text); font-size: 1rem; } .pw-quota-bar { height: 8px; border-radius: 99px; background: var(--pw-bar-track); overflow: hidden; } .pw-quota-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--pw-brand); } .pw-quota-bar.is-low > span { background: #e0a800; } .pw-quota-bar.is-full > span { background: #d9534f; } /* plan limits: label left, value right, one per line */ .pw-limit { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--pw-border); } .pw-limit:first-child { border-top: 0; padding-top: 0; } .pw-limit:last-child { padding-bottom: 0; } .pw-limit-label { color: var(--pw-muted); } .pw-limit-value { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; } @media (max-width: 575.98px) { .pw-account, .pw-plan { align-items: flex-start; flex-direction: column; } .pw-plan a.btn { width: 100%; } .pw-account-actions .btn { flex: 1 1 auto; } } /* ===================== invoice ===================== */ .pw-invoice { max-width: 940px; margin: 0 auto; padding-bottom: 30px; } .pw-inv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .pw-inv-num { font-size: 1.6rem; font-weight: 700; margin: 0; } .pw-inv-meta { color: var(--pw-muted); font-size: .92rem; margin-top: 4px; } .pw-inv-total { text-align: right; } .pw-inv-sum { font-size: 1.9rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .pw-inv-status { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 10px; border-radius: 99px; font-size: .82rem; font-weight: 600; } .pw-inv-status.is-paid { background: rgba(25, 135, 84, .14); color: #198754; } .pw-inv-status.is-pending { background: rgba(224, 168, 0, .16); color: #a67c00; } .pw-inv-status.is-expired { background: rgba(217, 83, 79, .14); color: #d9534f; } [data-bs-theme="dark"] .pw-inv-status.is-paid { color: #4ac07f; } [data-bs-theme="dark"] .pw-inv-status.is-pending { color: #e0a800; } .pw-txid { font-size: .82rem; word-break: break-all; background: transparent; } .pw-inv-expired p { color: var(--pw-muted); } /* two payment methods of equal weight, side by side */ .pw-pays { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; } .pw-pay { display: flex; flex-direction: column; margin-bottom: 0; } .pw-pay-head { font-weight: 600; font-size: 1.05rem; margin-bottom: 14px; } .pw-pay-head .bi { color: var(--pw-brand); margin-right: 4px; } .pw-pay-cards { max-width: 100%; height: auto; margin-bottom: 16px; } [data-bs-theme="dark"] .pw-pay-cards { background: #fff; /* the card logos are dark-on-transparent */ border-radius: 6px; padding: 4px 6px; } /* payment option rows behave like selectable cards */ .pw-pay-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--pw-border); border-radius: 8px; cursor: pointer; } .pw-pay-opt:hover { border-color: var(--pw-brand); } .pw-pay-opt input { margin-top: 3px; flex: 0 0 auto; } .pw-pay-opt span { display: flex; flex-direction: column; } .pw-pay-opt small { color: var(--pw-muted); } .pw-pay-opt:has(input:checked) { border-color: var(--pw-brand); background: rgba(26, 111, 212, .06); } .pw-pay-go { width: 100%; margin-top: 4px; } .pw-pay-notes { list-style: none; padding: 0; margin: 14px 0 0; font-size: .86rem; color: var(--pw-muted); } .pw-pay-notes li { margin-bottom: 3px; } /* coin tabs: hidden radio + label, panel revealed by sibling selector (no JS) */ .pw-coin-cb { position: absolute; opacity: 0; pointer-events: none; } .pw-coins { display: flex; flex-wrap: wrap; gap: 6px; } .pw-coin-tab { order: -1; /* all tabs stay on the top row */ padding: 5px 14px; border: 1px solid var(--pw-border); border-radius: 8px; font-weight: 600; font-size: .88rem; color: var(--pw-muted); cursor: pointer; user-select: none; } .pw-coin-tab:hover { border-color: var(--pw-brand); color: var(--pw-brand); } .pw-coin-cb:checked + .pw-coin-tab { background: var(--pw-brand); border-color: var(--pw-brand); color: #fff; } .pw-coin-cb:focus-visible + .pw-coin-tab { outline: 2px solid var(--pw-brand); outline-offset: 2px; } .pw-coin-panel { display: none; width: 100%; padding-top: 14px; } #coin1:checked ~ #coinpanel1, #coin2:checked ~ #coinpanel2, #coin3:checked ~ #coinpanel3, #coin4:checked ~ #coinpanel4, #coin5:checked ~ #coinpanel5, #coin6:checked ~ #coinpanel6, #coin7:checked ~ #coinpanel7, #coin8:checked ~ #coinpanel8 { display: block; } .pw-coin-name { font-weight: 600; margin-bottom: 10px; } .pw-coin-field { display: block; margin-bottom: 10px; } .pw-mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: .86rem; } .pw-coin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; } .pw-coin-note { font-size: .84rem; color: var(--pw-muted); } @media (max-width: 575.98px) { .pw-inv-total { text-align: left; } .pw-coin-actions .btn { flex: 1 1 auto; } } .pw-inv-paidon { color: var(--pw-muted); font-size: .85rem; margin-left: 6px; } .pw-inv-cell-amount { font-variant-numeric: tabular-nums; font-weight: 600; } /* Native form controls (radios, checkboxes, scrollbars) follow the OS scheme * because the document advertises "light dark". When the visitor picks a * theme explicitly, pin the scheme too - otherwise an unchecked radio keeps * its dark interior while the page around it is light. */ [data-bs-theme="light"] { color-scheme: light; } [data-bs-theme="dark"] { color-scheme: dark; } .pw-pay-opt input[type="radio"] { accent-color: var(--pw-brand); } /* Prices for a logged-in visitor are buy links carrying a bare .btn class, * which Bootstrap 5 leaves unstyled - they read as plain text. Give the buy * links a real button of their own. */ a.btn[href^="/ad/buy.html"] { display: inline-block; margin: 4px 3px; padding: 7px 16px; border: 1px solid var(--pw-brand); border-radius: 8px; background: transparent; color: var(--pw-brand); font-weight: 600; line-height: 1.3; white-space: nowrap; } a.btn[href^="/ad/buy.html"]:hover, a.btn[href^="/ad/buy.html"]:focus { background: var(--pw-brand); border-color: var(--pw-brand); color: #fff; text-decoration: none; } a.btn[href^="/ad/buy.html"] b { font-size: 1.02rem; } a.btn[href^="/ad/buy.html"] small { opacity: .85; margin-left: 2px; } /* copy-to-clipboard control next to the crypto amount / address */ .pw-copyrow { display: flex; gap: 6px; } .pw-copyrow .form-control { flex: 1 1 auto; min-width: 0; } .pw-copy { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 0 12px; border: 1px solid var(--pw-border); border-radius: 8px; background: var(--pw-surface); color: var(--pw-text); font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .pw-copy:hover { border-color: var(--pw-brand); color: var(--pw-brand); } .pw-copy .pw-copy-ok { display: none; } .pw-copy.is-done { border-color: #198754; color: #198754; } .pw-copy.is-done .pw-copy-txt { display: none; } .pw-copy.is-done .pw-copy-ok { display: inline; } @media (max-width: 400px) { .pw-copy .pw-copy-txt, .pw-copy .pw-copy-ok { display: none; } .pw-copy.is-done .pw-copy-ok { display: none; } } /* the coin symbol sits outside the input so only the figure is copied */ .pw-coin-sym { flex: 0 0 auto; display: inline-flex; align-items: center; font-weight: 600; color: var(--pw-muted); font-size: .88rem; } /* ============================================================ documentation */ /* /docs/ - a sidebar of sections next to the page, collapsing to a tappable summary on a phone. The sidebar is a
so it needs no javascript: open by default, forced open and stripped of its marker on a wide screen. */ .pw-docs { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 32px; align-items: start; } /* --- the sidebar --- */ .pw-docs-nav { position: sticky; top: 16px; background: var(--pw-surface); border: 1px solid var(--pw-border); border-radius: 12px; padding: 8px; } .pw-docs-nav-cb, .pw-docs-nav-toggle { display: none; } /* the phone affordance, see the media query */ .pw-docs-nav nav { display: flex; flex-direction: column; } .pw-docs-nav-sect { display: block; padding: 8px 12px; border-radius: 8px; color: var(--pw-text); text-decoration: none; font-weight: 600; font-size: .93rem; } .pw-docs-nav-sect:hover { background: var(--pw-page); color: var(--pw-brand); } .pw-docs-nav-sect.active { background: var(--pw-brand); color: #fff; } .pw-docs-nav-sect i { margin-right: 6px; opacity: .8; } .pw-docs-nav-subs { display: flex; flex-direction: column; margin: 2px 0 6px 14px; padding-left: 10px; border-left: 2px solid var(--pw-border); } .pw-docs-nav-subs a { padding: 5px 10px; border-radius: 6px; color: var(--pw-muted); text-decoration: none; font-size: .88rem; } .pw-docs-nav-subs a:hover { color: var(--pw-brand); background: var(--pw-page); } .pw-docs-nav-subs a.active { color: var(--pw-brand); font-weight: 600; } /* --- the page --- */ .pw-docs-body { min-width: 0; } /* so a wide 
 scrolls instead of stretching the grid */

.pw-docs-crumbs {
	font-size: .84rem;
	color: var(--pw-muted);
	margin-bottom: 10px;
}
.pw-docs-crumbs a { color: var(--pw-muted); text-decoration: none; }
.pw-docs-crumbs a:hover { color: var(--pw-brand); }
.pw-docs-crumbs i { font-size: .7rem; margin: 0 5px; opacity: .6; }

.pw-docs-body h1 { font-size: 1.9rem; margin: 0 0 18px; }
.pw-docs-body h2 {
	font-size: 1.25rem;
	margin: 34px 0 14px;
	padding-bottom: 7px;
	border-bottom: 1px solid var(--pw-border);
}
.pw-docs-body h3 { font-size: 1.03rem; margin: 20px 0 8px; }
.pw-docs-body p  { line-height: 1.6; }
.pw-docs-body ol { line-height: 1.6; }

.pw-docs-lead {
	font-size: 1.05rem;
	color: var(--pw-muted);
	line-height: 1.65;
	margin-bottom: 22px;
}

.pw-docs-op {
	border: 1px solid var(--pw-border);
	border-radius: 10px;
	padding: 14px 18px;
	margin-bottom: 12px;
	background: var(--pw-surface);
}
.pw-docs-op h3 { margin-top: 0; }
.pw-docs-op p:last-child { margin-bottom: 0; }

.pw-docs-note {
	border-left: 3px solid var(--pw-brand);
	background: var(--pw-page);
	border-radius: 0 8px 8px 0;
	padding: 10px 14px;
	color: var(--pw-muted);
	font-size: .92rem;
}

.pw-docs-pre {
	background: var(--pw-page);
	border: 1px solid var(--pw-border);
	border-radius: 8px;
	padding: 12px 14px;
	overflow-x: auto;
	font-size: .86rem;
	line-height: 1.5;
	color: var(--pw-text);
}
.pw-docs-body code {
	background: var(--pw-page);
	border-radius: 4px;
	padding: 1px 5px;
	color: var(--pw-code);
	font-size: .88em;
}
.pw-docs-pre code { background: none; padding: 0; }

/* The copy button sits on a wrapper the script adds, not on the 
 itself:
   a wide block scrolls sideways and would carry the button off with it. It is
   always visible rather than appearing on hover, because a touch screen has no
   hover and the button is the whole point. */
.pw-docs-code { position: relative; margin-bottom: 16px; }
.pw-docs-code .pw-docs-pre { margin-bottom: 0; }
.pw-docs-copy {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 3px 10px;
	font-size: .76rem;
	line-height: 1.5;
	color: var(--pw-muted);
	background: var(--pw-surface);
	border: 1px solid var(--pw-border);
	border-radius: 6px;
	cursor: pointer;
	opacity: .75;
	transition: opacity .12s, color .12s, border-color .12s;
}
.pw-docs-code:hover .pw-docs-copy,
.pw-docs-copy:focus-visible { opacity: 1; }
.pw-docs-copy:hover { color: var(--pw-brand); border-color: var(--pw-brand); }
.pw-docs-copy.done  { color: #1a7f37; border-color: #1a7f37; opacity: 1; }

.pw-docs-table {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0 18px;
	font-size: .92rem;
}
.pw-docs-table th,
.pw-docs-table td {
	border: 1px solid var(--pw-border);
	padding: 8px 11px;
	text-align: left;
	vertical-align: top;
}
.pw-docs-table th { background: var(--pw-page); font-weight: 600; }

/* The small cards a section root uses as a cheat sheet: the syntax, one line
   about it, optionally an example, and a link to where it is explained. */
.pw-docs-mini {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 12px;
	margin: 16px 0 24px;
}
.pw-docs-mini-card {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 13px 15px;
	background: var(--pw-surface);
	border: 1px solid var(--pw-border);
	border-radius: 10px;
	text-decoration: none;
	color: var(--pw-text);
}
.pw-docs-mini-card:hover { border-color: var(--pw-brand); color: var(--pw-text); }
.pw-docs-mini-card > code {
	align-self: flex-start;
	background: var(--pw-page);
	color: var(--pw-code);
	border-radius: 5px;
	padding: 2px 7px;
	font-size: .92rem;
	font-weight: 600;
}
.pw-docs-mini-card > span { font-size: .87rem; color: var(--pw-muted); line-height: 1.45; }
.pw-docs-mini-card > span code { font-size: .95em; padding: 0 3px; }
/* The example is a link to the search it describes, so the card cannot be one
   itself - a link inside a link is not valid html and browsers unnest it. Hence
   the separate "read more" rather than the whole card being clickable. */
.pw-docs-mini-card > .pw-docs-mini-eg {
	font-family: var(--bs-font-monospace, monospace);
	font-size: .8rem;
	/* Muted rather than link-blue: it is a runnable example first and a link
	   second, and nine blue lines in a row would read as a menu. The dashed
	   underline is what says it can be clicked. */
	color: var(--pw-muted);
	word-break: break-all;
	text-decoration: none;
	border-bottom: 1px dashed var(--pw-muted);
	align-self: flex-start;
	line-height: 1.5;
}
.pw-docs-mini-card > .pw-docs-mini-eg:hover {
	color: var(--pw-brand);
	border-bottom-color: var(--pw-brand);
}
.pw-docs-mini-more {
	margin-top: auto;
	padding-top: 6px;
	font-size: .78rem;
	color: var(--pw-brand);
	text-decoration: none;
	align-self: flex-start;
}
.pw-docs-mini-more:hover { text-decoration: underline; }
.pw-docs-mini-more::after { content: " \203a"; }

.pw-docs-links { line-height: 1.7; padding-left: 20px; }
.pw-docs-links li { margin-bottom: 5px; }

.pw-docs-details > summary {
	cursor: pointer;
	color: var(--pw-brand);
	margin: 8px 0;
}

/* The ccTLD list: 1500 short links, so a dense wrapping row rather than a
   column that would run for pages. */
.pw-docs-tlds {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}
.pw-docs-tlds a {
	background: var(--pw-page);
	border: 1px solid var(--pw-border);
	border-radius: 6px;
	padding: 2px 8px;
	font-size: .85rem;
	text-decoration: none;
	white-space: nowrap;
}

.pw-docs-gallery { margin-top: 8px; }

.pw-docs-next {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 32px;
	padding: 10px 16px;
	border: 1px solid var(--pw-border);
	border-radius: 10px;
	background: var(--pw-surface);
	text-decoration: none;
	font-weight: 600;
}
.pw-docs-next span {
	color: var(--pw-muted);
	font-weight: 400;
	font-size: .85rem;
}
.pw-docs-next:hover { border-color: var(--pw-brand); }

/* --- the index, with a card per section --- */
.pw-docs-h1   { margin-bottom: 6px; }
.pw-docs-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
	gap: 18px;
	margin-top: 26px;
}
.pw-docs-card {
	display: flex;
	flex-direction: column;
	background: var(--pw-surface);
	border: 1px solid var(--pw-border);
	border-radius: 14px;
	padding: 24px;
	text-decoration: none;
	color: var(--pw-text);
	transition: border-color .12s, transform .12s;
}
.pw-docs-card:hover {
	border-color: var(--pw-brand);
	transform: translateY(-2px);
	color: var(--pw-text);
}
.pw-docs-card-icon {
	font-size: 1.7rem;
	color: var(--pw-brand);
	line-height: 1;
	margin-bottom: 12px;
}
.pw-docs-card-title { font-size: 1.15rem; font-weight: 600; margin-bottom: 6px; }
.pw-docs-card-blurb { color: var(--pw-muted); font-size: .92rem; line-height: 1.5; }
.pw-docs-card-subs  {
	margin-top: 12px;
	font-size: .78rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--pw-muted);
}

/* --- the link out to the docs on the profile's API tab --- */
.pw-api-key { font-size: 1.05rem; word-break: break-all; margin-bottom: 10px; }
.pw-api-doc {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--pw-surface);
	border: 1px solid var(--pw-border);
	border-radius: 12px;
	padding: 18px 20px;
	margin-bottom: 16px;
	text-decoration: none;
	color: var(--pw-text);
}
.pw-api-doc:hover { border-color: var(--pw-brand); color: var(--pw-text); }
.pw-api-doc-icon  { font-size: 1.6rem; color: var(--pw-brand); line-height: 1; }
.pw-api-doc-text  { flex: 1; font-size: .92rem; color: var(--pw-muted); line-height: 1.5; }
.pw-api-doc-text b { display: block; color: var(--pw-text); font-size: 1.02rem; margin-bottom: 2px; }

/* --- phones and narrow tablets --- */
@media (max-width: 900px) {
	.pw-docs { grid-template-columns: minmax(0, 1fr); gap: 18px; }

	.pw-docs-nav { position: static; }
	.pw-docs-nav-toggle {
		display: block;
		cursor: pointer;
		padding: 8px 12px;
		margin: 0;
		font-weight: 600;
	}
	.pw-docs-nav-toggle i { margin-right: 8px; }
	.pw-docs-nav-toggle::after {
		content: "\203a";                 /* a chevron that turns when open */
		float: right;
		transform: rotate(90deg);
		transition: transform .15s;
	}
	.pw-docs-nav-cb:checked ~ .pw-docs-nav .pw-docs-nav-toggle::after { transform: rotate(-90deg); }

	.pw-docs-nav nav { display: none; }
	.pw-docs-nav-cb:checked ~ .pw-docs-nav nav { display: flex; }

	/* A reference table has more columns than a phone has width. Scrolling it
	   sideways beats squeezing the text into one word per line. */
	.pw-docs-table { display: block; overflow-x: auto; white-space: nowrap; }
	.pw-docs-table td:last-child { white-space: normal; min-width: 200px; }

	.pw-docs-body h1 { font-size: 1.5rem; }
	.pw-docs-cards   { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.pw-docs-card    { padding: 20px; }
}