like support@boostero.com */
a:not(.btn):focus-visible {
outline: 2px solid var(--amethyst, #A78BFA);
outline-offset: 2px;
border-radius: 2px;
}
/* ============================================
PHASE 3 - Commit 8.1: Content + SEO polish
- Speed‚ÜíFAQ‚ÜíCTA breathing rhythm
============================================ */
/* Extra breathing room on whichever .newpage-body is immediately before CTA
(currently FAQ section after Commit 8.1 insertion).
Apple/Linear pre-CTA convention — "land" before conversion panel. */
.newpage-body:has(+ .newpage-cta) {
padding-bottom: 88px;
}
@media (max-width: 768px) {
.newpage-body:has(+ .newpage-cta) {
padding-bottom: 64px;
}
}
/* ============================================
PHASE 3 - Commit 8.2: Motion + atmosphere polish
Final pre-audit polish layer:
- Hero play button idle breath (attention-pull on primary CTA)
- Trust featured card enhanced hover (-4px + subtle scale)
- Audience pill icon micro-scale on pill hover
All wrapped in prefers-reduced-motion guards.
============================================ */
/* — Hero play button: idle breath
Subtle scale 1 ‚Üí 1.025 ‚Üí 1 over 3.2s, pauses on hover so the
Commit 2 :hover scale(1.05) takes over cleanly without jumps. */
@keyframes hero-play-breath {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.025); }
}
.hero-video:not(.is-playing) .hero-video-play {
animation: hero-play-breath 3.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.hero-video:not(.is-playing) .hero-video-play:hover,
.hero-video:not(.is-playing) .hero-video-play:focus-visible {
animation: none;
}
/* — Trust featured card (Quality Guarantee = first .bts-item in trust grid):
Enhanced hover lift. Doubles baseline -2px to -4px + micro-scale.
NOTE: does not touch box-shadow — baseline amethyst elevation glow
from Commit 6 stays intact on hover. */
.bts-grid[data-variant="trust"] .bts-item:first-child {
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.bts-grid[data-variant="trust"] .bts-item:first-child:hover {
transform: translateY(-4px) scale(1.005);
}
/* — Audience pill icon: micro-scale on pill hover.
Icon "responds" when user hovers the pill — tactile feedback layer. */
.audience-pill .audience-pill-icon {
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.audience-pill:hover .audience-pill-icon {
transform: scale(1.08);
}
/* — Reduced motion: kill all 8.2 keyframe animations */
@media (prefers-reduced-motion: reduce) {
.hero-video-play {
animation: none !important;
}
.bts-grid[data-variant="trust"] .bts-item:first-child:hover {
transform: none;
}
.audience-pill:hover .audience-pill-icon {
transform: none;
}
}
/* ============================================
PHASE 3 - Commit 8.4: Mobile platform grid fix
============================================ */
/* Phase 2 unconditionally centers .platform-tile:nth-child(5) at mobile
breakpoints (grid-column: 1/-1 + max-width: 60%). That was correct for
Phase 2's original 5-tile grid (5th tile = centered alone in last row).
With Phase 3's 8-tile expansion (added Spotify/LinkedIn/Telegram),
X(Twitter) is now the 5th tile and gets stuck spanning the full row,
breaking the 2-col mobile rhythm: ends up as 2-2-1-2-1 instead of
the expected 2-2-2-2.
Override only when total tiles = 8 (via :has() — Phase 2's 5-tile
case stays untouched). */
.platform-grid:has(> .platform-tile:nth-child(8)) > .platform-tile:nth-child(5) {
grid-column: auto;
max-width: none;
margin-inline: 0;
}
/* ============================================
PHASE 3 - Commit 9: Premium polish pass
============================================ */
/* 1. Sub-pixel cleanup — round Phase 2 clamp() artifacts to whole pixels.
Audit found: .bts-title 18.037px, .bts-grid gap 15.915px, .bts-item
padding 21.22/26.525/31.83. Whole-pixel values rasterize cleaner.
Trust featured (first child of [data-variant="trust"]) keeps its
Commit 6 22px H3 and larger padding via specificity. */
.bts-grid {
gap: 16px;
}
.bts-grid:not([data-variant="trust"]) .bts-item,
.bts-grid[data-variant="trust"] .bts-item:not(:first-child) {
padding: 24px 28px 32px;
}
.bts-grid:not([data-variant="trust"]) .bts-title,
.bts-grid[data-variant="trust"] .bts-item:not(:first-child) .bts-title {
font-size: 18px;
line-height: 1.4;
}
/* 2. Mobile CTA truncation fix — primary button was clipping
"Create your free accou…" on 430px. Constrain width + center. */
@media (max-width: 480px) {
.newpage-cta .btn-yellow,
.newpage-cta .btn-secondary,
.newpage-cta .btn-primary,
.still-questions .btn-primary {
width: 100%;
max-width: 320px;
justify-content: center;
}
}
/* 3. FAQ caret rotation — Phase 2 details had transition: all → 0s
(instant snap). Add smooth caret rotation on open. */
.faq-caret {
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
details[open] > summary .faq-caret,
.faq-item[open] > summary .faq-caret {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.faq-caret {
transition: none;
}
}
/* 4. Speed numerals — demote from full yellow #FACA33 to 0.7 opacity
so the final CTA + Sign-up + play disc remain the rarest yellow
moments on the page. Yellow rarity = premium signal. */
[data-variant="speed"] .prose-block > p::before {
opacity: 0.7;
}
/* ============================================
PHASE 4 - Commit 1: Resellers page patterns
- Hero pill eyebrow + sizing
- bts-grid 2√ó2 variant for 4 feature cards
- .step-grid + CSS counter for 01/02/03/04 numerals
- data-variant="steps" subtle yellow ambient + eyebrow
- .trust-grid horizontal cards (icon left + body right)
- Final CTA polish (get-started block, button row)
============================================ */
/* — Hero polish — */
.hero-eyebrow {
display: inline-block;
padding: 6px 16px;
border: 1px solid rgba(167, 139, 250, 0.25);
border-radius: 9999px;
background: rgba(167, 139, 250, 0.06);
}
.reseller-h1 {
text-align: center;
margin-top: var(--space-5, 24px);
}
.reseller-subhead {
text-align: center;
margin-top: var(--space-4, 16px);
max-width: 880px;
margin-inline: auto;
}
.reseller-hero-leads {
max-width: 880px;
margin-inline: auto;
margin-top: var(--space-5, 24px);
}
.reseller-hero-cta {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
margin-top: var(--space-6, 32px);
}
/* — Section 2: Feature cards 2×2 (4 items) — */
.bts-grid[data-variant="reseller-features"] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
@media (max-width: 768px) {
.bts-grid[data-variant="reseller-features"] {
grid-template-columns: 1fr;
}
}
/* — Section 3: How It Works steps — */
.step-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
counter-reset: step-num;
margin-top: var(--space-6, 32px);
}
.step {
counter-increment: step-num;
position: relative;
padding: 32px 24px;
border-radius: 16px;
border: 1px solid rgba(167, 139, 250, 0.14);
background: linear-gradient(180deg, rgba(167, 139, 250, 0.04) 0%, rgba(167, 139, 250, 0.01) 100%);
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.step:hover {
transform: translateY(-2px);
border-color: rgba(167, 139, 250, 0.24);
}
.step::before {
content: counter(step-num, decimal-leading-zero);
display: block;
font-size: 44px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #C4B5FD 0%, #A78BFA 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #fff;
margin-bottom: 16px;
opacity: 0.85;
}
@supports not (-webkit-background-clip: text) {
.step::before {
color: #C4B5FD;
-webkit-text-fill-color: #C4B5FD;
}
}
.step-title {
font-size: 18px;
line-height: 1.4;
font-weight: 600;
margin: 0 0 12px;
color: #C4B5FD;
}
.step p {
font-size: 15px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.72);
margin: 0;
}
.step p a {
color: #C4B5FD;
text-decoration: underline;
text-underline-offset: 2px;
}
@media (max-width: 1024px) {
.step-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.step-grid {
grid-template-columns: 1fr;
}
}
/* data-variant="steps" — subtle yellow ambient + yellow eyebrow
(mirrors Phase 3 data-variant="speed" treatment) */
.newpage-body[data-variant="steps"] {
position: relative;
overflow: hidden;
}
.newpage-body[data-variant="steps"] .section-eyebrow-wrapper .text-eyebrow {
color: #FACA33;
}
.newpage-body[data-variant="steps"]::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 60% 50% at 50% 0%,
rgba(250, 202, 51, 0.05) 0%, transparent 70%);
z-index: 0;
}
.newpage-body[data-variant="steps"] > .container {
position: relative;
z-index: 1;
}
/* — Section 4: Trust grid horizontal cards — */
.trust-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: var(--space-6, 32px);
}
.trust-card {
display: flex;
gap: 20px;
align-items: flex-start;
padding: 28px 28px 28px 24px;
border-radius: 16px;
border: 1px solid rgba(167, 139, 250, 0.14);
background: linear-gradient(180deg, rgba(167, 139, 250, 0.04) 0%, rgba(167, 139, 250, 0.01) 100%);
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.trust-card:hover {
transform: translateY(-2px);
border-color: rgba(167, 139, 250, 0.26);
}
.trust-card-icon {
flex-shrink: 0;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: linear-gradient(135deg,
rgba(109, 40, 217, 0.18) 0%,
rgba(167, 139, 250, 0.10) 100%);
color: #C4B5FD;
}
.trust-card-body {
flex: 1;
min-width: 0;
}
.trust-card-title {
font-size: 18px;
line-height: 1.4;
font-weight: 600;
color: #C4B5FD;
margin: 0 0 10px;
}
.trust-card-body p {
font-size: 15px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.74);
margin: 0;
}
@media (max-width: 768px) {
.trust-grid {
grid-template-columns: 1fr;
}
.trust-card {
padding: 24px 20px;
gap: 16px;
}
.trust-card-icon {
width: 48px;
height: 48px;
}
}
/* Why-choose lead constraint */
.reseller-why-lead {
max-width: 720px;
margin-inline: auto;
}
/* — Section 5: Final CTA polish — */
.reseller-cta-h2 {
margin-bottom: var(--space-4, 16px);
max-width: 720px;
margin-inline: auto;
}
.reseller-cta-leads {
max-width: 720px;
margin-inline: auto;
margin-top: var(--space-4, 16px);
}
.get-started-block {
margin-top: var(--space-6, 32px);
padding-top: var(--space-6, 32px);
border-top: 1px solid rgba(167, 139, 250, 0.10);
}
.get-started-eyebrow {
display: inline-block;
margin-bottom: 12px;
color: #FACA33;
}
.reseller-cta-closing {
max-width: 720px;
margin-inline: auto;
margin-top: 0;
}
.reseller-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
margin-top: var(--space-6, 32px);
}
.reseller-cta-buttons .btn svg {
margin-right: 8px;
vertical-align: middle;
}
/* Mobile width constraint for hero + final CTA buttons (Phase 3 Commit 9 pattern) */
@media (max-width: 480px) {
.reseller-hero-cta .btn,
.reseller-cta-buttons .btn {
width: 100%;
max-width: 320px;
justify-content: center;
}
}
/* ============================================
PHASE 4 - Commit 2: Section 2 bts-item paragraph fix
============================================ */
/* Phase 2 baseline .bts-item is display: grid with auto-flow that
places direct children in implicit columns. With 3 direct children
(icon + h3 + p), the body falls into column 1 row 2 — a narrow
~56px column matching the icon's width — causing word-per-line
vertical stacking.
Fix: in our reseller-features variant, span the body paragraph
across all grid columns + add vertical centering on icon+title row
for clean header alignment. */
.bts-grid[data-variant="reseller-features"] .bts-item {
align-items: center;
row-gap: 16px;
}
.bts-grid[data-variant="reseller-features"] .bts-item > p {
grid-column: 1 / -1;
margin: 0;
}
/* ============================================
PHASE 4 - Commit 3: Premium audit polish (12 fixes)
Based on internal + external Claude Chrome audits.
See commit message for itemized list.
============================================ */
/* Transition tokens — single source of truth */
:root {
--ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
--dur-hover: 240ms;
}
/* FIX 1 — .bts-item asymmetric grid bug
Phase 2 baseline .bts-item is display: grid; grid-template-columns: 56px 1fr.
When cards in the same row stretch to tallest sibling AND Commit 2 had
align-items: center, extra height distributed into rows, pushing card #0's
icon+title down 13px (60.75px row vs 48px on cards 1-3) ‚Üí visible gap of
40.15px vs 27.4px on neighbors.
Fix: lock row 1 to 48px (icon height), let row 2 auto, push extra height
to BOTTOM of card via align-content: start; vert-center title only. */
.bts-grid[data-variant="reseller-features"] .bts-item {
align-items: start;
align-content: start;
grid-template-rows: 48px auto;
}
.bts-grid[data-variant="reseller-features"] .bts-item .bts-title {
align-self: center;
}
/* FIX 2 — Convert fixed-pixel grid tracks to fluid
Phase 2 baseline had hardcoded 450px 450px columns causing 141px dead
margin in 1061px container. Convert to fluid 1fr tracks with !important
to override the baseline rule. */
.bts-grid[data-variant="reseller-features"] {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}
.step-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1024px) {
.step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.step-grid { grid-template-columns: minmax(0, 1fr); }
}
/* FIX 3 — Universal :focus-visible rings (WCAG 2.4.7)
External audit verified ZERO focus indicators across entire page.
One rule covers links, buttons, interactive cards. */
:where(a, button, [role="button"], .bts-item, .step, .trust-card):focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 3px;
border-radius: inherit;
}
/* FIX 4 — prefers-reduced-motion guard (a11y)
Page's reveal IntersectionObserver and card transitions ignored user's
OS-level motion preference. Linear/Stripe both honor this. */
@media (prefers-reduced-motion: reduce) {
[data-reveal] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.bts-item, .step, .trust-card, .btn, .btn-yellow, .btn-secondary {
transition: none !important;
}
}
/* FIX 5 — Transition harmonization
Was: 3 competing durations (300/300/500ms) and 2 easings
(premium + Material on .btn-yellow). Now: one token everywhere. */
.bts-item, .step, .trust-card, .btn, .btn-yellow, .btn-secondary {
transition: transform var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium),
background-color var(--dur-hover) var(--ease-premium),
box-shadow var(--dur-hover) var(--ease-premium),
color var(--dur-hover) var(--ease-premium);
}
.newpage-hero a:not(.btn),
.newpage-body a:not(.btn),
.newpage-cta a:not(.btn) {
transition: color 200ms var(--ease-premium),
border-color 200ms var(--ease-premium);
}
/* FIX 6 — Yellow rarity (12 → ~5-6 uses)
GLOBAL CHANGE: also affects Phase 3 About Us page.
Demote: section-eyebrow-line (3 instances per page) + GET STARTED TODAY
eyebrow ‚Üí amethyst. Yellow preserved on: 3 CTA buttons + H1 gradient end
+ Steps section eyebrow (intentional ambient). */
.section-eyebrow-line {
background: #A78BFA;
}
.get-started-eyebrow {
color: #C4B5FD;
}
/* FIX 7 — Step card padding parity
Was 32px 24px (asymmetric horizontal vs other cards' 28px). */
.step {
padding: 32px 28px;
}
/* FIX 8 — Step numeral breathing
16px between 44px numeral and 18px title felt crowded. */
.step::before {
margin-bottom: 20px;
}
/* FIX 9 — Trust card padding harmonize
Was 28/28/28/24 asymmetric. Normalize. */
.trust-card {
padding: 28px;
}
/* FIX 10 — Body opacity harmonization
Was: feature 0.72, step 0.72, trust 0.74. Pick 0.74 across all. */
.bts-grid[data-variant="reseller-features"] .bts-item > p,
.step p,
.trust-card-body p {
color: rgba(255, 255, 255, 0.74);
}
/* FIX 11 — H1 mobile clamp
Was hard 56px, clipping at narrow viewports. */
.reseller-h1 {
font-size: clamp(40px, 4.5vw + 1rem, 56px);
letter-spacing: clamp(-1.4px, -0.025em, -0.8px);
}
/* ============================================
PHASE 4 - Commit 4 (hotfix): Focus rings
Commit 3 used :where(a, button, ...):focus-visible which has
specificity 0 (that's :where()'s feature, not a bug — it strips
inner specificity). Theme baseline a:focus { outline: none }
beat it everywhere. Re-issue with direct selectors + !important
to guarantee the WCAG 2.4.7 ring renders on every focusable.
============================================ */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
.btn-yellow:focus-visible,
.btn-secondary:focus-visible,
.bts-item:focus-visible,
.step:focus-visible,
.trust-card:focus-visible,
[data-reveal] a:focus-visible {
outline: 2px solid #A78BFA !important;
outline-offset: 3px !important;
border-radius: inherit;
}
/* ============================================
PHASE 4 - Commit 5: Real-device mobile fixes + section flow polish
Based on user testing on iPhone Safari (real device).
Commit 3 desktop !important rules were beating media-query overrides.
============================================ */
/* FIX 1 — Section 2 single-column on real mobile
Commit 3 set .bts-grid[data-variant="reseller-features"] columns
with !important on desktop. The @media (max-width: 768px) override
lacked !important so it lost in cascade on real iPhone (390px).
Restore single-column at <=768px with !important. */
@media (max-width: 768px) {
.bts-grid[data-variant="reseller-features"] {
grid-template-columns: 1fr !important;
}
}
/* FIX 2+3 — Hero CTA + Final CTA buttons center on mobile
Theme baseline .btn has justify-content: flex-start (left-align).
Previous mobile rule lacked !important; theme baseline won.
Make buttons full-width with centered text on mobile. */
@media (max-width: 480px) {
.reseller-hero-cta .btn,
.reseller-cta-buttons .btn {
width: 100% !important;
max-width: 100% !important;
justify-content: center !important;
text-align: center !important;
}
.reseller-hero-cta,
.reseller-cta-buttons {
align-items: stretch;
}
}
/* FIX 4 — Soften visible section break between Section 2 (features)
and Section 3 (steps).
Approach: extend Steps section's yellow ambient gradient UPWARD past
the section boundary (~160px) so it bleeds into the void from below
the features section. Combined with tighter padding-top on steps and
padding-bottom on the preceding section (via :has()) the transition
reads as a smooth gradient bridge instead of a hard cut. */
.newpage-body[data-variant="steps"]::before {
inset: -160px 0 0 0;
background: radial-gradient(ellipse 70% 65% at 50% 12%,
rgba(250, 202, 51, 0.06) 0%,
rgba(250, 202, 51, 0.02) 45%,
transparent 80%);
}
.newpage-body[data-variant="steps"] {
padding-top: 48px;
}
.newpage-body:has(+ .newpage-body[data-variant="steps"]) {
padding-bottom: 48px;
}
/* ============================================
PHASE 4 - Commit 6: Round 2 audit polish (13 fixes)
External Claude Chrome second-pass audit. Includes critical mobile
bug fix (trust-card overflow), signature moment (step connector
line), and 11 micro-polish items across icon language, typography,
spacing, motion, and a11y contrast.
GLOBAL IMPACT: fixes 3, 6, 9, 10, 12 also affect Phase 3 About Us
page (design-system level changes). All net improvements.
============================================ */
/* FIX 1 — CRITICAL: Trust card mobile horizontal overflow
At <560px viewports the .trust-card flex-direction: row with the
56px icon-block + body content pushes document width past viewport
(~22px horizontal scroll on real iPhone narrow widths). Stack to
column with adjusted padding + smaller icon. */
@media (max-width: 560px) {
.trust-card {
flex-direction: column !important;
gap: 12px !important;
padding: 24px !important;
}
.trust-card-icon {
width: 48px !important;
height: 48px !important;
}
}
/* FIX 2 — Demote Steps section eyebrow from yellow to lavender
Commit 3 missed this exact selector. The [data-variant=steps]
.text-eyebrow rule from Commit 1 still painted #FACA33. The ambient
::before glow remains yellow (signature moment); only the text
label demotes. Yellow count drops 8 ‚Üí 7. */
.newpage-body[data-variant="steps"] .section-eyebrow-wrapper .text-eyebrow {
color: #C4B5FD;
}
/* FIX 3 — Icon-chip language unification (GLOBAL — also affects About Us)
.bts-icon was opaque saturated badge (gradient #7C3AED ‚Üí #A78BFA,
white icon, no border) while .trust-card-icon was translucent tinted
chip. Two vocabularies in same design system. Align .bts-icon on the
trust translucent treatment — more sophisticated and on-palette (the
#7C3AED was off-token; documented palette is #6D28D9/#A78BFA/#C4B5FD). */
.bts-icon {
background: linear-gradient(135deg,
rgba(109, 40, 217, 0.18) 0%,
rgba(167, 139, 250, 0.10) 100%) !important;
border: 1px solid rgba(167, 139, 250, 0.18);
color: #C4B5FD;
}
.bts-icon svg {
stroke: currentColor;
}
/* FIX 4 — Step-card connector line (signature moment)
1px translucent amethyst line behind the step grid passing through
the numeral's vertical center (32px card padding + 22px numeral half
= 54px from step-grid top). Visible only in the 24px gaps between
cards because .step has z-index: 1 above the line. This is the
Linear/Vercel-tier 4-step sequence visualization. Hidden at <1024px
where step cards stack vertically (no horizontal connector logic). */
.step-grid {
position: relative;
}
.step-grid::after {
content: "";
position: absolute;
top: 54px;
left: 28px;
right: 28px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(167, 139, 250, 0.22) 12%,
rgba(167, 139, 250, 0.22) 88%,
transparent 100%);
z-index: 0;
pointer-events: none;
}
.step {
position: relative;
z-index: 1;
}
@media (max-width: 1024px) {
.step-grid::after { display: none; }
}
/* FIX 5 — Inline link affordance (Stripe pattern)
Currently only color (#A78BFA) distinguishes links. Add 1px
translucent amethyst border-bottom that thickens + color-lifts to
#C4B5FD on hover. Adds the page's only currently-unused
micro-interaction vocabulary. Also unifies link transition to the
240ms premium token. */
.newpage-hero p a,
.newpage-body p a,
.newpage-cta p a {
border-bottom: 1px solid rgba(167, 139, 250, 0.35);
transition: color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.newpage-hero p a:hover,
.newpage-body p a:hover,
.newpage-cta p a:hover {
color: #C4B5FD;
border-bottom-color: rgba(167, 139, 250, 0.85);
}
/* FIX 6 — Card title weight harmonization (GLOBAL)
.bts-title was 700 (Bootstrap-y at 18px) while .step-title and
.trust-card-title were 600. Unify on 600 — lighter, more refined,
matches the lavender token weight. */
.bts-title {
font-weight: 600;
}
/* FIX 7 — Hero eyebrow explicit transition (was 'all' resolving to no-op)
Reading border-color shift on focus required actual property
listing, not the 'all' shorthand which doesn't transition border
property changes reliably. */
.hero-eyebrow {
transition: border-color var(--dur-hover) var(--ease-premium),
background-color var(--dur-hover) var(--ease-premium),
color var(--dur-hover) var(--ease-premium);
}
/* FIX 8 — Trust section padding-bottom normalize
Was 88px outlier vs other section padding-bottoms at 48-56px.
Tightens to 56 for cross-section rhythm. */
.newpage-body:has(.trust-grid) {
padding-bottom: 56px;
}
/* FIX 9 — Section eyebrow line visibility (GLOBAL)
After Commit 3 demoted to amethyst, 2px lavender hairline above a
lavender pill became sub-perceptual. Bump height to 3px to restore
visual cue without changing color (preserves yellow rarity). */
.section-eyebrow-line {
height: 3px;
}
/* FIX 10 — Card border alpha unification (GLOBAL)
.bts-item border was at rgba(167,139,250,0.12); .step and
.trust-card at 0.14. Unify all cards on 0.14 (more visible of the
three) for consistency. */
.bts-item {
border-color: rgba(167, 139, 250, 0.14);
}
/* FIX 11 — Step numeral margin-bottom 20 → 24px
Gradient-clipped 44px numeral creates a phantom visual descender
that makes 20px feel tight against the 18px title underneath.
24px restores proper visual rhythm. */
.step::before {
margin-bottom: 24px;
}
/* FIX 12 — Secondary button silhouette (GLOBAL)
.btn-secondary background at rgba(255,255,255,0.08) was nearly
invisible against dark canvas. Bump to 0.10 + add matching
translucent 1px border so the silhouette reads clearly. */
.btn-secondary {
background-color: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.10);
}
/* FIX 13 — Yellow CTA focus ring contrast
Amethyst (#A78BFA) outline on yellow (#FACA33) = 2.6:1, passes WCAG
3:1 non-text minimum but weak. Switch to dark plum (#150B3D, the
btn-yellow text color) for ~14:1 contrast on yellow surfaces. */
.btn-yellow:focus-visible {
outline-color: #150B3D !important;
}
/* ============================================
PHASE 4 - Commit 7: Connector line removal + stronger section bridge
============================================ */
/* FIX 1 — Remove step-grid connector line
Plan was: line at z-index 0, cards at z-index 1 ‚Üí line visible only
in 24px gaps between cards. Reality: step cards have translucent
background (rgba 0.04 ‚Üí 0.01) so the line shows THROUGH the cards too,
making it look like a continuous line across the page (bug-like).
Cleanest fix: remove. The 01/02/03/04 lavender numerals + sequential
horizontal card layout already communicate "ordered steps" without
needing a connector. */
.step-grid::after {
display: none;
}
/* FIX 2 — Section 2 → Section 3 bridge: actually bridge it
Commit 5 set ambient at rgba(250,202,51,0.06) center fading to 0.02.
That was too subtle to visibly close the gap on a #08041A canvas.
Bump opacity meaningfully (0.10 center) + introduce a lavender
secondary tone at the gradient mid-stop (0.04 lavender) so the
bridge feels intentional + on-brand. Tighter padding (48 ‚Üí 24) on
both sides of the transition closes the physical void too. */
.newpage-body[data-variant="steps"]::before {
inset: -200px 0 0 0;
background: radial-gradient(ellipse 85% 70% at 50% 18%,
rgba(250, 202, 51, 0.10) 0%,
rgba(167, 139, 250, 0.04) 35%,
transparent 80%);
}
.newpage-body[data-variant="steps"] {
padding-top: 24px;
}
.newpage-body:has(+ .newpage-body[data-variant="steps"]) {
padding-bottom: 24px;
}
/* ============================================
PHASE 4 - Commit 8: Unlock Steps ambient bleed-up
============================================ */
/* ROOT CAUSE — Commit 1 set overflow: hidden on the Steps section to
contain the radial gradient. Commits 5+7 added negative inset
(-160px, -200px) to bleed the ambient UPWARD into Section 2 — but
overflow: hidden was CLIPPING the bleed-up at section boundary. The
ambient never escaped, so no matter how strong the gradient, the
bridge couldn't visually reach Section 2.
Fix: overflow: visible. The ambient ::before with bottom: 0 and
left/right: 0 can't escape sideways or downward (inset constrains
it), only top: -240px lets it bleed UP into Section 2. Combined
with the strengthened gradient from Commit 7, the warm/lavender
ambient now colonizes the bottom of Section 2 — sections visually
merge into one continuous canvas. */
.newpage-body[data-variant="steps"] {
overflow: visible;
}
/* Slightly stronger bleed since it finally reaches Section 2 */
.newpage-body[data-variant="steps"]::before {
inset: -240px 0 0 0;
background: radial-gradient(ellipse 90% 75% at 50% 22%,
rgba(250, 202, 51, 0.12) 0%,
rgba(167, 139, 250, 0.05) 35%,
rgba(109, 40, 217, 0.02) 60%,
transparent 85%);
}
/* ============================================
PHASE 4 - Commit 9: Close padding void entirely
(revert Commit 8 overflow leak)
============================================ */
/* User feedback after Commit 8: section breaks now visible at MULTIPLE
places, not just at the Section 2 ‚Üí 3 joint. Root cause: overflow:
visible let the ambient gradient bleed too far up creating a wide
warm zone that highlighted Section 2's top edge too. Net effect:
MORE visible boundaries, not fewer.
New strategy: stop trying to "bridge" with ambient. Just close the
physical padding void to ZERO between the two sections so they
touch directly with no empty band. The eyebrow gets its own
breathing via internal container padding. */
/* Revert Commit 8 overflow change — restore containment */
.newpage-body[data-variant="steps"] {
overflow: hidden;
}
/* Close the void entirely on both sides of the transition */
.newpage-body[data-variant="steps"] {
padding-top: 0;
}
.newpage-body:has(+ .newpage-body[data-variant="steps"]) {
padding-bottom: 0;
}
/* Reset Section 3 ambient: contained inside section, peaked at its
TOP edge (50% 0%) so the warm halo appears right at the joint with
Section 2 — it bridges visually within Section 3's own boundary. */
.newpage-body[data-variant="steps"]::before {
inset: 0;
background: radial-gradient(ellipse 80% 70% at 50% 0%,
rgba(250, 202, 51, 0.10) 0%,
rgba(167, 139, 250, 0.04) 35%,
transparent 75%);
}
/* Eyebrow gets explicit breathing room since section padding-top is 0 */
.newpage-body[data-variant="steps"] > .container {
padding-top: 80px;
}
/* ============================================
PHASE 4 - Commit 10: Real fix for Section 2 ‚Üí 3 joint
Diagnosed via Chrome DOM inspection.
============================================ */
/* Root cause: Features grid bottom (1503px) extends 24px BELOW its
parent section's bottom (1479px). The .bts-grid overflows the
container/section box. Commits 5-9 tried to bridge with ambient
gradient + padding tricks; none addressed the actual protrusion.
Commit 10 fixes the cause + removes the visual section marker. */
/* FIX A — Clip features section so grid can't protrude past boundary */
.newpage-body:has(+ .newpage-body[data-variant="steps"]) {
overflow: hidden;
}
/* FIX B — Hide the section-eyebrow-line on Steps section
This 3px lavender hairline above "GETTING STARTED" is the strongest
visual marker saying "new section starts here." With Section 2 and 3
touching directly, the line creates the perceived "break" — kill it
on Steps specifically to soften the transition. The pill chip itself
remains. */
.newpage-body[data-variant="steps"] .section-eyebrow-line {
display: none;
}
/* FIX C — Tighten Steps container padding-top now that card protrusion
is clipped (no need for 80px buffer) */
.newpage-body[data-variant="steps"] > .container {
padding-top: 48px;
}
/* FIX D — Stronger ambient halo at the joint so the 48px breathing
zone reads as INTENTIONAL warm canvas, not empty dark void */
.newpage-body[data-variant="steps"]::before {
inset: 0;
background: radial-gradient(ellipse 75% 60% at 50% 0%,
rgba(250, 202, 51, 0.18) 0%,
rgba(167, 139, 250, 0.06) 35%,
transparent 70%);
}
/* ============================================
PHASE 4 - Commit 11: Move Steps gradient anchor (MATH-DRIVEN ROOT FIX)
External Claude Chrome did pixel-level diagnostic. Real root cause
of the persistent section joint after 6 failed bridge attempts:
Anchor at 50% 0% + overflow: hidden creates a 1-pixel ΔE=24
hue+luminance cliff at the seam. Yellow peak (alpha 0.18) renders
rgb(51,40,31) at y=seam; body bg rgb(8,4,26) renders 1px above.
ΔE > 20 = jarring visible boundary. Raising opacity in Commits 5-10
only made ΔE worse, never moved the anchor.
Fix: anchor gradient at 50% 40% so the peak sits BEHIND the h2 and
step grid. At the seam, the gradient is now in its skirt zone
(alpha ≈ 0). ΔE at seam drops to 0. Signature moment (warm halo)
relocates to behind the step cards where it belongs — not on the
boundary it was trying to hide. Math verified:
seam (y=1459): d=0.729 > 0.65 stop → α=0 → rgb(8,4,26) ΔE=0 ✅
h2 (y=1565): d=0.390 → α=0.06 lavender → soft cool halo
step grid (y=1639): d=0.154 → α=0.15 yellow→lavender mix → signature
============================================ */
.newpage-body[data-variant="steps"]::before {
background: radial-gradient(80% 55% at 50% 40%,
rgba(250, 202, 51, 0.22) 0%,
rgba(167, 139, 250, 0.08) 30%,
transparent 65%);
}
/* Belt-and-suspenders: kill the 1px lavender bottom border on the last
row of feature cards. The card border at y=seam was a secondary
reference line the eye uses to anchor "where's the boundary". With
gradient ΔE now at 0, removing this hairline closes the last cue. */
.bts-grid[data-variant="reseller-features"] > .bts-item:nth-last-child(-n+2) {
border-bottom-color: transparent;
}
/* ============================================
PHASE 5 - FAQ page specific tokens
Reuses .faq-item accordion pattern from Phase 2/3 (details/summary
with caret rotation). Adds page-specific layout: narrower container
for readability, category grouping, hero center alignment.
============================================ */
.faq-h1 {
text-align: center;
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
.faq-hero-lead {
text-align: center;
max-width: 640px;
margin: 24px auto 0;
}
.faq-container {
max-width: 880px;
}
.faq-category {
margin-bottom: 64px;
}
.faq-category:last-child {
margin-bottom: 0;
}
.faq-category-title {
font-size: 24px;
font-weight: 600;
color: #C4B5FD;
letter-spacing: -0.25px;
margin: 0 0 24px 0;
line-height: 1.3;
}
.faq-stack {
display: flex;
flex-direction: column;
gap: 10px;
}
.faq-q {
font-weight: 500;
font-size: 16px;
color: rgba(255, 255, 255, 0.92);
letter-spacing: -0.1px;
line-height: 1.5;
flex: 1;
padding-right: 16px;
}
.faq-a {
padding: 0 24px 24px 24px;
color: rgba(255, 255, 255, 0.74);
line-height: 1.7;
font-size: 15px;
}
.faq-a p {
margin: 0 0 14px;
}
.faq-a p:last-child {
margin-bottom: 0;
}
.faq-a ul {
padding-left: 24px;
margin: 0 0 14px;
}
.faq-a li {
margin-bottom: 8px;
}
.faq-a li:last-child {
margin-bottom: 0;
}
@media (max-width: 768px) {
.faq-container { padding-left: 20px; padding-right: 20px; }
.faq-category-title { font-size: 22px; margin-bottom: 20px; }
.faq-category { margin-bottom: 48px; }
.faq-a { padding: 0 20px 20px 20px; font-size: 14.5px; }
.faq-q { font-size: 15.5px; padding-right: 12px; }
}
/* ============================================
PHASE 5 - Commit 2: Round 1 audit polish (14 fixes + sticky nav rail)
External Claude Chrome audit identified ports of Phase 4 patterns
that were missed in Phase 5 Commit 1 (typographic punctuation,
H1 clamp, transition tokens) + new UX upgrade (sticky category nav).
============================================ */
/* FIX 1 — Hero eyebrow token (was rendering 17px/400/white — wrong)
Phase 4 scoped .hero-eyebrow styles to .reseller-hero-leads parent;
FAQ page uses .hero-eyebrow-row so the style didn't apply.
Globalize with !important to ensure consistency across all pages. */
.hero-eyebrow {
display: inline-block;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 1.3px !important;
text-transform: uppercase !important;
color: #C4B5FD !important;
padding: 6px 14px;
border: 1px solid rgba(167, 139, 250, 0.25);
border-radius: 9999px;
background-color: transparent;
}
/* FIX 2 — H1 clamp port from Phase 4 Commit 3
H1 was hard-coded 56px on FAQ ‚Üí clips on narrow viewports.
Reuses the proven clamp formula. */
.faq-h1 {
font-size: clamp(40px, 4.5vw + 1rem, 56px) !important;
letter-spacing: clamp(-1.4px, -0.025em, -0.5px) !important;
line-height: 1.15;
}
/* FIX 3 — Drop the 24px translateY reveal on .faq-category
With 16 categories, the 16 successive 24px snap-ups read as judder
on a content-density page. Keep opacity fade (still feels premium),
drop the transform. Hero + CTA islands still get the lift. */
.faq-category[data-reveal] {
transform: none !important;
transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* FIX 4 — Open-state gradient palette (off-palette #7C3AED → #6D28D9)
Boostero palette is #6D28D9 (Purple 700) not #7C3AED (Violet 600). */
details.faq-item[open] {
background: linear-gradient(180deg,
rgba(109, 40, 217, 0.15) 0%,
rgba(31, 18, 72, 0.5) 100%);
}
/* FIX 5 — Promote .faq-a font-size 15px → 16px (reading hierarchy)
Answer text should equal or exceed question size, not be smaller.
Also unify body opacity at 0.74 (was inconsistent 0.7 on inner p). */
.faq-a {
font-size: 16px;
color: rgba(255, 255, 255, 0.74);
}
.faq-a p {
color: inherit;
}
/* FIX 6 — Replace .faq-a transition: all (cascade-pollution) */
.faq-a {
transition: padding var(--dur-hover) var(--ease-premium);
}
/* FIX 7 — details[open] easing token (was Material 0.4, 0, 0.2, 1) */
details.faq-item {
transition: background var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
/* FIX 8 — summary transition tokens (was default ease) */
details.faq-item summary {
transition: color var(--dur-hover) var(--ease-premium),
background-color var(--dur-hover) var(--ease-premium);
}
/* FIX 9 — Summary focus ring system alignment (was 50% alpha) */
details.faq-item summary:focus-visible {
outline: 2px solid #A78BFA !important;
outline-offset: 3px !important;
}
/* FIX 10 — Category count chip beside title */
.cat-count {
display: inline-block;
font-size: 13px;
font-weight: 500;
color: rgba(196, 181, 253, 0.55);
letter-spacing: 0.1px;
margin-left: 8px;
vertical-align: middle;
}
/* FIX 11 — .faq-stack gap 10px → 8px (tighter rhythm) */
.faq-stack {
gap: 8px;
}
/* ============================================
FIX 12 — Sticky category nav rail (>1100px viewport only)
Fills the dead 517px side-margin space; converts 10-screen scroll
into one-click navigation. IntersectionObserver in twig file sets
aria-current on active section.
============================================ */
.faq-toc {
display: none;
}
@media (min-width: 1100px) {
.newpage-body[data-variant="faq-content"] .faq-container {
display: grid;
grid-template-columns: 200px 1fr;
gap: 56px;
max-width: 1136px;
align-items: start;
}
.faq-categories-col {
grid-column: 2;
display: flex;
flex-direction: column;
gap: 64px;
min-width: 0;
}
.faq-toc {
display: block;
position: sticky;
top: 128px;
grid-column: 1;
padding-top: 4px;
max-height: calc(100vh - 144px);
overflow-y: auto;
}
/* Hide scrollbar on rail — content is short enough that it shouldn't need it visually */
.faq-toc::-webkit-scrollbar { width: 0; }
.faq-toc { scrollbar-width: none; }
.faq-toc-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(196, 181, 253, 0.8); /* a11y: was 0.5 (3.1:1, fail) -> 0.8 (>=5.7:1 WCAG AA) */
margin: 0 0 16px 12px;
}
.faq-toc-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.faq-toc a {
display: block;
padding: 7px 12px;
font-size: 13.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
border-left: 2px solid transparent;
border-radius: 0;
transition: color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium),
background-color var(--dur-hover) var(--ease-premium);
letter-spacing: 0.1px;
}
.faq-toc a:hover {
color: #C4B5FD;
background-color: rgba(167, 139, 250, 0.04);
}
.faq-toc a[aria-current="true"] {
color: #C4B5FD;
border-left-color: #A78BFA;
background-color: rgba(167, 139, 250, 0.06);
}
/* .faq-category sits inside .faq-categories-col flex — no per-item grid-column needed */
}
/* Smooth scroll for in-page nav anchor clicks */
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.faq-category[data-reveal] { transition: none !important; }
}
/* Anchor offset: account for sticky header so #cat-X scrolls land below it */
.faq-category[id] {
scroll-margin-top: 128px;
}
/* PHASE 5 - Commit 3 hotfix: at desktop the flex .faq-categories-col controls
gap via flex; reset per-category margin so we don't double 64+64=128px */
@media (min-width: 1100px) {
.faq-categories-col .faq-category {
margin-bottom: 0;
}
}
/* ============================================
PHASE 5 - Commit 4: Round 2 audit polish (rail rhythm + CTA bridge)
External Claude Chrome Round 2 audit identified 6 surgical fixes:
3 for rail visual quality (group rhythm, opacity grading, anchor)
3 for FAQ ‚Üí CTA junction (axis align, compress, halo bridge)
============================================ */
/* FIX 1A — Group eyebrows for rail rhythm (Linear/Stripe/Tailwind pattern)
Replaces visually monotonous 16-flat-list with 3 rhythm groups:
ESSENTIALS (4) / PLATFORMS (10) / EXTRAS (2). Eye lands on labels,
not items. Labels at 35% lavender keep them sub-active relative to
the active link white. */
.faq-toc-group-label {
display: block;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
color: rgba(196, 181, 253, 0.8); /* a11y: was 0.35 (2.2:1, fail) -> 0.8 (>=5.7:1 WCAG AA) */
padding: 16px 12px 6px;
margin: 0;
}
.faq-toc-group-label--first,
.faq-toc-group-label:first-child {
padding-top: 4px;
}
/* FIX 1B — Opacity-grade non-active items + raise active state contrast
Was: inactive 0.6 white, active lavender 100% (low delta, fights bg)
Now: inactive 0.42 white, active 100% white on 10% lavender wash
(clean "you are here" pop, Linear/Stripe pattern) */
@media (min-width: 1100px) {
.faq-toc a {
color: rgba(255, 255, 255, 0.7); /* a11y: was 0.42 (3.8:1, fail) -> 0.7 (>=8:1 WCAG AA); active stays 100% white for "you are here" delta */
}
.faq-toc a:hover {
color: rgba(255, 255, 255, 0.85);
background: transparent;
}
.faq-toc a[aria-current="true"] {
color: rgb(255, 255, 255);
background: rgba(167, 139, 250, 0.10);
border-left-color: rgb(167, 139, 250);
}
}
/* FIX 1C — "Back to top" anchor at rail bottom (visual closure) */
.faq-toc-end {
display: block;
margin-top: 20px;
padding: 7px 12px;
font-size: 12px;
letter-spacing: 0.2px;
color: rgba(255, 255, 255, 0.7); /* a11y: was 0.30 (2.5:1, fail) -> 0.7 (>=8:1 WCAG AA) */
cursor: pointer;
text-decoration: none;
border-left: 2px solid transparent;
transition: color var(--dur-hover) var(--ease-premium);
}
.faq-toc-end:hover {
color: rgba(196, 181, 253, 0.85);
}
.faq-toc-end::before {
content: "\002191 ";
}
/* FIX 2A REVERTED in Commit 5 — pushing CTA into grid col 2 was math-
correct (axis aligned x=1080) but visually broken: it left the entire
left half of the CTA section empty (orphan zone where rail used to be),
which read as a layout bug rather than intentional alignment. CTA now
stays centered in section (matches Phase 4 Resellers CTA pattern).
Compensated for the original "128px horizontal snap" concern via a
stronger halo bridge (FIX 2C in this same block) which provides
visual continuity without forcing axis alignment. */
/* FIX 2B — Compress dead vertical band from 244px to 188px
FAQ bottom 88‚Üí56px (-32), CTA top 64‚Üí48px (-16) = 48px reclaimed.
::before yellow line (1px rgba(250,202,51,0.5)) was invisible AND
counted toward yellow rarity — replaced by halo bridge in 2C. */
.newpage-body[data-variant="faq-content"] {
padding-bottom: 56px;
}
.newpage-cta {
padding-top: 48px;
position: relative;
isolation: isolate;
}
/* FIX 2C — Soft lavender halo bridge across the FAQ→CTA seam (240px tall,
straddles the boundary 120px each side). Same technique as Phase 4
Resellers Section 2‚Üí3 joint diagnostic (radial-gradient anchored
inside content area). Eye reads gradient-fade across the seam
instead of "section ends / new section begins".
Overrides the old 1px yellow ::before line. */
.newpage-cta::before {
content: "" !important;
display: block !important;
position: absolute !important;
inset: -160px 0 auto 0 !important;
height: 320px !important;
width: auto !important;
background: radial-gradient(
ellipse 55% 100% at 50% 50%,
rgba(167, 139, 250, 0.18) 0%,
rgba(167, 139, 250, 0.04) 40%,
rgba(167, 139, 250, 0) 65%
) !important;
pointer-events: none !important;
z-index: -1 !important;
}
/* FIX 4 from Commit 5 REMOVED in Commit 6 — the .still-questions card pattern
(matching About Us) provides intrinsic visual containment via its border +
subtle purple gradient background, making the extra ::after atmospheric
backdrop redundant. The ::before halo bridge (above) still operates across
the seam zone. */
/* PHASE 5 - Commit 5 marker — header offset + Fix 2A revert + halo strengthen + atmospheric backdrop */
/* PHASE 5 - Commit 6 marker — FAQ CTA refactored to .still-questions card pattern */
/* ============================================
COMMIT 7 — Site-wide CTA seam fix (ONE-LINE root-cause)
External Claude Chrome audit (5-page diagnostic) revealed that all
prior bridge work (Commit 4 halo, Commit 5 strengthening to 0.18
alpha / 320px / -160px inset, Commit 6 .still-questions card)
was correctly authored but blocked at paint time by .newpage-cta's
overflow:hidden (inherited from theme baseline). The halo's upper
160px — the half designed to extend INTO the preceding section's
bottom padding and dissolve the seam — was being clipped away.
Auditor's pixel proof:
- Halo nominal range: CTA.top - 160px ‚Üí CTA.top + 160px
- Halo VISIBLE range: CTA.top + 0px ‚Üí CTA.top + 160px (top half clipped)
- Sampled bg at card.top - 20: flat rgb(8,4,26) — halo not painting
- Sampled bg at card.top - 100: flat rgb(8,4,26) — bridge zone empty
- Test with overflow:visible: seam visually dissolves on all 5 pages
The .newpage-cta::before is pointer-events:none, z-index:-1,
left:0 right:0 (can't leak horizontally), extends only 160px
vertically into preceding section's padding-bottom zone (56-88px
on every page) where halo alpha falloff (≈0.04-0.08) is sub-
perceptual against any content. Zero risk to layout, clicks, or
adjacent components. Applies universally desktop + mobile.
Pages fixed: FAQ, About Us, Resellers, Contact, How it works
(and any future page using .newpage-cta + .still-questions). */
.newpage-cta {
overflow: visible !important;
}
/* ============================================
COMMIT 8 — Center button content in .cta-row (mobile alignment)
Pixel proof on 500px viewport, FAQ page:
- Card center_x: 250 (perfectly centered)
- .cta-row center_x: 250 (perfectly centered)
- Btn center_x: 250 (each button container perfectly centered)
- But button uses display:flex without justify-content
- Default justify-content:flex-start ‚Üí text hugs left edge
- "Open a ticket" text starts at viewport x=81 while button center
is at x=250 — visible 119px left-pull of text
- On desktop the row is horizontal so each button is content-sized;
issue is invisible. On mobile (column flex, stretched buttons),
buttons are 402px wide with short text, so misalignment shows.
Scoped to .cta-row .btn — affects only FAQ / About Us / Resellers
/ Contact / How it works CTA buttons. Other buttons on the site
(yellow Sign Up in header, secondary actions inside cards, etc.)
keep their existing flex alignment. */
.cta-row .btn {
justify-content: center;
text-align: center;
}
/* Commit 9 mask-image block REMOVED in Commit 12 — with chrome stripped at
source there is no card top/bottom edge to fade. The mask is dead code. */
/* ============================================
COMMIT 10 — Replace interior bottom glow with outer atmospheric shadow
FINAL CTA card separation fix. The previous 3 commits (7 overflow,
8 button center, 9 mask) all touched the wrong layer. Third-pass
auditor pinpointed the actual ΔE-cliff source:
.still-questions::before {
background: radial-gradient(80% 60% at 50% 100%,
rgba(124,58,237,0.4), transparent 70%);
}
That 40%-alpha purple cloud was painted at maximum intensity at
the card's bottom-edge pixel, then nothing outside the card.
Sampled ΔE between card-bottom-inside and card-bottom-outside:
82.98. That's 3.46× the original seam ΔE that prompted the
whole audit chain. Mask softened the EDGE PIXEL but not the
1.6 ΔE-per-pixel ramp leading up to it.
The fix moves the purple atmosphere OUTSIDE the card via
box-shadow — which paints beyond the border-box, unaffected by
mask-image (mask clips own paint only) and unaffected by
backdrop-filter (different paint phase). The atmospheric
purple continues across the section bg below the card for
~120px, smoothly falling to zero. The cliff dissolves at
the source. */
.still-questions::before {
content: none; /* kill the interior bottom radial glow — the actual cliff source */
}
.still-questions {
box-shadow:
0 80px 120px -20px rgba(124, 58, 237, 0.28), /* primary glow, projects 120px below card */
0 24px 48px -8px rgba(124, 58, 237, 0.12); /* secondary tighter, smooths upper falloff */
}
/* Commit 11 FAQ-only strip block REMOVED in Commit 12 — chrome is now
stripped at source globally (line ~1795). The scoped !important strip
is no longer needed because there is no chrome left to strip. */
/* PHASE 5+ COMMIT 12 — chrome stripped at source globally. See line 1795. */
/* ============================================
COMMIT 13 — Remove box-shadow (THE actual card outline source)
Twelve commits kept this box-shadow in place because each prior
audit assumed it was part of the solution (atmospheric continuity
below the card). Fourth-pass audit live-verified it's actually
what's painting the perceived card silhouette in negative space.
Mechanism: box-shadow paints OUTSIDE the border-box. With the
card transparent (Commit 12), border-radius: 24px rounded, and
shadow at 0.28 alpha + 120px blur, the shadow forms a rounded-
rectangle ring in negative space. The brain's edge detector reads
the inside/outside shadow boundary as a card outline.
Verified ΔE peaks at card.top + 10 (20.1) and card.bottom + 10
(27.3) — exactly the card's border-box boundary. Live JS toggle
of box-shadow:none on all 5 pages — silhouette disappears.
The .newpage-cta::before halo above remains (radial gradient
anchored at section top, no card geometry — cannot produce a
card outline). The CTA is now truly chrome-free at all paint
layers. */
.still-questions {
box-shadow: none !important;
}
/* ============================================
COMMIT 14 was the body::before nuke; SUPERSEDED by Commit 15 below.
Commit 14 removed brand aurora globally; user reported the loss.
Commit 15 restores aurora at ~1/4 original alpha (subtle brand warmth
that does not produce perceived card-frame against transparent CTA). */
/* COMMIT 14 nuke superseded — body::before allowed to render again */
/* ============================================
COMMIT 15 — Restore subtle aurora + kill footer border-top line
User wanted brand aurora back after Commit 14 removed it. The audit
was correct that the ORIGINAL alphas (0.40/0.30/0.25) painted strong
enough corner glows to be reconstructed as card-frame around the
transparent CTA. Solution: restore at ~1/4 alpha — enough brand
warmth, not enough to create perceived frame.
Also: .site-footer has border-top: 1px solid rgba(124,58,237,0.12)
from theme baseline. That's the second visible section separator
user has been reporting — a literal 1px purple line at the top of
the footer. Replaced with a soft gradient fade for visual transition
without a literal line.
============================================ */
/* (a) Subtle aurora — peaks reduced to 1/4 of original Phase 2 values */
/* Commit 15 body::before (3-radial corner pattern) superseded by Commit 16.
Commit 16 unified to top+bottom vertical-axis radials at conservative
alpha (0.12/0.06 — under 0.15 corner-frame threshold).
Commit 17 bumps to full Phase 2 brand intensity since vertical-axis
geometry is exempt from corner-frame reconstruction (horizontal bands,
not corner points). */
body::before {
content: "" !important;
background-image:
radial-gradient(120% 80% at 50% 0%, rgba(167, 139, 250, 0.40) 0%, rgba(0,0,0,0) 60%),
radial-gradient(120% 80% at 50% 100%, rgba(236, 72, 153, 0.25) 0%, rgba(0,0,0,0) 60%),
radial-gradient(80% 50% at 50% 70%, rgba(250, 202, 51, 0.08) 0%, rgba(0,0,0,0) 65%)
!important;
}
/* (b) Remove footer literal border-top line */
.site-footer {
border-top: 0 !important;
position: relative;
}
/* (c) Soft gradient fade above footer instead of the hard line */
.site-footer::before {
content: "";
position: absolute;
top: -64px;
left: 0;
right: 0;
height: 64px;
background: linear-gradient(
to bottom,
rgba(124, 58, 237, 0) 0%,
rgba(124, 58, 237, 0.04) 100%
);
pointer-events: none;
}
/* ============================================
COMMIT 16 — Unify atmosphere, retire CTA halo
Audit 5 confirmed zero measurable ΔE cliffs remain on the page
(max sequential 0.30, max 100px-window 5.57 — sub-threshold).
Perceived separation now driven by composition: two discrete
warmth patches (Commit 15 aurora top + Commit 5/7 CTA halo
middle) with a darker midband between them. Brain reads the gap
as a section boundary.
Single structural move: unify the page atmosphere into ONE
continuous top-to-bottom gradient on body::before (above), and
retire the .newpage-cta::before halo that was creating the
second patch. Continuous gradient cannot have a "gap between
itself," so the composition that produced the perceived
midband boundary is gone.
New aurora geometry: lavender from top (50% 0% anchor) + rose
from bottom (50% 100% anchor), both 120% width √ó 80% height
radial. Alphas chosen above the 0.06-0.08 visibility threshold
for brand warmth to register, and well below the 0.15 frame-
reconstruction threshold so transparent CTA doesn't produce
card outline. */
.newpage-cta::before {
content: none !important;
background-image: none !important;
}
/* ============================================
COMMIT 17 — Full brand intensity aurora (vertical-axis geometry safe).
Audit 5 picked conservative 0.12/0.06 to stay under the 0.15 corner-
frame reconstruction threshold. That threshold only applies to corner-
anchored radials (geometry that can reconstruct as a 4-corner card
frame around transparent CTA). Commit 16's geometry uses vertical-
axis anchors (50% 0%, 50% 100%) which produce horizontal bands —
geometrically incapable of forming a corner frame at any alpha.
Commit 17 returns to full Phase 2 brand intensity:
- Top lavender 0.40 — matches original purple at 15% 15%
- Bottom rose 0.25 — matches original yellow at 50% 85%
- Yellow accent 0.08 at 50% 70% — subtle brand primary, scroll
position below typical CTA viewport center so doesn't frame
CTA content
Brand atmosphere fully visible. Card-frame perception cannot
reconstruct because no corner anchors exist. */
/* ============================================
COMMIT 18 — DESIGN RESTORATION
============================================
Reverts the drift introduced in Commits 9-17 of this session.
Restores brand patterns from Phase 1 (r8 polish on Contact page)
and Phase 2 (Home page corner aurora baseline).
Background:
Phase 1 r8 audit established .still-questions as Brand Pattern #2
of five site signatures: "Glass panel with backdrop-blur 12px and
radial purple glow from bottom edge." Used as secondary CTA
template on Contact, About Us, Resellers, FAQ, Contact, How it
works. Phase 2 added the body::before corner aurora drift as the
page-level brand atmosphere.
During this session's CTA debugging chain, I incrementally
stripped the .still-questions chrome (Commits 9/10/12/13)
chasing perceived "card separation" — destroying the brand
pattern at its source. Commits 14/16 then nuked and replaced
the body::before aurora with conservative vertical-axis
geometry that the user correctly identified as drift from the
theme. Commit 17 over-corrected the aurora to 0.40/0.25/0.08
which read as too bright.
Audit 4 was correct that box-shadow on a transparent card
draws a silhouette ring — but the correct fix was to restore
the card chrome (so box-shadow attaches to a visible surface),
not to strip the chrome and remove the shadow. We took the
wrong fork.
This commit takes the right fork retroactively. Append-only
restoration — later cascade order wins. */
/* (1) .still-questions — restore original Phase 1 r8 glass panel */
.still-questions {
position: relative !important;
padding: 40px 32px !important;
border-radius: 24px !important;
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.06) 0%,
rgba(124, 58, 237, 0.02) 100%) !important;
background-image: linear-gradient(180deg,
rgba(124, 58, 237, 0.06) 0%,
rgba(124, 58, 237, 0.02) 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
-webkit-backdrop-filter: blur(12px) !important;
backdrop-filter: blur(12px) !important;
isolation: isolate !important;
/* Explicitly clear session destructive overrides */
box-shadow: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
/* (2) .still-questions::before — restore Phase 1 r8 interior bottom glow */
.still-questions::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
border-radius: inherit !important;
background: radial-gradient(
ellipse 80% 60% at 50% 100%,
rgba(124, 58, 237, 0.4),
transparent 70%
) !important;
background-image: radial-gradient(
ellipse 80% 60% at 50% 100%,
rgba(124, 58, 237, 0.4),
transparent 70%
) !important;
opacity: 0.6 !important;
z-index: -1 !important;
pointer-events: none !important;
}
/* (3) body::before — restore Phase 2 corner-anchored aurora at compromise alphas
Original Phase 2 alphas were 0.40 / 0.30 / 0.25 (too bright per user)
Commit 15 went to 0.10 / 0.08 / 0.06 (too subtle per user)
Compromise: 0.22 / 0.16 / 0.12 — visible brand atmosphere without
over-saturating. Corner geometry restored (matches Phase 2 baseline). */
body::before {
content: "" !important;
position: fixed !important;
inset: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
background-image:
radial-gradient(80% 40% at 15% 15%, rgba(124, 58, 237, 0.52) 0%, rgba(0,0,0,0) 55%),
radial-gradient(60% 35% at 85% 50%, rgba(236, 72, 153, 0.34) 0%, rgba(0,0,0,0) 50%),
radial-gradient(50% 30% at 50% 85%, rgba(250, 202, 51, 0.25) 0%, rgba(0,0,0,0) 50%)
!important;
}
/* ============================================
COMMIT 20 — Unblock body::before aurora visibility
Commit 18/19 restored body::before with full Phase 2 corner-anchored
aurora at 0.40/0.30/0.25 alphas. Computed values all correct, pseudo
element exists with proper geometry. But invisible to the user.
Diagnostic via Chrome: body { background-color: rgb(8, 4, 26) } paints
over body::before because pseudo at z-index:-1 is below body's own
background painting layer. Aurora is technically there but completely
masked by body bg.
Fix: make body transparent. The html element has the same rgb(8, 4, 26)
background, which serves as canvas. Removing body bg means html canvas
shows through, body::before aurora paints on top of it visibly, and
body content paints on top of aurora. */
body {
background-color: transparent !important;
}
/* ============================================
COMMIT 21 — Footer social grid: 5+4 on mobile
Issue: on mobile (430px viewport), .footer-social container is
248px wide. With gap:12px between 9 icons of 44px, only 4 fit
per row ‚Üí produces ugly 4+4+1 layout (1 orphan icon in row 3).
Fix: at ≤600px, reduce column-gap to 7px (math: 5*44 + 4*7 = 248px
exact container fit). Items wrap 5+4 cleanly. Row-gap stays 12px
to preserve vertical breathing between the two rows.
Desktop CSS unchanged — flex-wrap continues to fit all 9 icons
in one row at wider container widths. */
@media (max-width: 600px) {
.site-footer .footer-social {
column-gap: 7px;
row-gap: 12px;
}
}
/* ============================================
COMMIT 22 — Contact page dual-button height equalization
Issue: Card 3 ("Pricing & Resellers") on Contact page has 2 buttons
(Telegram + Open ticket) using btn-sm class — 41px tall. Cards 1+2
single buttons (Sign in to open a ticket, Message on Telegram) use
regular btn — 47px tall. 6px height mismatch reads as inconsistent.
User explicitly requested: width stays smaller (split in half is
correct), only height should match.
Fix: min-height on .tile-button-group .btn-sm to 47px. Padding +
font-size stay at btn-sm sizing (keeps text fitting in 154px
narrow buttons). Just centers content vertically in the taller box. */
.tile-button-group .btn-sm {
min-height: 47px;
}
/* ============================================================================
PHASE 6 — Terms page (terms.twig)
============================================================================
Two-column layout with sticky side TOC navigation on desktop, collapsible
drawer on mobile. Three article sections (Terms & Conditions, Refund
Policy, Privacy Policy) with anchor-scrollable sub-sections.
Layout breakpoints:
- ‚â•1024px: 280px sticky TOC + 1fr prose
- <1024px: single column, TOC becomes collapsible drawer with toggle button
- <480px: tightened typography and padding
Reuses brand patterns:
- Phase 1 r8 hero-title-gradient on H1
- Phase 2 body::before aurora (compatible — terms-body is transparent)
- Phase 1 r8 .still-questions glass panel CTA
- Phase 5 FAQ TOC group-label rhythm + active scroll-spy
============================================================================ */
/* === Container layout ===================================================== */
.terms-body {
/* Body section background stays transparent so aurora shows through */
padding-block: var(--space-12) var(--space-16);
}
.terms-container {
max-width: 1136px;
/* Default mobile: single column flow (toggle + drawer + prose stack) */
}
@media (min-width: 1024px) {
.terms-container {
display: grid;
grid-template-columns: 280px 1fr;
column-gap: 64px;
align-items: start;
}
.terms-toc-toggle {
display: none; /* desktop: TOC always visible, no toggle */
}
}
/* === Mobile TOC toggle (button) =========================================== */
.terms-toc-toggle {
display: inline-flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 12px 16px;
margin-bottom: 24px;
background: rgba(167, 139, 250, 0.06);
border: 1px solid rgba(167, 139, 250, 0.18);
border-radius: 12px;
color: rgba(255, 255, 255, 0.88);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.1px;
cursor: pointer;
transition: background var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.terms-toc-toggle:hover {
background: rgba(167, 139, 250, 0.10);
border-color: rgba(167, 139, 250, 0.32);
}
.terms-toc-toggle-label {
flex: 1;
text-align: left;
}
.terms-toc-toggle-caret {
transition: transform 240ms var(--ease-premium);
flex-shrink: 0;
color: #C4B5FD;
}
.terms-toc-toggle[aria-expanded="true"] .terms-toc-toggle-caret {
transform: rotate(180deg);
}
/* === Side TOC nav ========================================================= */
.terms-toc {
/* Mobile: collapsed by default — drawer expands when .is-open added.
visibility:hidden when collapsed prevents focus from landing on
invisible TOC links via Tab nav (a11y). */
max-height: 0;
overflow: hidden;
visibility: hidden;
transition: max-height 360ms var(--ease-premium),
visibility 0s linear 360ms;
margin-bottom: 24px;
}
.terms-toc.is-open {
max-height: 720px;
padding-block: 8px 12px;
visibility: visible;
transition: max-height 360ms var(--ease-premium),
visibility 0s linear 0s;
}
@media (min-width: 1024px) {
.terms-toc {
/* Desktop: always visible, sticky in grid column 1 */
position: sticky;
top: 128px;
grid-column: 1;
max-height: calc(100vh - 160px);
overflow-y: auto;
visibility: visible;
margin-bottom: 0;
padding-block: 0;
transition: none;
}
/* Hide scrollbar visually — content is rarely tall enough to need it */
.terms-toc::-webkit-scrollbar { width: 0; }
.terms-toc { scrollbar-width: none; }
}
.terms-toc-group-label {
display: block;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
color: rgba(196, 181, 253, 0.45);
padding: 16px 12px 6px;
margin: 0;
}
.terms-toc-group-label--first,
.terms-toc-group-label:first-child {
padding-top: 4px;
}
.terms-toc-list {
list-style: none;
padding: 0;
margin: 0 0 4px;
display: flex;
flex-direction: column;
gap: 2px;
}
.terms-toc a {
display: block;
padding: 7px 12px;
font-size: 13.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
border-left: 2px solid transparent;
letter-spacing: 0.1px;
transition: color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium),
background-color var(--dur-hover) var(--ease-premium);
}
.terms-toc a:hover {
color: rgba(255, 255, 255, 0.88);
background: rgba(167, 139, 250, 0.04);
}
.terms-toc a[aria-current="true"] {
color: rgb(255, 255, 255);
background: rgba(167, 139, 250, 0.10);
border-left-color: rgb(167, 139, 250);
}
.terms-toc a:focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 2px;
border-radius: 4px;
}
.terms-toc-toggle:focus-visible,
.terms-toc-end:focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 2px;
}
.terms-toc-end {
display: block;
margin-top: 20px;
padding: 7px 12px;
font-size: 12px;
letter-spacing: 0.2px;
color: rgba(255, 255, 255, 0.32);
text-decoration: none;
transition: color var(--dur-hover) var(--ease-premium);
}
.terms-toc-end:hover {
color: rgba(196, 181, 253, 0.85);
}
.terms-toc-end::before {
content: "\002191 ";
}
/* === Prose column ========================================================= */
.terms-prose-col {
/* Mobile: spans full width below TOC drawer.
Desktop: grid column 2 (set via .terms-container grid). */
min-width: 0; /* prevents flex/grid blowout from long URLs */
}
@media (min-width: 1024px) {
.terms-prose-col {
grid-column: 2;
max-width: 760px; /* readable measure cap on wide viewports */
}
}
/* === Article (section group) ============================================== */
.terms-article {
position: relative;
padding: 40px 40px 32px;
margin-bottom: 48px;
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.04) 0%,
rgba(124, 58, 237, 0.01) 100%);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 20px;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
isolation: isolate;
}
.terms-article:last-child {
margin-bottom: 0;
}
.terms-article-header {
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.terms-article-eyebrow {
font-size: 10px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
color: rgba(196, 181, 253, 0.55);
margin: 0 0 8px;
}
.terms-h2 {
font-size: clamp(28px, 2.2vw + 0.5rem, 32px);
font-weight: 600;
letter-spacing: -0.4px;
color: #FFFFFF;
line-height: 1.2;
margin: 0;
}
/* === Section (anchor target) ============================================== */
.terms-section {
scroll-margin-top: 128px; /* clears sticky site header on anchor jump */
margin-bottom: 48px;
}
.terms-section:last-child {
margin-bottom: 0;
}
.terms-h3 {
font-size: 19px;
font-weight: 600;
letter-spacing: -0.15px;
color: #C4B5FD;
line-height: 1.3;
margin: 0 0 16px;
}
/* === Prose typography ===================================================== */
.terms-section p {
font-size: 15.5px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.78);
margin: 0 0 14px;
}
.terms-section p:last-child {
margin-bottom: 0;
}
.terms-list {
margin: 0 0 14px;
padding-left: 24px;
color: rgba(255, 255, 255, 0.78);
font-size: 15.5px;
line-height: 1.7;
}
.terms-list li {
margin-bottom: 8px;
}
.terms-list li:last-child {
margin-bottom: 0;
}
.terms-list li::marker {
color: rgba(196, 181, 253, 0.7);
font-weight: 600;
}
/* === Inline links inside prose (preserve global focus + hover) ============ */
.terms-section a:not(.btn) {
color: #C4B5FD;
text-decoration: none;
border-bottom: 1px solid rgba(196, 181, 253, 0.3);
transition: color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.terms-section a:not(.btn):hover {
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.6);
}
/* === Mobile tightening ==================================================== */
@media (max-width: 768px) {
.terms-body {
padding-block: var(--space-8) var(--space-12);
}
.terms-article {
padding: 28px 24px 24px;
margin-bottom: 24px;
border-radius: 16px;
}
.terms-article-header {
margin-bottom: 20px;
padding-bottom: 16px;
}
.terms-section {
margin-bottom: 28px;
}
.terms-section p,
.terms-list {
font-size: 15px;
}
}
@media (max-width: 480px) {
.terms-article {
padding: 24px 20px 20px;
border-radius: 14px;
}
.terms-h3 {
font-size: 17px;
}
.terms-section p,
.terms-list {
font-size: 14.5px;
line-height: 1.7;
}
.terms-list {
padding-left: 20px;
}
}
/* ============================================================================
PHASE 6 — Commit 3: TOC toggle visibility cascade fix
Bug diagnosed via Claude Chrome audit: at ‚â•1024px both the side nav
AND the mobile toggle button were visible simultaneously. Root cause:
the Commit 1 desktop rule `.terms-toc-toggle { display: none }` was
declared INSIDE @media (min-width: 1024px) at line ~6600, BEFORE the
unconditional base `.terms-toc-toggle { display: inline-flex }` at
line ~6614. Equal specificity (0,0,1,0) + later source order = base
rule wins on all viewports.
Fix: append definitive end-of-file media-query blocks with !important
on the desktop side. Cascade order + !important together guarantee
correct visibility on all viewports.
Mobile note: the .terms-toc display:none/block switch below will
override the Commit 2 max-height + visibility drawer animation
(display can't transition). The drawer now snaps open/closed
instead of smoothly sliding. Trade-off accepted per user direction
— visibility correctness wins over animation polish here.
============================================================================ */
/* Desktop: side-nav visible, toggle hidden */
@media (min-width: 1024px) {
.terms-toc-toggle {
display: none !important;
}
.terms-toc {
display: block;
visibility: visible;
}
}
/* Mobile/tablet: only toggle + collapsible drawer */
@media (max-width: 1023.98px) {
.terms-toc-toggle {
display: flex;
visibility: visible;
}
.terms-toc {
display: none;
}
.terms-toc.is-open {
display: block;
}
/* Grid on mobile: single column */
.terms-container {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* ============================================================================
PHASE 7 — API page (api.twig)
============================================================================
Hybrid+ strategy: PP {{ methods }} loop renders glass-paneled method cards.
Layout: hero + API info panel + 2-col body (sticky TOC + method cards) +
PHP CTA + Still Questions CTA. Prism.js for JSON syntax highlighting.
Layout breakpoints:
- ‚â•1024px: 280px sticky TOC + 1fr method cards
- <1024px: single column, TOC becomes drawer with toggle
- <768px / <480px: tightened typography + spacing
Reuses brand patterns:
- Phase 1 r8 hero-title-gradient on H1
- Phase 2 body::before aurora bleed-through
- Phase 1 r8 .still-questions glass panel CTA
- Phase 5/6 TOC group-label rhythm + IntersectionObserver scroll-spy
============================================================================ */
/* === API info glass panel (top, above main 2-col body) ==================== */
.api-info-section {
padding-block: var(--space-6) var(--space-8);
}
.api-info-panel {
max-width: 880px;
margin: 0 auto;
padding: 28px 32px;
border-radius: 20px;
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.08) 0%,
rgba(124, 58, 237, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
isolation: isolate;
}
.api-info-row {
display: grid;
grid-template-columns: 160px 1fr;
gap: 16px;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.api-info-row:last-child {
border-bottom: none;
}
.api-info-label {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.3px;
color: rgba(196, 181, 253, 0.85);
}
.api-info-value {
font-size: 14.5px;
color: rgba(255, 255, 255, 0.85);
line-height: 1.5;
}
.api-info-value a {
color: #C4B5FD;
text-decoration: none;
border-bottom: 1px solid rgba(196, 181, 253, 0.4);
transition: color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.api-info-value a:hover {
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.7);
}
/* === POST badge (yellow pill, monospace) ================================== */
.api-method-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--yellow);
color: #08041A;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
text-transform: uppercase;
}
/* === API URL + inline code styling ======================================== */
.api-url {
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
font-size: 13.5px;
color: #C4B5FD;
background: rgba(167, 139, 250, 0.10);
padding: 6px 12px;
border-radius: 8px;
border: 1px solid rgba(167, 139, 250, 0.18);
display: inline-block;
word-break: break-all;
}
.api-inline-code {
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
font-size: 13px;
color: #C4B5FD;
background: rgba(167, 139, 250, 0.10);
padding: 3px 8px;
border-radius: 4px;
}
/* === Two-column body layout =============================================== */
.api-body {
padding-block: var(--space-8) var(--space-16);
}
.api-container {
max-width: 1280px;
/* Default mobile: single-column flow */
}
@media (min-width: 1024px) {
.api-container {
display: grid;
grid-template-columns: 280px 1fr;
column-gap: 64px;
align-items: start;
}
}
/* === Mobile TOC toggle ==================================================== */
.api-toc-toggle {
display: inline-flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 12px 16px;
margin-bottom: 24px;
background: rgba(167, 139, 250, 0.06);
border: 1px solid rgba(167, 139, 250, 0.18);
border-radius: 12px;
color: rgba(255, 255, 255, 0.88);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.1px;
cursor: pointer;
transition: background var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.api-toc-toggle:hover {
background: rgba(167, 139, 250, 0.10);
border-color: rgba(167, 139, 250, 0.32);
}
.api-toc-toggle-label {
flex: 1;
text-align: left;
}
.api-toc-toggle-caret {
flex-shrink: 0;
color: #C4B5FD;
transition: transform 240ms var(--ease-premium);
}
.api-toc-toggle[aria-expanded="true"] .api-toc-toggle-caret {
transform: rotate(180deg);
}
.api-toc-toggle:focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 2px;
}
/* === Side TOC nav ========================================================= */
.api-toc {
/* Mobile default: hidden (display:none toggled via .is-open) */
margin-bottom: 24px;
}
@media (min-width: 1024px) {
.api-toc {
position: sticky;
top: 128px;
grid-column: 1;
max-height: calc(100vh - 160px);
overflow-y: auto;
margin-bottom: 0;
padding: 4px 0 8px;
}
.api-toc::-webkit-scrollbar { width: 0; }
.api-toc { scrollbar-width: none; }
}
.api-toc-group-label {
display: block;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
color: rgba(196, 181, 253, 0.45);
padding: 4px 12px 6px;
margin: 0 0 4px;
}
.api-toc-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.api-toc-link {
display: block;
padding: 7px 12px;
font-size: 13.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
border-left: 2px solid transparent;
letter-spacing: 0.1px;
transition: color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium),
background-color var(--dur-hover) var(--ease-premium);
}
.api-toc-link:hover {
color: rgba(255, 255, 255, 0.88);
background: rgba(167, 139, 250, 0.04);
}
.api-toc-link.is-active {
color: rgb(255, 255, 255);
background: rgba(167, 139, 250, 0.10);
border-left-color: rgb(167, 139, 250);
}
.api-toc-link:focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 2px;
border-radius: 4px;
}
.api-toc-end {
display: block;
margin-top: 20px;
padding: 7px 12px;
font-size: 12px;
letter-spacing: 0.2px;
color: rgba(255, 255, 255, 0.32);
text-decoration: none;
transition: color var(--dur-hover) var(--ease-premium);
}
.api-toc-end::before {
content: "\002191 ";
}
.api-toc-end:hover {
color: rgba(196, 181, 253, 0.85);
}
.api-toc-end:focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 2px;
}
/* === Prose column ========================================================= */
.api-prose-col {
min-width: 0;
}
@media (min-width: 1024px) {
.api-prose-col {
grid-column: 2;
}
}
/* === Method card (one per method in PP loop) ============================== */
.api-method-card {
position: relative;
padding: 32px;
margin-bottom: 48px;
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.06) 0%,
rgba(124, 58, 237, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 24px;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
isolation: isolate;
scroll-margin-top: 128px;
}
.api-method-card:last-of-type {
margin-bottom: 0;
}
.api-method-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.api-method-title {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.25px;
color: #C4B5FD;
line-height: 1.2;
margin: 0;
}
/* === Service type selector (special 'add' method) ========================= */
.api-service-selector {
margin-bottom: 20px;
padding: 16px;
background: rgba(167, 139, 250, 0.05);
border: 1px solid rgba(167, 139, 250, 0.15);
border-radius: 12px;
}
.api-select-label {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(196, 181, 253, 0.7);
margin-bottom: 8px;
}
.api-select {
width: 100%;
padding: 10px 16px;
background: rgba(8, 4, 26, 0.6);
color: #FFFFFF;
border: 1px solid rgba(167, 139, 250, 0.25);
border-radius: 8px;
font-size: 14px;
font-family: inherit;
cursor: pointer;
transition: border-color var(--dur-hover) var(--ease-premium),
background-color var(--dur-hover) var(--ease-premium);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%23C4B5FD' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
.api-select:hover {
border-color: rgba(167, 139, 250, 0.45);
background-color: rgba(8, 4, 26, 0.8);
}
.api-select:focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 2px;
}
/* === Params table ========================================================= */
.api-params-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 24px;
font-size: 14px;
}
.api-params-table th {
text-align: left;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.3px;
text-transform: uppercase;
color: rgba(196, 181, 253, 0.85);
padding: 12px 16px;
border-bottom: 2px solid rgba(167, 139, 250, 0.3);
background: rgba(167, 139, 250, 0.04);
}
.api-params-table td {
padding: 14px 16px;
color: rgba(255, 255, 255, 0.75);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
vertical-align: top;
line-height: 1.55;
}
.api-params-table tbody tr:nth-child(odd) td {
background: rgba(124, 58, 237, 0.03);
}
.api-params-table tbody tr:last-child td {
border-bottom: none;
}
.api-params-table td code {
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
font-size: 13px;
color: #C4B5FD;
background: rgba(167, 139, 250, 0.12);
padding: 2px 6px;
border-radius: 4px;
white-space: nowrap;
}
/* === Example response code block (Prism.js styling overrides) ============ */
.api-example {
margin-top: 8px;
}
.api-example-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(196, 181, 253, 0.7);
margin-bottom: 10px;
}
.api-code-block {
background: #0D0623 !important;
border: 1px solid rgba(167, 139, 250, 0.2);
border-radius: 12px;
padding: 20px;
font-size: 13px;
line-height: 1.6;
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace) !important;
overflow-x: auto;
margin: 0;
}
/* Prism.js token color overrides — aurora palette (Tomorrow Night base) */
.api-code-block code[class*="language-"],
.api-code-block pre[class*="language-"] {
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace) !important;
text-shadow: none;
background: transparent;
}
.api-code-block .token.property { color: #C4B5FD; } /* JSON keys — lavender */
.api-code-block .token.string,
.api-code-block .token.attr-value { color: #FACA33; } /* strings — soft yellow */
.api-code-block .token.number { color: #A78BFA; } /* numbers — amethyst */
.api-code-block .token.boolean { color: #F59E0B; } /* booleans — orange */
.api-code-block .token.null { color: #EC4899; } /* null — magenta */
.api-code-block .token.punctuation { color: rgba(255, 255, 255, 0.5); }
.api-code-block .token.operator { color: rgba(255, 255, 255, 0.5); }
/* === PHP code CTA (preserves /example.txt link) =========================== */
.api-php-section {
margin-top: 40px;
text-align: center;
}
.api-php-cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 28px;
background: var(--yellow);
color: #08041A;
border-radius: 12px;
font-weight: 700;
font-size: 14.5px;
letter-spacing: 0.1px;
text-decoration: none;
transition: transform var(--dur-hover) var(--ease-premium),
box-shadow var(--dur-hover) var(--ease-premium),
background-color var(--dur-hover) var(--ease-premium);
}
.api-php-cta:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px -8px rgba(250, 202, 51, 0.4);
background: #FFD24D;
}
.api-php-cta:focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 3px;
}
.api-php-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 6px;
background: rgba(8, 4, 26, 0.18);
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
font-size: 13px;
font-weight: 800;
color: #08041A;
}
/* === Responsive tightening ================================================ */
@media (max-width: 768px) {
.api-info-section {
padding-block: var(--space-4) var(--space-6);
}
.api-info-panel {
padding: 20px 22px;
border-radius: 16px;
}
.api-info-row {
grid-template-columns: 120px 1fr;
gap: 12px;
padding: 10px 0;
}
.api-info-label {
font-size: 12px;
}
.api-info-value,
.api-url {
font-size: 13px;
}
.api-body {
padding-block: var(--space-6) var(--space-12);
}
.api-method-card {
padding: 24px 20px;
margin-bottom: 32px;
border-radius: 18px;
}
.api-method-title {
font-size: 20px;
}
.api-params-table {
font-size: 13px;
}
.api-params-table th {
padding: 10px 12px;
}
.api-params-table td {
padding: 12px 12px;
}
.api-code-block {
font-size: 12px;
padding: 16px;
border-radius: 10px;
}
}
@media (max-width: 480px) {
.api-info-row {
grid-template-columns: 1fr;
gap: 6px;
}
.api-method-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.api-params-table {
font-size: 12.5px;
}
.api-params-table th,
.api-params-table td {
padding: 10px;
}
.api-params-table td code {
font-size: 12px;
white-space: normal;
word-break: break-word;
}
.api-php-cta {
padding: 12px 20px;
font-size: 13.5px;
}
}
/* ============================================================================
PHASE 7 — Critical cascade fix (lesson learned from Phase 6 Commit 3)
Toggle/nav visibility on a per-viewport basis, declared at END of file
with !important on the desktop side to guarantee cascade victory.
============================================================================ */
@media (min-width: 1024px) {
.api-toc-toggle {
display: none !important;
}
.api-toc {
display: block;
visibility: visible;
}
}
@media (max-width: 1023.98px) {
.api-toc-toggle {
display: flex;
visibility: visible;
}
.api-toc {
display: none;
}
.api-toc.is-open {
display: block;
}
.api-container {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* ============================================================================
PHASE 8 — Sign Up page (signup.twig)
============================================================================
Hybrid+ strategy: PP dynamic form ({% for field in fields %}) wrapped in
glass card + 5 verbatim marketing sections (hero, features, platforms,
steps, amplify CTA).
Layout breakpoints:
- >=1024px: features 2x2, platforms 4x2, steps 4-col
- <1024px: progressively stack (steps 2x2, platforms 2x4)
- <768px: features 1x4, platforms 2x4, steps 2x2
- <480px: everything single-column
Reuses brand patterns from earlier phases (hero-title-gradient,
.still-questions glass CTA, body::before aurora bleed-through).
============================================================================ */
/* === Hero subtitle paragraphs (preserve original H1/H2 text strings) ====== */
.signup-hero-tagline {
font-size: clamp(20px, 1.8vw + 0.5rem, 26px);
font-weight: 600;
letter-spacing: -0.3px;
color: rgba(255, 255, 255, 0.92);
line-height: 1.3;
margin: 16px 0 6px;
}
.signup-hero-subtagline {
font-size: clamp(15px, 1vw + 0.5rem, 17px);
font-weight: 500;
color: rgba(196, 181, 253, 0.85);
line-height: 1.45;
margin: 0 0 4px;
}
.signup-hero-lead {
max-width: 720px;
}
/* === Signup form glass card =============================================== */
.signup-form-section {
/* Phase 8 Commit 3 B3 fix: Commit 2's 16px was over-corrected (40px measured
gap was too tight). Restored to 32px top / 60px bottom — measured ~72px
hero‚Üíform gap, optimal vertical rhythm. */
padding: 32px 0 60px;
}
.signup-form-wrapper {
display: flex;
justify-content: center;
padding: 0 16px;
}
.signup-form-card {
width: 100%;
max-width: 520px;
padding: 40px 36px;
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.08) 0%,
rgba(124, 58, 237, 0.03) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5);
isolation: isolate;
}
/* === Google Sign-In wrapper + divider ===================================== */
.signup-google-wrapper {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 8px;
}
.signup-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0 24px;
}
.signup-divider::before,
.signup-divider::after {
content: "";
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.1);
}
.signup-divider span {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.5px;
color: rgba(255, 255, 255, 0.5);
text-transform: lowercase;
}
/* === Form fields (override Bootstrap form-control) ======================== */
.signup-form-group {
margin-bottom: 16px;
}
.signup-label {
display: block;
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 6px;
letter-spacing: 0.1px;
}
.signup-form .signup-input,
.signup-form input.form-control {
width: 100%;
/* Phase 8 Commit 3 B2 fix: defeat Bootstrap .form-control height:34px which
was winning cascade and squashing inputs to ~34px. height:auto + min-height
enforces ~48px touch target for mobile a11y. */
height: auto !important;
min-height: 48px;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(167, 139, 250, 0.2);
border-radius: 10px;
color: #FFFFFF;
font-size: 15px;
font-family: inherit;
line-height: 1.4;
transition: background-color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium),
box-shadow var(--dur-hover) var(--ease-premium);
}
.signup-form .signup-input::placeholder {
color: rgba(255, 255, 255, 0.35);
}
.signup-form .signup-input:hover {
border-color: rgba(167, 139, 250, 0.32);
background: rgba(255, 255, 255, 0.05);
}
.signup-form .signup-input:focus,
.signup-form .signup-input:focus-visible {
outline: none;
border-color: rgba(167, 139, 250, 0.55);
background: rgba(255, 255, 255, 0.06);
box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.12);
}
/* === Captcha wrapper ====================================================== */
.signup-captcha-wrapper {
display: flex;
justify-content: center;
margin: 16px 0;
}
/* === Terms checkbox ======================================================= */
.signup-terms-group {
margin: 18px 0 8px;
}
.signup-terms-label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-weight: 400;
}
.signup-terms-checkbox {
flex-shrink: 0;
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
margin-top: 2px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(167, 139, 250, 0.35);
border-radius: 4px;
cursor: pointer;
transition: background-color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
position: relative;
}
.signup-terms-checkbox:hover {
border-color: rgba(167, 139, 250, 0.6);
}
.signup-terms-checkbox:checked {
background: rgb(167, 139, 250);
border-color: rgb(167, 139, 250);
}
.signup-terms-checkbox:checked::after {
content: "";
position: absolute;
inset: 2px 0 0 5px;
width: 6px;
height: 11px;
border-right: 2px solid #08041A;
border-bottom: 2px solid #08041A;
transform: rotate(45deg);
}
.signup-terms-checkbox:focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 2px;
}
.signup-terms-text {
font-size: 13.5px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.75);
}
.signup-terms-link {
color: #C4B5FD;
text-decoration: none;
border-bottom: 1px solid rgba(196, 181, 253, 0.4);
transition: color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.signup-terms-link:hover {
color: var(--yellow);
border-color: rgba(250, 202, 51, 0.6);
}
/* === Submit button (override Bootstrap btn-primary) ======================= */
.signup-form .signup-submit,
.signup-form .signup-submit.btn-primary,
.signup-form button.signup-submit {
display: block;
width: 100%;
margin-top: 24px;
padding: 14px 24px;
background: var(--yellow) !important;
color: #08041A !important;
border: 1px solid var(--yellow) !important;
border-radius: 12px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.2px;
cursor: pointer;
transition: transform var(--dur-hover) var(--ease-premium),
box-shadow var(--dur-hover) var(--ease-premium),
background-color var(--dur-hover) var(--ease-premium);
}
.signup-form .signup-submit:hover {
transform: translateY(-2px);
background: #FFD24D !important;
box-shadow: 0 10px 24px -8px rgba(250, 202, 51, 0.4);
}
.signup-form .signup-submit:active {
transform: translateY(0);
}
.signup-form .signup-submit:focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 3px;
}
/* === Sign-in link row ===================================================== */
.signup-signin-row {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
text-align: center;
font-size: 13.5px;
color: rgba(255, 255, 255, 0.6);
}
.signup-signin-text {
margin-right: 4px;
}
.signup-signin-link {
color: #C4B5FD;
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.signup-signin-link:hover {
color: var(--yellow);
border-color: rgba(250, 202, 51, 0.6);
}
/* === Bootstrap alert restyle (dark aurora theme) ========================== */
.signup-form .alert {
position: relative;
padding: 14px 44px 14px 16px;
margin-bottom: 18px;
border-radius: 10px;
font-size: 14px;
line-height: 1.5;
}
.signup-form .alert-danger {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #FCA5A5;
}
.signup-form .alert-success {
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
color: #6EE7B7;
}
.signup-form .alert .close {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
background: transparent;
border: none;
font-size: 20px;
line-height: 1;
color: inherit;
opacity: 0.6;
cursor: pointer;
padding: 0 6px;
}
.signup-form .alert .close:hover {
opacity: 1;
}
/* === Section headings (shared across features/platforms/steps/amplify) ==== */
.signup-section-head {
text-align: center;
max-width: 800px;
margin: 0 auto 48px;
}
.signup-section-head h2 {
margin-bottom: 16px;
}
.signup-section-lead {
font-size: 15.5px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.75);
margin: 0 auto;
}
.signup-section-lead a {
color: #C4B5FD;
text-decoration: none;
border-bottom: 1px solid rgba(196, 181, 253, 0.4);
transition: color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.signup-section-lead a:hover {
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.6);
}
/* === Features section (4 glass cards, 2x2 desktop) ======================== */
.signup-features-section {
padding-block: var(--space-12) var(--space-12);
}
.signup-features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
max-width: 1080px;
margin: 0 auto;
}
.signup-feature-card {
padding: 32px 28px;
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.06) 0%,
rgba(124, 58, 237, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 20px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: transform var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.signup-feature-card:hover {
transform: translateY(-2px);
border-color: rgba(167, 139, 250, 0.2);
}
.signup-feature-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 14px;
background: rgba(167, 139, 250, 0.12);
border: 1px solid rgba(167, 139, 250, 0.22);
color: #C4B5FD;
margin-bottom: 18px;
}
.signup-feature-title {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.2px;
color: #C4B5FD;
line-height: 1.3;
margin: 0 0 10px;
}
.signup-feature-text {
font-size: 14.5px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.75);
margin: 0;
}
.signup-feature-text a {
color: #C4B5FD;
text-decoration: none;
border-bottom: 1px solid rgba(196, 181, 253, 0.4);
transition: color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.signup-feature-text a:hover {
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.6);
}
/* === Platforms section (8 glass cards, 4x2 desktop) ======================= */
.signup-platforms-section {
padding-block: var(--space-12) var(--space-12);
}
.signup-platforms-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.signup-platform-card {
display: block;
padding: 26px 22px;
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.06) 0%,
rgba(124, 58, 237, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 18px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
text-decoration: none;
color: inherit;
transition: transform var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium),
box-shadow var(--dur-hover) var(--ease-premium);
}
.signup-platform-card:hover {
transform: translateY(-3px);
border-color: rgba(167, 139, 250, 0.25);
box-shadow: 0 12px 32px -12px rgba(124, 58, 237, 0.4);
}
.signup-platform-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.06);
margin-bottom: 14px;
}
.signup-platform-title {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.15px;
color: #FFFFFF;
margin: 0 0 8px;
}
.signup-platform-text {
font-size: 13.5px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
/* === Steps section (4 horizontal cards with numbered badges) ============== */
.signup-how-section {
padding-block: var(--space-12) var(--space-12);
}
.signup-steps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 1200px;
margin: 0 auto;
}
.signup-step-card {
position: relative;
padding: 32px 24px 28px;
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.06) 0%,
rgba(124, 58, 237, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 20px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
text-align: center;
transition: transform var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.signup-step-card:hover {
transform: translateY(-2px);
border-color: rgba(167, 139, 250, 0.2);
}
.signup-step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--yellow);
color: #08041A;
font-size: 14px;
font-weight: 800;
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
margin: 0 auto 16px;
box-shadow: 0 4px 12px -2px rgba(250, 202, 51, 0.3);
}
.signup-step-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 14px;
background: rgba(167, 139, 250, 0.12);
border: 1px solid rgba(167, 139, 250, 0.22);
color: #C4B5FD;
margin: 0 auto 16px;
}
.signup-step-title {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.1px;
color: #C4B5FD;
line-height: 1.3;
margin: 0 0 10px;
}
.signup-step-text {
font-size: 13.5px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.75);
margin: 0;
}
/* === Amplify section (centered prose) ===================================== */
.signup-amplify-section {
padding-block: var(--space-12) var(--space-16);
}
.signup-amplify-content {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.signup-amplify-content h2 {
margin-bottom: 24px;
}
.signup-amplify-text {
font-size: 16px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.78);
margin: 0 0 18px;
}
.signup-amplify-text:last-child {
margin-bottom: 0;
}
/* === Responsive breakpoints =============================================== */
@media (max-width: 1024px) {
.signup-platforms-grid {
grid-template-columns: repeat(2, 1fr);
}
.signup-steps-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 768px) {
.signup-form-card {
padding: 32px 24px;
border-radius: 20px;
}
.signup-features-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.signup-platforms-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.signup-feature-card,
.signup-platform-card,
.signup-step-card {
padding: 24px 20px;
}
.signup-section-head {
margin-bottom: 32px;
}
.signup-section-lead {
font-size: 14.5px;
}
.signup-feature-text,
.signup-platform-text,
.signup-step-text {
font-size: 14px;
}
.signup-amplify-text {
font-size: 15px;
line-height: 1.75;
}
}
@media (max-width: 480px) {
.signup-form-card {
padding: 28px 20px;
}
.signup-platforms-grid,
.signup-steps-grid {
grid-template-columns: 1fr;
}
.signup-hero-tagline {
font-size: 18px;
}
.signup-hero-subtagline {
font-size: 14px;
}
.signup-feature-title,
.signup-step-title {
font-size: 16px;
}
.signup-platform-title {
font-size: 16px;
}
}
/* ============================================================================
PHASE 8 — Commit 2: Targeted polish (8 audit fixes)
Applied via Python:
- P1: .signup-form-section padding-block 32px ‚Üí 16px (vertical rhythm)
- P2: .signup-label color 0.7 ‚Üí 0.85 alpha (AA contrast)
- P3: .signup-input padding 12px ‚Üí 14px (mobile touch target ~48px)
Applied via HTML restructure:
- C1: page_url('signin') already correct at source (audit saw rendered HTML)
- P9: