/** * Casting Tools – Home / Landing page styles. * * All rules are scoped under `.ct-home` (added to by the template) so * nothing here leaks into the rest of the Digital Pro / Genesis theme. * * Palette is taken from the Casting Tools logo swoosh: * purple/indigo -> blue -> teal -> green -> yellow/lime */ /* ------------------------------------------------------------------ */ /* Tokens */ /* ------------------------------------------------------------------ */ .ct-home { --ct-purple: #7c3aed; --ct-indigo: #4f46e5; --ct-blue: #2563eb; --ct-teal: #0d9488; --ct-green: #16a34a; --ct-lime: #a3e635; --ct-yellow: #facc15; --ct-ink: #0f1222; --ct-body: #3b3f52; --ct-muted: #6b7180; --ct-line: #e7e8ef; --ct-surface:#ffffff; --ct-alt: #f6f7fb; --ct-rainbow: linear-gradient( 90deg, var(--ct-purple) 0%, var(--ct-indigo) 22%, var(--ct-blue) 40%, var(--ct-teal) 60%, var(--ct-green) 78%, var(--ct-lime) 100% ); --ct-radius: 18px; --ct-shadow: 0 20px 50px -24px rgba(16, 18, 34, .35); --ct-shadow-sm: 0 8px 24px -14px rgba(16, 18, 34, .3); font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--ct-body); background: var(--ct-surface); } /* Kill the default Genesis content padding/box for our full-bleed sections. */ .ct-home .content, .ct-home .site-inner { max-width: none; padding: 0; margin: 0; } .ct-home .ct-page { overflow: hidden; } .ct-wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; } .ct-center { text-align: center; } .ct-nowrap { white-space: nowrap; } /* ------------------------------------------------------------------ */ /* Buttons */ /* ------------------------------------------------------------------ */ .ct-home .ct-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: 16px; line-height: 1; text-decoration: none; color: #fff; background-color: var(--ct-ink); border: 2px solid transparent; /* Clip background to the border box so it fills right up to the rounded corners (no transparent gap on the left/right edges). */ background-clip: padding-box; transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease, background-position .4s ease; cursor: pointer; } .ct-home .ct-btn:hover { transform: translateY(-2px); box-shadow: var(--ct-shadow-sm); } .ct-home .ct-btn:focus-visible { outline: 3px solid var(--ct-blue); outline-offset: 3px; } .ct-home .ct-btn--lg { padding: 18px 40px; font-size: 18px; } /* Rainbow sweep. A 200% wide, seamless (wraps purple->lime->purple) gradient positioned at centre, shifted on hover. Because the gradient always fully covers the button and the border is removed here, the rounded pill corners render cleanly with no flat edges. */ .ct-home .ct-btn--rainbow { border-color: transparent; background-image: linear-gradient( 90deg, var(--ct-purple), var(--ct-indigo), var(--ct-blue), var(--ct-teal), var(--ct-green), var(--ct-lime), var(--ct-green), var(--ct-blue), var(--ct-purple) ); background-size: 200% 100%; background-position: 25% 0; background-repeat: no-repeat; } .ct-home .ct-btn--rainbow:hover { background-position: 75% 0; } .ct-home .ct-btn--purple { background: var(--ct-purple); } .ct-home .ct-btn--blue { background: var(--ct-blue); } .ct-home .ct-btn--teal { background: var(--ct-teal); } .ct-home .ct-btn--green { background: var(--ct-green); } .ct-home .ct-btn--ghost { background: transparent; color: var(--ct-ink); border-color: var(--ct-line); } .ct-home .ct-btn--ghost:hover { border-color: var(--ct-ink); } .ct-cta-group { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; } .ct-cta-group--center { justify-content: center; } /* ------------------------------------------------------------------ */ /* Hero */ /* ------------------------------------------------------------------ */ .ct-home .ct-hero { position: relative; text-align: center; padding: 96px 0 88px; background: radial-gradient(1200px 480px at 15% -10%, rgba(124,58,237,.10), transparent 60%), radial-gradient(1000px 440px at 85% 0%, rgba(37,99,235,.10), transparent 60%), radial-gradient(900px 500px at 60% 120%, rgba(163,230,53,.12), transparent 60%), #fff; } .ct-hero__inner { position: relative; z-index: 1; } .ct-hero__logo { width: 220px; height: auto; margin: 0 auto 28px; display: block; } .ct-home .ct-hero__title { font-size: clamp(2.2rem, 5.2vw, 4rem); line-height: 1.05; letter-spacing: -.02em; font-weight: 700; color: var(--ct-ink); margin: 0 auto 18px; max-width: 16ch; } .ct-hero__subtitle { font-size: clamp(1.05rem, 2.2vw, 1.4rem); color: var(--ct-muted); margin: 0 auto; max-width: 46ch; font-weight: 500; } .ct-hero .ct-cta-group { justify-content: center; } .ct-hero__note { margin-top: 20px; font-size: 14px; color: var(--ct-muted); } .ct-hero__rainbow { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--ct-rainbow); } /* ------------------------------------------------------------------ */ /* Sections + split layout */ /* ------------------------------------------------------------------ */ .ct-home .ct-section { position: relative; padding: 88px 0; } /* Default (odd) sections: a soft light gradient with a hint of colour so they no longer read as flat white. */ .ct-home .ct-section { background: radial-gradient(900px 380px at 82% -8%, rgba(37,99,235,.06), transparent 60%), radial-gradient(760px 360px at 10% 108%, rgba(124,58,237,.05), transparent 60%), linear-gradient(180deg, #ffffff 0%, #f2f4fb 100%); } /* Alt (even) sections: a noticeably deeper, cooler gradient for contrast and rhythm between the white-ish sections. */ .ct-home .ct-section--alt { background: radial-gradient(820px 420px at 88% 0%, rgba(13,148,136,.14), transparent 60%), radial-gradient(760px 420px at 6% 100%, rgba(37,99,235,.16), transparent 60%), linear-gradient(180deg, #e9edf7 0%, #dbe3f2 100%); } /* A thin rainbow hairline to mark each section transition. */ .ct-home .ct-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ct-rainbow); opacity: .55; } .ct-home .ct-section__title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1; letter-spacing: -.02em; font-weight: 700; color: var(--ct-ink); margin: 14px 0 16px; } .ct-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .ct-split--reverse .ct-split__media { order: 2; } .ct-split__media { position: relative; border-radius: var(--ct-radius); overflow: hidden; box-shadow: var(--ct-shadow); aspect-ratio: 4 / 3; background: var(--ct-alt); } .ct-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ct-lead { font-size: 1.2rem; color: var(--ct-ink); font-weight: 500; margin: 0 0 18px; } .ct-lead.ct-center { margin-left: auto; margin-right: auto; max-width: 60ch; } .ct-home .ct-list { list-style: none; margin: 0 0 22px; padding: 0; } .ct-home .ct-list li { position: relative; padding: 0 0 0 34px; margin: 0 0 12px; color: var(--ct-body); line-height: 1.5; } .ct-home .ct-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 999px; background: var(--ct-rainbow); background-size: 220% 100%; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / 16px no-repeat; } .ct-note { background: rgba(37, 99, 235, .06); border-left: 3px solid var(--ct-blue); padding: 14px 18px; border-radius: 8px; color: var(--ct-body); margin: 0 0 22px; font-size: .98rem; } /* Section badges (little pills). */ .ct-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; } .ct-badge--purple { background: var(--ct-purple); } .ct-badge--blue { background: var(--ct-blue); } .ct-badge--teal { background: var(--ct-teal); } .ct-badge--green { background: var(--ct-green); } .ct-badge--yellow { background: var(--ct-yellow); color: var(--ct-ink); } /* Badge floating on media. */ .ct-split__media .ct-badge { position: absolute; left: 18px; bottom: 18px; box-shadow: var(--ct-shadow-sm); } /* ------------------------------------------------------------------ */ /* Multi-role feature section */ /* ------------------------------------------------------------------ */ .ct-home .ct-section--feature { background: radial-gradient(900px 400px at 50% -20%, rgba(124,58,237,.12), transparent 60%), var(--ct-ink); color: #fff; text-align: center; } .ct-home .ct-section--feature .ct-section__title { color: #fff; } .ct-home .ct-section--feature .ct-lead { color: rgba(255,255,255,.82); } .ct-multi { display: flex; flex-direction: column; align-items: center; gap: 8px; } .ct-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0 34px; } .ct-chip { padding: 10px 20px; border-radius: 999px; font-weight: 600; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); } .ct-chip--purple { box-shadow: inset 0 0 0 2px var(--ct-purple); } .ct-chip--blue { box-shadow: inset 0 0 0 2px var(--ct-blue); } .ct-chip--teal { box-shadow: inset 0 0 0 2px var(--ct-teal); } .ct-chip--green { box-shadow: inset 0 0 0 2px var(--ct-green); } /* ------------------------------------------------------------------ */ /* Final CTA */ /* ------------------------------------------------------------------ */ .ct-home .ct-final { padding: 90px 0; text-align: center; position: relative; background: var(--ct-alt); } .ct-home .ct-final::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--ct-rainbow); } .ct-final__title { font-size: clamp(1.9rem, 3.6vw, 2.8rem); color: var(--ct-ink); font-weight: 700; margin: 0 0 12px; } .ct-final__subtitle { color: var(--ct-muted); font-size: 1.15rem; margin: 0 0 6px; } /* ------------------------------------------------------------------ */ /* Responsive */ /* ------------------------------------------------------------------ */ @media (max-width: 860px) { .ct-split { grid-template-columns: 1fr; gap: 32px; } .ct-split--reverse .ct-split__media { order: 0; } .ct-home .ct-section { padding: 60px 0; } .ct-home .ct-hero { padding: 72px 0 64px; } .ct-cta-group { justify-content: center; } .ct-split__body { text-align: center; } .ct-home .ct-list { display: inline-block; text-align: left; } } @media (max-width: 480px) { .ct-home .ct-btn { width: 100%; } .ct-cta-group { flex-direction: column; } } /* Respect reduced motion. */ @media (prefers-reduced-motion: reduce) { .ct-home .ct-btn { transition: none; } .ct-home .ct-btn:hover { transform: none; } }