and
this file after outward.css (it's NOT bundled in outward.css). Every rule is scoped
under .offers.is-detailed, so the base card and all other consumers are untouched.
What it changes vs the simplified base card:
- a price-top-right HEADER: plan name + speed on the left, price + SAVE pill on the right,
split by a thin centred vertical divider (.offer-rule, its own element);
- a larger, dominant speed (.offer-title);
- a limited-time STREAMING-CREDIT callout (.offer-stream) between the description and CTA —
a "LIMITED TIME OFFER" legend badge on the panel's top border, a "$XXX STREAMING CREDIT"
headline, and the MyBundle service chips (borderless/translucent on the dark feature card);
- blue card-hover CTA (keyed off the CARD's own hover, so all cards follow, not just feature);
- an explicit whole-card overlay link (.offer-cardlink) for apps whose cards are
s — mark
it aria-hidden + tabindex -1 in markup (the visible CTA stays the labelled link). */
/* ── Header row: name + speed LEFT, price + SAVE lifted to the top-RIGHT, centred divider ──── */
.offers.is-detailed .offer-head { display:flex; align-items:stretch; justify-content:space-between; gap:0; }
.offers.is-detailed .offer-headline { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.offers.is-detailed .offer-rule { flex:0 0 1px; align-self:stretch; margin:4px 0; background:#D9E0EA; }
.offers.is-detailed .offer-feature .offer-rule { background:rgba(255,255,255,.20); }
/* Price block: stacked + right-aligned in the corner; speed becomes the dominant element. */
.offers.is-detailed .offer-price { flex-direction:column; align-items:flex-end; justify-content:center;
gap:7px; margin:0; text-align:right; }
.offers.is-detailed .op-amt { font-size:1.95em; } /* balance the price against the speed beside it */
.offers.is-detailed .offer-title { font-size:1.85em; line-height:1.1; }
/* Airier card: breathing room above the description (the streaming note owns the run to the CTA). */
.offers.is-detailed .offer-line { margin:28px 0 0; }
/* Card-hover CTA → light blue, keyed off the CARD's own hover so all cards follow. */
.offers.is-detailed .offer:hover .offer-cta { background:var(--blue); color:#fff; }
/* Explicit whole-card overlay link (for
cards; the base stretched .offer-cta::after loses
hit-testing once the streaming panel is in the card). */
.offers.is-detailed .offer-cardlink { position:absolute; inset:0; z-index:2; border-radius:inherit; }
/* ── Limited-time STREAMING-CREDIT callout ─────────────────────────────────────────────────── */
.offers.is-detailed .offer-stream { position:relative; margin:26px 0 22px; padding:20px 10px 17px; text-align:center;
background:rgba(0,114,188,.05); border:1px solid rgba(0,114,188,.13); border-radius:14px; }
.offers.is-detailed .os-kicker { position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
background:#fff; padding:4px 12px; border:1px solid rgba(0,114,188,.16); border-radius:20px;
box-shadow:0 1px 2px rgba(13,34,64,.05);
font-family:var(--font-head); font-weight:800; font-size:.62em;
letter-spacing:.16em; text-transform:uppercase; color:var(--green-dk); white-space:nowrap; }
.offers.is-detailed .os-amt { font-family:var(--font-head); font-weight:800; font-size:.9em;
letter-spacing:0; text-transform:uppercase; color:var(--navy); margin-bottom:11px; }
.offers.is-detailed .os-amt b { font-size:1.12em; }
.offers.is-detailed .os-logos { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
/* 5+ service chips: cap the row width so they balance ~3-per-row (centered) instead of orphaning
one chip on the wider feature card. Scoped via :has() so 4-chip callouts stay on one line. */
.offers.is-detailed .os-logos:has(.sp-svc:nth-child(5)) { max-width:220px; margin-left:auto; margin-right:auto; }
.offers.is-detailed .sp-svc { background:#fff; border:1px solid #E6EAF0; border-radius:6px; padding:5px 7px;
font-family:var(--font-head); font-weight:800; font-size:.72em; line-height:1;
letter-spacing:-.01em; white-space:nowrap; box-shadow:0 1px 2px rgba(13,34,64,.06); }
.offers.is-detailed .sp-svc.netflix { color:#E50914; letter-spacing:.02em; }
.offers.is-detailed .sp-svc.disney { color:#0063E5; }
.offers.is-detailed .sp-svc.hbomax { color:#0042C7; }
.offers.is-detailed .sp-svc.hulu { color:#13B866; }
.offers.is-detailed .sp-svc.youtubetv { color:#FF0000; }
.offers.is-detailed .offer-feature .offer-stream { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.offers.is-detailed .offer-feature .os-kicker { background:#15335C; border-color:rgba(255,255,255,.22); color:var(--green);
box-shadow:0 1px 3px rgba(0,0,0,.3); }
.offers.is-detailed .offer-feature .os-amt { color:#fff; }
.offers.is-detailed .offer-feature .sp-svc { border-color:transparent; box-shadow:0 1px 3px rgba(0,0,0,.28); }
/* ---- components/plans.css ---- */
/* wire3-shared — components/plans.css
Plan-preview grid (auto-fit cards with a "popular" highlight). Themed via tokens.
`.section` is a generic centered content band reused by other pages too. */
.section { max-width:1040px; margin:0 auto; padding:24px; }
.section h2 { font-size:1.5em; text-align:center; margin-bottom:6px; color:var(--navy); }
.section .lead { text-align:center; color:var(--grey-dk); margin:0 auto 28px; max-width:560px; }
.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; }
.plan { position:relative; background:var(--white); border:2px solid var(--grey-lt); border-radius:var(--radius); padding:26px 22px; box-shadow:0 1px 3px rgba(0,0,0,.06); transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.plan:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--navy-mid); }
.plan.popular { border-color:var(--green); background:rgba(125,196,0,.04); }
.plan .tag { position:absolute; top:-11px; left:22px; background:var(--green); color:var(--navy); font-size:.72em; font-weight:800; padding:3px 11px; border-radius:20px; letter-spacing:.02em; text-transform:uppercase; }
.plan .speed { font-family:var(--font-head); font-size:2.3em; font-weight:800; letter-spacing:-0.03em; color:var(--navy); }
.plan .speed small { font-size:.42em; font-weight:600; color:var(--grey-mid); }
.plan .name { font-weight:700; color:var(--grey-mid); margin-bottom:12px; }
.plan .price { font-family:var(--font-head); font-size:1.7em; font-weight:800; color:var(--navy); margin:8px 0 2px; }
.plan .price span { font-size:.5em; color:var(--grey-mid); font-weight:600; }
.plan .meta { color:var(--grey-dk); font-size:.88em; min-height:42px; margin:10px 0 16px; }
.plan .btn { width:100%; }
/* ---- components/plan-features.css ---- */
/* wire3-shared — components/plan-features.css
The "pick your plan" intro that sits above a plan selector: a centred section head
(.plan-head) + a clean, boxless 3-up row of always-on essentials (.plan-feats, icon +
label). Token-themed (outward tokens); pairs with components/speed-carousel.css. OPT-IN:
per page (not auto-imported by layouts/outward.css). The app supplies the copy +
inline SVG icons; this file is the styling. Uses the shared `rise` keyframe (core/reset). */
.plan-head { text-align:center; max-width:660px; margin:6px auto 16px; animation:rise .5s var(--ease) both; }
.plan-head h1 { font-size:2.2em; line-height:1.1; margin:0 0 10px; color:var(--navy); }
.plan-head p { color:var(--grey-dk); font-size:1.05em; max-width:600px; margin:0 auto; }
.plan-feats { list-style:none; margin:0 auto 6px; padding:0; max-width:760px; display:flex; flex-wrap:wrap;
align-items:center; justify-content:center; gap:10px 36px; }
.plan-feats li { display:flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:700; font-size:.95em; color:var(--navy); }
.plan-feats li svg { width:19px; height:19px; flex-shrink:0; color:var(--green-dk); }
@media (max-width:560px){
.plan-head h1 { font-size:1.72em; }
.plan-head p { font-size:.98em; }
.plan-feats { gap:11px 22px; }
.plan-feats li { font-size:.9em; }
}
/* ---- components/speed-carousel.css ---- */
/* wire3-shared — components/speed-carousel.css
"Speed is the spine" plan picker: a windowed card carousel + range slider. Behaviour:
js/speed-carousel.js → SpeedCarousel.mount(rootEl, { tiers, defaultIndex, selectedIndex,
onSelect }). NOTHING is selected on mount; an explicit pick marks the card .is-selected
(blue border + green wash — overrides the popular tier's gradient ring). .is-active is
carousel focus only. Each card carries the per-tier streaming-credit ribbon (with a
MyBundle hover popover) + a Select-plan button; the popular tier gets a gradient border.
Token-themed (outward tokens). OPT-IN: this per page — it is NOT auto-imported by
layouts/outward.css, because the sp-* classes are owned by this component and would
collide with any app carrying its own copy. See blocks/ + templates/ for usage.
──────────────────────────────────────────────────────────────────────────── */
/* ── Stage + viewport (the windowed frame) ───────────────────────────────────
The horizontal edge fade below is the LOAD default (left fade, right fully visible);
speed-carousel.js then drives it per scroll position (a side fades only when a card is
still hidden that way). The top/bottom fade dissolves the card shadow and is constant. */
.sp-stage { position:relative; margin:12px 0 0; }
.sp-viewport { overflow:hidden; padding:48px 0;
-webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, #000 2.5%, #000 100%), linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 4%, #000 95%, rgba(0,0,0,0) 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, #000 2.5%, #000 100%), linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 4%, #000 95%, rgba(0,0,0,0) 100%);
mask-composite:intersect; }
.sp-track { display:flex; gap:36px; will-change:transform; transition:transform .45s var(--ease); }
/* ── Card ────────────────────────────────────────────────────────────────── */
.sp-card { position:relative; isolation:isolate; flex:0 0 286px; box-sizing:border-box; background:var(--white); border:2px solid var(--grey-lt);
border-radius:var(--radius); padding:26px 22px 28px; box-shadow:var(--shadow); cursor:pointer; text-align:left;
opacity:.66; transform:scale(.92);
transition:opacity .35s var(--ease), transform .35s var(--ease), border-color .2s, box-shadow .3s; }
.sp-card:hover:not(.is-selected) { opacity:.86; border-color:var(--grey-mid); }
/* is-active = carousel FOCUS (the framed/centred card) — prominence only, no selection look. */
.sp-card.is-active { opacity:1; transform:scale(1.045); box-shadow:var(--shadow-lg); }
/* is-selected = the user's explicit pick. ONE selection signal everywhere: a blue border
+ a green wash. Overrides the popular gradient ring so selected always reads the same. */
.sp-card.is-selected { opacity:1; border-color:var(--blue);
background:linear-gradient(180deg, #E2F2C4 0%, #F2F9E2 46%, var(--white) 100%); }
.sp-card:hover { z-index:10; } /* lift the hovered card so its ribbon popover sits above neighbours */
@media (max-width:560px){ .sp-card{ flex-basis:250px; } }
/* Full-width gradient "pill" plan-name header — a slice of the global BLUE→GREEN speed
ramp at this tier's position (bluer = slower); the inline gradient is set by the JS. */
.sp-name { display:block; text-align:center; color:#fff; font-family:var(--font-head); font-weight:800; font-size:.84em;
letter-spacing:.09em; text-transform:uppercase; padding:8px 12px; border-radius:999px; margin-bottom:15px;
box-shadow:0 2px 9px rgba(13,34,64,.16); }
/* "Most popular" badge — gradient pill straddling the top border, matching the shared
"Our promise" feature flag (value-band .vi-flag). Pairs with .is-popular's border. */
.sp-pop-tag { position:absolute; top:0; left:50%; transform:translate(-50%,-50%); white-space:nowrap; z-index:3;
font-family:var(--font-head); font-weight:800; font-size:.62em; letter-spacing:.08em; text-transform:uppercase;
color:#fff; background:linear-gradient(135deg,var(--green) 0%,var(--blue) 100%);
padding:5px 14px; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.28); }
/* 2px gradient border stroke on the popular tier — same mask technique as the shared
.vitem-feature::before. The card's own 2px border goes transparent; inset:-2px pushes the
ring onto the border box so it sits flush at the true outer edge (no gap). On hover the
ring fades so the hover border paints cleanly over it (see the windowed section), and on
selection it yields entirely to the blue selected border — one consistent signal. */
.sp-card.is-popular { border-color:transparent; box-shadow:0 16px 40px rgba(13,34,64,.17); }
.sp-card.is-popular.is-selected { border-color:var(--blue); }
.sp-card.is-popular.is-selected::before { opacity:0; }
.sp-card.is-popular::before { content:""; position:absolute; inset:-2px; border-radius:var(--radius); padding:2px; pointer-events:none;
background:linear-gradient(135deg,var(--green) 0%,var(--blue) 100%); transition:opacity .15s;
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor;
mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude; }
.sp-row { display:flex; align-items:center; justify-content:center; gap:16px; margin:10px 0 14px; }
.sp-div { width:2px; align-self:stretch; background:var(--grey-lt); border-radius:1px; }
.sp-speed { display:flex; align-items:baseline; gap:7px; }
.sp-speed b { font-family:var(--font-head); font-weight:800; font-size:2.9em; line-height:.9; letter-spacing:-0.03em; }
.sp-speed span { font-family:var(--font-head); font-weight:700; font-size:1.05em; color:var(--grey-dk); }
.sp-price { display:flex; flex-direction:column; align-items:flex-start; font-family:var(--font-head); line-height:1; }
.sp-price .was { text-decoration:line-through; color:var(--grey-mid); font-weight:700; font-size:.95em; margin-bottom:3px; }
.sp-price .now { color:var(--navy); font-weight:800; font-size:1.6em; letter-spacing:-0.02em; }
.sp-price .now small { color:var(--grey-mid); font-weight:600; font-size:.55em; letter-spacing:0; }
.sp-blurb { color:var(--grey-dk); font-size:.92em; line-height:1.45; min-height:60px; margin-bottom:4px; }
/* "Select plan" affordance at the foot of every card; pushed to the card bottom so buttons
share a baseline; flips to a filled "Selected" on the picked (.is-selected) card. */
.sp-select { margin-top:auto; display:flex; align-items:center; justify-content:center; gap:7px;
font-family:var(--font-head); font-weight:800; font-size:.92em; letter-spacing:.01em;
padding:11px 14px; border-radius:12px; border:1.5px solid var(--grey-lt); background:#fff; color:var(--navy);
transition:background .15s, border-color .15s, color .15s, box-shadow .15s; }
.sp-select-on { display:none; align-items:center; gap:6px; }
.sp-select-on svg { width:15px; height:15px; }
.sp-card:hover .sp-select { border-color:var(--navy-mid); }
.sp-card.is-selected .sp-select { background:var(--green); border-color:var(--green); color:var(--navy); box-shadow:0 6px 16px rgba(125,196,0,.32); }
.sp-card.is-selected .sp-select-default { display:none; }
.sp-card.is-selected .sp-select-on { display:inline-flex; }
/* ── Streaming-credit ribbon — draped & wrapped across the card, beneath the blurb ──
Honey-gold with a metallic satin finish: a luminance ripple WITHIN the gold hue
(no hue shift — that read as loud) + a faint top sheen, so it suggests actual gold
while staying quiet next to the page's navy/blue/green. Navy ink, a "LIMITED TIME"
kicker. The band OVERHANGS both card edges (drape) and a darker triangle folds
behind each end (wrap). Only rendered on tiers with a credit (plans.json promo). */
.sp-promo { position:relative; display:flex; flex-direction:column; align-items:center; gap:0;
margin:6px -32px 10px; padding:4px 30px 5px; color:var(--navy); /* -32 overhangs ~10px past the card border */
background:
linear-gradient(180deg, rgba(255,255,255,.23) 0%, rgba(255,255,255,0) 42%, rgba(122,86,18,.05) 100%),
linear-gradient(105deg, #E8C04B 0%, #F8E48B 24%, #FAE99B 30%, #EBC555 52%, #E4B942 64%, #F4D975 80%, #E5BB47 100%);
box-shadow:0 4px 11px rgba(13,34,64,.09),
inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(122,86,18,.16); }
.sp-promo-kick { font-family:var(--font-head); font-weight:800; font-size:.58em; letter-spacing:.18em; text-transform:uppercase; opacity:.82; }
.sp-promo-amt { font-family:var(--font-head); font-weight:800; font-size:.86em; letter-spacing:.03em; text-transform:uppercase; line-height:1.04; }
.sp-promo-amt b { font-size:1.2em; }
/* Fold-back tails (CSS-Tricks pattern): the darker underside peeks from behind each end. */
.sp-promo::before, .sp-promo::after { content:''; position:absolute; bottom:-7px; z-index:-1; border:5px solid #B99836; }
.sp-promo::before { left:0; border-left-color:transparent; border-bottom-color:transparent; }
.sp-promo::after { right:0; border-right-color:transparent; border-bottom-color:transparent; }
/* Licensed streaming wordmarks, shown ON the card directly beneath the ribbon. The white tiles
need a hairline border + soft shadow to read on the light card (border scoped here so the
promo-page offer cards, which set their own .sp-svc border, are untouched). */
.sp-promo-svcs { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:0 0 16px; }
.sp-promo-svcs .sp-svc { border:1px solid var(--grey-lt); box-shadow:0 1px 2px rgba(13,34,64,.06); }
.sp-svc { background:#fff; border-radius:6px; padding:5px 7px; font-family:var(--font-head); font-weight:800; font-size:.72em; line-height:1; letter-spacing:-.01em; white-space:nowrap; }
.sp-svc.netflix { color:#E50914; letter-spacing:.02em; }
.sp-svc.disney { color:#0063E5; }
.sp-svc.hbomax { color:#0042C7; }
.sp-svc.hulu { color:#13B866; }
.sp-svc.youtubetv { color:#FF0000; }
/* ── Arrows ──────────────────────────────────────────────────────────────── */
.sp-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:46px; height:46px; border-radius:50%;
border:1.5px solid var(--grey-lt); background:var(--white); color:var(--navy); display:flex; align-items:center; justify-content:center;
cursor:pointer; box-shadow:var(--shadow); transition:background .15s, color .15s, border-color .15s; }
.sp-arrow:hover:not(:disabled) { background:var(--navy); color:#fff; border-color:var(--navy); }
.sp-arrow:disabled { opacity:.3; cursor:default; }
.sp-arrow svg { width:22px; height:22px; }
.sp-arrow.prev { left:4px; } .sp-arrow.next { right:4px; }
.sp-arrow[hidden] { display:none; }
@media (max-width:560px){ .sp-arrow{ width:40px; height:40px; } .sp-arrow svg{ width:19px; height:19px; } }
/* ── Speed slider — permanent BLUE→GREEN ramp; thumb ring follows the ramp (--thumb) ──
Seated in a subtle grey "well" (a touch darker than the page bg), snug beneath the cards.
Ticks are absolutely positioned by the JS at each value's native thumb centre. */
.sp-slider { max-width:600px; margin:22px auto 0; padding:15px 22px 7px; background:var(--grey-lt); border-radius:16px; box-shadow:inset 0 1px 2px rgba(13,34,64,.05); }
.sp-range { -webkit-appearance:none; appearance:none; width:100%; height:9px; border-radius:6px;
background:linear-gradient(90deg, #2E90E0 0%, #4FA83A 58%, #7DC400 100%); outline:none; cursor:pointer; }
.sp-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:50%;
background:var(--white); border:3px solid var(--thumb, var(--blue)); box-shadow:var(--shadow); cursor:grab; transition:transform .12s, border-color .2s; }
.sp-range::-webkit-slider-thumb:active { transform:scale(1.12); cursor:grabbing; }
.sp-range::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--white); border:3px solid var(--thumb, var(--blue));
box-shadow:var(--shadow); cursor:grab; }
.sp-range:focus-visible { box-shadow:0 0 0 4px rgba(46,144,224,.22); }
.sp-ticks { position:relative; height:20px; margin-top:6px; }
.sp-tick { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; background:none; border:0;
font-family:var(--font-head); font-weight:700; font-size:.84em; color:var(--grey-mid); cursor:pointer; padding:2px 2px; transition:color .15s; }
.sp-tick:hover { color:var(--navy-mid); }
.sp-tick.on { color:var(--navy); }
/* ── Windowed framing (the default mount mode) ───────────────────────────────
~3 co-equal cards in view (no spine scale/fade), the off-frame tier peeks, a single arrow
per side that still hides a tier. Selection is shown on the card (blue border + green wash
+ Select→Selected button) + the slider, so the resting frame stays neutral. */
.sp-windowed .sp-viewport { padding:40px 0 30px; } /* extra top room clears the "Most popular" badge */
.sp-windowed .sp-card { display:flex; flex-direction:column; opacity:1; transform:none;
transition:opacity .25s, transform .18s, border-color .15s, box-shadow .15s; }
.sp-windowed .sp-card:hover:not(.is-selected) { opacity:1; border-color:var(--navy-mid); transform:translateY(-3px); box-shadow:0 10px 26px rgba(13,34,64,.12); }
.sp-card.is-popular:hover:not(.is-selected)::before { opacity:0; } /* fade the gradient so the hover border shows over it */
.sp-windowed .sp-card.is-active { transform:none; box-shadow:var(--shadow); } /* focus stays neutral; selection carries the look */
.sp-windowed .sp-card.is-peek:not(.is-active) { opacity:.88; } /* the off-frame (clipped) tier stays clearly visible */
@media (max-width:560px){
.sp-viewport { padding:24px 0; }
.sp-slider { margin-top:16px; padding:13px 16px 7px; }
}