/* Theme: CTA Onepager TT3 Child (Branded) File: style.css Note: Tailwind is loaded via CDN; this sheet adds structure, sizing, and overrides */ /* ------------------------------ 0) CSS RESET ADD-ONS / SAFETY --------------------------------*/ html, body { height: 100%; } *, *::before, *::after { box-sizing: border-box; } img, video { max-width: 100%; height: auto; } /* Avoid layout jank if fonts/emoji CSS are slow */ img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px; } /* WordPress admin-bar already offsets ; we avoid double offsets */ /* Improve focus visibility a tad over Tailwind default */ :focus-visible { outline: 2px solid #0f766e; /* teal-700 */ outline-offset: 2px; } /* ------------------------------ 1) LAYOUT PRIMITIVES --------------------------------*/ body { background: #fff; color: #111827; /* gray-900 */ font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; line-height: 1.6; } #scrolly { position: relative; z-index: 1; /* sits above #backdrop */ } /* Backdrop sits behind all content and changes with scrolling panels */ #backdrop { position: fixed; inset: 0; z-index: 0; background: #0b0b0b center/cover no-repeat; transition: background-image 400ms ease, filter 300ms ease, opacity 300ms ease; will-change: background-image, opacity; } /* Content “cards” that sit on top of the scrolly backdrops */ .card { background: #ffffffcc; /* translucent white */ backdrop-filter: saturate(1.1) blur(2px); border: 1px solid rgba(0,0,0,0.06); border-radius: 1rem; /* rounded-2xl-ish */ padding: clamp(1rem, 2vw + 0.5rem, 1.75rem); box-shadow: 0 1px 2px rgba(0,0,0,0.04); } /* Sections that trigger backdrop swaps */ .panel { position: relative; z-index: 1; /* spacing driven by utility classes in markup; this just ensures isolation */ isolation: isolate; } /* Make sure nothing inside panels gets clipped unless explicitly intended */ .panel { overflow: visible; } .panel.panel--hero { overflow: hidden; } /* hero keeps soft gradient edge */ /* ------------------------------ 2) HEADER / ANCHOR BEHAVIOR --------------------------------*/ #siteHeader { /* already fixed in markup; ensure it’s above cards/backdrops */ z-index: 50; } /* Anchor scroll offset so headings don’t hide under fixed header */ #model, #learners, #funders, #ai, #libraries, #global, #policy, #contact, #skills, #testimonials { scroll-margin-top: 110px; /* header + cushion */ } /* ------------------------------ 3) HERO SIZING (shorter on desktop, roomy on mobile) RULES: - Mobile: generous vertical space so nothing feels cramped. - Desktop: shorter feel (not full-bleed), but NEVER clip content. --------------------------------*/ /* Base (mobile-first) — roomy */ .panel--hero { min-height: 88vh; /* plenty of space on phones */ display: block; } /* The gradient overlay should not block clicks */ .panel--hero > .absolute.inset-0 { pointer-events: none; } /* Desktop: shorter look but flexible height (no clipping) */ @media (min-width: 1024px) { .panel--hero { height: auto !important; /* grow with content */ min-height: 60vh !important;/* “shorter” feel */ } /* Inner container breathing room (top/bottom) */ .panel--hero .mx-auto { padding-top: clamp(2rem, 5vh, 3.5rem) !important; padding-bottom: clamp(2rem, 5vh, 3.5rem) !important; } /* Right-side hero image should not force the section taller than needed */ .panel--hero img { max-height: 50vh; width: 100%; height: auto; object-fit: cover; object-position: center 40%; border-radius: 1rem; } } /* XXL desktops: keep hero from exploding vertically */ @media (min-width: 1536px) { .panel--hero { min-height: 56vh !important; } } /* ------------------------------ 4) IMAGES / MEDIA --------------------------------*/ .panel img { display: block; border: 1px solid rgba(0,0,0,0.06); border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } /* Keep partner logos crisp and centered without layout jumps */ .partner-logos img { display: block; height: auto; max-height: clamp(90px, 11vw, 160px); width: auto; object-fit: contain; image-rendering: -webkit-optimize-contrast; /* crisper on WebKit */ } /* Video: reduce accidental blur scaling, ensure crisp posters */ video { border: 1px solid rgba(0,0,0,0.08); border-radius: 0.75rem; background: #000; image-rendering: auto; } /* Try to preserve apparent sharpness when downscaling posters */ video[poster] { object-fit: cover; object-position: center; } /* ------------------------------ 5) TYPOGRAPHY TWEAKS --------------------------------*/ h1, h2, h3, h4 { line-height: 1.2; } /* Slightly tighter hero headline on desktop to fit nicely */ @media (min-width: 1024px) { .panel--hero h1 { line-height: 1.15; letter-spacing: -0.01em; } } /* Small stat tiles in hero */ .panel--hero .rounded-2xl.p-6, .panel--hero .rounded-2xl.p-7, .panel--hero .rounded-2xl .p-6, .panel--hero .rounded-2xl .p-7 { background: #fff; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 1px 2px rgba(0,0,0,0.04); } /* ------------------------------ 6) GRID / SPACING GUARDS --------------------------------*/ /* Avoid columns smashing on mid breakpoints if content is tall */ @media (min-width: 1024px) { .panel .grid { align-items: start; } } /* Make “Partner Logos” section slightly narrower on small screens for balance */ @media (max-width: 640px) { .partner-logos { gap: 1.75rem !important; } } /* ------------------------------ 7) INTERACTION REFINEMENTS --------------------------------*/ a { text-underline-offset: 2px; text-decoration-thickness: 1px; } a:hover { text-decoration: none; } /* Buttons inside cards get a gentle elevation */ a.inline-flex, button.inline-flex { transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, color 120ms ease; } a.inline-flex:hover, button.inline-flex:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(0,0,0,0.15); } /* ------------------------------ 8) FORMS (Contact) --------------------------------*/ #contact form { background: #f9fafb; border: 1px solid rgba(0,0,0,0.06); } #ctaAlert { transition: opacity 180ms ease; } /* ------------------------------ 9) FOOTER --------------------------------*/ footer { background: #fff; } footer a:hover { color: #111827; } /* ------------------------------ 10) SCROLL / MOTION PREFERENCES --------------------------------*/ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } #backdrop { transition: none; } } /* ------------------------------ 11) TROUBLESHOOT GUARDS --------------------------------*/ /* If a future edit reintroduces clipping, these lines keep content visible */ .panel--hero > * { position: relative; z-index: 1; } .panel--hero::before { content: ""; position: absolute; inset: 0; z-index: 0; } /* Ensure W3TC or inline styles can’t override these critical bits easily */ @media (min-width: 1024px) { .panel--hero { height: auto !important; min-height: 60vh !important; } } /* ------------------------------ 12) OPTIONAL: DARKEN BACKDROP SLIGHTLY UNDER HERO ONLY --------------------------------*/ /* (Uncomment if the first panel text ever lacks contrast) .panel--hero + .panel, .panel--hero { --cta-hero-overlay: inset 0 0 0 9999px rgba(255,255,255,0.04); } #backdrop { box-shadow: var(--cta-hero-overlay, none); } */