/* ============================================================ BADPIECE — design tokens + normalization layer ------------------------------------------------------------ Loaded LAST from index.html on purpose: where a rule here ties with a Webflow rule on specificity, this file wins the cascade. 1. Tokens — the single spacing scale (Tailwind numbering, 4px grid) and the fluid type ramp. badpiece.webflow.css and service-pages.css reference the spacing vars; new CSS must use them too instead of inventing values. 2. Type-ramp repairs — headings that collapsed to body-text size on small screens, or jumped randomly between breakpoints (18 → 25 → 20px), snapped to one fluid ramp. 3. Shared rhythm — heading → CTA → paragraph spacing inside the flagship slider. 4. Responsive fixes (≤991px) — the hero reference links (touch targets) and the flagship slider controls, which were invisible on tablet/phone. Desktop (≥992px) is intentionally untouched by this whole section. ============================================================ */ :root { /* spacing scale — 4px grid; --space-N = N × 4px */ --space-1: .25rem; /* 4px */ --space-2: .5rem; /* 8px */ --space-3: .75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* fluid type ramp — min mobile size → desktop size (caps match the existing desktop design so ≥1440px renders as before) */ --text-body: 1.0625rem; /* 17px — body, set on */ --text-label: clamp(1.0625rem, .55rem + 1.47vw, 1.88rem);/* 17 → 30px — form labels */ --text-ref: clamp(1.375rem, 1rem + 1.2vw, 2.8125rem); /* 22 → 45px — hero reference links */ --text-slide-title: clamp(2.75rem, 1.9rem + 2.4vw, 3.25rem); /* 44 → 52px — slider slide titles */ --text-statement: clamp(3.25rem, 5.2vw, 4.6rem); /* 52 → 73.6px — stacked statement lines */ --text-title: clamp(3.25rem, 2.25rem + 4.4vw, 5.625rem); /* 52 → 90px — section/form titles */ --text-display: clamp(3.25rem, 1.25rem + 8.5vw, 9.375rem);/* 52 → 150px — hero display headings */ } /* ---------- type-ramp repairs (all viewports) ---------- Each selector matches (and out-cascades) the rule that set a random per-breakpoint size; the clamp passes through the same desktop value. */ /* contact / form title: was 40px on phones (smaller than the project-card sub-headings), 80px tablet, 90px desktop — one continuous ramp instead */ .heading-style-h4.text-align-center.title-form { font-size: var(--text-title); line-height: 1.05; } /* form labels: were 20px phone, 17px tablet, 30px desktop (non-monotonic) */ .form_field-label { font-size: var(--text-label); } /* "the good, the bad, the badpiece." statement lines: bottomed out at 44px */ .background-color-secondary .heading-style-h1 { font-size: var(--text-statement); } /* slider slide titles: were a flat 36px up to 1279px — h2s smaller than the paragraph block reads as a caption, not a section heading */ .slider-2 .word-break { font-size: var(--text-slide-title) !important; } /* ---------- shared rhythm ---------- */ /* slide CTA sits a consistent step under its title (replaces the inline margin-top:10px that was baked into the markup) */ .slider-2 .w-slide .button { margin-top: var(--space-4); } /* ============================================================ responsive fixes — tablet & phone only (≤991px) ============================================================ */ @media screen and (max-width: 991px) { /* ----- hero reference links ("welcome to the rebelion") ----- The h4 rows rendered back-to-back (28px tall, zero gap) — real misclick territory. Space the rows and pad the anchors so every target clears ~44px, and snap the font (18/25/20px across the three breakpoints) to one size. */ .position-absolute.absolute-left, .position-absolute.absolute-right { row-gap: var(--space-3); } .text-referrence, .text-referrence.text-align-right { font-size: var(--text-ref); } .text-referrence a { display: inline-block; padding: var(--space-3) 0; } /* ----- flagship services slider ----- The desktop nav (the service-name labels) is display:none below 992px, and the dot nav — turned static for desktop — overflowed past the 100vh section's overflow:hidden, so phones saw slide 1/5 with no controls and no cue that more exist. Pin the dots back inside the section and surface the (hidden) Webflow arrows as a centred ‹ ••••• › pager; swipe keeps working as before. */ .slider-2 .w-slider-nav { position: absolute; top: auto; bottom: 0; height: var(--space-12); margin-top: 0; padding-top: 0; display: flex; align-items: center; justify-content: center; } /* !important: Webflow writes the slider's data-nav-spacing as an inline margin on every dot, which no stylesheet rule can out-cascade */ .slider-2 .w-slider-dot { width: 10px; height: 10px; margin: 0 5px !important; } .slider-2 .mask { margin-bottom: 0; padding-bottom: var(--space-14); } .slider-2 .left-arrow, .slider-2 .right-arrow { display: flex; align-items: center; justify-content: center; top: auto; bottom: 2px; /* optically centred on the 48px dot row */ width: 2.75rem; /* 44px touch target */ height: 2.75rem; color: var(--black-950); font-size: 1.5rem; } /* flank the dot row tightly (dots are 100px wide + an 8px gap each side) so the whole ‹ ••••• › pager clears the fixed chat sticker that owns the bottom-right corner on a 390px screen */ .slider-2 .left-arrow { left: calc(50% - 6.375rem); right: auto; } .slider-2 .right-arrow { right: calc(50% - 6.375rem); left: auto; } /* hero display headings (projects title, service heroes): the old clamp bottomed out at 32px — smaller than the card sub-headings beneath it. Phones get true display type again. */ .heading-style-h1.font-size-150 { font-size: var(--text-display); } }