:root { /* Winit brand palette -- tweak these six values to re-theme the whole page */ --wi-black: #262626; --wi-wo: #F66E26; --wi-white: #ffffff; --wi-gray: #64748b; --wi-lo: #fddece; --wi-offwhite: #f6f4f1; /* Template role aliases (existing rules reference these names) */ --primary: var(--wi-black); --primary-dark: #1a1a1a; --accent: var(--wi-wo); --accent-rgb: 246,110,38; --accent-dark: #cc5a1a; --secondary: var(--wi-lo); --text: var(--wi-black); --text-rgb: 38, 38, 38; --muted: var(--wi-gray); --bg: var(--wi-white); --background: var(--wi-white); --light: var(--wi-offwhite); --dark-panel: var(--wi-black); --wi-font-serif: 'DM Sans', system-ui, sans-serif; --wi-font-condensed: 'Oswald', 'Arial Narrow', sans-serif; --wi-font-body: 'DM Sans', system-ui, sans-serif; --font-display: var(--wi-font-serif); --font-body: var(--wi-font-body); --font-mono: var(--wi-font-body); --text-on-accent: #ffffff;} *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; } a { text-decoration: none; color: inherit; } ul { list-style: none; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--light); } ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; } /* BUTTONS */ .btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: #fff; font-weight: 700; font-size: 16px; padding: 16px 36px; border-radius: 8px; letter-spacing: 0.3px; box-shadow: none; transition: none; border: none; cursor: pointer; } .btn-primary:hover { box-shadow: none; } .btn-outline { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: var(--wi-black); font-weight: 700; font-size: 16px; padding: 14px 34px; border-radius: 8px; border: 2px solid rgba(var(--text-rgb),0.28); letter-spacing: 0.3px; transition: background .25s ease, border-color .25s ease, color .25s ease; cursor: pointer; } .btn-outline:hover { background: rgba(var(--text-rgb),0.04); border-color: var(--wi-wo); color: var(--wi-wo); } /* NAV */ .site-nav { position: sticky; top: 0; z-index: 100; background: var(--dark-panel); height: 70px; display: flex; align-items: center; padding: 0 40px; box-shadow: 0 2px 20px rgba(0,0,0,0.15); } .nav-inner { max-width: 1200px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-size: 26px; font-weight: 900; letter-spacing: -0.5px; color: #fff; } .nav-logo span { color: var(--wi-wo); } .hero-logo { font-size: 34px; } .nav-links { display: flex; align-items: center; gap: 8px; } .nav-links a { color: rgba(255,255,255,0.8); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 14px; border-radius: 6px; transition: color .2s, background .2s; } .nav-links a:hover, .nav-links a.active { color: #fff; background: rgba(255,255,255,0.1); } .nav-cta { background: var(--accent); color: #fff !important; border-radius: 6px !important; padding: 8px 22px !important; box-shadow: none; } .nav-cta:hover { background: var(--accent-dark) !important; } .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; } .nav-hamburger span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .3s; } .mobile-menu { display: none; position: fixed; top: 70px; left: 0; right: 0; background: var(--dark-panel); padding: 20px 24px; z-index: 99; flex-direction: column; gap: 4px; border-top: 1px solid rgba(255,255,255,0.1); } .mobile-menu.open { display: flex; } .mobile-menu a { color: rgba(255,255,255,0.85); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 12px 16px; border-radius: 8px; transition: background .2s; } .mobile-menu a:hover, .mobile-menu a.active { background: rgba(255,255,255,0.08); color: #fff; } /* HERO */ .hero { position: relative; background: var(--wi-white); display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid rgba(var(--text-rgb),0.08); } .hero-inner { max-width: 900px; margin: 0 auto; padding: clamp(52px, 8vh, 96px) 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; z-index: 2; width: 100%; } .hero-logo-img { width: min(440px, 82vw); height: auto; display: block; margin-bottom: 24px; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--wi-font-condensed); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--wi-black); margin-bottom: 18px; } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wi-wo); animation: livePulse 2s ease-out infinite; } @keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); } 70% { box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } } .hero-headline { font-family: var(--wi-font-body); font-size: clamp(30px, 4.4vw, 50px); font-weight: 800; line-height: 1.1; letter-spacing: -0.5px; color: var(--wi-black); max-width: 720px; margin-bottom: 30px; } .hero-headline em { color: var(--wi-wo); font-style: normal; } .hero-ctas { display: flex; gap: 14px; flex-wrap: nowrap; justify-content: center; } @media (prefers-reduced-motion: reduce) { .live-dot, .orb { animation: none; } } /* HOW IT WORKS */ .how-section { padding: 100px 40px; background: var(--light); position: relative; overflow: hidden; } .how-section::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(var(--text-rgb),0.05) 1px, transparent 1.5px); background-size: 24px 24px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); } .container { max-width: 1200px; margin: 0 auto; } .section-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--primary); margin-bottom: 12px; } .section-headline { font-size: clamp(32px, 4vw, 52px); font-weight: 900; line-height: 1.1; letter-spacing: -0.5px; color: var(--text); margin-bottom: 16px; } .section-sub { font-size: 18px; font-weight: 400; color: rgba(var(--text-rgb),0.6); max-width: 560px; margin-bottom: 60px; } .how-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; position: relative; align-items: stretch; } .how-card { background: var(--wi-white); border-radius: 16px; padding: 36px 28px; border: 4px solid var(--wi-gray); position: relative; overflow: hidden; align-self: stretch; } .how-num { font-size: 48px; font-weight: 900; color: var(--wi-lo); line-height: 1; margin-bottom: 16px; } .how-title { font-family: var(--wi-font-condensed); font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.02em; } .how-desc { font-size: 14px; color: rgba(var(--text-rgb),0.65); line-height: 1.6; } /* CATEGORIES */ .categories-section { padding: 100px 40px; background: var(--dark-panel); position: relative; overflow: hidden; } .categories-section .section-headline, .categories-section .section-kicker { color: #fff; } .categories-section .section-sub { color: rgba(255,255,255,0.6); } .cat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .cat-card { display: block; border-radius: 20px; overflow: hidden; position: relative; aspect-ratio: 4/3; cursor: pointer; border: 3px solid var(--wi-lo); box-shadow: 0 4px 20px rgba(0,0,0,0.3); transition: border-color .2s ease; } .cat-card:hover, .cat-card:focus-visible { border-color: var(--wi-wo); } .cat-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; } .cat-card-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 44px 28px 26px; z-index: 2; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0) 100%); } .cat-card-tag { display: inline-block; padding: 4px 12px; border-radius: 8px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; } .cat-card-title { font-family: var(--wi-font-condensed); font-size: 26px; font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 8px; text-transform: uppercase; } .cat-card-desc { font-size: 13px; color: rgba(255,255,255,0.95); line-height: 1.5; text-shadow: 0 1px 3px rgba(0,0,0,0.5); } /* anyone-section + products-section removed per spec (sections deleted entirely) */ /* UPCOMING SHOWS */ .shows-section { padding: 100px 40px; background: var(--wi-offwhite); } .shows-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 8px; } .show-card { background: var(--wi-white); border-radius: 16px; border: 2px solid var(--wi-lo); padding: 30px 28px; display: flex; flex-direction: column; transition: border-color .2s ease; } .show-card:hover, .show-card:focus-within { border-color: var(--wi-wo); } .show-date { display: flex; align-items: baseline; gap: 8px; font-family: var(--wi-font-condensed); margin-bottom: 14px; } .show-day { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wi-wo); } .show-when { font-size: 15px; font-weight: 500; color: var(--wi-black); } .show-cat { align-self: flex-start; font-family: var(--wi-font-condensed); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wi-gray); border: 1px solid var(--wi-lo); border-radius: 8px; padding: 3px 11px; margin-bottom: 14px; } .show-title { font-family: var(--wi-font-serif); font-size: 23px; font-weight: 600; color: var(--wi-black); line-height: 1.2; margin-bottom: 10px; } .show-desc { font-size: 14px; color: var(--wi-gray); line-height: 1.55; margin-bottom: 22px; flex-grow: 1; } .show-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(38,38,38,0.08); padding-top: 16px; } .show-seats { font-size: 13px; font-weight: 600; color: var(--wi-gray); } .show-cta { font-family: var(--wi-font-condensed); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wi-wo); white-space: nowrap; } .show-cta:hover { color: var(--accent-dark); } /* TESTIMONIALS (replaces the former blog section) */ .testimonials-section { padding: 100px 40px; background: var(--light); } .testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .sf-testimonial-item { background: var(--wi-white); border-radius: 16px; padding: 32px 28px; border: 3px solid var(--wi-lo); } .sf-testimonial-quote { font-size: 16px; color: var(--wi-gray); line-height: 1.6; margin-bottom: 18px; display: block; } .sf-testimonial-name { font-size: 13px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; display: block; } .sf-testimonial-role { font-size: 13px; color: var(--wi-gray); display: block; } /* CLOSING CTA */ .cta-band { position: relative; overflow: hidden; background: var(--wi-black); padding: 112px 40px; text-align: center; } .cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 42%, rgba(var(--accent-rgb),0.20), transparent 70%); pointer-events: none; } .cta-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; } .cta-eyebrow { font-family: var(--wi-font-condensed); text-transform: uppercase; letter-spacing: 0.18em; font-size: 14px; font-weight: 600; color: var(--wi-wo); margin-bottom: 16px; } .cta-band h2 { font-family: var(--wi-font-serif); font-size: clamp(36px,4.5vw,56px); font-weight: 600; line-height: 1.08; color: #fff; margin-bottom: 18px; } .cta-band p { font-size: 18px; color: rgba(255,255,255,0.75); line-height: 1.6; margin: 0 auto 34px; max-width: 520px; } .cta-band .btn-primary { justify-content: center; } /* faq-section, cta-section, contact-section, location-section removed per spec (sections deleted entirely; FAQ + Contact move to their own pages) */ /* FOOTER */ .site-footer { background: var(--dark-panel); color: rgba(255,255,255,0.7); padding: 60px 40px 30px; } .footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } .footer-brand .nav-logo { margin-bottom: 14px; display: block; } .footer-brand p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.5); max-width: 260px; } .footer-col h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.9); margin-bottom: 18px; } .footer-col ul { display: flex; flex-direction: column; gap: 10px; } .footer-col ul li a { font-size: 14px; color: rgba(255,255,255,0.55); transition: color .2s; } .footer-col ul li a:hover { color: var(--wi-wo); } .footer-bottom { max-width: 1200px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: gap; } .footer-copy { font-size: 13px; color: rgba(255,255,255,0.35); } /* RESPONSIVE */ @media (max-width: 1024px) { .how-grid { grid-template-columns: repeat(2,1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .site-nav { padding: 0 20px; } .nav-inner .nav-links { display: none; } .nav-hamburger { display: flex; } .hero-inner { padding: 60px 20px; } .how-section, .categories-section, .testimonials-section, .cta-band, .shows-section { padding: 72px 20px; } .how-grid { grid-template-columns: 1fr; } .cat-grid { grid-template-columns: 1fr; } .shows-grid, .testimonials-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-bottom { flex-direction: column; gap: 12px; text-align: center; } } /* SITEFORGE FONT ENFORCEMENT (post-processed) */ body, body p, body li, body a, body span, body div, body label, body input, body textarea, body select, body button, body nav, body footer, body header, body section, body article, body aside, body main, body figure, body figcaption, body .sf-post-card, body .sf-post-title, body .sf-post-excerpt, body .sf-post-meta, body .sf-post-cat, body .sf-post-author, body .sf-post-date, body .sf-testimonial-item, body .sf-testimonial-quote, body .sf-testimonial-name, body .sf-testimonial-role, body .sf-team-member, body .sf-portfolio-item, body .sf-faq-item, body .sf-video-item, body .sf-video-caption, body .woocommerce ul.products li.product, body .woocommerce-Price-amount { font-family: var(--font-body); } body h1, body h2, body h3, body h4, body h5, body h6, body .sf-post-title, body .sf-testimonial-name, body .sf-team-member h3, body .sf-portfolio-item h3, body .sf-faq-item h3, body .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display); } /* SITEFORGE STYLE POST-PROCESS OVERRIDES (bold-vibrant) */ /* Bold-vibrant nav CTA buttons need a contrasting fill on the dark hero header. Scope to children of .nav-cta — when LLMs use .nav-cta as a container class (current pattern), styling the container itself paints a giant white box in the top-right of the header. */ .sf-style-bold-vibrant .nav-cta > a { color: #FFB066 !important; background: #fff !important; } .sf-style-bold-vibrant .nav-cta > a:hover { color: #1F2937 !important; background: #FFBE0B !important; } /* sf-form-color-reset */ .contact-form-wrapper { color: var(--text, #111); } .contact-form-wrapper input::placeholder, .contact-form-wrapper textarea::placeholder { color: var(--muted, #6b7280); } .panel-dark .contact-form-wrapper, .section.dark .contact-form-wrapper, .section-dark .contact-form-wrapper, .dark .contact-form-wrapper, .bg-dark .contact-form-wrapper, .bg-black .contact-form-wrapper, [class*="panel-dark"] .contact-form-wrapper { color: var(--text-on-dark, #f0f0f0); } /* sf-form-input-box-floor */ .contact-form-wrapper input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), .contact-form-wrapper textarea, .contact-form-wrapper select { display: block !important; width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border: 1px solid var(--input-border, #9ca3af); border-radius: 6px; background: var(--input-bg, #fff); color: var(--text, #111); } .contact-form-wrapper textarea { min-height: 120px; } .panel-dark .contact-form-wrapper input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), .panel-dark .contact-form-wrapper textarea, .panel-dark .contact-form-wrapper select, .section.dark .contact-form-wrapper input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), .section.dark .contact-form-wrapper textarea, .section.dark .contact-form-wrapper select, .section-dark .contact-form-wrapper input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), .section-dark .contact-form-wrapper textarea, .section-dark .contact-form-wrapper select, .dark .contact-form-wrapper input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), .dark .contact-form-wrapper textarea, .dark .contact-form-wrapper select, .bg-dark .contact-form-wrapper input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), .bg-dark .contact-form-wrapper textarea, .bg-dark .contact-form-wrapper select, .bg-black .contact-form-wrapper input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), .bg-black .contact-form-wrapper textarea, .bg-black .contact-form-wrapper select, [class*="panel-dark"] .contact-form-wrapper input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), [class*="panel-dark"] .contact-form-wrapper textarea, [class*="panel-dark"] .contact-form-wrapper select { border-color: var(--input-border-on-dark, rgba(255,255,255,0.35)); background: var(--input-bg-on-dark, rgba(255,255,255,0.06)); color: var(--text-on-dark, #f0f0f0); } /* Hero font cap — keeps hero CTA + value prop above the fold. The Stage-1 prompt instructs clamp(48px, 8vw, 120px); 8vw = ~115px at 1440px, producing an ~800px headline block that pushes the CTA below the fold. */ :where(h1) { font-size: clamp(32px, 4.4vw, 60px) !important; line-height: 1.07 !important; text-wrap: balance; overflow-wrap: break-word; } /* Trim oversized hero padding + grid gaps + the large top-padding the LLM puts on the CTA container, so the primary CTA rises above the fold. min-height is intentionally untouched so 100vh heroes still work. Selectors use class substring matches scoped to the first section / hero because the LLM- generated class names vary per page (.hero-copy/.hero-actions on the Mirage preview; different elsewhere). Verified on the Mirage preview: CTA top 1191 -> 745 (above a 768px laptop fold); headline + subhead fully above fold; hero height 1519 -> 1135. */ /* #384 — :not(REPLACED) is load-bearing, do not drop it. [class*="hero"] is a SUBSTRING match, so it also matches img.sf-hero-image / .hero-scrim etc., not just the hero SECTION. On a replaced element padding sits INSIDE the border box, so the photo is laid out below it and the padding strip renders as the section ground: a flat, full-width bar with a hard seam across the top of the hero image. That is the "hero band" — three reviewers reported it across two gens, and it survived five wrong hypotheses (scrims, header, capture, source asset, border-radius) because every one of them was about the hero and this rule is not. PROVEN by red-green on the live render: img padding-top 20.32px -> 0 moves the flat top strip 20px -> 0px with nothing else changed. clamp(12px,2vh,30px) == 20.32px at that viewport. The :where() wrapper on the exclusion keeps specificity at 0 so the cascade is unchanged. */ :where(body > section:first-of-type, .hero, section.hero, header.hero, [class*="hero"], [class*="Hero"]):where(:not(img, video, picture, svg, canvas, iframe, object, embed)) { padding-top: clamp(12px, 2vh, 30px) !important; padding-bottom: clamp(36px, 5vh, 76px) !important; } /* #384 SECOND CAUSE — the rule above removes the band ONLY when the hero image is position:absolute;inset:0 (an absolute child ignores its section's padding). When the LLM instead emits an IN-FLOW (position:static) full-bleed hero image, the SECTION's own padding-top pushes it down and renders the IDENTICAL ~20px strip of section ground. Measured on summit-19ev-claude: TOP_GAP=20px with imgPadTop=0px (i.e. PR#63 working) and imgPos=static. So: when the hero's FIRST flow child is the image itself, the image IS the top of the section and there is nothing above it to pad away from — zero the top padding for that shape only. :has() is the only way to express "first child is the image" in CSS; both :where() wrappers keep specificity at 0 so the cascade is untouched. SCOPED DELIBERATELY NARROW: only when the image is the FIRST child. A hero that opens with an eyebrow/heading and carries a photo lower down still needs its top padding trimmed, which is what this rule exists for — that case is untouched. DEFAULT OFF (SF_HERO_INFLOW_PAD) because :has() support and LLM markup shape both vary; flip on staging and validate on a fresh gen before trusting it. */ /* DEPTH-AGNOSTIC fix (rb1 2026-07-25): the first-child chain below only reaches 1 nesting level, but the LLM emits the full-bleed hero image TWO wrappers deep (section > div.hero-shell > div.media-fill > img — measured on chaosbound-rb1-gpt + texas-rb1-gpt, both still showing the ~20px dark bar with SF_HERO_INFLOW_PAD already on). Guessing depth breaks on the next wrapper variation, so ALSO key off the platform-injected data-sf-hero-image marker (on the img) / data-sf-hero-media (on its wrapper) — a full-bleed (position:absolute;inset:0) hero image IS the section's top, so its section never needs top padding regardless of wrapper depth. */ :where(body > section:first-of-type, .hero, section.hero, header.hero, [class*="hero"], [class*="Hero"]):where(:not(img, video, picture, svg, canvas, iframe, object, embed)):where(:has(> img:first-child, > picture:first-child, > video:first-child, > :first-child > img:first-child, > :first-child > picture:first-child, [data-sf-hero-image], [data-sf-hero-media])) { padding-top: 0 !important; } :where(body > section:first-of-type [class*="grid"], [class*="hero"] [class*="grid"]) { gap: clamp(20px, 2.4vw, 32px) !important; } /* #384 — same exclusion, same reason: this rule also sets PADDING off a class-substring match, so an image whose class happens to contain "action"/"cta" would grow the identical 8px band. Not observed in the wild yet; excluded because it is the same defect, and fixing only the site a first grep surfaced has already failed three times this mission (z-lifts 2-of-5, pseudo-domain 1-of-8). */ :where(body > section:first-of-type [class*="action"], body > section:first-of-type [class*="cta"], [class*="hero"] [class*="action"], [class*="hero"] [class*="cta"]):where(:not(img, video, picture, svg, canvas, iframe, object, embed)) { margin-top: 8px !important; padding-top: 8px !important; } :where(body > section:first-of-type [class*="copy"], [class*="hero"] [class*="copy"]) { padding-top: 0 !important; } /* #778 follow-up — tighten the hero lead/subhead so the primary CTA lifts above the fold even inside the preview wrapper (top promo bar + bottom device bar). */ :where(body > section:first-of-type [class*="lead"], [class*="hero"] [class*="lead"], [class*="hero-copy"] > p) { font-size: clamp(14px, 1.1vw, 16px) !important; line-height: 1.5 !important; margin-top: 10px !important; margin-bottom: 14px !important; } @media (min-width: 769px) { :where([class*="hero"], [class*="copy"]):has(> h1) { min-width: min(460px, 52%) !important; } :where([class*="hero"], [class*="copy"]):has(> h1) > h1 { max-width: 100% !important; font-size: clamp(30px, 4vw, 54px) !important; } /* #1616-v2 — class-agnostic: the GPL GPT hero column carried neither a "hero" nor "copy" class and stayed ~240px wide -> 8-line h1. In the FIRST section, whatever element directly contains the h1 gets the same floor. */ body > section:first-of-type :where(*:has(> h1)) { min-width: min(460px, 52%) !important; } } /* Mobile: tighter headline (keeps a 28px floor; >=16px avoids iOS focus-zoom on adjacent inputs). */ @media (max-width: 768px) { :where(h1) { font-size: clamp(28px, 7.5vw, 42px) !important; line-height: 1.1 !important; text-wrap: balance; overflow-wrap: break-word; } } /* Footer link contrast: bare (e.g. a mailto: email) in footers fall back to the UA link-blue (#0000ee), which is illegible on a dark brand footer (contrast ~1.2 on a navy footer). Make footer links inherit the footer's already-legible text colour instead. */ :where(footer) a, :where([class*="footer" i]) a, :where([class*="Footer"]) a { color: inherit; text-underline-offset: 2px; } /* sf-card-text-contrast: dark card needs light text */ .site-nav, .site-nav h1, .site-nav h2, .site-nav h3, .site-nav h4, .site-nav h5, .site-nav h6, .site-nav p, .site-nav li, .site-nav a:not([class*="btn"]), .site-nav span, .site-nav strong, .site-nav em, .site-nav blockquote, .site-nav dt, .site-nav dd, .site-nav small, .site-nav figcaption { color: #f0f0f0; } .site-nav .btn-outline { color: #f0f0f0; border-color: #f0f0f0; } .site-nav .btn-ghost { color: #f0f0f0; border-color: #f0f0f0; } .site-nav .btn-link { color: #f0f0f0; border-color: #f0f0f0; } .site-nav .btn-secondary { color: #f0f0f0; border-color: #f0f0f0; } /* sf-card-text-contrast: dark card needs light text */ .mobile-menu, .mobile-menu h1, .mobile-menu h2, .mobile-menu h3, .mobile-menu h4, .mobile-menu h5, .mobile-menu h6, .mobile-menu p, .mobile-menu li, .mobile-menu a:not([class*="btn"]), .mobile-menu span, .mobile-menu strong, .mobile-menu em, .mobile-menu blockquote, .mobile-menu dt, .mobile-menu dd, .mobile-menu small, .mobile-menu figcaption { color: #f0f0f0; } .mobile-menu .btn-outline { color: #f0f0f0; border-color: #f0f0f0; } .mobile-menu .btn-ghost { color: #f0f0f0; border-color: #f0f0f0; } .mobile-menu .btn-link { color: #f0f0f0; border-color: #f0f0f0; } .mobile-menu .btn-secondary { color: #f0f0f0; border-color: #f0f0f0; } /* sf-card-text-contrast: dark card needs light text */ .categories-section, .categories-section h1, .categories-section h2, .categories-section h3, .categories-section h4, .categories-section h5, .categories-section h6, .categories-section p, .categories-section li, .categories-section a:not([class*="btn"]), .categories-section span, .categories-section strong, .categories-section em, .categories-section blockquote, .categories-section dt, .categories-section dd, .categories-section small, .categories-section figcaption { color: #f0f0f0; } .categories-section .btn-outline { color: #f0f0f0; border-color: #f0f0f0; } .categories-section .btn-ghost { color: #f0f0f0; border-color: #f0f0f0; } .categories-section .btn-link { color: #f0f0f0; border-color: #f0f0f0; } .categories-section .btn-secondary { color: #f0f0f0; border-color: #f0f0f0; } /* sf-card-text-contrast: dark card needs light text */ .faq-section, .faq-section h1, .faq-section h2, .faq-section h3, .faq-section h4, .faq-section h5, .faq-section h6, .faq-section p, .faq-section li, .faq-section a:not([class*="btn"]), .faq-section span, .faq-section strong, .faq-section em, .faq-section blockquote, .faq-section dt, .faq-section dd, .faq-section small, .faq-section figcaption { color: #f0f0f0; } .faq-section .btn-outline { color: #f0f0f0; border-color: #f0f0f0; } .faq-section .btn-ghost { color: #f0f0f0; border-color: #f0f0f0; } .faq-section .btn-link { color: #f0f0f0; border-color: #f0f0f0; } .faq-section .btn-secondary { color: #f0f0f0; border-color: #f0f0f0; } /* sf-card-text-contrast: eyebrow class in dark bg .hero */ .hero .hero-stat-num { color: #f0f0f0; } /* sf-card-text-contrast: eyebrow class in dark bg .categories-section */ .categories-section .section-kicker { color: #f0f0f0; } /* sf-card-text-contrast: eyebrow class in dark bg .categories-section */ .categories-section .section-headline { color: #f0f0f0; } /* sf-card-text-contrast: eyebrow class in dark bg .faq-section */ .faq-section .section-kicker { color: #f0f0f0; } /* sf-card-text-contrast: eyebrow class in dark bg .faq-section */ .faq-section .section-headline { color: #f0f0f0; } /* sf-text-overlay-scrim */ .hero, .cat-card { position: relative; isolation: isolate; } .hero :where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, .btn-row, button, a), .cat-card :where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, .btn-row, button, a) { position: relative; z-index: 2; } /* Mobile overflow guard — kills horizontal scroll on narrow viewports. overflow-x:clip is stricter than overflow-x:hidden and cannot be subverted by descendant sticky/fixed ancestors establishing scroll containers. */ html { overflow-x: clip !important; max-width: 100vw !important; } body { overflow-x: clip !important; max-width: 100vw !important; } /* Fallback for browsers without overflow-x: clip support. */ @supports not (overflow-x: clip) { html, body { overflow-x: hidden !important; } } /* Decorative shapes commonly extend past viewport on mobile. Their parent contexts (.hero / .hero-bg / sections with shape backgrounds) should clip — visual loses nothing on mobile, mobile gains a usable layout. */ .hero, .hero-bg, .hero-visual, [class*="hero-section"], section [class*="decorative"], section [class*="float-shape"], section [class*="abstract-bg"] { overflow-x: clip !important; } @supports not (overflow-x: clip) { .hero, .hero-bg, .hero-visual, [class*="hero-section"], section [class*="decorative"], section [class*="float-shape"], section [class*="abstract-bg"] { overflow-x: hidden !important; } } /* Force card-grid stacking on narrow viewports so portfolio/blog/ product/team grids don't extend past the viewport horizontally. */ @media (max-width: 600px) { .sf-portfolio-grid, .sf-blog-grid, .sf-products-grid, .sf-team-grid, [class*="portfolio-grid"], [class*="blog-grid"], [class*="products-grid"], [class*="team-grid"] { grid-template-columns: 1fr !important; } } /* #135 — cap oversized full-width content-image slots. A full-width photo slot (e.g. .services-bg-photo, .shop-visual) whose inner img carries an inline aspect-ratio with no height bound renders enormous (~960-1200px tall on desktop — Zach's "images too large", sturgis-gpt-r138 §02 .shop-visual = 1278x959 at ar 4/3). Bound the slot + its image to a sane height with object-fit:cover (crops to the focal area, never distorts or overflows the section). The [class*="visual"] pattern catches section-visual containers (shop-visual, media-visual, etc.) but EXCLUDES the hero (hero-visual / hero media-fill), which is meant to be full-bleed. Hero-fill images (data-sf-hero-image) + logos/icons are unaffected. SF_CONTENT_IMG_CAP=off reverts. */ [class*="bg-photo"], [class*="feature-photo"], [class*="showcase-photo"], [class*="section-photo"], [class*="visual"]:not([class*="hero"]) { max-height: 600px !important; overflow: hidden !important; } [class*="bg-photo"] > img, [class*="feature-photo"] > img, [class*="showcase-photo"] > img, [class*="section-photo"] > img, [class*="visual"]:not([class*="hero"]) > img { max-height: 600px !important; height: 100% !important; object-fit: cover !important; } /* Layout-safety (SF_LAYOUT_SAFETY_CSS). (a) A fixed-height card media wrapper (e.g. .service-media in a grid-template-rows:220px card) holding an aspect-ratio image with no height bound lets the image overflow its row and — being position:relative — paint OVER the card's own heading (dcon .service-media over .service-body). Clip the wrapper + cover-fit the img. Excludes hero/visual (full-bleed by design) and social/icon/logo. */ [class*="-media"]:not([class*="hero"]):not([class*="visual"]):not([class*="social"]):not([class*="icon"]):not([class*="logo"]) { overflow: hidden !important; } [class*="-media"]:not([class*="hero"]):not([class*="visual"]):not([class*="social"]):not([class*="icon"]):not([class*="logo"]) > img { height: 100% !important; object-fit: cover !important; } /* (b) Top-align any contact 2-col container so a short info column isn't stretched to a tall form column's height and vertically-centered into dead space. Anchor on the .contact-card child (used by .split AND .cta-box and other container names), so it generalizes across layouts. align-items is a no-op on non-grid/flex containers, so this is safe. */ .contact-section .split, .split:has(form), [class*="cta-box"]:has(form), :has(> [class*="contact-card"]) { align-items: start !important; } /* SiteForge: ensure header stays above all content */ header, .site-header, [class*="header"] { position: relative; z-index: 9999; } nav.mobile-menu, .mobile-menu-overlay { z-index: 10000; } .mobile-menu-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:9999; } .mobile-menu-overlay.open { display:block; } /* Hamburger toggle — sf-ui.js APPENDS a fully-independent