inside one keeps its brand blue: inheritance never beats
a directly matching rule. */
body .form-group > label:not(.custom-control-label):not(.form-check-label),
body #order-standard_cart .form-group > label:not(.custom-control-label):not(.form-check-label),
body #frmCheckout .form-group > label:not(.custom-control-label):not(.form-check-label),
body #order-standard_cart #frmCheckout .form-group > label:not(.custom-control-label):not(.form-check-label) {
font-size: 13px;
font-weight: 500;
color: var(--ui-ink-sec);
}
/* Choices and consent sentences: ink only, no size or weight change.
The Bootstrap-4 class names alone (.form-check-label, .custom-control-label)
reached none of them - this theme still emits the Bootstrap-3 vocabulary,
"label.radio-inline" for the eleven payment methods and "label.checkbox" for
the policy consent. Verified on the live page after the first apply, when all
eleven payment labels were still rendering #666666: the control that decides
HOW THE CUSTOMER PAYS was the last off-palette grey on the site. */
body .form-check-label,
body .custom-control-label,
body .radio-inline,
body .checkbox-inline,
body label.radio,
body label.checkbox,
body label.form-check,
body #registration label.form-check,
body .checkbox > label,
body #order-standard_cart .form-check-label,
body #order-standard_cart .custom-control-label,
body #order-standard_cart .radio-inline,
body #order-standard_cart .checkbox-inline,
body #order-standard_cart label.radio,
body #order-standard_cart label.checkbox,
body #order-standard_cart #frmCheckout .form-check-label,
body #order-standard_cart #frmCheckout .custom-control-label,
body #order-standard_cart #frmCheckout .radio-inline,
body #order-standard_cart #frmCheckout label.checkbox {
color: var(--ui-ink-sec);
}
/* "Please choose your preferred method of payment." is a - and .small is Bootstrap's 80%, so it landed at 11.2px, the last
node under the floor on the site. 13px is the detail step; the muted ink it
already carries stays. */
body #frmCheckout p.small,
body #order-standard_cart #frmCheckout p.small {
font-size: 13px;
}
/* "Configurable Options" on the configure page was 16px/400 #005588 on a
#f1f1f1 chip - a THIRD blue in a heading role, on a page in the purchase
path. The checkout page already had this fixed, but scoped to #frmCheckout,
so the configure page never got it. Widened, with both copies pointing at the
same rung so the two pages converge rather than diverge.
Hooks mirror the pair already proven on checkout: ".sub-heading > span" AND
the .primary-bg-color class. "span.sub-heading" matches nothing here. */
body #order-standard_cart .sub-heading {
border-color: var(--ui-border);
}
body #order-standard_cart .sub-heading > span,
body #order-standard_cart .sub-heading > span.primary-bg-color,
body #order-standard_cart .sub-heading span.primary-bg-color {
background-color: var(--ui-surface);
color: var(--ui-ink-str);
font-weight: 600;
}
/* --- Type ladder: one page title, one floor, three weights --------------- */
/* Three page-title sizes for one role: 36px on the four order-form pages, 28px
on login and contact, 22px on submitticket. 28 wins over the documented 36
because two pages already render it untouched, and because it stops the page
title competing with the summary total for largest object on the cart screen.
THE SELECTOR IS THE WHOLE JOB HERE. "body h1" loses: the 36px arrives from
"#order-standard_cart .font-size-36" in all.min.css, which loads a SECOND time
AFTER this file, at (1,1,0) - so an element prefix is not enough, the id has
to be repeated and the class named. Measured, not assumed; the plain rule was
checked against the live page first and would have been a silent half-apply.
The 8px underneath is Bootstrap reboot's .5rem default, not a decision. On
Configure, Review & Checkout and Checkout there is no sub-line, so 8px is the
WHOLE gap between the title and the first card, while a 22px heading on
register gets 20px. 16 and not 20: 20 would match that heading exactly but
would start cutting the 14px sub-line loose from the title it belongs to.
submitticket's 22px heading is deliberately NOT chased. It is h3.card-title -
and so are register's four "Personal Information" headings, verified on both
pages. One rule cannot tell them apart, and 28/22/22/22 inside one page would
be worse than the split it fixed. The site ends at 28 on seven pages and 22 on
one: reduced, not resolved. */
body #order-standard_cart h1.font-size-36,
body #order-standard_cart .header-lined h1,
body h1, body .h1 {
font-size: 28px;
}
body h1, body .h1,
body #order-standard_cart .header-lined h1 {
margin-bottom: 16px;
}
/* The Order Summary h2 is a specificity loss, not a missing rule, and the proof
is that it landed PARTIALLY: the rule above declares 16px/600/.01em and the
page measures 20px/400 with ls +0.196px. The letter-spacing got through
because it is the one property the theme's id-scoped rule does not declare.
That single fact explains both anomalies at once - this was the site's only
weight-400 heading and its only positively tracked one.
line-height is load-bearing, not tidiness: without it the band drops from
12+24+12=48px to 44px when the heading rule's 1.25 takes over - a silent 4px
shift on the money panel. */
body #order-standard_cart .order-summary > h2,
body #order-standard_cart .order-summary h2 {
margin-bottom: 0;
padding: 12px 16px;
font-size: 16px;
font-weight: 600;
line-height: 24px;
letter-spacing: .01em;
color: #ffffff;
}
/* The spec list is 13px on the store and 12px one click later - the same list,
from the same template partial, for the same product, inside the panel this
file elsewhere calls "the one thing a buyer re-reads before paying".
.product-info itself is NOT sized. Its base is the 16px body - proven by
.product-title measuring 19.2px, which is 1.2em of 16, not of 12 - so setting
the container would drag every em child with it. Only the leaf is pinned. */
body #order-standard_cart .product-info .product-desc,
body .product-info .product-desc {
font-size: 13px;
}
/* One plan name, one size. "US 4GB" renders 17px/600 on the store, 19px/600 on
configure, 16px/700 in the Order Summary and 17px/600 in the cart row - four
treatments of one string on three consecutive screens on the way to paying.
19 is on no step and 700 is not one of the three weights. The 1.2em
multiplier is on .product-title itself, so that is the element pinned.
The summary's 16px is left alone: 16 is a real step and that panel is compact.
Only its 700 is an actual violation. */
body #order-standard_cart .product-info .product-title,
body .product-info .product-title {
font-size: 17px;
line-height: 24px;
}
body #order-standard_cart .order-summary strong,
body #order-standard_cart .order-summary b,
body .order-summary strong,
body .order-summary b {
font-weight: 600;
}
/* Store card price lockup: twelve nodes at 11px on the busiest page, under the
floor, in the block a buyer reads to compare plans.
THE BLOCK IS DELIBERATELY NOT SIZED, and this is the important line. Either
there is no em multiplier inside the lockup (in which case sizing
.product-pricing would be safe), or the labels are a at 0.8em (in
which case sizing it to 12px takes them to 9.6px - WORSE than the defect, and
invisible without re-measuring). A silent miss is recoverable; a silent 9.6px
is not. Only leaves are pinned, so both readings are safe. */
/* CORRECTED ON THE LIVE PAGE. Neither branch of the "is it a ?" question
was right: the markup is
Starting from
$9.99 USD
Monthly
- bare TEXT NODES, no anywhere, so the leaf-only rule matched nothing
and all twelve stayed at 11.2px. The 11.2 is the container's own inherited
0.8em and nothing but .price multiplies off it, so the container IS the right
thing to size here after all; .price is pinned directly so the 1.4em cannot
ride the change up.
The price selector needed the theme's own shape to win. The theme spells it
"#order-standard_cart .products .product div.product-pricing span.price" -
(1,4,2) - and the first attempt at (1,4,1) lost by a single element, so the
price kept rendering 15.68px. Element names, not just id depth. */
body #order-standard_cart .products .product div.product-pricing,
body .products .product div.product-pricing {
font-size: 12px;
}
body #order-standard_cart .products .product div.product-pricing span.price,
body #order-standard_cart .products .product span.price,
body .products .product div.product-pricing span.price,
body .products .product span.price {
font-size: 16px;
line-height: 24px;
}
/* Also corrected here: the plan name is a bare in the card header, and
the theme colours it directly with
"#order-standard_cart .products .product header span { color:#333 }" (1,2,2).
Colouring the