/** * Casting Tools – Inner pages (Privacy, Terms, Pricing, Contact, Products). * * Loaded alongside casting-tools-home.css, so it inherits all the tokens and * button styles defined there (buttons, --ct-* colours, --ct-rainbow, .ct-wrap). * Everything here is scoped under `.ct-page-inner` (added to by the * shared page shell) so it never leaks into the rest of the theme. */ /* ------------------------------------------------------------------ */ /* Shared page header (rainbow hero band) */ /* ------------------------------------------------------------------ */ .ct-page-inner .content, .ct-page-inner .site-inner { max-width: none; padding: 0; margin: 0; } .ct-page-inner .ct-page { overflow: hidden; } .ct-page-inner .ct-pagehead { position: relative; text-align: center; padding: 72px 0 60px; background: radial-gradient(1100px 420px at 18% -20%, rgba(124,58,237,.12), transparent 60%), radial-gradient(900px 420px at 85% -10%, rgba(37,99,235,.12), transparent 60%), linear-gradient(180deg, #ffffff 0%, #f2f4fb 100%); } .ct-page-inner .ct-pagehead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--ct-rainbow); } .ct-page-inner .ct-pagehead__eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ct-blue); margin-bottom: 12px; } .ct-page-inner .ct-pagehead__title { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.06; letter-spacing: -.02em; font-weight: 700; color: var(--ct-ink); margin: 0 auto 12px; max-width: 20ch; } .ct-page-inner .ct-pagehead__meta { color: var(--ct-muted); font-size: 15px; margin: 0; } /* ------------------------------------------------------------------ */ /* Readable prose area (Privacy / Terms) */ /* ------------------------------------------------------------------ */ .ct-page-inner .ct-prose { max-width: 760px; margin: 0 auto; padding: 64px 24px 88px; color: var(--ct-body); font-size: 1.05rem; line-height: 1.75; } .ct-page-inner .ct-prose h2 { font-size: 1.5rem; color: var(--ct-ink); font-weight: 700; letter-spacing: -.01em; margin: 2.2em 0 .6em; padding-top: .4em; } .ct-page-inner .ct-prose h2:first-of-type { margin-top: 0; } .ct-page-inner .ct-prose h3 { font-size: 1.15rem; color: var(--ct-ink); font-weight: 600; margin: 1.6em 0 .5em; } .ct-page-inner .ct-prose p { margin: 0 0 1.1em; } .ct-page-inner .ct-prose ul { margin: 0 0 1.2em; padding-left: 1.3em; } .ct-page-inner .ct-prose li { margin: 0 0 .5em; } .ct-page-inner .ct-prose a { color: var(--ct-blue); } /* Little coloured marker before each prose H2. */ .ct-page-inner .ct-prose h2::before { content: ""; display: inline-block; width: 26px; height: 4px; border-radius: 999px; background: var(--ct-rainbow); background-size: 200% 100%; vertical-align: middle; margin-right: 12px; transform: translateY(-4px); } /* ------------------------------------------------------------------ */ /* Generic centered section wrapper for the non-prose pages */ /* ------------------------------------------------------------------ */ .ct-page-inner .ct-block { padding: 64px 0; } .ct-page-inner .ct-block--tint { background: radial-gradient(820px 420px at 88% 0%, rgba(13,148,136,.12), transparent 60%), linear-gradient(180deg, #eef1f9 0%, #e2e8f5 100%); } .ct-page-inner .ct-block__intro { max-width: 720px; margin: 0 auto 40px; text-align: center; } .ct-page-inner .ct-block__title { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--ct-ink); font-weight: 700; margin: 0 0 14px; } .ct-page-inner .ct-block__lead { color: var(--ct-body); font-size: 1.1rem; line-height: 1.7; margin: 0; } /* ------------------------------------------------------------------ */ /* Pricing table */ /* ------------------------------------------------------------------ */ .ct-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 1080px; margin: 0 auto; align-items: stretch; } .ct-price-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ct-line); border-radius: var(--ct-radius); padding: 32px 28px; box-shadow: var(--ct-shadow-sm); } .ct-price-card--featured { border: none; box-shadow: var(--ct-shadow); transform: translateY(-6px); } .ct-price-card--featured::before { content: ""; position: absolute; inset: 0; border-radius: var(--ct-radius); padding: 2px; background: var(--ct-rainbow); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .ct-price-card__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--ct-rainbow); background-size: 200% 100%; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; white-space: nowrap; } .ct-price-card__name { font-size: 1.15rem; font-weight: 700; color: var(--ct-ink); margin: 0 0 4px; } .ct-price-card__blurb { color: var(--ct-muted); font-size: .95rem; margin: 0 0 20px; min-height: 42px; } .ct-price-card__price { font-size: 2.6rem; font-weight: 700; color: var(--ct-ink); line-height: 1; margin: 0 0 4px; } .ct-price-card__price .ct-price-card__cur { font-size: 1.4rem; vertical-align: super; } .ct-price-card__period { color: var(--ct-muted); font-size: .95rem; margin: 0 0 22px; } .ct-price-card__features { list-style: none; margin: 0 0 26px; padding: 0; flex: 1; } .ct-price-card__features li { position: relative; padding: 0 0 0 28px; margin: 0 0 11px; color: var(--ct-body); font-size: .98rem; line-height: 1.45; } .ct-price-card__features li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; 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 / 14px 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 / 14px no-repeat; } .ct-price-card .ct-btn { width: 100%; } .ct-pricing-note { max-width: 720px; margin: 36px auto 0; text-align: center; color: var(--ct-muted); font-size: .95rem; } /* ------------------------------------------------------------------ */ /* Philosophy callout (Pricing page) */ /* ------------------------------------------------------------------ */ .ct-philosophy { max-width: 820px; margin: 0 auto; background: #fff; border-radius: var(--ct-radius); box-shadow: var(--ct-shadow-sm); padding: 36px 40px; border-left: 6px solid transparent; border-image: var(--ct-rainbow) 1; } .ct-philosophy p { margin: 0 0 1em; line-height: 1.7; color: var(--ct-body); } .ct-philosophy p:last-child { margin-bottom: 0; } .ct-philosophy strong { color: var(--ct-ink); } /* ------------------------------------------------------------------ */ /* Products grid (two columns) */ /* ------------------------------------------------------------------ */ .ct-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; max-width: 1000px; margin: 0 auto; } .ct-product { display: flex; gap: 20px; align-items: flex-start; background: #fff; border: 1px solid var(--ct-line); border-radius: var(--ct-radius); padding: 26px; box-shadow: var(--ct-shadow-sm); transition: transform .15s ease, box-shadow .2s ease; } .ct-product:hover { transform: translateY(-3px); box-shadow: var(--ct-shadow); } .ct-product__logo { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: #f4f6fc; overflow: hidden; text-align: center; padding: 10px; box-sizing: border-box; } .ct-product__logo img { max-width: 100%; max-height: 100%; object-fit: contain; } /* Placeholder wordmark used until a real logo is dropped in. */ .ct-product__logo--ph { color: #fff; font-weight: 700; font-size: .9rem; line-height: 1.15; background: var(--ct-rainbow); background-size: 200% 100%; } .ct-product__body { flex: 1; } .ct-product__name { font-size: 1.15rem; font-weight: 700; color: var(--ct-ink); margin: 2px 0 4px; } .ct-product__name .ct-soon { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ct-purple); background: rgba(124,58,237,.1); padding: 3px 9px; border-radius: 999px; vertical-align: middle; } .ct-product__url { font-size: .85rem; color: var(--ct-blue); margin: 0 0 10px; word-break: break-word; } .ct-product__desc { color: var(--ct-body); font-size: .98rem; line-height: 1.6; margin: 0; } /* ------------------------------------------------------------------ */ /* Contact page */ /* ------------------------------------------------------------------ */ .ct-contact { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; max-width: 1040px; margin: 0 auto; align-items: start; } .ct-form { background: #fff; border: 1px solid var(--ct-line); border-radius: var(--ct-radius); padding: 32px; box-shadow: var(--ct-shadow-sm); } .ct-field { margin-bottom: 18px; } .ct-field label { display: block; font-weight: 600; color: var(--ct-ink); margin-bottom: 6px; font-size: .95rem; } .ct-field input, .ct-field textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--ct-line); border-radius: 10px; padding: 12px 14px; font: inherit; color: var(--ct-ink); background: #fbfcfe; transition: border-color .15s ease, box-shadow .15s ease; } .ct-field input:focus, .ct-field textarea:focus { outline: none; border-color: var(--ct-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.15); } .ct-field textarea { min-height: 150px; resize: vertical; } .ct-form__note { font-size: .85rem; color: var(--ct-muted); margin: 6px 0 0; } .ct-contact__aside { background: #fff; border: 1px solid var(--ct-line); border-radius: var(--ct-radius); padding: 30px; box-shadow: var(--ct-shadow-sm); } .ct-contact__aside h2 { font-size: 1.2rem; color: var(--ct-ink); margin: 0 0 14px; } .ct-contact__aside address { font-style: normal; line-height: 1.7; color: var(--ct-body); margin: 0 0 18px; } .ct-contact__reg { font-size: .9rem; color: var(--ct-muted); border-top: 1px solid var(--ct-line); padding-top: 16px; line-height: 1.6; } /* ------------------------------------------------------------------ */ /* Responsive */ /* ------------------------------------------------------------------ */ @media (max-width: 900px) { .ct-pricing-grid { grid-template-columns: 1fr; max-width: 460px; } .ct-price-card--featured { transform: none; } .ct-products { grid-template-columns: 1fr; max-width: 560px; } .ct-contact { grid-template-columns: 1fr; } } @media (max-width: 480px) { .ct-page-inner .ct-btn { width: 100%; } .ct-product { flex-direction: column; } } /* ==================================================================== */ /* VIBRANT PASS — make Pricing / Contact / Products as happy as the */ /* homepage. Scoped to the section-band + card classes only, so the */ /* Privacy / Terms prose pages (which use .ct-prose) are untouched. */ /* ==================================================================== */ /* Brighter, more colourful page header for the vibrant pages. */ .ct-page-inner.ct-vibrant .ct-pagehead { background: radial-gradient(1000px 460px at 12% -25%, rgba(124,58,237,.20), transparent 60%), radial-gradient(900px 460px at 88% -20%, rgba(37,99,235,.20), transparent 60%), radial-gradient(760px 460px at 50% 120%, rgba(163,230,53,.18), transparent 60%), linear-gradient(180deg, #ffffff 0%, #eef1fb 100%); } .ct-page-inner.ct-vibrant .ct-pagehead__eyebrow { color: #fff; background: var(--ct-rainbow); background-size: 200% 100%; padding: 6px 16px; border-radius: 999px; } /* Alternating happy section bands (mirror the homepage rhythm). */ .ct-page-inner.ct-vibrant .ct-block { position: relative; } .ct-page-inner.ct-vibrant .ct-block::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ct-rainbow); opacity: .6; } .ct-page-inner.ct-vibrant .ct-block { background: radial-gradient(820px 360px at 82% -8%, rgba(37,99,235,.08), transparent 60%), radial-gradient(720px 340px at 8% 110%, rgba(124,58,237,.07), transparent 60%), linear-gradient(180deg, #ffffff 0%, #f3f5fc 100%); } .ct-page-inner.ct-vibrant .ct-block--tint { background: radial-gradient(820px 440px at 88% 0%, rgba(13,148,136,.20), transparent 60%), radial-gradient(760px 440px at 6% 100%, rgba(37,99,235,.22), transparent 60%), radial-gradient(700px 420px at 50% 120%, rgba(163,230,53,.14), transparent 62%), linear-gradient(180deg, #e8edfa 0%, #d9e2f4 100%); } /* Section titles get a centered rainbow underline. */ .ct-page-inner.ct-vibrant .ct-block__title { position: relative; display: inline-block; padding-bottom: 14px; } .ct-page-inner.ct-vibrant .ct-block__title::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 72px; height: 4px; border-radius: 999px; background: var(--ct-rainbow); background-size: 200% 100%; } /* ---- Price cards: give every card a rainbow top and more life. ---- */ .ct-page-inner.ct-vibrant .ct-price-card { overflow: hidden; transition: transform .15s ease, box-shadow .2s ease; } .ct-page-inner.ct-vibrant .ct-price-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--ct-rainbow); background-size: 200% 100%; } .ct-page-inner.ct-vibrant .ct-price-card:hover { transform: translateY(-6px); box-shadow: var(--ct-shadow); } .ct-page-inner.ct-vibrant .ct-price-card--featured:hover { transform: translateY(-10px); } /* Featured card gets a soft tinted fill so it pops. */ .ct-page-inner.ct-vibrant .ct-price-card--featured { background: radial-gradient(520px 240px at 50% -10%, rgba(124,58,237,.08), transparent 60%), #ffffff; } /* The price number itself rendered in rainbow. */ .ct-page-inner.ct-vibrant .ct-price-card__price { background: var(--ct-rainbow); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---- Philosophy callout: brighter, happier. ---- */ .ct-page-inner.ct-vibrant .ct-philosophy { background: radial-gradient(600px 280px at 100% 0%, rgba(37,99,235,.08), transparent 60%), radial-gradient(520px 260px at 0% 100%, rgba(163,230,53,.12), transparent 60%), #ffffff; } /* ---- Product cards: coloured logo tiles + hover lift + rainbow edge. ---- */ .ct-page-inner.ct-vibrant .ct-product { overflow: hidden; } .ct-page-inner.ct-vibrant .ct-product::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 6px; background: var(--ct-rainbow); } .ct-page-inner.ct-vibrant .ct-product { position: relative; padding-left: 32px; } /* Real-logo tiles get a soft colour wash behind them (per nth-child) so the grid feels lively even before branded logos are added. */ .ct-page-inner.ct-vibrant .ct-product:nth-child(6n+1) .ct-product__logo { background: rgba(124,58,237,.10); } .ct-page-inner.ct-vibrant .ct-product:nth-child(6n+2) .ct-product__logo { background: rgba(37,99,235,.10); } .ct-page-inner.ct-vibrant .ct-product:nth-child(6n+3) .ct-product__logo { background: rgba(13,148,136,.10); } .ct-page-inner.ct-vibrant .ct-product:nth-child(6n+4) .ct-product__logo { background: rgba(22,163,74,.10); } .ct-page-inner.ct-vibrant .ct-product:nth-child(6n+5) .ct-product__logo { background: rgba(37,99,235,.10); } .ct-page-inner.ct-vibrant .ct-product:nth-child(6n+6) .ct-product__logo { background: rgba(250,204,21,.16); } /* ---- Contact cards: rainbow top edge to match the rest. ---- */ .ct-page-inner.ct-vibrant .ct-form, .ct-page-inner.ct-vibrant .ct-contact__aside { position: relative; overflow: hidden; } .ct-page-inner.ct-vibrant .ct-form::before, .ct-page-inner.ct-vibrant .ct-contact__aside::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--ct-rainbow); background-size: 200% 100%; } .ct-page-inner.ct-vibrant .ct-form, .ct-page-inner.ct-vibrant .ct-contact__aside { padding-top: 34px; } /* ==================================================================== */ /* Rainbow