/* ========================================================================== Outside the Chapel Network Palette, type and the signature treatments are taken from the live outsidethechapel.com theme, so the network reads as the same brand. Network tokens live in :root; each show page sets its accent with a .theme-* class on . ========================================================================== */ /* Fonts ------------------------------------------------------------------- */ /* Roca is the display face used on the current site. These are the site's own self-hosted webfont files. Confirm the licence covers this domain. */ @font-face { font-family: "Roca"; src: url("../fonts/roca.woff2") format("woff2"), url("../fonts/roca.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* Brand colours, taken from the live site's custom CSS */ --orange: #ed9603; /* primary accent: buttons, nav underline, bullets */ --slate: #294557; /* primary text and dark UI */ --navy: #0f305e; /* deep bands and footer */ --teal: #3d8275; /* subheading accent */ --cream: #eee0ca; /* warm panel background */ --mist: #d6deeb; /* pale blue-grey section background */ --stone: #ececeb; /* light grey */ --bg: #ffffff; --bg-soft: #f6f8fb; --text: var(--slate); --text-muted:#5c7183; --text-dim: #8697a6; --line: rgba(41, 69, 87, 0.14); --line-soft: rgba(41, 69, 87, 0.08); --accent: var(--orange); --accent-soft: rgba(237, 150, 3, 0.13); /* Per-show accent, overridden by .theme-* below */ --show: var(--orange); --show-soft: var(--accent-soft); --show-grad: linear-gradient(135deg, #ed9603, #d97706); --radius: 12px; /* the live site rounds images and cards to 12px */ --radius-lg: 18px; --pill: 300px; --maxw: 1180px; --font-display: "Roca", "Manrope", Georgia, serif; --font-head: "Manrope", "Poppins", system-ui, sans-serif; --font-body: "Manrope", "Poppins", -apple-system, BlinkMacSystemFont, sans-serif; --font-meta: "Prompt", "Manrope", system-ui, sans-serif; } /* Show themes ------------------------------------------------------------- */ /* Five shows, five accents, all drawn from the existing brand palette. */ .theme-otc { --show: var(--orange); --show-soft: rgba(237, 150, 3, 0.13); --show-grad: linear-gradient(135deg, #ed9603, #d97706); } .theme-soulfuel { --show: #b4622a; --show-soft: rgba(180, 98, 42, 0.12); --show-grad: linear-gradient(135deg, #c9762f, #8d4a2b); } .theme-homilies { --show: var(--teal); --show-soft: rgba(61, 130, 117, 0.12); --show-grad: linear-gradient(135deg, #3d8275, #2b6d63); } .theme-honestly { --show: var(--navy); --show-soft: rgba(15, 48, 94, 0.10); --show-grad: linear-gradient(135deg, #0f305e, #294557); } .theme-chats { --show: var(--slate); --show-soft: rgba(41, 69, 87, 0.10); --show-grad: linear-gradient(135deg, #294557, #3d5f75); } /* Base -------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 17px; font-weight: 400; line-height: 1.7; -webkit-font-smoothing: antialiased; } h1, h2, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 0.5em; } h1 { font-size: clamp(2.2rem, 5vw, 3.7rem); } h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); } /* The live site sets h3 in the teal accent. */ h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; line-height: 1.25; color: var(--teal); margin: 0 0 0.5em; } /* Roca is reserved for display moments, as on the current site. */ .display { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; } p { margin: 0 0 1.1em; } img { max-width: 100%; height: auto; display: block; } a { color: var(--show); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-family: var(--font-meta); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin: 0 0 0.9rem; } .lede { font-size: 1.14rem; color: var(--text-muted); max-width: 62ch; } .muted { color: var(--text-muted); } /* Orange list markers, as on the live site. */ ul[data-marker] { list-style: none; padding-left: 0; } ul[data-marker] li { position: relative; padding-left: 22px; } ul[data-marker] li::before { content: "\2022"; position: absolute; left: 4px; color: var(--orange); font-weight: 700; } /* Skip link --------------------------------------------------------------- */ .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--orange); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0; } .skip:focus { left: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .newsletter-card { background: var(--navy); color: #fff; border-radius: var(--radius-lg); max-width: 720px; margin: 0 auto; text-align: center; padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 48px); } .newsletter-card h2 { color: #fff; max-width: 32ch; margin: 0 auto 14px; } .newsletter-card > p { color: rgba(255,255,255,0.78); max-width: 46ch; margin: 0 auto 32px; } .newsletter-card .newsletter-form { justify-content: center; margin: 0 auto; } .newsletter-card .btn-ghost { border-color: rgba(255,255,255,0.55); color: #fff; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; } .newsletter-card .btn-ghost:hover { background: #fff; color: var(--navy); } .newsletter-note { margin: 16px 0 0; font-size: 0.85rem; color: rgba(255,255,255,0.6); } .newsletter-form { display: flex; flex-wrap: wrap; gap: 12px; max-width: 480px; } .newsletter-form input { flex: 1 1 240px; background: #fff; border: 2px solid var(--line); border-radius: var(--pill); padding: 0.7em 1.3em; font: inherit; font-size: 0.94rem; color: var(--slate); } .newsletter-form input:focus { outline: none; border-color: var(--orange); } .newsletter-form .btn { flex: none; } :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; } /* Header ------------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line-soft); } .site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 88px; } .brand { display: flex; align-items: center; gap: 11px; } .brand:hover { text-decoration: none; } .brand-mark { width: 54px; height: 54px; flex: none; object-fit: contain; } .brand-text { display: flex; flex-direction: column; gap: 4px; } /* Logotype artwork is flat navy: it sits as-is on light, and is knocked out to white inside the dark footer. */ .brand-logotype { height: 27px; width: auto; flex: none; } .brand-sub { height: 15px; width: auto; flex: none; } /* Nav items carry a 5px underline that fills orange on hover, as on the current site. */ .nav { margin-left: auto; display: flex; align-items: center; } .nav a { color: var(--slate); font-size: 0.93rem; font-weight: 500; padding: 26px 18px; border-bottom: 5px solid transparent; transition: border-color 0.5s ease, opacity 0.3s ease; } .nav a:hover { border-bottom-color: var(--orange); opacity: 0.7; text-decoration: none; } .nav a[aria-current="page"] { border-bottom-color: var(--orange); } .nav .btn { margin-left: 14px; padding: 0.6em 1.6em; border-bottom: 0; } .nav .btn:hover { opacity: 1; } .nav-toggle { display: none; margin-left: auto; background: transparent; border: 1px solid var(--line); color: var(--slate); border-radius: var(--pill); padding: 9px 18px; font: inherit; font-size: 0.9rem; cursor: pointer; } /* Buttons ----------------------------------------------------------------- */ /* Pill shape and the outline-inverts-on-hover behaviour from the live site. */ .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-weight: 600; font-size: 0.94rem; padding: 0.7em 1.7em; border-radius: var(--pill); border: 2px solid transparent; cursor: pointer; transition: background 0.15s linear, color 0.15s linear, border-color 0.15s linear; } .btn:hover { text-decoration: none; } .btn-accent { background: var(--orange); border-color: var(--orange); color: #fff; } .btn-accent:hover { background: transparent; color: var(--orange); } .btn-primary { background: var(--show); border-color: var(--show); color: #fff; } .btn-primary:hover { background: transparent; color: var(--show); } .btn-ghost { border-color: var(--slate); color: var(--slate); background: transparent; } .btn-ghost:hover { background: var(--slate); color: #fff; } .section-navy .btn-ghost, .photo-band .btn-ghost { border-color: rgba(255,255,255,0.55); color: #fff; } .section-navy .btn-ghost:hover, .photo-band .btn-ghost:hover { background: #fff; color: var(--navy); } /* Hero -------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 112px) 0 clamp(52px, 7vw, 88px); } .hero .wrap { position: relative; z-index: 1; } .hero h1 { max-width: 15ch; } .hero .lede { font-size: 1.2rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } /* The signature treatment from the live site: a background image pinned right, blended into the section colour and masked so it dissolves toward the copy. Hidden on small screens, exactly as the original does. */ .hero.has-media { background: var(--mist); } .hero-media { position: absolute; inset: 0 0 0 50%; z-index: 0; pointer-events: none; } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: overlay; -webkit-mask-image: linear-gradient(270deg, #000, transparent 100%); mask-image: linear-gradient(270deg, #000, transparent 100%); } .hero.has-media .wrap > * { max-width: 60%; } @media (max-width: 768px) { .hero-media { display: none; } .hero.has-media .wrap > * { max-width: none; } } .hero-stats { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--line); } .hero-stats div strong { display: block; font-family: var(--font-display); font-size: 2.1rem; line-height: 1; color: var(--navy); } .hero-stats div span { font-family: var(--font-meta); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); } /* Sections ---------------------------------------------------------------- */ .section { padding: clamp(56px, 7.5vw, 96px) 0; } .section-mist { background: var(--mist); } .section-soft { background: var(--bg-soft); } .section-cream { background: var(--cream); } .section-navy { background: var(--navy); color: #fff; } .section-navy h1, .section-navy h2, .section-navy h4 { color: #fff; } .section-navy h3 { color: var(--orange); } .section-navy .lede, .section-navy .muted, .section-navy p { color: rgba(255,255,255,0.78); } .section-head { max-width: 64ch; margin-bottom: 42px; } /* Show cards -------------------------------------------------------------- */ .show-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; } .show-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 14px rgba(41, 69, 87, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; } .show-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(41, 69, 87, 0.13); } .show-card a { text-decoration: none; } .show-art { aspect-ratio: 1 / 1; position: relative; background: var(--show-grad); display: grid; place-items: center; padding: 24px; } .show-art .art-title { position: relative; z-index: 1; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.05; color: #fff; text-align: center; text-wrap: balance; } .show-art .art-sub { position: relative; z-index: 1; margin-top: 10px; font-family: var(--font-meta); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.75); text-align: center; } .show-art.has-art { padding: 0; background: none; } .show-art.has-art img { width: 100%; height: 100%; object-fit: cover; } .show-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; } .show-body h3 { color: var(--slate); font-size: 1.25rem; margin-bottom: 4px; } .show-body h3 a { color: inherit; } .show-hosts { font-family: var(--font-meta); font-size: 0.83rem; color: var(--teal); font-weight: 500; margin: 0 0 12px; } .show-tagline { font-weight: 700; color: var(--slate); margin: 0 0 6px; } .show-body p { color: var(--text-muted); font-size: 0.96rem; } .show-body .card-link { margin-top: auto; padding-top: 14px; font-weight: 600; font-size: 0.93rem; color: var(--show); } .show-platforms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; position: relative; z-index: 1; } .show-platforms a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--show-soft); color: var(--show); transition: background 0.15s ease, color 0.15s ease; } .show-platforms a:hover { background: var(--show); color: #fff; } .show-platforms a[aria-disabled="true"] { opacity: 0.35; pointer-events: none; } .show-platforms svg { width: 15px; height: 15px; } /* Badges: the orange caption pill used on the live site's images ---------- */ .badge { display: inline-block; font-family: var(--font-meta); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; padding: 0.25em 0.85em; border-radius: var(--pill); background: var(--orange); color: #fff; white-space: nowrap; } .badge-soon { background: var(--stone); color: var(--text-muted); } .meta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } /* Listen links ------------------------------------------------------------ */ .listen { display: flex; flex-wrap: wrap; gap: 12px; } .listen a { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 2px solid var(--orange); color: var(--orange); border-radius: var(--pill); padding: 0.65em 1.5em; font-weight: 600; font-size: 0.92rem; transition: background 0.1s linear, color 0.1s linear; } .listen a:hover { background: var(--orange); color: #fff; text-decoration: none; } .listen a[aria-disabled="true"] { opacity: 0.4; pointer-events: none; } .listen .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } /* Layout ------------------------------------------------------------------ */ .split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 5vw, 60px); align-items: start; } /* Panels ------------------------------------------------------------------ */ .panel { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 28px; } .panel-cream { background: var(--cream); border-color: transparent; } .panel-accent { border-left: 4px solid var(--orange); } .section-navy .panel { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); } .dl { margin: 0; display: grid; gap: 13px; } .dl div { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: baseline; } .dl dt { font-family: var(--font-meta); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-dim); } .dl dd { margin: 0; } .section-navy .dl dt { color: rgba(255,255,255,0.55); } /* Host cards -------------------------------------------------------------- */ .host-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; } .host { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 24px; overflow: hidden; } .host.has-photo { padding: 0; } .host.has-photo .host-copy { padding: 22px 24px 26px; } .host-photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%; background: var(--stone); } .host-avatar { width: 58px; height: 58px; border-radius: 50%; background: var(--show-grad); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.15rem; color: #fff; margin-bottom: 16px; } .host h3 { font-size: 1.05rem; color: var(--slate); margin-bottom: 2px; } .host .role { font-family: var(--font-meta); font-size: 0.8rem; color: var(--teal); margin: 0 0 10px; } .host p { font-size: 0.92rem; color: var(--text-muted); margin: 0; } /* Episode topic list ------------------------------------------------------ */ .topics { list-style: none; margin: 0; padding: 0; } .topics li { display: grid; grid-template-columns: 58px 1fr; gap: 18px; align-items: baseline; padding: 15px 4px; border-bottom: 1px solid var(--line-soft); } .topics li:last-child { border-bottom: 0; } .topics .ep { font-family: var(--font-meta); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; color: var(--orange); } .topics .title { font-weight: 600; color: var(--slate); } .topics .desc { display: block; font-weight: 400; font-size: 0.91rem; color: var(--text-muted); margin-top: 2px; } /* Features ---------------------------------------------------------------- */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; list-style: none; padding: 0; margin: 0; } .features h3 { font-size: 1.02rem; margin-bottom: 6px; } .features p { font-size: 0.94rem; color: var(--text-muted); margin: 0; } .features .num { font-family: var(--font-display); font-size: 1.5rem; color: var(--orange); display: block; margin-bottom: 10px; line-height: 1; } .section-navy .features p { color: rgba(255,255,255,0.72); } /* Device mockup: echoes the phone-in-hand shot on the current site. The device is oversized and sits flush with the bottom of the band, so it reads as rising out of the section rather than floating in it. */ .mockup { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(28px, 5vw, 56px); align-items: end; } .mockup-copy { align-self: center; padding-bottom: clamp(48px, 6.5vw, 78px); } .mockup-media { align-self: end; } .mockup-media img { width: 120%; max-width: none; /* bleeds into the right gutter, not over the copy */ margin-bottom: -1px; /* closes the hairline above the section edge */ -webkit-mask-image: linear-gradient(to right, #000 78%, transparent 100%); mask-image: linear-gradient(to right, #000 78%, transparent 100%); } /* The band holding a bottom-pinned mockup drops its lower padding. */ .section-flush-bottom { padding-bottom: 0; overflow: hidden; } /* Photo band -------------------------------------------------------------- */ .photo-band { position: relative; overflow: hidden; background: var(--navy); } .photo-band img { width: 100%; height: clamp(260px, 38vw, 440px); object-fit: cover; object-position: center 55%; opacity: 0.55; } .photo-band .photo-caption { position: absolute; inset: auto 0 0 0; padding: 0 0 34px; background: linear-gradient(transparent, rgba(15, 48, 94, 0.92)); } .photo-band h2 { margin: 0 0 6px; color: #fff; } .photo-band p { margin: 0; color: rgba(255,255,255,0.8); max-width: 54ch; } /* Figures ----------------------------------------------------------------- */ .figure { margin: 0; } .figure img { width: 100%; border-radius: var(--radius); } .figure figcaption { margin-top: 12px; font-family: var(--font-meta); font-size: 0.84rem; color: var(--text-dim); } /* CTA band ---------------------------------------------------------------- */ .cta-band { background: var(--cream); padding: clamp(48px, 6.5vw, 78px) 0; } .cta-band .wrap { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; } .cta-band h2 { margin: 0 0 8px; color: var(--navy); } .cta-band p { margin: 0; color: var(--text-muted); max-width: 52ch; } .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; } /* Forms: underlined fields on a cream card, following the live site ------- */ .form-card { background: var(--cream); border-radius: var(--radius); padding: clamp(28px, 4vw, 44px); } .form { display: grid; gap: 22px; } .field { display: grid; gap: 6px; } .field label { font-family: var(--font-meta); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); font-weight: 500; } .field input, .field select, .field textarea { background: transparent; border: none; border-bottom: 2px solid var(--slate); border-radius: 0; color: var(--slate); padding: 10px 0; font: inherit; font-size: 0.98rem; width: 100%; } .field textarea { min-height: 140px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--orange); } .form-note { font-size: 0.85rem; color: var(--text-muted); } .form-status { font-size: 0.94rem; min-height: 1.4em; } .form-status[data-state="ok"] { color: var(--teal); } .form-status[data-state="error"] { color: #b23b3b; } /* Footer ------------------------------------------------------------------ */ .site-footer { background: var(--navy); color: #fff; padding: 62px 0 32px; } .site-footer .brand-logotype, .site-footer .brand-mark { filter: brightness(0) invert(1); } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 36px; } .footer-grid h4 { font-family: var(--font-meta); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 0 0 14px; font-weight: 600; } .footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .footer-grid a { color: rgba(255,255,255,0.82); font-size: 0.93rem; } .footer-grid a:hover { color: #fff; } .footer-blurb { font-size: 0.92rem; color: rgba(255,255,255,0.7); max-width: 34ch; margin: 16px 0 0; } .footer-icon-logo { display: inline-block; margin-top: 20px; opacity: 0.75; transition: opacity 0.15s ease; } .footer-icon-logo:hover { opacity: 1; } .footer-icon-logo img { width: 140px; height: auto; } .footer-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.16); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-family: var(--font-meta); font-size: 0.82rem; color: rgba(255,255,255,0.55); } /* Responsive -------------------------------------------------------------- */ @media (max-width: 900px) { .split, .mockup { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .mockup-copy { padding-bottom: 0; } .mockup-media img { width: 100%; margin-left: 0; } .section-flush-bottom { padding-bottom: clamp(56px, 7.5vw, 96px); } } @media (max-width: 760px) { body { font-size: 16px; } .nav-toggle { display: block; } .nav { display: none; position: absolute; top: 78px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 1px solid var(--line); padding: 10px 24px 22px; } .nav.is-open { display: flex; } .nav a { padding: 13px 0; border-bottom: 1px solid var(--line-soft); text-align: left; } .nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--orange); } .nav .btn { margin: 14px 0 0; justify-content: center; } .hero-stats { gap: 26px; } .dl div { grid-template-columns: 1fr; gap: 2px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }