/*
* palette-cloud-vps.css: route-family styles for /cloud-vps/ and its subpages.
* Loads after site-palette.css (core) on those routes only; see
* tb_get_palette_family() / inc/palette-families.json and "Where CSS Goes" in DESIGN.md.
* Rules here may rely on core tokens and components, never the reverse.
*/
/* Optional wrapper + bar — gives static code blocks the same filename rhythm
as .tbox-hero-terminal. Wrapper owns the frame; child drops its own
border/radius/margin so the bar+pre read as one surface. */
:root[data-theme="dark"] .tbox-code-block-wrap {
border-color: var(--border-mid);
}
/* Margin-bottom */
.tbox-mb-4 { margin-bottom: var(--space-lg); }
/* Shared stat primitives. Legacy .tbox-stats-row/.tbox-stat-cell remain aliases. */
@media (width >= 768px) {
.tbox-stat-cell:nth-child(even) {
transform: translateY(3.5rem);
}
}
/* Flush bottom corners when value strip connects to jump bar or proof strip */
#hero-section.tbox-hourly-cloud-vps + .tbox-value-strip {
--tbox-connected-value-strip-shadow:
0 22px 44px rgb(15 23 42 / 12%),
var(--shadow-value-strip-connector);
max-width: min(1120px, calc(100vw - 2rem));
margin-top: -2.25rem;
padding-inline: 1rem;
}
/* Cloud VPS API page polish: compact hero with an automation artifact. */
.tbox-cvps-api-hero + .tbox-value-strip {
position: relative;
z-index: 2;
}
.tbox-cvps-api-hero ~ .tbox-band .tbox-section__heading {
text-wrap: balance;
}
#content .tbox-cvps-api-section .tbox-section__heading {
text-align: left;
max-width: 20ch;
margin-inline: 0 auto;
}
.tbox-cvps-api-section .tbox-section__heading::after {
left: 0;
transform: none;
}
.tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card + .tbox-detail-card {
border-left: 1px solid var(--border-light);
}
.tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card:hover {
border-color: var(--border-light);
}
.tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card__icon {
width: 2rem;
height: 2rem;
color: var(--brand-primary-text);
}
.tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card:nth-child(2) .tbox-detail-card__icon {
color: var(--color-teal, var(--brand-primary));
}
.tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card:nth-child(3) .tbox-detail-card__icon {
color: var(--brand-cta);
}
.tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card__text {
min-width: 0;
}
.tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card__text :is(h3, h4) {
font-size: var(--fs-base);
line-height: var(--lh-snug);
}
.tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card__text p {
font-size: var(--fs-sm);
}
.tbox-cvps-api-matrix__value {
color: var(--text-secondary);
line-height: var(--lh-relaxed);
}
/* Group band rows (tbox-decision-matrix__group markup) inside this real
: sibling rows are blockified to grid, so blockify the band too
rather than leaving its width to anonymous-table sizing (and give it
defined behavior in the mobile collapse). The first band drops its
border-top so it doesn't double the thead seam. */
.tbox-cvps-api-matrix .tbox-decision-matrix__group,
.tbox-cvps-api-matrix .tbox-decision-matrix__group > th {
display: block;
}
.tbox-cvps-api-matrix tbody .tbox-decision-matrix__group:first-child > th {
border-top: 0;
}
/* /cloud-vps/api/ anchor landings. Two independent jobs share this offset:
1) #mcp is a plain section here, not a hub fops jump target — this cancels
the shared 220px cushion (bare #mcp rule near the fops styles). If that
shared rule is ever rescoped to the hub, only this half becomes moot.
2) #activity (audit block) has no other scroll-margin rule at all — this
half must survive any cleanup of the hub cushion. */
#mcp.tbox-cvps-api-section--mcp,
.tbox-cvps-api-section--activity #activity {
scroll-margin-top: 24px; /* on top of html scroll-padding-top */
}
.tbox-cvps-api-action.tbox-bento-cta-card > .tbox-btn {
min-width: 9.5rem;
text-align: center;
}
.tbox-cvps-api-section--activity .tbox-extras-strip {
border-radius: var(--radius-sm-plus);
padding: clamp(var(--space-lg), 2vw, var(--space-xl));
}
:root[data-theme="dark"] .tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-grid,
:root[data-theme="dark"] .tbox-cvps-api-audit,
:root[data-theme="dark"] .tbox-cvps-api-section--activity .tbox-extras-strip {
background: color-mix(in srgb, var(--surface-raised) 92%, var(--brand-primary-dark) 8%);
border-color: var(--border-mid);
}
:root[data-theme="dark"] .tbox-cvps-api-matrix .tbox-feature-matrix__row:hover {
background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface-raised) 90%);
}
:root[data-theme="dark"] .tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card + .tbox-detail-card {
border-color: var(--border-mid);
}
@media (width <= 900px) {
.tbox-cvps-api-hero.tbox-hero-v3--compact {
text-align: center;
}
.tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card + .tbox-detail-card {
border-top: 1px solid var(--border-light);
border-left: 0;
}
:root[data-theme="dark"] .tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card + .tbox-detail-card {
border-top-color: var(--border-mid);
}
}
@media (width <= 600px) {
.tbox-cvps-api-hero .tbox-hero-v3__cta-row {
gap: var(--space-sm-plus);
}
.tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-sm);
}
.tbox-cvps-api-action.tbox-bento-cta-card > .tbox-btn {
width: 100%;
}
.tbox-cvps-api-audit {
padding: var(--space-lg);
}
}
/* Pause control reuses .tbox-fleet-pause-btn; sit it inline in the chat bar
instead of as a stage-strip cell. */
.tbox-cvps-mcp-demo__msg[data-active] {
opacity: 1;
transform: none;
}
.tbox-cvps-mcp-demo__msg--user {
background: color-mix(in srgb, var(--brand-primary-bg, var(--surface-subtle)) 32%, var(--surface-base) 68%);
}
.tbox-cvps-mcp-demo__msg--agent .tbox-cvps-mcp-demo__role {
color: var(--brand-primary-text);
}
.tbox-cvps-mcp-demo[data-mcp-state="typing"] .tbox-cvps-mcp-demo__msg--user .tbox-cvps-mcp-demo__text::after {
opacity: 1;
}
/* Ghost-slot contract, shared by the tool queue and result slots: inactive
items render as a dimmed dashed "queued" ghost rather than vanishing — the
reserved panel height reads as a plan filling in, not as empty space,
during the long tools phase of the loop. Active flips to solid + tint.
Layout/background specifics live on the per-element rules below. */
.tbox-cvps-mcp-demo__tools li[data-active],
.tbox-cvps-mcp-demo__node[data-active],
.tbox-cvps-mcp-demo__backup[data-active] {
opacity: 1;
border-style: solid;
border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--border-light) 70%);
}
/* No-JS fallback: the driver script is the only thing that ever sets
[data-mcp-state]/[data-active]; without it, show the plan solid instead of
a permanently dimmed ghost. (When JS does run, its init fades this to the
ghost state through the transitions above.) */
.tbox-cvps-mcp-demo:not([data-mcp-state]) .tbox-cvps-mcp-demo__msg {
opacity: 1;
transform: none;
}
.tbox-cvps-mcp-demo:not([data-mcp-state]) .tbox-cvps-mcp-demo__net {
background-size: 100% 100%;
}
.tbox-cvps-mcp-demo__tools li[data-active] .tbox-cvps-mcp-demo__check {
animation: tbox-mcp-demo-stamp 220ms ease-out forwards;
}
.tbox-cvps-mcp-demo[data-mcp-state="tools"] .tbox-cvps-mcp-demo__result-status {
color: var(--brand-cta);
}
.tbox-cvps-mcp-demo[data-mcp-state="final"] .tbox-cvps-mcp-demo__result-status,
.tbox-cvps-mcp-demo[data-mcp-state="hold"] .tbox-cvps-mcp-demo__result-status,
.tbox-cvps-mcp-demo[data-mcp-state="done"] .tbox-cvps-mcp-demo__result-status {
color: var(--success-text, var(--success-deep));
}
.tbox-cvps-mcp-demo__node[data-active] {
background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface-base) 95%);
}
.tbox-cvps-mcp-demo__net {
--mcp-net-fill: color-mix(in srgb, var(--brand-primary) 16%, var(--surface-subtle) 84%);
position: relative;
height: 6px;
margin-bottom: var(--space-sm-plus);
border-radius: var(--radius-cap);
background-color: color-mix(in srgb, var(--border-light) 55%, transparent);
background-image: linear-gradient(var(--mcp-net-fill), var(--mcp-net-fill));
background-repeat: no-repeat;
background-size: 0% 100%;
transition: background-size 480ms ease;
}
.tbox-cvps-mcp-demo__net[data-active] {
background-size: 100% 100%;
}
.tbox-cvps-mcp-demo__backup[data-active] {
background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface-base) 95%);
}
/* Dark mode */
:root[data-theme="dark"] .tbox-cvps-mcp-demo__chat,
:root[data-theme="dark"] .tbox-cvps-mcp-demo__result {
background: color-mix(in srgb, var(--surface-raised) 92%, var(--brand-primary-dark) 8%);
border-color: var(--border-mid);
}
:root[data-theme="dark"] .tbox-cvps-mcp-demo__bar,
:root[data-theme="dark"] .tbox-cvps-mcp-demo__result-head {
border-bottom-color: var(--border-mid);
}
:root[data-theme="dark"] .tbox-cvps-mcp-demo__msg {
background: color-mix(in srgb, var(--surface-dark) 64%, var(--surface-raised) 36%);
}
:root[data-theme="dark"] .tbox-cvps-mcp-demo__msg--user {
background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface-raised) 88%);
}
:root[data-theme="dark"] .tbox-cvps-mcp-demo__tools li[data-active] {
border-color: color-mix(in srgb, var(--brand-primary) 36%, var(--border-mid) 64%);
}
:root[data-theme="dark"] .tbox-cvps-mcp-demo__node,
:root[data-theme="dark"] .tbox-cvps-mcp-demo__backup {
background: color-mix(in srgb, var(--surface-dark) 60%, var(--surface-raised) 40%);
border-color: var(--border-mid);
}
:root[data-theme="dark"] .tbox-cvps-mcp-demo__node[data-active],
:root[data-theme="dark"] .tbox-cvps-mcp-demo__backup[data-active] {
border-color: color-mix(in srgb, var(--brand-primary) 36%, var(--border-mid) 64%);
background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface-raised) 88%);
}
:root[data-theme="dark"] .tbox-cvps-mcp-demo__check {
color: color-mix(in srgb, var(--success) 60%, var(--text-on-dark) 40%);
background: color-mix(in srgb, var(--success) 22%, transparent);
}
:root[data-theme="dark"] .tbox-cvps-mcp-demo[data-mcp-state="final"] .tbox-cvps-mcp-demo__result-status,
:root[data-theme="dark"] .tbox-cvps-mcp-demo[data-mcp-state="hold"] .tbox-cvps-mcp-demo__result-status,
:root[data-theme="dark"] .tbox-cvps-mcp-demo[data-mcp-state="done"] .tbox-cvps-mcp-demo__result-status {
color: color-mix(in srgb, var(--success) 70%, var(--text-on-dark) 30%);
}
/* Mobile */
@media (width <= 900px) {
.tbox-cvps-mcp-demo {
grid-template-columns: minmax(0, 1fr);
}
}
@media (width <= 640px) {
.tbox-cvps-mcp-demo__result-grid {
grid-template-columns: minmax(0, 1fr);
}
/* Keep "Togglebox MCP connected" visible on mobile — it carries the
section's premise. Shrink instead of hiding. */
.tbox-cvps-mcp-demo__bar {
flex-wrap: wrap;
}
}
/* Reduced motion: skip transitions, show final state */
@media (prefers-reduced-motion: reduce) {
.tbox-cvps-mcp-demo.is-static .tbox-cvps-mcp-demo__msg,
.tbox-cvps-mcp-demo.is-static .tbox-cvps-mcp-demo__tools li,
.tbox-cvps-mcp-demo.is-static .tbox-cvps-mcp-demo__node,
.tbox-cvps-mcp-demo.is-static .tbox-cvps-mcp-demo__backup,
.tbox-cvps-mcp-demo.is-static .tbox-cvps-mcp-demo__check {
opacity: 1 !important;
transform: none !important;
}
.tbox-cvps-mcp-demo.is-static .tbox-cvps-mcp-demo__net {
background-size: 100% 100% !important;
}
.tbox-cvps-mcp-demo.is-static .tbox-cvps-mcp-demo__msg--user .tbox-cvps-mcp-demo__text::after {
display: none;
}
}
/* Forced colors / high contrast */
@media (forced-colors: active) {
.tbox-cvps-mcp-demo__chat,
.tbox-cvps-mcp-demo__result,
.tbox-cvps-mcp-demo__tools li,
.tbox-cvps-mcp-demo__node,
.tbox-cvps-mcp-demo__backup,
.tbox-cvps-mcp-demo__msg {
border-color: CanvasText;
}
.tbox-cvps-mcp-demo__tools li[data-active],
.tbox-cvps-mcp-demo__node[data-active],
.tbox-cvps-mcp-demo__backup[data-active] {
border-color: Highlight;
}
.tbox-cvps-mcp-demo__check {
color: Highlight;
background: transparent;
border: 1px solid Highlight;
}
}
/* ============================================================
Pillar Card Grid — shared base for mechanism-style card sections
(homepage "What Keeps Production Workloads Running",
Cloud VPS "Add Managed Infrastructure", etc.)
============================================================ */
/* Section wrapper */
:root[data-theme="dark"] .tbox-pillar-section {
background: var(--surface-card-elevated);
}
/* Heading overrides */
:root[data-theme="dark"] .tbox-pillar-section .tbox-section__heading {
color: var(--text-inverse);
}
/* Description */
:root[data-theme="dark"] .tbox-pillar-section .tbox-section__desc {
color: var(--text-muted);
}
/* ── Cloud VPS hero: left-aligned two-column split ── */
.tbox-cloud-vps-hero__split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3xl);
align-items: center;
text-align: left;
}
/* stylelint-disable-next-line no-descending-specificity */
.tbox-cloud-vps-hero__cta-block {
margin-top: var(--space-lg);
text-align: center;
}
@media (width <= 1024px) {
.tbox-cloud-vps-hero__split {
grid-template-columns: 1fr;
text-align: center;
}
.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__cta-block {
text-align: center;
}
}
@media (width <= 600px) {
.tbox-cloud-vps-hero__split {
gap: var(--space-xl);
}
.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__cta-block {
margin-top: var(--space-md);
}
.tbox-hourly-cloud-vps .tbox-hero-v3__cta-row {
gap: var(--space-sm);
}
}
/* ── Cloud VPS hero visual tuning (tokenized, page-scoped) ── */
/* The fleet-monitor custom properties are also handed to the home page's
.tbox-home-fleet wrapper (Cloud VPS showcase carousel). This rule is pure
custom-property declarations — no layout — so the home wrapper inherits the
fleet token set without any hero chrome. */
.tbox-fleet-mobile-proof {
display: none;
}
@media (width <= 600px) {
.tbox-fleet-mobile-proof {
display: flex;
flex-direction: column;
gap: 0;
margin-top: 0;
padding: var(--space-sm) var(--space-md);
background: var(--surface-muted);
border-radius: var(--radius-sm);
border: 1px solid var(--border-light);
}
}
/* stylelint-disable-next-line no-descending-specificity */
#hero-section.tbox-hourly-cloud-vps .tbox-btn.tbox-btn-outline {
border-color: var(--cloud-vps-hero-outline-border);
background: var(--cloud-vps-hero-outline-bg) !important;
box-shadow: inset 0 1px 0 var(--cloud-vps-hero-outline-inset);
}
/* ── Fleet monitor responsive ── */
@media (width <= 600px) {
/* Mobile: the /cloud-vps/ hero shows the full fleet animation. Tighten the
monitor chrome so the SVG diagram keeps as much width as possible, and
make the scenario controls touch-friendly. Scoped to the hero so the
home page Cloud VPS showcase fleet monitor is unaffected. */
#hero-section.tbox-hourly-cloud-vps .tbox-fleet-monitor {
max-width: none;
}
#hero-section.tbox-hourly-cloud-vps .tbox-fleet-monitor__body {
padding: 10px 12px;
}
}
/* stylelint-disable no-descending-specificity */
/* ── Dense secondary feature tier ── */
.tbox-bento-extras__items {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-sm) var(--space-md);
}
/* Tablet (2 cols): shade every other row (items 3-4, 7-8, …) */
@media (width <= 900px) {
.tbox-bento-extras__items { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile (1 col): shade every other item */
@media (width <= 600px) {
.tbox-bento-extras__items { grid-template-columns: 1fr; }
}
/* stylelint-enable no-descending-specificity */
/* ============================================================
Reduced motion
============================================================ */
@media (width <= 640px) {
#hero-section.tbox-hourly-cloud-vps {
padding: 2rem 1rem 3rem;
}
}
/* ============================================
Standalone Pricing Section
============================================ */
#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps {
background: var(--tbox-hvps-bg-white);
padding: calc(var(--space-xl) + var(--space-xs)) var(--space-xl) 4.5rem;
}
.tbox-pricing-section.tbox-hourly-cloud-vps .tbox-section__desc {
max-width: var(--prose-measure-default);
margin: 0 0 var(--space-xl); /* left-align under --start heading */
color: var(--text-secondary);
}
/* ============================================
Cloud VPS Pricing Section Improvements (2026-02)
Scope: /cloud-vps/#pricing-section (HVPS configurator)
============================================ */
/* Light mode: white pricing section background */
:root:not([data-theme]) #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps,
:root[data-theme="light"] #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps {
background: var(--surface-base);
}
/* Cloud VPS page: heading/desc share the list's 1060px left-aligned axis so
the band reads as one composition instead of a centered head over a list. */
#managed-services-section .tbox-ms-list {
width: 100%;
margin-inline: 0;
justify-self: start;
}
.tbox-ms-list {
max-width: 1060px;
margin: 0 auto;
text-align: left;
}
.tbox-ms-list__item {
--_ic: var(--row-accent, var(--brand-primary-dark));
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start;
gap: var(--space-xl);
padding: 1.15rem var(--space-sm);
border-top: 1px solid var(--border-light);
border-radius: var(--radius-sm);
color: inherit;
text-decoration: none;
transition: background var(--ease-base);
}
.tbox-ms-list__item:last-child {
border-bottom: 1px solid var(--border-light);
}
a.tbox-ms-list__item:hover {
background: var(--surface-subtle);
}
/* Per-service accent (carried on the icon glyph and CTA only) */
.tbox-ms-list__item--db { --row-accent: var(--brand-primary); }
.tbox-ms-list__item--net { --row-accent: var(--color-teal); }
.tbox-ms-list__item--dr { --row-accent: var(--brand-cta); }
:root[data-theme="dark"] .tbox-ms-list__item--net {
--row-accent: oklch(72% 0.06 175);
}
.tbox-ms-list__icon {
width: 48px;
height: 48px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: var(--surface-subtle);
color: var(--_ic);
}
.tbox-ms-list__name {
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
color: var(--text-primary);
margin: 0 0 0.15rem;
}
:root[data-theme="dark"] .tbox-ms-list__name {
color: var(--text-inverse);
}
.tbox-ms-list__trigger {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--text-primary);
margin: 0 0 0.25rem;
}
:root[data-theme="dark"] .tbox-ms-list__trigger {
color: var(--text-inverse);
}
.tbox-ms-list__body {
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--text-secondary);
margin: 0;
max-width: var(--prose-measure-default);
}
.tbox-ms-list__go {
display: inline-flex;
align-items: center;
align-self: center;
gap: var(--space-xs);
white-space: nowrap;
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
/* --_ic is the icon accent; as 14px text it is 2.0-3.4:1 on light cards. */
color: var(--brand-primary-text);
}
.tbox-ms-list__arrow {
transition: transform var(--ease-fast);
}
a.tbox-ms-list__item:hover .tbox-ms-list__arrow {
transform: translateX(3px);
}
@media (width <= 720px) {
.tbox-ms-list__item {
grid-template-columns: auto 1fr;
}
.tbox-ms-list__go {
grid-column: 2;
justify-self: start;
margin-top: 0.35rem;
}
}
/* Cloud VPS hero visual tokens in dark mode */
:root[data-theme="dark"] #hero-section.tbox-hourly-cloud-vps {
--cloud-vps-hero-outline-border: rgb(255 255 255 / 44%);
--cloud-vps-hero-outline-bg: rgb(255 255 255 / 10%);
--cloud-vps-hero-outline-inset: rgb(255 255 255 / 14%);
--cloud-vps-hero-outline-border-hover: rgb(255 255 255 / 66%);
--cloud-vps-hero-outline-bg-hover: rgb(255 255 255 / 16%);
/* Source token is scoped here, not :root — dark override must match specificity */
--cloud-vps-fleet-monitor-shell: var(--blue-8);
}
/* /cloud-vps/ aurora hero: the curtain's cyan crest drifts behind the CTA row,
and the white-glass outline fill lifted it further (Chat with an engineer
measured 3.2-4.1:1). A translucent navy fill keeps the label >=4.5:1 at
every animation frame. Hover keeps the shared glass hover fill. */
#hero-section.tbox-hourly-cloud-vps.tbox-hero-v3--aurora-band,
:root[data-theme="dark"] #hero-section.tbox-hourly-cloud-vps.tbox-hero-v3--aurora-band {
--cloud-vps-hero-outline-bg: color-mix(in srgb, var(--surface-dark) 45%, transparent);
}
/* Phone gutter: one 16px inset, matching the hero gutter. The 24px section
padding above (it wins over the earlier <=600px 1rem rule on source order)
used to stack with the container's own inset, leaving 42px per side at
390px. On phones the container alone owns the gutter (16px, set with the
other <=600px .tbox-container rule), so a section that wraps a container
drops its side padding; sections with loose content keep a 16px pad. Some
sections (the homepage bands) already have no side padding and rely on the
container inset. */
@media (width <= 600px) {
/* The HVPS configurator section keeps its own ID-scoped 1rem side padding,
so its container drops the inset instead. */
#pricing-section.tbox-hourly-cloud-vps > .tbox-container {
width: 100%;
}
}
/* Pricing anchor scroll-reveal — Cloud VPS (reveal-section system) */
@media (prefers-reduced-motion: no-preference) {
.tbox-pricing-anchor .tbox-pricing-chip.reveal-section,
.tbox-pricing-anchor .tbox-bonus-badge.reveal-section {
opacity: 0;
transform: translateY(12px);
transition: opacity var(--ease-animate), transform var(--ease-animate);
}
.tbox-pricing-anchor .tbox-bonus-badge.reveal-section {
transition-delay: 0.1s;
}
.tbox-pricing-anchor .reveal-section.is-visible {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================
Cloud VPS page rhythm pass
============================================ */
/* stylelint-disable no-descending-specificity */
#hero-section.tbox-hourly-cloud-vps {
--cloud-vps-fleet-monitor-max-width: 536px;
--cloud-vps-fleet-monitor-max-width-tablet: 500px;
padding-top: clamp(3rem, 5vw, 4rem);
padding-bottom: clamp(2.35rem, 3.4vw, 3rem);
}
#hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__visual {
justify-self: end;
width: min(100%, 33.5rem);
margin-top: 0;
}
@media (width <= 640px) {
#content #hero-section.tbox-hourly-cloud-vps {
padding: clamp(2rem, 8vw, 2.75rem) 1rem;
}
#content #hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__split {
gap: var(--space-lg);
}
#content #hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__text {
align-items: flex-start;
gap: var(--space-md);
text-align: left;
}
#content #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__title {
max-width: 13.5ch;
font-size: clamp(2.1rem, 8vw, 2.85rem);
line-height: 1.1;
text-wrap: balance;
}
#content #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__subtitle {
max-width: var(--prose-measure-wide);
margin-bottom: 0;
font-size: 1.2rem;
line-height: 1.5;
}
#content #hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__cta-block,
#content #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__cta-row {
width: 100%;
}
#content #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__cta-row {
gap: var(--space-sm);
}
#content #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__cta-row .tbox-btn {
min-height: 3.35rem;
}
#content #hero-section.tbox-hourly-cloud-vps + .tbox-value-strip {
margin-top: -1.25rem;
}
#content #hero-section.tbox-hourly-cloud-vps + .tbox-value-strip + .tbox-jump-bar {
justify-content: flex-start;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-padding-inline: 1rem;
scroll-snap-type: x proximity;
gap: var(--space-xs);
padding: var(--space-xs) 1rem;
scrollbar-width: none;
mask-image: linear-gradient(90deg, transparent 0, var(--text-primary) 1rem, var(--text-primary) calc(100% - 1rem), transparent 100%);
}
#content #hero-section.tbox-hourly-cloud-vps + .tbox-value-strip + .tbox-jump-bar::-webkit-scrollbar {
display: none;
}
#content #hero-section.tbox-hourly-cloud-vps + .tbox-value-strip + .tbox-jump-bar .tbox-jump-link {
flex: 0 0 auto;
min-height: 2.75rem;
padding: var(--space-xs) var(--space-md);
scroll-snap-align: start;
white-space: nowrap;
}
#content #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps {
padding: clamp(2.25rem, 8vw, 3rem) 1rem clamp(3rem, 10vw, 4rem);
}
#content #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps .tbox-section__desc {
font-size: 1.15rem;
line-height: 1.52;
margin-bottom: var(--space-md);
}
}
#hero-section.tbox-hourly-cloud-vps + .tbox-value-strip .tbox-value-strip__wrap {
box-shadow:
0 18px 36px rgb(15 23 42 / 10%),
var(--shadow-value-strip-connector);
}
#hero-section.tbox-hourly-cloud-vps + .tbox-value-strip .tbox-value-card {
padding: clamp(0.9rem, 1.35vw, 1.15rem);
}
#hero-section.tbox-hourly-cloud-vps + .tbox-value-strip .tbox-value-card__header {
gap: var(--space-sm);
margin-bottom: var(--space-2xs);
}
#hero-section.tbox-hourly-cloud-vps + .tbox-value-strip + .tbox-jump-bar {
gap: var(--space-xs);
padding-block: 0.5rem;
}
#hero-section.tbox-hourly-cloud-vps + .tbox-value-strip + .tbox-jump-bar .tbox-jump-link {
min-height: 2.5rem;
padding: var(--space-xs-plus) var(--space-md-plus);
font-size: var(--fs-sm);
}
#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps .tbox-container,
#hero-section.tbox-hourly-cloud-vps ~ #fit-section .tbox-container,
#hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-container,
#hero-section.tbox-hourly-cloud-vps ~ #faq-section .tbox-container {
max-width: 1100px;
}
section#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps {
padding: clamp(2.4rem, 3.2vw, 3rem) clamp(1rem, 2vw, 1.5rem) clamp(3.1rem, 4.2vw, 3.75rem);
background:
linear-gradient(180deg, color-mix(in srgb, var(--brand-primary-bg) 46%, transparent), transparent 18rem),
var(--surface-base);
}
#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps .tbox-container {
display: grid;
gap: clamp(0.8rem, 1.4vw, 1.1rem);
}
#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps .tbox-section__heading,
#hero-section.tbox-hourly-cloud-vps ~ #fit-section .tbox-section__heading,
#hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-section__heading,
#hero-section.tbox-hourly-cloud-vps ~ #faq-section .tbox-section__heading {
margin-bottom: 0;
}
#hero-section.tbox-hourly-cloud-vps ~ #features {
padding-block: clamp(2.6rem, 3.7vw, 3.35rem);
}
/* ── App Hosting: autoscale breakout ── */
#hero-section.tbox-hourly-cloud-vps ~ #fit-section.tbox-decision-section {
padding-block: clamp(2.5rem, 3.4vw, 3.1rem);
}
#hero-section.tbox-hourly-cloud-vps ~ #fit-section .tbox-container {
display: grid;
gap: clamp(0.9rem, 1.4vw, 1.15rem);
}
#hero-section.tbox-hourly-cloud-vps ~ #fit-section .tbox-section__heading {
max-width: 24rem;
margin-inline: auto;
}
#hero-section.tbox-hourly-cloud-vps ~ #managed-services-section {
padding-block: clamp(2.5rem, 3.4vw, 3.1rem);
}
#hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-container {
display: grid;
gap: clamp(0.9rem, 1.4vw, 1.1rem);
}
#hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-section__desc {
max-width: var(--prose-measure-default);
margin: 0 auto 0 0;
}
#hero-section.tbox-hourly-cloud-vps ~ #faq-section.tbox-faq-section {
padding-top: clamp(2.5rem, 3.4vw, 3.1rem);
padding-bottom: clamp(2.5rem, 3.4vw, 3.1rem);
}
#hero-section.tbox-hourly-cloud-vps ~ #faq-section .tbox-faq-section__tabs {
justify-content: flex-start;
margin-top: var(--space-sm-plus);
}
@media (width <= 1024px) {
#hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__visual {
justify-self: center;
width: min(100%, 31.5rem);
}
}
@media (width <= 900px) {
#hero-section.tbox-hourly-cloud-vps + .tbox-value-strip {
margin-top: -2rem;
}
}
@media (width <= 600px) {
section#hero-section.tbox-hourly-cloud-vps {
padding-top: clamp(2rem, 7vw, 2.4rem);
padding-bottom: clamp(1.9rem, 6vw, 2.25rem);
}
#hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__cta-block {
width: 100%;
gap: var(--space-xs-plus);
margin-top: var(--space-xs-plus);
}
#hero-section.tbox-hourly-cloud-vps + .tbox-value-strip {
margin-top: -1.5rem;
padding-inline: 0.75rem;
}
#hero-section.tbox-hourly-cloud-vps + .tbox-value-strip + .tbox-jump-bar {
padding-block: 0.4rem;
padding-inline: 0.5rem;
}
#hero-section.tbox-hourly-cloud-vps + .tbox-value-strip + .tbox-jump-bar .tbox-jump-link {
min-height: 2.35rem;
padding-inline: 0.65rem;
}
}
/* stylelint-enable no-descending-specificity */
/* App Hosting PHP: page polish */
.tbox-php-release-ledger div + div {
border-left: 1px solid var(--border-light);
}
.tbox-php-release-ledger dt {
color: var(--brand-primary);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
}
.tbox-php-release-ledger dd {
margin: 0;
color: var(--text-secondary);
font-size: var(--fs-sm);
line-height: var(--lh-snug);
}
/* Four-item ledgers (e.g. Cloud VPS volumes live disk ops) wrap 2×2 instead of
orphaning the fourth cell under a 3-column grid. */
.tbox-runtime-release-ledger--cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tbox-runtime-release-ledger--cols-2 div:nth-child(odd) {
border-left: 0;
}
.tbox-runtime-release-ledger--cols-2 div:nth-child(n + 3) {
border-top: 1px solid var(--border-light);
}
:root[data-theme="dark"] .tbox-php-release-ledger div + div {
border-color: color-mix(in srgb, var(--text-inverse) 10%, var(--border-dark));
}
@media (width <= 900px) {
.tbox-php-release-ledger {
grid-template-columns: 1fr;
}
.tbox-php-release-ledger div + div {
border-top: 1px solid var(--border-light);
border-left: 0;
}
}
/* Cloud VPS security route polish */
.tbox-cvps-security-hero__copy {
display: grid;
gap: var(--space-lg);
max-width: var(--prose-measure-wide);
text-align: left;
justify-items: start;
}
.tbox-cvps-security-hero__panel-head {
display: flex;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-sm-plus) var(--space-md);
}
.tbox-cvps-security-hero__panel-head span {
color: color-mix(in srgb, var(--text-inverse) 72%, transparent);
font-size: var(--fs-xs);
}
.tbox-cvps-security-hero__rules {
display: grid;
gap: var(--space-sm);
margin: 0;
padding: 0;
list-style: none;
}
.tbox-cvps-security-hero__rules li:nth-child(2n) {
background: color-mix(in srgb, var(--surface-base) 11%, transparent);
}
.tbox-cvps-security-hero__rules span {
color: var(--brand-cta);
font-weight: var(--fw-semibold);
}
.tbox-cvps-security-hero__ledger {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 0;
overflow: hidden;
}
.tbox-cvps-security-hero__ledger div + div {
border-left: 1px solid color-mix(in srgb, var(--surface-base) 14%, transparent);
}
.tbox-cvps-security-hero__ledger dt {
margin: 0 0 var(--space-2xs);
color: color-mix(in srgb, var(--text-inverse) 64%, transparent);
font-size: var(--fs-xs);
}
.tbox-cvps-security-hero__ledger dd {
margin: 0;
color: var(--text-inverse);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
overflow-wrap: anywhere;
}
.tbox-cvps-security-overview .tbox-container,
.tbox-cvps-security-policy .tbox-container,
.tbox-cvps-security-operations .tbox-container {
max-width: 1120px;
}
.tbox-cvps-security-overview {
background: color-mix(in srgb, var(--surface-muted) 88%, var(--brand-primary-04) 12%);
}
#content .tbox-cvps-security-overview .tbox-section__heading,
#content .tbox-cvps-security-policy .tbox-section__heading,
#content .tbox-cvps-security-operations .tbox-section__heading {
max-width: 18ch;
margin-left: 0;
margin-right: auto;
text-align: left;
}
.tbox-cvps-security-overview .tbox-section__heading::after,
.tbox-cvps-security-policy .tbox-section__heading::after,
.tbox-cvps-security-operations .tbox-section__heading::after {
left: 0;
transform: none;
}
.tbox-cvps-security-path__item {
position: relative;
min-height: 100%;
padding: clamp(1.1rem, 2.2vw, 1.5rem);
background: var(--surface-base);
}
.tbox-cvps-security-path__item + .tbox-cvps-security-path__item {
border-left: 1px solid var(--border-light);
}
/* Responsibility-boundary chart: the panel reuses the hero rules grid, but
here the column carries the page's highest-stakes prose, not short
rule annotations — lift it off the 12px mono floor. */
#responsibility-boundary .tbox-cvps-security-hero__rules em {
font-size: var(--fs-sm);
}
.tbox-cvps-security-policy .tbox-extras-strip {
border-color: color-mix(in srgb, var(--border-light) 74%, var(--brand-primary) 26%);
background: color-mix(in srgb, var(--surface-base) 90%, var(--brand-primary-04) 10%);
box-shadow: none;
}
/* Sentence-length items: block flow, not the pill's inline-flex. Flex would
split the icon, , text nodes, and inline links into separate
columns and fragment the copy mid-word. */
.tbox-cvps-security-policy .tbox-extras-strip__item {
display: block;
box-sizing: border-box;
min-width: 0;
width: 100%;
white-space: normal;
line-height: var(--lh-relaxed);
}
.tbox-cvps-security-policy .tbox-extras-strip__item .material-symbols-outlined {
margin-right: var(--space-xs);
vertical-align: -0.18em;
}
/* The policy CTA card is a saturated blue surface in both themes, so the
surface-aware --focus-ring (blue) disappears on it; use the on-dark ring. */
.tbox-cvps-security-policy .tbox-bento-cta-card {
--focus-ring: var(--focus-ring-on-dark);
}
.tbox-cvps-security-policy .tbox-bento-cta-card > .tbox-btn {
background: var(--brand-cta);
border-color: var(--brand-cta);
color: var(--brand-cta-ink);
}
.tbox-cvps-security-policy .tbox-bento-cta-card > .tbox-btn + .tbox-btn:hover {
background: color-mix(in srgb, var(--text-inverse) 10%, transparent);
border-color: color-mix(in srgb, var(--text-inverse) 78%, transparent);
color: var(--text-inverse);
}
.tbox-cvps-security-operations .tbox-detail-grid {
gap: clamp(0.85rem, 1.6vw, 1rem);
}
.tbox-cvps-security-operations .tbox-detail-card {
background: var(--surface-base);
border-color: color-mix(in srgb, var(--border-light) 78%, var(--brand-primary) 22%);
padding: clamp(1.05rem, 1.8vw, 1.35rem);
}
.tbox-cvps-security-operations .tbox-detail-card:nth-child(2) .tbox-detail-card__icon {
color: var(--color-teal, var(--brand-primary));
}
.tbox-cvps-security-operations .tbox-detail-card:nth-child(3) .tbox-detail-card__icon {
color: var(--brand-cta);
}
.tbox-cvps-security-operations .tbox-mini-note {
max-width: var(--prose-measure-wide);
margin-right: auto;
margin-left: 0;
}
@media (width <= 820px) {
.tbox-cvps-security-path__item + .tbox-cvps-security-path__item {
border-top: 1px solid var(--border-light);
border-left: 0;
}
/* Responsibility-boundary chart reuses the hero rules grid but carries
prose-length entries; the three-column track squeezes them into
mid-word breaks on small screens. Stack each row instead. */
#responsibility-boundary .tbox-cvps-security-hero__rules li {
grid-template-columns: 1fr;
gap: var(--space-2xs);
align-items: start;
}
}
@media (width <= 520px) {
.tbox-cvps-security-hero__panel-head,
.tbox-cvps-security-hero__ledger {
grid-template-columns: 1fr;
}
.tbox-cvps-security-hero__panel {
gap: var(--space-md);
padding: var(--space-md);
}
.tbox-cvps-security-hero .tbox-hero-v3__cta-row {
width: 100%;
}
.tbox-cvps-security-policy .tbox-extras-strip__item {
display: block;
line-height: var(--lh-relaxed);
}
.tbox-cvps-security-policy .tbox-extras-strip__item .material-symbols-outlined {
margin-right: var(--space-xs);
vertical-align: -0.18em;
}
.tbox-cvps-security-hero__panel-head {
display: grid;
}
/* Step the boundary-chart prose down with its 2xs siblings so the
description never outsizes the row's bold label at phone widths. */
#responsibility-boundary .tbox-cvps-security-hero__rules em {
font-size: var(--fs-xs);
}
.tbox-cvps-security-hero__ledger {
display: none;
}
.tbox-cvps-security-hero__ledger div + div {
border-top: 1px solid color-mix(in srgb, var(--surface-base) 14%, transparent);
border-left: 0;
}
}
:root[data-theme="dark"] .tbox-cvps-security-path,
:root[data-theme="dark"] .tbox-cvps-security-path__item,
:root[data-theme="dark"] .tbox-cvps-security-overview .tbox-feature-matrix,
:root[data-theme="dark"] .tbox-cvps-security-policy .tbox-extras-strip,
:root[data-theme="dark"] .tbox-cvps-security-operations .tbox-detail-card {
border-color: color-mix(in srgb, var(--border-mid) 70%, var(--brand-primary) 30%);
}
:root[data-theme="dark"] .tbox-cvps-security-path,
:root[data-theme="dark"] .tbox-cvps-security-path__item {
background: var(--surface-raised);
}
:root[data-theme="dark"] .tbox-cvps-security-overview {
background: color-mix(in srgb, var(--surface-dark) 92%, var(--brand-primary) 8%);
}
/* ── Cloud VPS Backups page polish ───────────────────────────────────────── */
#content .bkp-section .tbox-section__heading {
max-width: 760px;
margin-inline: 0;
text-align: left;
text-wrap: balance;
}
#content .bkp-section .tbox-section__heading::after {
left: 0;
margin-inline: 0;
transform: none;
}
.bkp-path-panel__row + .bkp-path-panel__row {
border-top: 1px solid color-mix(in srgb, var(--border-light) 72%, var(--brand-primary) 18%);
}
.bkp-path-panel__row > span {
color: var(--brand-primary-deep-text);
font-family: var(--tbox-font-mono);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
}
/* "Before you restore" callout heading: the global font reset leaves callout
h3s at body size/weight, so the heading disappears against the checklist
below it. List markers come from the shared .tbox-offer-list component. */
.tbox-quick-path .tbox-callout h3 {
margin: 0 0 var(--space-xs);
font-size: var(--fs-heading-sm);
font-weight: var(--fw-semibold);
color: var(--text-primary);
}
:root[data-theme="dark"] .bkp-path-panel__row > span {
color: var(--brand-primary-light);
}
@media (width <= 900px) {
.bkp-hero.tbox-hero-v3--compact {
text-align: center;
}
.bkp-recovery-layout {
grid-template-columns: 1fr;
}
}
/* stylelint-disable no-descending-specificity -- scoped block ordered for readability over cross-file specificity ranking */
/* stylelint-disable no-duplicate-selectors -- late route polish intentionally layers over earlier App Hosting and Cloud VPS spoke rules. */
/* Cloud VPS hero and configurator overrides */
body #hero-section.tbox-hourly-cloud-vps {
position: relative;
overflow: clip;
}
body #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__inner {
padding-block: 0;
}
body #hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__split {
gap: clamp(2.25rem, 5vw, 5.5rem);
}
body #hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__text {
align-self: start;
}
body #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__title {
max-width: 14.25ch;
text-wrap: balance;
}
body #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__subtitle {
max-width: var(--prose-measure-wide);
text-wrap: pretty;
}
body #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__cta-row {
gap: var(--space-sm-plus);
}
body #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__cta-row .tbox-btn {
min-height: 3.5rem;
border-radius: var(--radius-sm-plus);
}
body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps {
/* Match the .tbox-jump-target stack-aware offset. The old fixed 7rem
predated the sticky jump bar on Cloud VPS routes and left native hash
scrolls (hero CTA, sticky bar) with the heading clipped under the bar. */
scroll-margin-top: 0; /* html scroll-padding-top already clears header + jump bar */
background: color-mix(in srgb, var(--surface-muted) 90%, var(--brand-primary-bg) 10%);
}
body #hero-section.tbox-hourly-cloud-vps ~ #fit-section .tbox-usecase-card,
body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-card {
border-color: color-mix(in srgb, var(--border-light) 80%, var(--brand-primary) 20%);
border-radius: var(--radius-sm-plus);
box-shadow: none;
}
body #hero-section.tbox-hourly-cloud-vps ~ .tbox-cvps-proof-section {
padding-block: clamp(2.5rem, 4vw, 3.75rem);
}
body #hero-section.tbox-hourly-cloud-vps ~ .tbox-cvps-proof-section .tbox-container {
max-width: 1100px;
}
body #hero-section.tbox-hourly-cloud-vps ~ #fit-section .tbox-usecase-card:hover,
body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-card:hover {
background: color-mix(in srgb, var(--surface-base) 90%, var(--brand-primary-bg) 10%);
transform: none;
}
:root[data-theme="dark"] body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps {
background: color-mix(in srgb, var(--surface-subtle) 90%, var(--brand-primary) 5%);
}
:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-pillar,
:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-detail-card,
:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-extras-strip,
:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ #fit-section .tbox-usecase-card,
:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-card {
border-color: var(--border-mid);
}
:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ #fit-section .tbox-usecase-card:hover,
:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-card:hover {
background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary) 8%);
}
:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ .tbox-cvps-proof-section {
background: var(--surface-base);
}
body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-section__desc {
max-width: var(--prose-measure-default);
margin: var(--space-sm) auto 0;
color: var(--text-secondary);
font-size: clamp(1rem, 1.25vw, 1.125rem);
line-height: 1.65;
}
@media (width <= 1024px) {
body #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__title {
max-width: 16ch;
}
}
@media (width <= 600px) {
body #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__inner {
padding-block: 0;
}
body #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__title {
max-width: 15ch;
margin-inline: 0;
text-align: left;
}
body #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__subtitle {
margin-inline: 0;
max-width: 100%;
text-align: left;
}
body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps {
/* Stack-aware offset (header + jump bar + cushion); fixed 5.5rem clipped
the section heading under the mobile jump bar on hash navigation. */
scroll-margin-top: 0; /* html scroll-padding-top already clears header + jump bar */
padding-top: clamp(2.75rem, 10vw, 4rem);
}
body #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__cta-row .tbox-btn {
width: 100%;
justify-content: center;
}
body #hero-section.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-section__heading,
body #hero-section.tbox-hourly-cloud-vps ~ #fit-section .tbox-section__heading,
body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-section__heading {
text-align: left;
text-wrap: balance;
}
}
/* Cloud VPS full polish pass */
/* Mobile keeps the live fleet animation (per owner preference); the static
mobile-proof fallback stays suppressed at every width. */
body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof {
display: none;
}
body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__head {
display: grid;
gap: var(--space-2xs);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--text-inverse-12);
}
body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__eyebrow {
color: color-mix(in srgb, var(--text-inverse) 72%, transparent);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
}
body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__sla {
justify-self: start;
color: color-mix(in srgb, var(--text-inverse) 72%, transparent);
font-size: var(--fs-2xs);
font-weight: var(--fw-semibold);
text-decoration: underline;
text-underline-offset: 2px;
}
body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__sla:hover,
body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__sla:focus-visible {
color: var(--text-inverse);
}
body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__nodes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-xs);
padding-block: var(--space-md);
}
body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__node {
display: inline-grid;
min-height: 2.4rem;
place-items: center;
border: 1px solid var(--text-inverse-16);
border-radius: var(--radius-sm-plus);
color: var(--text-inverse);
font-family: var(--ff-mono);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
}
body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__node--healthy {
background: color-mix(in srgb, var(--success) 20%, transparent);
}
body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__node--balancing {
background: color-mix(in srgb, var(--brand-primary-light) 24%, transparent);
}
body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__node--failover {
background: color-mix(in srgb, var(--brand-cta) 24%, transparent);
}
body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__states {
display: grid;
gap: var(--space-sm);
}
body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__state {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-sm);
align-items: start;
color: color-mix(in srgb, var(--text-inverse) 78%, transparent);
font-size: var(--fs-sm);
line-height: var(--lh-snug);
}
body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__state strong {
display: block;
color: var(--text-inverse);
font-size: var(--fs-sm);
}
body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__dot {
width: 0.6rem;
height: 0.6rem;
margin-top: 0.28rem;
border-radius: 50%;
background: var(--brand-cta);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-cta) 16%, transparent);
}
body #hero-section.tbox-hourly-cloud-vps ~ #fit-section .tbox-section__heading {
max-width: 34rem;
}
body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section {
background: color-mix(in srgb, var(--surface-muted) 78%, var(--surface-base) 22%);
}
body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-grid {
gap: var(--space-md-plus);
}
body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-card {
padding: clamp(1rem, 1.4vw, 1.25rem);
background: color-mix(in srgb, var(--surface-base) 92%, var(--surface-muted) 8%);
}
:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section {
background: var(--surface-subtle);
}
:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-card {
background: color-mix(in srgb, var(--surface-base) 86%, var(--surface-muted) 14%);
}
/* === tbox-qualifier — two-panel fit/routing split === */
@media (width <= 600px) {
body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-grid {
grid-template-columns: 1fr;
}
}
/* Cloud VPS Volumes route overrides */
.tbox-cvps-vol-hero__copy {
min-width: 0;
}
#content .tbox-cvps-vol-hero .tbox-hero-v3__title,
#content .tbox-cvps-vol-hero .tbox-hero-v3__subtitle,
#content #hero-section.tbox-cvps-vol-hero .tbox-hero-v3__title,
#content #hero-section.tbox-cvps-vol-hero .tbox-hero-v3__subtitle {
margin-right: 0 !important;
margin-left: 0 !important;
text-align: left !important;
}
/* Volumes ledger: the proof figure sits inside a , where the
floating accent hairline reads as a stray divider — drop it. The caption
paragraph is re-enabled by the shared :is(#cluster, #multi-region,
#disk-volume-ops) .tbox-ui-proof__text rule. */
#disk-volume-ops .tbox-ui-proof::before {
content: none;
}
@media (width <= 768px) {
.tbox-cvps-vol-hero ~ .tbox-mobile-sticky-cta .tbox-mobile-sticky-cta-actions {
grid-template-columns: minmax(0, 1fr) minmax(4.2rem, auto);
}
.tbox-cvps-vol-hero ~ .tbox-mobile-sticky-cta .tbox-btn-outline {
padding-inline: var(--space-sm);
}
}
@media (width <= 640px) {
.tbox-cvps-vol-hero.tbox-hero-v3--compact {
text-align: center;
}
}
/* stylelint-enable no-duplicate-selectors */
/* Phase 1.1 — Dark-mode bento CTA contrast (companion to the light-mode
flip earlier in this file). `:where()` wraps the variant exclusion so
later variant overrides (.tbox-storage-node-cta, .tbox-docker-action-card,
.tbox-ah-autoscale-action-card, .tbox-ah-portability-toolkit ..., and
.tbox-cvps-security-policy ...) keep their tied-or-greater specificity
and win for their dark-bg surfaces. */
:root[data-theme="dark"] #content .tbox-cvps-security-policy .tbox-card.tbox-bento-cta-card:not(.tbox-bento-cta-card--surface) :is(h3, h4) {
color: var(--text-on-dark);
}
:root[data-theme="dark"] #content .tbox-cvps-security-policy .tbox-card.tbox-bento-cta-card:not(.tbox-bento-cta-card--surface) p {
color: var(--text-on-dark-muted);
}
:root[data-theme="dark"] #content .tbox-cvps-security-policy .tbox-card.tbox-bento-cta-card > .tbox-btn[data-cta-tier="primary"] {
color: var(--tbox-btn-primary-text);
}
:root[data-theme="dark"] #content .tbox-cvps-security-policy .tbox-card.tbox-bento-cta-card > .tbox-btn[data-cta-tier="secondary"] {
color: var(--text-on-dark);
}
/* The cyan thread — a single 2px line behind the row that visually wires
the stages into one mechanism. Decorative-but-functional:
communicates "these stages run as one connected process". */
.tbox-reliability-blueprint::before {
content: "";
position: absolute;
left: var(--space-2xl);
right: var(--space-2xl);
/* Bisects the station dots: list padding-top + stage border/padding
(--space-lg + 1px) + half the 20px dot outer box, less half this
thread's 2px height. */
top: calc((var(--space-lg) * 2) + 10px);
height: 2px;
background: linear-gradient(to right,
transparent 0%,
var(--brand-primary) 8%,
var(--brand-primary) 92%,
transparent 100%);
z-index: 0;
pointer-events: none;
}
/* Station node — an unnumbered dot marking where the thread passes through
each stage. Shared recipe with the deploy-pipeline mobile rail node (which
sets its own content/position; without content it never renders on
desktop). Keep the two in this one rule so the marks can't drift apart. */
.tbox-reliability-blueprint__stage::before {
content: "";
margin-bottom: var(--space-xs);
}
.tbox-reliability-blueprint__stage-meta strong {
font-weight: var(--fw-semibold);
color: var(--text-primary);
}
/* Risk/prerequisite line — quiet, not alarming. */
.tbox-reliability-blueprint__stage-risk {
margin: 0;
font-size: var(--fs-sm);
line-height: var(--lh-normal);
color: var(--text-secondary);
}
/* Variant modifiers carry no separate styling by default — content type
alone does not change the shape. Pages or routes may layer scoped
overrides via .tbox-reliability-blueprint--{deploy,recovery,boundary,
lifecycle,workflow} when the surrounding band needs a tonal shift. */
:root[data-theme="dark"] .tbox-reliability-blueprint__stage {
background: var(--surface-glass-04);
border-color: var(--surface-glass-12);
}
:root[data-theme="dark"] .tbox-reliability-blueprint__stage-label,
:root[data-theme="dark"] .tbox-reliability-blueprint__stage-outcome {
color: var(--text-inverse);
}
:root[data-theme="dark"] .tbox-reliability-blueprint__stage-meta {
border-top-color: var(--surface-glass-10);
color: var(--text-on-dark-muted);
}
:root[data-theme="dark"] .tbox-reliability-blueprint__stage-meta strong {
color: var(--text-on-dark-strong);
}
:root[data-theme="dark"] .tbox-reliability-blueprint__stage-risk {
color: var(--text-on-dark-muted);
}
:root[data-theme="dark"] .tbox-reliability-blueprint::before {
background: linear-gradient(to right,
transparent 0%,
var(--brand-primary) 8%,
var(--brand-primary) 92%,
transparent 100%);
}
/* Blueprint stages inside Hero V3 sit on the always-dark hero surface in
BOTH themes. The hero's dark-surface context block already remaps the ink
tokens (--text-primary/--text-secondary/--border-light) in light mode; the
only gap is the card surface, which stays --surface-base white. Glass it.
The dark-theme stage rules above still win in dark mode. */
.tbox-hero-v3 .tbox-reliability-blueprint__stage {
background: var(--surface-glass-04);
border-color: var(--surface-glass-12);
}
/* Same surface in both themes, so use the same on-dark inks in both. The
light-mode island token for --text-secondary (neutral-1) was 4.19:1 on the
#0e588d hero for the 14px stage meta; the dark-theme inks are >=4.79:1. */
.tbox-hero-v3 .tbox-reliability-blueprint__stage-label,
.tbox-hero-v3 .tbox-reliability-blueprint__stage-outcome {
color: var(--text-inverse);
}
.tbox-hero-v3 .tbox-reliability-blueprint__stage-meta {
border-top-color: var(--surface-glass-10);
color: var(--text-on-dark-muted);
}
.tbox-hero-v3 .tbox-reliability-blueprint__stage-meta strong {
color: var(--text-on-dark-strong);
}
.tbox-hero-v3 .tbox-reliability-blueprint__stage-risk {
color: var(--text-on-dark-muted);
}
@media (width <= 768px) {
.tbox-reliability-blueprint {
grid-template-columns: 1fr;
gap: var(--space-md);
}
/* Mobile thread becomes a vertical rail. */
.tbox-reliability-blueprint::before {
left: calc(var(--space-lg) + 10px);
right: auto;
top: var(--space-lg);
bottom: var(--space-lg);
width: 2px;
height: auto;
background: linear-gradient(to bottom,
transparent 0%,
var(--brand-primary) 8%,
var(--brand-primary) 92%,
transparent 100%);
}
:root[data-theme="dark"] .tbox-reliability-blueprint::before {
background: linear-gradient(to bottom,
transparent 0%,
var(--brand-primary) 8%,
var(--brand-primary) 92%,
transparent 100%);
}
}
/* =========================================================================
End Phase 2 (Track 1) primitives
========================================================================= */
/* =========================================================================
PLAN_CRITIQUE_2 Phase 1 — Foundation defects + readability tokens
Source contract: PLAN_CRITIQUE_2.md Phase 1, Task 1
----------------------------------------------------------------------
Shared, scoped primitives only. No per-page rules. Each block names the
exact surfaces it owns and the reason it ships now (not later as polish).
========================================================================= */
/* §1.1 — Prose measure utility classes.
Pair with --prose-measure-narrow|default|wide. Use these to cap shared
prose surfaces (section description, intro, dense paragraph wrappers,
table explanatory text, card body copy, shortcode CTA notes) without
inventing a new max-width per page. */
.tbox-measure-default { max-width: var(--prose-measure-default); }
/* =========================================================================
End PLAN_CRITIQUE_2 Phase 1 primitives
========================================================================= */
/* =========================================================================
PLAN_CRITIQUE_2 Phase 3 — Shared archetype contracts
Source contract: PLAN_CRITIQUE_2.md Phase 3, Task 5
----------------------------------------------------------------------
Five of the six archetypes reuse existing primitives:
- Decision-Tree Chooser → .tbox-decision-matrix
- Responsibility Ledger → .tbox-spec-table
- Lifecycle Timeline → .tbox-reliability-blueprint--lifecycle
- Fleet/Host Monitor → .tbox-fleet-monitor
- Runtime Contract Panel → .tbox-runtime-contract (shell, below)
+ .tbox-runtime-release-ledger (rows)
New primitives below cover what was missing:
§3.1 .tbox-fit-honesty — wrong-fit signature band
§3.2 .tbox-recovery-ledger — Recovery Flow Ledger archetype
§3.3 .tbox-know-before-restore — risk panel above destructive ledgers
§3.3b .tbox-runtime-detail — eyebrow label for the runtime tab group
§3.4 .tbox-runtime-contract — Runtime Contract Panel shell
========================================================================= */
/* §3.1 — tbox-fit-honesty
Full-bleed band that signs each page with one editorial wrong-fit moment.
No card chrome; 1px hairline separators between rows. Three slots:
Best fit / Not a fit / Better route. Mobile stacks; desktop renders three
columns. Copy uses the wide editorial measure so the band scans like a
single short essay, not a card stack. */
.tbox-fit-honesty {
margin: 0;
padding: var(--space-xl) 0;
}
.tbox-fit-honesty__inner {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
align-items: stretch;
}
.tbox-fit-honesty__row {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
margin: 0;
min-width: 0;
}
.tbox-fit-honesty__row + .tbox-fit-honesty__row {
border-left: 1px solid var(--border-light);
}
.tbox-fit-honesty__label {
margin: 0;
font-size: var(--fs-heading-sm);
font-weight: var(--fw-semibold);
letter-spacing: 0;
color: var(--text-muted);
}
.tbox-fit-honesty__row[data-fit="best"] .tbox-fit-honesty__label {
color: var(--brand-primary-text);
}
.tbox-fit-honesty__row[data-fit="not"] .tbox-fit-honesty__label {
color: var(--text-secondary);
}
.tbox-fit-honesty__row[data-fit="route"] .tbox-fit-honesty__label {
color: var(--brand-cta-text-deep);
}
.tbox-fit-honesty__copy {
margin: 0;
font-size: var(--fs-lg);
line-height: var(--lh-relaxed);
color: var(--text-primary);
max-width: var(--prose-measure-wide);
}
.tbox-fit-honesty__copy strong {
font-weight: var(--fw-bold);
}
.tbox-fit-honesty__action {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: var(--space-2xs);
margin-top: auto;
padding-top: var(--space-2xs);
min-height: var(--min-touch-target);
font-weight: var(--fw-semibold);
font-size: var(--fs-base);
color: var(--brand-primary-text);
text-decoration: underline;
text-underline-offset: 0.18em;
}
.tbox-fit-honesty__action:hover {
color: var(--brand-primary-deep-text);
}
.tbox-fit-honesty__action:focus-visible {
outline: var(--focus-outline-width) solid var(--focus-ring);
outline-offset: var(--focus-outline-offset);
border-radius: var(--radius-2xs);
}
:root[data-theme="dark"] .tbox-fit-honesty__row + .tbox-fit-honesty__row {
border-left-color: var(--surface-glass-12);
}
:root[data-theme="dark"] .tbox-fit-honesty__label {
color: var(--text-on-dark-muted);
}
:root[data-theme="dark"] .tbox-fit-honesty__row[data-fit="best"] .tbox-fit-honesty__label {
color: var(--brand-primary);
}
:root[data-theme="dark"] .tbox-fit-honesty__row[data-fit="route"] .tbox-fit-honesty__label {
color: var(--brand-highlight);
}
:root[data-theme="dark"] .tbox-fit-honesty__copy {
color: var(--text-on-dark);
}
:root[data-theme="dark"] .tbox-fit-honesty__copy strong {
color: var(--text-inverse);
}
:root[data-theme="dark"] .tbox-fit-honesty__action {
color: var(--brand-primary);
}
@media (width <= 768px) {
.tbox-fit-honesty {
padding: var(--space-lg) 0;
}
.tbox-fit-honesty__inner {
grid-template-columns: 1fr;
}
.tbox-fit-honesty__row {
padding: var(--space-md);
}
.tbox-fit-honesty__row + .tbox-fit-honesty__row {
border-left: none;
border-top: 1px solid var(--border-light);
}
:root[data-theme="dark"] .tbox-fit-honesty__row + .tbox-fit-honesty__row {
border-top-color: var(--surface-glass-12);
}
}
/* §3.2 — tbox-recovery-ledger
Real for Recovery Flow Ledger archetype. Rows are keyed by the
unique Action (row header — keep it terse; its text is announced as
header context for every cell in the row). Required columns:
Action | Source | Destination | Destructive | Billing |
Operator prerequisite. A better-route alternative, where one exists,
is a .tbox-recovery-ledger__route note inside the most relevant DATA
cell — never a column, and never inside the | . Destructive flag and
billing consequence are visible text on every viewport — never
icon-only or tooltip-only. Mobile collapses to stacked rows via the
shared td[data-label]::before pattern; cells whose content is
derivable from the action name may opt into card-mode hiding with
.tbox-recovery-ledger__cell--collapse — Destructive and Billing never
collapse. */
.tbox-recovery-ledger {
width: 100%;
margin: 0;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
overflow: hidden;
font-size: var(--fs-base);
line-height: var(--lh-relaxed);
background: var(--surface-base);
}
.tbox-recovery-ledger caption {
padding: var(--space-md) var(--space-lg);
text-align: left;
font-weight: var(--fw-semibold);
color: var(--text-secondary);
caption-side: top;
}
.tbox-recovery-ledger thead th {
text-align: left;
font-weight: var(--fw-semibold);
font-size: var(--fs-base);
letter-spacing: 0;
color: var(--text-secondary);
background: var(--surface-subtle);
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--border-light);
vertical-align: bottom;
}
.tbox-recovery-ledger tbody th[scope="row"] {
text-align: left;
font-weight: var(--fw-semibold);
color: var(--text-primary);
padding: var(--space-md);
border-top: 1px solid var(--border-light);
background: var(--surface-row-header);
vertical-align: top;
}
.tbox-recovery-ledger tbody td {
padding: var(--space-sm-mid) var(--space-md);
border-top: 1px solid var(--border-light);
vertical-align: top;
color: var(--text-primary);
}
/* Better-route alternative folded into the Action row header. */
.tbox-recovery-ledger__route {
display: block;
margin-top: var(--space-2xs);
font-size: var(--fs-xs);
font-weight: var(--fw-normal);
color: var(--text-secondary);
}
.tbox-recovery-ledger tbody tr:first-child th,
.tbox-recovery-ledger tbody tr:first-child td {
border-top: none;
}
/* Visible Destructive flag — required by archetype contract. */
.tbox-recovery-ledger__cell--destructive[data-destructive="yes"] {
font-weight: var(--fw-bold);
color: var(--brand-cta-text-deep);
}
.tbox-recovery-ledger__cell--destructive[data-destructive="no"] {
color: var(--text-secondary);
}
.tbox-recovery-ledger__cell--billing {
color: var(--text-secondary);
}
:root[data-theme="dark"] .tbox-recovery-ledger {
background: var(--surface-glass-04);
border-color: var(--surface-glass-12);
color: var(--text-on-dark);
}
:root[data-theme="dark"] .tbox-recovery-ledger thead th {
background: var(--surface-glass-08);
color: var(--text-on-dark-strong);
border-bottom-color: var(--surface-glass-12);
}
:root[data-theme="dark"] .tbox-recovery-ledger tbody th[scope="row"] {
background: var(--surface-glass-06);
color: var(--text-inverse);
border-top-color: var(--surface-glass-10);
}
:root[data-theme="dark"] .tbox-recovery-ledger tbody td {
border-top-color: var(--surface-glass-10);
color: var(--text-on-dark);
}
:root[data-theme="dark"] .tbox-recovery-ledger__cell--destructive[data-destructive="yes"] {
color: var(--brand-highlight);
}
:root[data-theme="dark"] .tbox-recovery-ledger__cell--destructive[data-destructive="no"],
:root[data-theme="dark"] .tbox-recovery-ledger__cell--billing,
:root[data-theme="dark"] .tbox-recovery-ledger__route {
color: var(--text-on-dark-muted);
}
@media (width <= 720px) {
/* caption included: left as table-caption it collapses to min-content
width in card mode. */
.tbox-recovery-ledger,
.tbox-recovery-ledger caption,
.tbox-recovery-ledger thead,
.tbox-recovery-ledger tbody,
.tbox-recovery-ledger tr,
.tbox-recovery-ledger th,
.tbox-recovery-ledger td {
display: block;
width: 100%;
}
.tbox-recovery-ledger thead {
position: absolute;
inset: -9999px auto auto -9999px;
}
/* Cells the page marks as derivable from the action name collapse in
card mode to keep per-card height down. Opt-in per cell — never on
Destructive or Billing, which stay visible per the archetype
contract, and never on cells carrying facts the action name alone
doesn't convey. */
.tbox-recovery-ledger tbody td.tbox-recovery-ledger__cell--collapse {
display: none;
}
.tbox-recovery-ledger tbody tr {
border-top: 1px solid var(--border-light);
padding: var(--space-md) 0;
}
.tbox-recovery-ledger tbody tr:first-child {
border-top: none;
}
.tbox-recovery-ledger tbody th[scope="row"] {
background: transparent;
padding: 0 var(--space-md) var(--space-xs);
border-top: none;
font-size: var(--fs-base);
}
.tbox-recovery-ledger tbody td {
border-top: none;
padding: var(--space-2xs) var(--space-md);
}
.tbox-recovery-ledger tbody td[data-label]::before {
content: attr(data-label);
display: block;
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
margin-bottom: 0.25rem;
}
:root[data-theme="dark"] .tbox-recovery-ledger tbody td[data-label]::before {
color: var(--text-on-dark-muted);
}
:root[data-theme="dark"] .tbox-recovery-ledger tbody tr {
border-top-color: var(--surface-glass-10);
}
/* Card mode loses the destructive column's positional contrast; tint the
whole destructive card so the one dangerous action stays findable in the
stack. Archetype contract: destructive rows carry data-destructive="yes"
on the | as well as the flag cell. */
.tbox-recovery-ledger tbody tr[data-destructive="yes"] {
background: color-mix(in srgb, var(--brand-cta-text-deep) 6%, transparent);
}
:root[data-theme="dark"] .tbox-recovery-ledger tbody tr[data-destructive="yes"] {
background: color-mix(in srgb, var(--brand-highlight) 9%, transparent);
}
}
/* §3.3 — tbox-know-before-restore
Required panel above any Recovery Flow Ledger that contains destructive
rows. Carries the top three risks plus the operator prerequisite for each.
Quiet alt-tone surface; no decorative chrome. */
.tbox-know-before-restore {
margin: 0;
padding: var(--space-md) var(--space-lg);
background: var(--surface-subtle);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
font-size: var(--fs-base);
line-height: var(--lh-relaxed);
}
.tbox-know-before-restore__heading {
margin: 0 0 var(--space-sm);
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
letter-spacing: 0;
color: var(--text-secondary);
}
.tbox-know-before-restore__list {
margin: 0;
padding-inline-start: var(--space-lg-plus);
color: var(--text-primary);
}
.tbox-know-before-restore__list li + li {
margin-top: var(--space-2xs);
}
:root[data-theme="dark"] .tbox-know-before-restore {
background: var(--surface-glass-04);
border-color: var(--surface-glass-12);
color: var(--text-on-dark);
}
:root[data-theme="dark"] .tbox-know-before-restore__heading {
color: var(--text-on-dark-muted);
}
:root[data-theme="dark"] .tbox-know-before-restore__list {
color: var(--text-on-dark);
}
/* Hub #supported-runtimes segmented tabs (CSS-only) + .tbox-runtime-icon. */
/* App Hosting two-column hero layout (clustering, database) */
#content #fit-honesty.tbox-fit-honesty {
padding-block: clamp(var(--space-xl), 4vw, var(--space-3xl));
}
#content #fit-honesty .tbox-fit-honesty__inner {
grid-template-columns: 1fr;
border-block: 1px solid var(--surface-glass-12);
}
#content #fit-honesty .tbox-fit-honesty__row {
display: grid;
grid-template-columns: minmax(8rem, 0.22fr) minmax(0, 1fr);
gap: var(--space-md) clamp(var(--space-xl), 4vw, var(--space-3xl));
padding: clamp(var(--space-md), 2vw, var(--space-lg)) 0;
}
#content #fit-honesty .tbox-fit-honesty__row + .tbox-fit-honesty__row {
border-top: 1px solid var(--surface-glass-12);
border-left: 0;
}
#content #fit-honesty .tbox-fit-honesty__copy {
max-width: var(--prose-measure-wide);
}
#content #fit-honesty .tbox-fit-honesty__action {
grid-column: 2;
margin-top: calc(var(--space-xs) * -1);
}
@media (width <= 640px) {
#content #fit-honesty .tbox-fit-honesty__row {
grid-template-columns: 1fr;
gap: var(--space-xs);
padding-block: var(--space-md);
}
#content #fit-honesty .tbox-fit-honesty__action {
grid-column: 1;
margin-top: 0;
}
}
/* ============================================================
Cloud VPS Pricing Reference Grid (/cloud-vps/pricing)
Live hourly + monthly rate table rendered from the
configurator bootstrap (hourly-vps-configurator.js).
============================================================ */
.tbox-cvps-pricing-ref__header { margin-bottom: var(--space-xl); }
.tbox-cvps-pricing-grid {
border: 1px solid var(--border-light, var(--ahcalc-slate-200));
border-radius: var(--radius-lg, var(--radius-md));
background: var(--surface-card, #fff);
overflow: hidden;
}
.tbox-cvps-pricing-grid__loading {
padding: var(--space-xl);
text-align: center;
color: var(--text-muted, var(--ahcalc-slate-500));
font-size: var(--fs-sm);
}
.tbox-cvps-pricing-grid__table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
}
.tbox-cvps-pricing-grid__table thead th {
text-align: left;
padding: var(--space-sm-mid) var(--space-lg);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
/* Use the body-row gray (slate-600), not slate-500: the lighter muted token
landed at ~4.42:1 on the subtle header fill, under the 4.5:1 AA floor. */
color: var(--text-secondary, var(--ahcalc-slate-600));
background: var(--surface-subtle, var(--brand-primary-10));
border-bottom: 1px solid var(--border-light, var(--ahcalc-slate-200));
}
.tbox-cvps-pricing-grid__table thead .tbox-cvps-pricing-grid__cell--num { text-align: right; }
.tbox-cvps-pricing-grid__group {
text-align: left;
padding: var(--space-sm-mid) var(--space-lg) var(--space-xs);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--brand-primary-text);
background: var(--surface-subtle, var(--brand-primary-10));
}
.tbox-cvps-pricing-grid__cell {
padding: var(--space-sm-mid) var(--space-lg);
border-top: 1px solid var(--border-light, var(--ahcalc-slate-200));
vertical-align: top;
}
.tbox-cvps-pricing-grid__cell--name { text-align: left; }
.tbox-cvps-pricing-grid__name {
display: block;
font-weight: var(--fw-semibold);
color: var(--text-primary, var(--ahcalc-slate-900));
}
.tbox-cvps-pricing-grid__sub {
display: block;
margin-top: 2px;
font-size: var(--fs-xs);
font-weight: var(--fw-normal);
color: var(--text-muted, var(--ahcalc-slate-500));
}
.tbox-cvps-pricing-grid__cell--unit {
color: var(--text-secondary, var(--ahcalc-slate-600));
white-space: nowrap;
}
.tbox-cvps-pricing-grid__cell--num {
text-align: right;
white-space: nowrap;
font-family: var(--ahcalc-mono);
font-variant-numeric: tabular-nums;
font-weight: var(--fw-semibold);
color: var(--text-primary, var(--ahcalc-slate-900));
}
.tbox-cvps-pricing-grid__per {
margin-left: 2px;
font-size: var(--fs-xs);
font-weight: var(--fw-normal);
color: var(--text-muted, var(--ahcalc-slate-500));
}
.tbox-cvps-pricing-grid__note {
margin-top: var(--space-md);
font-size: var(--fs-xs);
color: var(--text-muted, var(--ahcalc-slate-500));
line-height: var(--lh-relaxed);
}
@media (width <= 600px) {
/* Keep all four columns reachable on narrow screens via horizontal scroll
rather than clipping the Est. monthly column. Scroll-shadow affordance
(Verou technique): surface-colored cover layers (background-attachment:
local) hide the edge shadows until there is content to scroll toward, so
a fade appears on whichever side has more table off-screen. --border-mid
adapts per theme, so the cue shows in both light and dark. */
.tbox-cvps-pricing-grid {
overflow: auto hidden;
-webkit-overflow-scrolling: touch;
background:
linear-gradient(to right, var(--surface-card, #fff) 30%, rgb(255 255 255 / 0%)) left center,
linear-gradient(to left, var(--surface-card, #fff) 30%, rgb(255 255 255 / 0%)) right center,
radial-gradient(farthest-side at left center, var(--border-mid), rgb(255 255 255 / 0%)) left center,
radial-gradient(farthest-side at right center, var(--border-mid), rgb(255 255 255 / 0%)) right center;
background-repeat: no-repeat;
background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
background-attachment: local, local, scroll, scroll;
}
.tbox-cvps-pricing-grid__table { font-size: var(--fs-xs); min-width: 30rem; }
.tbox-cvps-pricing-grid__cell,
.tbox-cvps-pricing-grid__table thead th,
.tbox-cvps-pricing-grid__group { padding-left: var(--space-md); padding-right: var(--space-md); }
.tbox-cvps-pricing-grid__cell--unit { white-space: nowrap; }
}