/* * FPC Unified Theme Tokens * * Single source of truth for the brown design system. * Consumed by Tailwind (fpc-* utilities) and aliased in module CSS * (e.g. sermon-hub-admin.css). Values flip under html.dark via the * anti-FOUC script in src/Core/Enqueue.php. * * Anchor palette: sand canvas #f4efe6, espresso canvas #16110e, accent #9a6434 / #e0b07a. */ :root { /* Surfaces — light mode: warm-white cards on sand */ --fpc-canvas: #f4efe6; --fpc-canvas-rgb: 244 239 230; --fpc-surface: #fffcf7; --fpc-surface-rgb: 255 252 247; --fpc-surface-deep: #ebe4d6; --fpc-surface-deep-rgb: 235 228 214; --fpc-raised: #fffcf7; --fpc-raised-rgb: 255 252 247; --fpc-input: #ffffff; --fpc-input-rgb: 255 255 255; --fpc-deeper: #ebe4d6; --fpc-deeper-rgb: 235 228 214; --fpc-void: #ffffff; --fpc-void-rgb: 255 255 255; --fpc-inset: #e3d8c8; --fpc-inset-rgb: 227 216 200; /* Scrim for modals — never use text color as a fill */ --fpc-overlay: rgba(44, 33, 24, 0.55); --fpc-overlay-rgb: 44 33 24; --fpc-overlay-heavy: rgba(44, 33, 24, 0.88); --fpc-overlay-heavy-rgb: 44 33 24; /* Typography */ --fpc-text: #2c2118; --fpc-text-rgb: 44 33 24; --fpc-text-soft: #4a3a2c; --fpc-text-soft-rgb: 74 58 44; --fpc-text-muted: #6f5e4e; --fpc-text-muted-rgb: 111 94 78; --fpc-text-dim: #6f5e4e; --fpc-text-dim-rgb: 111 94 78; /* Brand & interaction */ --fpc-accent: #9a6434; --fpc-accent-rgb: 154 100 52; --fpc-accent-hover: #7d5228; --fpc-accent-hover-rgb: 125 82 40; /* Filled controls — #6e4328 with white labels in both modes. */ --fpc-accent-fill: #6e4328; --fpc-accent-fill-rgb: 110 67 40; --fpc-accent-fill-hover: #5a3620; --fpc-accent-fill-hover-rgb: 90 54 32; --fpc-accent-text: #9a6434; --fpc-accent-text-rgb: 154 100 52; /* Dashboard nav-card strokes. Buttons stay --fpc-accent-fill. */ --fpc-dashboard-icon: #a34e32; --fpc-dashboard-icon-rgb: 163 78 50; --fpc-focus: #9a6434; --fpc-sys-caution-fill: #8a5a12; --fpc-sys-caution-fill-rgb: 138 90 18; --fpc-sys-ok-fill: #1f6b45; --fpc-sys-ok-fill-rgb: 31 107 69; --fpc-on-fill: #ffffff; --fpc-on-fill-rgb: 255 255 255; --fpc-brand-facebook: #1877f2; --fpc-brand-spotify: #178b3f; --fpc-brand-podbean: #428200; --fpc-sys-danger-fill: #9F1239; --fpc-sys-danger-fill-rgb: 159 18 57; --fpc-border: rgba(227, 216, 200, 0.9); --fpc-border-rgb: 227 216 200; --fpc-border-strong: rgba(196, 176, 148, 0.85); --fpc-border-strong-rgb: 196 176 148; --fpc-border-warm: rgba(196, 168, 132, 0.9); --fpc-border-warm-rgb: 196 168 132; --fpc-focus-ring: rgba(154, 100, 52, 0.38); --fpc-focus-ring-rgb: 154 100 52; /* Selection & motion */ --fpc-selection-bg: rgba(224, 176, 122, 0.45); --fpc-selection-bg-rgb: 224 176 122; --fpc-selection-text: #2c2118; --fpc-selection-text-rgb: 44 33 24; --fpc-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1); /* Weekly sermons variant E — live page chrome + blue controls (scoped on body.fpc-public-weekly-sermons) */ --fpc-live-page-canvas: #f8fafc; --fpc-live-page-canvas-rgb: 248 250 252; --fpc-live-header-gradient: linear-gradient(90deg, #0f172a 0%, #0f172a 10%, #dbeafe 40%, #dbeafe 100%); --fpc-live-action: #2563eb; --fpc-live-action-rgb: 37 99 235; --fpc-live-action-hover: #1d4ed8; --fpc-live-action-hover-rgb: 29 78 216; --fpc-live-action-fill: #2563eb; --fpc-live-action-fill-rgb: 37 99 235; --fpc-live-action-fill-hover: #1d4ed8; --fpc-live-action-fill-hover-rgb: 29 78 216; --fpc-live-play: #5f99ff; --fpc-live-play-rgb: 95 153 255; --fpc-live-focus: #5f99ff; --fpc-live-focus-rgb: 95 153 255; --fpc-live-page-blend-mid: #eff6ff; --fpc-public-header-bar-h: 108px; --fpc-public-header-bar-h-mobile: 82px; --fpc-public-header-bar-h-mobile-dark: 80px; --fpc-public-type-body-sm: 0.8125rem; --fpc-public-type-body: 0.875rem; --fpc-public-type-lead: 1rem; /* Theme root is 15px — header nav targets 18px computed (desktop + mobile drawer). */ --fpc-public-header-nav-font-size: calc(18 / 15 * 1rem); --fpc-public-header-logo-slot-h: 78px; --fpc-public-header-logo-slot-h-mobile: 52px; --fpc-public-header-logo-scale: 1.3; --fpc-home-edge-gap: 2rem; --fpc-home-edge-gap-mobile: 1.5rem; --fpc-home-gatherings-pad: 69px; --fpc-home-gatherings-pad-lg: 69px; --fpc-home-gatherings-pad-mobile: 69px; --fpc-home-gatherings-shell-max: 1280px; --fpc-home-gatherings-col-gap: 64px; --fpc-home-gatherings-intro-basis: 445px; --fpc-home-gatherings-events-basis: 771px; --fpc-home-welcome-compact-max: 1099px; --fpc-home-welcome-compact-container: 400px; --fpc-home-gatherings-heading-size: 45px; --fpc-home-gatherings-heading-size-mobile: 33.75px; --fpc-home-gatherings-heading-lh: 1.1; --fpc-home-gatherings-heading-mb: 32px; --fpc-home-gatherings-heading-mb-mobile: 24px; --fpc-home-gatherings-btn-pad-y: 16px; --fpc-home-gatherings-btn-pad-x: 32px; --fpc-home-gatherings-btn-min-h: 48px; --fpc-home-gatherings-btn-min-h-mobile: 56px; --fpc-home-gatherings-btn-text: 13.125px; --fpc-home-gatherings-btn-radius: 16px; --fpc-home-gatherings-panel-pad: 24px; --fpc-home-gatherings-panel-pad-mobile: 16px; --fpc-home-gatherings-row-pad: 32px; --fpc-home-gatherings-row-pad-mobile: 24px; --fpc-home-gatherings-row-gap: 32px; --fpc-home-gatherings-row-gap-mobile: 16px; --fpc-home-gatherings-date-size: 80px; --fpc-home-gatherings-date-size-mobile: 64px; --fpc-home-gatherings-date-radius: 16px; --fpc-home-gatherings-date-month: 11.25px; --fpc-home-gatherings-date-month-mb: 8px; --fpc-home-gatherings-date-day: 28.125px; --fpc-home-gatherings-date-day-mobile: 22.5px; --fpc-home-gatherings-eyebrow: 11.25px; --fpc-home-gatherings-event-title: 28.125px; --fpc-home-gatherings-event-title-mobile: 22.5px; --fpc-home-gatherings-placeholder-title: var(--fpc-home-gatherings-event-title-mobile); --fpc-home-gatherings-placeholder-title-mobile: var(--fpc-home-contact-type-value); --fpc-home-gatherings-placeholder-date-day: var(--fpc-home-gatherings-date-day-mobile); --fpc-home-gatherings-placeholder-date-day-mobile: var(--fpc-home-contact-type-base); --fpc-home-gatherings-placeholder-row-min-h: calc( 2 * var(--fpc-home-gatherings-row-pad) + var(--fpc-home-gatherings-date-size) ); --fpc-home-gatherings-placeholder-row-min-h-mobile: calc( 2 * var(--fpc-home-gatherings-row-pad-mobile) + max( var(--fpc-home-gatherings-date-size-mobile), calc(var(--fpc-home-gatherings-event-title-mobile) * var(--fpc-home-gatherings-event-title-lh) * 3) ) ); --fpc-home-gatherings-placeholder-title-clearance: calc( var(--fpc-home-gatherings-arrow-size) + var(--fpc-home-gatherings-row-gap-mobile) ); --fpc-home-gatherings-event-title-lh: 1.2; --fpc-home-gatherings-coming-mb: 8px; --fpc-home-gatherings-arrow-size: 48px; --fpc-home-gatherings-date-bg: rgb(var(--fpc-home-gatherings-coming-dot-fill-rgb) / 0.12); --fpc-home-gatherings-date-border: rgb(var(--fpc-home-gatherings-coming-dot-fill-rgb) / 0.22); --fpc-home-gatherings-date-ink: var(--fpc-home-gatherings-coming-dot-fill); --fpc-home-gatherings-shell-pad-inline: 24px; --fpc-home-gatherings-layout-wide-min: 1280px; --fpc-home-welcome-card-pad-x: 48px; --fpc-home-welcome-card-pad-x-mobile: 24px; --fpc-home-welcome-card-pad-block: 36px; --fpc-home-welcome-card-pad-block-md: 32px; --fpc-home-welcome-card-pad-block-sm: 24px; --fpc-home-welcome-ambient-gutter: 24px; --fpc-home-welcome-card-title: 33.75px; --fpc-home-welcome-card-title-mobile: 28.125px; --fpc-home-welcome-card-title-lh: 1.15; --fpc-home-welcome-card-title-mb: 16px; --fpc-home-welcome-meta-size: 18.75px; --fpc-home-welcome-meta-lh: 1.45; --fpc-home-welcome-meta-mb: 16px; --fpc-home-welcome-map-text: 15px; --fpc-home-welcome-map-arrow: 20px; --fpc-home-welcome-chip-size: 72px; --fpc-home-welcome-chip-size-mobile: 56px; --fpc-home-welcome-chip-icon: 32px; --fpc-home-welcome-chip-icon-mobile: 24px; --fpc-home-welcome-service-text: 18.75px; --fpc-home-welcome-service-li-pad: 8px; --fpc-home-welcome-service-li-gap: 8px; --fpc-home-welcome-service-dot-size: 12px; --fpc-home-hero-pastor-label-text: var(--fpc-accent-fill); --fpc-home-hero-pastor-label-bg: rgb(var(--fpc-surface-rgb) / 0.94); --fpc-home-hero-pastor-label-border: rgb(var(--fpc-accent-rgb) / 0.42); --fpc-home-hero-pastor-label-shadow: 0 1px 3px rgb(var(--fpc-text-rgb) / 0.28); --fpc-home-duo-hero-header-gap: 0px; --fpc-home-duo-hero-strip-h: 72px; --fpc-home-duo-hero-strip-pad: 12px; --fpc-home-duo-hero-social-h: 48px; --fpc-home-duo-hero-fold-margin: clamp(80px, 8.15vh, 128px); --fpc-home-duo-hero-top-trim: clamp(72px, 8.15vh, 120px); --fpc-home-duo-hero-blur-fill: 36px; --fpc-home-duo-hero-blur-smear: 24px; --fpc-home-duo-hero-blur-center: 4px; --fpc-home-duo-hero-smear-opacity: 0.7; --fpc-home-duo-hero-fill-scale: 1.08; --fpc-home-duo-hero-center-aspect: 1.785; --fpc-home-duo-hero-center-mask-start: 6%; --fpc-home-duo-hero-center-mask-end: 94%; --fpc-home-duo-hero-center-pos-x: 50%; --fpc-home-duo-hero-center-pos-x-mobile: 70%; --fpc-home-duo-hero-center-copy-inset-ratio: 0.08; --fpc-home-duo-hero-copy-bottom: 40px; --fpc-home-duo-hero-copy-bottom-mobile: 32px; --fpc-home-duo-hero-eyebrow-size: 11.25px; --fpc-home-duo-hero-eyebrow-tracking: 0.2em; --fpc-home-duo-hero-eyebrow-rule-w: 40px; --fpc-home-duo-hero-eyebrow-rule-h: 1px; --fpc-home-duo-hero-title-size-max: 112px; --fpc-home-duo-hero-title-size-min: 33.75px; --fpc-home-duo-hero-title-vw: clamp(33.75px, 9vw, 112px); --fpc-home-duo-hero-title-cqi-scale: 12; --fpc-home-duo-hero-title-vh-cap: min(112px, 9.5vh); --fpc-home-duo-hero-fold-canvas: var(--fpc-canvas); --fpc-home-duo-hero-social-type: 15px; --fpc-home-duo-hero-social-type-narrow: 13.125px; --fpc-home-duo-hero-social-weight: 600; --fpc-home-duo-hero-social-gap: 10px; --fpc-home-duo-hero-social-icon: 24px; --fpc-home-duo-hero-mirror-bg: rgb(var(--fpc-overlay-heavy-rgb) / 1); --fpc-home-duo-hero-tint: rgb(var(--fpc-overlay-rgb) / 0.4); --fpc-home-duo-hero-strip-bg: var(--fpc-inset); --fpc-home-duo-hero-strip-ink: var(--fpc-text); --fpc-home-duo-hero-center-column-w: min(100%, calc(var(--fpc-home-duo-hero-photo-h) * var(--fpc-home-duo-hero-center-aspect))); --fpc-home-duo-hero-title-inset: calc( (100% - var(--fpc-home-duo-hero-center-column-w)) / 2 + var(--fpc-home-duo-hero-center-column-w) * var(--fpc-home-duo-hero-center-copy-inset-ratio) ); --fpc-home-duo-hero-photo-h: calc( 100svh - var(--fpc-home-duo-hero-header-gap) - var(--fpc-home-duo-hero-strip-h) - var(--fpc-home-duo-hero-fold-margin) ); --fpc-home-recent-play-bg: rgb(var(--fpc-accent-rgb) / 0.16); --fpc-home-recent-play-icon: var(--fpc-accent-fill); --fpc-home-recent-play-bg-hover: var(--fpc-accent-fill); --fpc-home-recent-play-icon-hover: var(--fpc-on-fill); --fpc-home-welcome-time-pill-text: 18.75px; --fpc-home-welcome-time-pill-pad-y: 8px; --fpc-home-welcome-time-pill-pad-x: 16px; --fpc-home-welcome-time-pill-pad-x-mobile: 12px; --fpc-home-next-pill-text: 11.25px; --fpc-home-next-pill-pad-y: 4px; --fpc-home-next-pill-pad-x: 8px; --fpc-home-next-pill-ml: 8px; --fpc-home-gatherings-orb-a: 0.22; --fpc-home-gatherings-orb-b: 0.16; --fpc-home-gatherings-line-h: 1px; --fpc-home-gatherings-line-a: 0.4; --fpc-home-gatherings-coming-dot-fill: #9a6434; --fpc-home-gatherings-coming-dot-fill-rgb: 154 100 52; --fpc-home-gatherings-coming-dot-ping: rgb(var(--fpc-home-gatherings-coming-dot-fill-rgb) / 0.55); --fpc-home-gatherings-orb-warm-dark-start: 0.16; --fpc-home-gatherings-orb-warm-dark-end: 0.06; --fpc-home-contact-shell-max: 1280px; --fpc-home-contact-pad-y: 64px; --fpc-home-contact-pad-y-mobile: 48px; --fpc-home-contact-pad-x: 32px; --fpc-home-contact-pad-x-mobile: 24px; --fpc-home-contact-gap: 32px; --fpc-home-contact-gap-mobile: 24px; --fpc-home-contact-card-pad: 40px; --fpc-home-contact-card-pad-desktop: 48px; --fpc-home-contact-card-pad-mobile: 32px; --fpc-home-contact-prose-max: 65ch; --fpc-home-contact-type-base: 18px; --fpc-home-contact-type-label: 16px; --fpc-home-contact-type-value: 20px; --fpc-home-contact-type-label-lg: 18px; --fpc-home-duo-chrome-bg: var(--fpc-live-page-canvas); --fpc-home-duo-chrome-bg-rgb: var(--fpc-live-page-canvas-rgb); --fpc-home-duo-chrome-ink: #0f172a; --fpc-home-duo-chrome-ink-rgb: 15 23 42; --fpc-home-duo-chrome-border: var(--fpc-live-page-canvas); --fpc-home-duo-chrome-border-rgb: var(--fpc-live-page-canvas-rgb); --fpc-home-duo-chrome-border-on-surface: #dbeafe; --fpc-home-duo-chrome-border-on-surface-rgb: 219 234 254; --fpc-home-duo-chrome-on-fill: var(--fpc-on-fill); --fpc-home-duo-btn-fill: #0f172a; --fpc-home-duo-btn-fill-rgb: 15 23 42; --fpc-home-duo-btn-text: #ffffff; --fpc-home-duo-btn-text-rgb: 255 255 255; --fpc-home-duo-soft-accent-rgb: 71 85 105; --fpc-home-duo-pulse-fill: rgb(var(--fpc-home-duo-soft-accent-rgb)); --fpc-home-duo-pulse-ping: rgb(var(--fpc-home-duo-soft-accent-rgb) / 0.5); --fpc-home-duo-next-pill-bg: rgb(var(--fpc-home-duo-chrome-border-on-surface-rgb) / 0.72); --fpc-home-duo-next-pill-text: var(--fpc-home-duo-text-accent-on-surface); --fpc-home-duo-service-time-bg: rgb(var(--fpc-home-duo-chrome-border-on-surface-rgb) / 0.5); --fpc-home-duo-service-time-border: rgb(var(--fpc-home-duo-chrome-border-on-surface-rgb) / 0.85); --fpc-home-duo-service-time-text: var(--fpc-home-duo-text-accent-on-surface); --fpc-home-duo-corner-glow: rgb(var(--fpc-home-duo-chrome-border-on-surface-rgb) / 0.4); --fpc-home-duo-chip-bg: var(--fpc-home-duo-chrome-bg); --fpc-home-duo-chip-bg-hover: rgb(var(--fpc-home-duo-chrome-border-on-surface-rgb) / 0.95); --fpc-home-duo-chip-border: rgb(var(--fpc-home-duo-chrome-border-on-surface-rgb) / 0.85); --fpc-home-duo-chip-border-hover: rgb(var(--fpc-home-duo-chrome-border-on-surface-rgb) / 1); --fpc-home-duo-chip-icon: var(--fpc-home-duo-chrome-ink); --fpc-home-duo-chip-transition: 200ms; --fpc-home-welcome-chip-bg: rgb(var(--fpc-home-duo-chrome-border-on-surface-rgb) / 0.55); --fpc-home-welcome-chip-bg-hover: rgb(var(--fpc-home-duo-chrome-border-on-surface-rgb) / 0.95); --fpc-home-contact-chip-bg: var(--fpc-home-duo-chrome-bg); --fpc-home-contact-chip-bg-hover: var(--fpc-home-welcome-chip-bg-hover); --fpc-home-contact-chip-icon: var(--fpc-home-duo-chrome-ink); --fpc-home-contact-divider-inset: 16px; --fpc-home-contact-divider-pad: 24px; --fpc-home-contact-divider-a: 0.35; --fpc-home-contact-divider-smudge-h: 3px; --fpc-home-contact-divider-smudge-blur: 2px; --fpc-home-contact-divider-smudge-a: 0.42; --fpc-home-contact-divider-smudge-rgb: var(--fpc-home-duo-chrome-border-on-surface-rgb); --fpc-home-duo-text-accent: var(--fpc-live-page-canvas); --fpc-home-duo-text-accent-rgb: var(--fpc-live-page-canvas-rgb); /* Readable on fpc-surface / fpc-canvas; literal live-page-canvas fails 3:1 for large text. */ --fpc-home-duo-text-accent-on-surface: #334155; --fpc-home-duo-text-accent-on-surface-rgb: 51 65 85; --fpc-home-contact-type-heading: 36px; --fpc-home-contact-type-heading-lg: 44px; --fpc-home-contact-chip: 64px; --fpc-home-contact-chip-radius: 15px; --fpc-home-contact-icon: 28px; --fpc-home-contact-field-min-h: 48px; --fpc-home-contact-field-pad-y: 12px; --fpc-home-contact-facebook-gap: 24px; --fpc-home-facebook-min-h: 48px; --fpc-home-facebook-pad-y: 16px; --fpc-home-facebook-pad-x: 24px; --fpc-home-recent-pad-y: 64px; --fpc-home-recent-pad-y-mobile: 48px; --fpc-home-recent-line-a: 0.4; --fpc-home-recent-gutter: 24px; --fpc-home-recent-shell-max: 1920px; --fpc-home-recent-shell-pad-inline: 64px; --fpc-home-recent-shell-pad-inline-mobile: 24px; --fpc-home-recent-grid-max: 1600px; --fpc-home-recent-grid-gap-lg: 32px; --fpc-home-recent-grid-3-col-min: 1552px; --fpc-home-recent-cards-shift: 16px; --fpc-home-recent-intro-title-gap: 32px; --fpc-home-recent-title-size: 3rem; --fpc-home-recent-title-size-lg: 3.75rem; --fpc-home-recent-btn-min-h: 56px; --fpc-home-recent-btn-pad-x: 40px; --fpc-home-recent-btn-pad-y: 16px; --fpc-home-recent-btn-text-size: 0.75rem; --fpc-home-recent-lead-min-h: 320px; --fpc-home-recent-trail-min-h: 288px; --fpc-home-recent-lead-pad: 32px; --fpc-home-recent-trail-pad: 32px; --fpc-home-recent-lead-title-size: 28.125px; --fpc-home-recent-trail-title-lift: 16px; --fpc-home-recent-trail-title-lift-narrow: 12px; --fpc-home-recent-trail-title-size: 22.5px; --fpc-home-recent-lead-title-size-lg: 33.75px; --fpc-home-recent-trail-title-size-lg: 28.125px; --fpc-home-recent-stack-card-min-h: 240px; --fpc-home-recent-stack-trail-min-h: 200px; --fpc-home-recent-card-fill-a: 0.68; --fpc-home-recent-lead-fill-a: 0.9; --fpc-home-recent-lead-canvas-rgb: 230 236 249; --fpc-home-recent-lead-canvas: rgb(var(--fpc-home-recent-lead-canvas-rgb) / var(--fpc-home-recent-lead-fill-a)); --fpc-home-recent-trail-card-bg: rgb(var(--fpc-home-duo-chrome-bg-rgb) / var(--fpc-home-recent-card-fill-a)); --fpc-home-recent-lead-border: #dbeafe; --fpc-home-recent-lead-border-rgb: 219 234 254; --fpc-home-recent-trail-stack-max: 400px; --fpc-home-recent-card-columns-wide: 1fr 1.15fr 1fr; --fpc-home-recent-trail-min-wide: 200px; --fpc-home-recent-tablet-row-min: 728px; --fpc-home-recent-card-min-track: 220px; --fpc-home-recent-shell-gap: 0px; --fpc-home-recent-stack-gap: 0px; --fpc-home-recent-intro-pad-end: 32px; --fpc-home-recent-intro-col: 50%; --fpc-home-recent-card-min-col: 220px; --fpc-home-duo-heading-line-height: 1.2; --fpc-home-duo-heading-descender-pad: 0.1em; --fpc-home-recent-card-min: 280px; --fpc-home-strands-brown-dim: #7a6c60; --fpc-home-strands-brown-accent: #94775c; --fpc-home-strands-brown-thick: #ddd3c6; --fpc-home-strands-blue-dim: #68778a; --fpc-home-strands-blue-accent: #6a7d96; --fpc-home-strands-blue-thick: #d6dde8; --fpc-home-strands-opacity: 0.2; --fpc-home-strands-blend: multiply; --fpc-home-strands-band-fade: 125px; --fpc-home-strands-contact-mask-out: 60px; --fpc-home-strands-contact-mask-in: 140px; --fpc-home-strands-blur-wide: 4.5; --fpc-home-strands-blur-narrow: 3; --fpc-home-strands-z: 2; --fpc-home-contact-chip-lg: 72px; --fpc-home-contact-icon-lg: 32px; --fpc-home-contact-info-label: var(--fpc-home-contact-type-label); --fpc-home-contact-info-value: var(--fpc-home-contact-type-base); --fpc-home-contact-info-chip: var(--fpc-home-gatherings-date-size); --fpc-home-contact-info-icon: 40px; --fpc-home-contact-info-line-height: 1.4; --fpc-home-contact-info-gap: 36px; --fpc-home-waves-mask-start: 30%; --fpc-home-waves-mask-end: 44%; --fpc-home-card-border: hsla(35, 29%, 67%, 0.6); --fpc-home-card-border-dark: rgba(224, 176, 122, 0.3); --fpc-tag-service-bg: rgba(239, 246, 255, 0.8); --fpc-tag-service-bg-rgb: 239 246 255; --fpc-tag-service-border: rgba(191, 219, 254, 0.8); --fpc-tag-service-text: #1d4ed8; --fpc-tag-service-text-rgb: 29 78 216; --fpc-sermon-eyebrow: #9a6434; --fpc-sermon-eyebrow-rgb: 154 100 52; --fpc-sermon-card-canvas: #f4efe6; --fpc-sermon-card-canvas-rgb: 244 239 230; --fpc-sermon-card-canvas-dark: #16110e; --fpc-sermon-card-canvas-dark-rgb: 22 17 14; --fpc-sermon-card-surface-dark: #241c16; --fpc-sermon-card-surface-dark-rgb: 36 28 22; --fpc-sermon-date-bg: rgba(154, 100, 52, 0.1); --fpc-sermon-date-bg-rgb: 154 100 52; --fpc-sermon-date-text: #7d5228; --fpc-sermon-date-text-rgb: 125 82 40; --fpc-sermon-date-border: rgba(180, 140, 100, 0.6); --fpc-sermon-chip-bg: rgba(168, 92, 52, 0.16); --fpc-sermon-chip-bg-rgb: 168 92 52; --fpc-sermon-chip-text: #8f4e2a; --fpc-sermon-chip-text-rgb: 143 78 42; --fpc-sermon-chip-border: rgba(194, 118, 78, 0.62); /* System Control — semantic tones (light mode) */ --fpc-sys-caution: #8a5a12; --fpc-sys-caution-rgb: 138 90 18; --fpc-sys-caution-soft: rgba(138, 90, 18, 0.08); --fpc-sys-caution-border: rgba(138, 90, 18, 0.22); --fpc-sys-danger: #9f1239; --fpc-sys-danger-rgb: 159 18 57; --fpc-sys-danger-soft: rgba(159, 18, 57, 0.07); --fpc-sys-danger-border: rgba(159, 18, 57, 0.24); --fpc-sys-ok: #1f6b45; --fpc-sys-ok-rgb: 31 107 69; --fpc-sys-ok-soft: rgba(31, 107, 69, 0.08); --fpc-sys-ok-border: rgba(31, 107, 69, 0.22); --fpc-sys-neutral-soft: rgba(111, 94, 78, 0.08); --fpc-sys-neutral-border: rgba(111, 94, 78, 0.22); /* * Phone lanes — CSS pixels, not device names (flagship vs compact). * compact <360 · regular 360–413 · roomy 414–639 · then Tailwind sm. * --fpc-ui-scale is 1 on tablet/desktop; 00-phone-lanes.css fluid-scales phones. */ --fpc-ui-scale: 1; --fpc-tap-min: 2.75rem; --fpc-chip-rail-max: none; --fpc-phone-lane: desktop; } html.dark { --fpc-overlay: rgba(12, 9, 7, 0.78); --fpc-overlay-rgb: 12 9 7; --fpc-overlay-heavy: rgba(12, 9, 7, 0.92); --fpc-overlay-heavy-rgb: 12 9 7; --fpc-canvas: #16110e; --fpc-canvas-rgb: 22 17 14; --fpc-surface: #241c16; --fpc-surface-rgb: 36 28 22; --fpc-surface-deep: #1a1410; --fpc-surface-deep-rgb: 26 20 16; --fpc-raised: #2e241c; --fpc-raised-rgb: 46 36 28; --fpc-input: #1a1410; --fpc-input-rgb: 26 20 16; --fpc-deeper: #120e0b; --fpc-deeper-rgb: 18 14 11; --fpc-void: #0c0907; --fpc-void-rgb: 12 9 7; --fpc-inset: #120e0b; --fpc-inset-rgb: 18 14 11; --fpc-text: #f3ece3; --fpc-text-rgb: 243 236 227; --fpc-text-soft: #e4d5c4; --fpc-text-soft-rgb: 228 213 196; --fpc-text-muted: #c4b5a4; --fpc-text-muted-rgb: 196 181 164; --fpc-text-dim: #c4b5a4; --fpc-text-dim-rgb: 196 181 164; /* Cider is links and focus only. Button fill stays #6e4328 with white text. */ --fpc-accent: #e0b07a; --fpc-accent-rgb: 224 176 122; --fpc-accent-hover: #f0c48a; --fpc-accent-hover-rgb: 240 196 138; --fpc-accent-fill: #6e4328; --fpc-accent-fill-rgb: 110 67 40; --fpc-accent-fill-hover: #5a3620; --fpc-accent-fill-hover-rgb: 90 54 32; --fpc-accent-text: #e0b07a; --fpc-accent-text-rgb: 224 176 122; --fpc-dashboard-icon: #e08a62; --fpc-dashboard-icon-rgb: 224 138 98; --fpc-focus: #e0b07a; --fpc-on-fill: #ffffff; --fpc-on-fill-rgb: 255 255 255; --fpc-brand-spotify: #1db954; --fpc-sys-danger-fill: #9F1239; --fpc-sys-danger-fill-rgb: 159 18 57; --fpc-border: rgba(196, 148, 110, 0.28); --fpc-border-rgb: 196 148 110; --fpc-border-strong: rgba(196, 148, 110, 0.42); --fpc-border-strong-rgb: 196 148 110; --fpc-border-warm: rgba(224, 176, 122, 0.28); --fpc-border-warm-rgb: 224 176 122; --fpc-focus-ring: rgba(224, 176, 122, 0.28); --fpc-focus-ring-rgb: 224 176 122; --fpc-selection-bg: rgba(110, 67, 40, 0.72); --fpc-selection-bg-rgb: 110 67 40; --fpc-selection-text: #f3ece3; --fpc-selection-text-rgb: 243 236 227; /* System Control — semantic tones (dark mode) */ --fpc-sys-caution: #e6c27a; --fpc-sys-caution-rgb: 230 194 122; --fpc-sys-caution-soft: rgba(230, 194, 122, 0.1); --fpc-sys-caution-border: rgba(230, 194, 122, 0.28); --fpc-sys-danger: #d4868f; --fpc-sys-danger-rgb: 212 134 143; --fpc-sys-danger-soft: rgba(212, 134, 143, 0.1); --fpc-sys-danger-border: rgba(212, 134, 143, 0.3); --fpc-sys-ok: #8fbfa3; --fpc-sys-ok-rgb: 143 191 163; --fpc-sys-ok-soft: rgba(143, 191, 163, 0.1); --fpc-sys-ok-border: rgba(143, 191, 163, 0.28); --fpc-sys-neutral-soft: rgba(196, 181, 164, 0.1); --fpc-sys-neutral-border: rgba(196, 181, 164, 0.24); --fpc-live-page-canvas: #0f172a; --fpc-live-page-canvas-rgb: 15 23 42; --fpc-home-duo-text-accent: var(--fpc-live-page-canvas); --fpc-home-duo-text-accent-rgb: var(--fpc-live-page-canvas-rgb); /* Midnight on dark brown surfaces fails 3:1; use live-page light ink on cards/bands. */ --fpc-home-duo-text-accent-on-surface: #f8fafc; --fpc-home-duo-text-accent-on-surface-rgb: 248 250 252; --fpc-home-duo-chrome-bg: var(--fpc-live-page-canvas); --fpc-home-duo-chrome-bg-rgb: var(--fpc-live-page-canvas-rgb); --fpc-home-duo-chrome-ink: #f8fafc; --fpc-home-duo-chrome-ink-rgb: 248 250 252; --fpc-home-duo-chrome-border: var(--fpc-live-page-canvas); --fpc-home-duo-chrome-border-rgb: var(--fpc-live-page-canvas-rgb); --fpc-home-duo-chrome-border-on-surface: var(--fpc-live-page-canvas); --fpc-home-duo-chrome-border-on-surface-rgb: var(--fpc-live-page-canvas-rgb); --fpc-home-duo-chrome-on-fill: var(--fpc-text); --fpc-home-duo-btn-fill: #f8fafc; --fpc-home-duo-btn-fill-rgb: 248 250 252; --fpc-home-duo-btn-text: #0f172a; --fpc-home-duo-btn-text-rgb: 15 23 42; --fpc-home-contact-divider-smudge-rgb: var(--fpc-home-duo-chrome-border-on-surface-rgb); --fpc-home-duo-soft-accent-rgb: 148 163 184; --fpc-home-duo-pulse-fill: rgb(var(--fpc-home-duo-chrome-ink-rgb) / 0.92); --fpc-home-duo-pulse-ping: rgb(var(--fpc-home-duo-chrome-ink-rgb) / 0.38); --fpc-home-duo-next-pill-bg: rgb(var(--fpc-live-page-canvas-rgb) / 0.22); --fpc-home-duo-next-pill-text: var(--fpc-home-duo-chrome-ink); --fpc-home-duo-service-time-bg: rgb(var(--fpc-live-page-canvas-rgb) / 0.18); --fpc-home-duo-service-time-border: rgb(var(--fpc-live-page-canvas-rgb) / 0.32); --fpc-home-duo-service-time-text: var(--fpc-home-duo-chrome-ink); --fpc-home-duo-corner-glow: rgb(var(--fpc-live-page-canvas-rgb) / 0.16); --fpc-home-duo-chip-bg: rgb(var(--fpc-live-page-canvas-rgb) / 0.14); --fpc-home-duo-chip-bg-hover: rgb(var(--fpc-live-page-canvas-rgb) / 0.24); --fpc-home-duo-chip-border: rgb(var(--fpc-live-action-rgb) / 0.28); --fpc-home-duo-chip-border-hover: rgb(var(--fpc-live-action-rgb) / 0.38); --fpc-home-duo-chip-icon: var(--fpc-home-duo-chrome-ink); --fpc-home-welcome-chip-bg: var(--fpc-home-duo-chip-bg); --fpc-home-welcome-chip-bg-hover: var(--fpc-home-duo-chip-bg-hover); --fpc-home-contact-chip-bg: var(--fpc-home-duo-chip-bg); --fpc-home-contact-chip-bg-hover: var(--fpc-home-duo-chip-bg-hover); --fpc-home-contact-chip-icon: var(--fpc-home-duo-chrome-ink); --fpc-live-page-blend-mid: #13204a; --fpc-live-header-gradient: linear-gradient(90deg, #dbeafe 0%, #dbeafe 10%, #0f172a 40%, #0f172a 100%); --fpc-live-action: #60a5fa; --fpc-live-action-rgb: 96 165 250; --fpc-live-action-hover: #93c5fd; --fpc-live-action-hover-rgb: 147 197 253; --fpc-live-action-fill: #2563eb; --fpc-live-action-fill-rgb: 37 99 235; --fpc-live-action-fill-hover: #1d4ed8; --fpc-live-action-fill-hover-rgb: 29 78 216; --fpc-tag-service-bg: rgba(30, 58, 138, 0.3); --fpc-tag-service-bg-rgb: 30 58 138; --fpc-tag-service-border: #334155; --fpc-tag-service-text: #60a5fa; --fpc-tag-service-text-rgb: 96 165 250; --fpc-sermon-eyebrow: #e0b07a; --fpc-sermon-eyebrow-rgb: 224 176 122; --fpc-sermon-date-bg: rgba(224, 176, 122, 0.12); --fpc-sermon-date-bg-rgb: 224 176 122; --fpc-sermon-date-text: #e0b07a; --fpc-sermon-date-text-rgb: 224 176 122; --fpc-sermon-date-border: rgba(196, 148, 110, 0.42); --fpc-sermon-chip-bg: #6e4328; --fpc-sermon-chip-bg-rgb: 110 67 40; --fpc-sermon-chip-text: #f0c48a; --fpc-sermon-chip-text-rgb: 240 196 138; --fpc-sermon-chip-border: rgba(196, 148, 110, 0.42); --fpc-home-gatherings-orb-a: 0.2; --fpc-home-gatherings-orb-b: 0.14; --fpc-home-gatherings-line-a: 0.7; --fpc-home-recent-line-a: 0.7; --fpc-home-recent-lead-canvas-rgb: 30 41 59; --fpc-home-recent-lead-canvas: rgb(var(--fpc-home-recent-lead-canvas-rgb) / var(--fpc-home-recent-lead-fill-a)); --fpc-home-recent-trail-card-bg: rgb(var(--fpc-home-duo-chrome-bg-rgb) / var(--fpc-home-recent-card-fill-a)); --fpc-home-recent-lead-border: #334155; --fpc-home-recent-lead-border-rgb: 51 65 85; --fpc-home-hero-pastor-label-text: var(--fpc-accent-text); --fpc-home-hero-pastor-label-bg: rgb(var(--fpc-surface-rgb) / 0.94); --fpc-home-hero-pastor-label-border: rgb(var(--fpc-accent-fill-rgb) / 0.42); --fpc-home-hero-pastor-label-shadow: 0 1px 3px rgb(var(--fpc-text-rgb) / 0.35); --fpc-home-duo-hero-strip-bg: var(--fpc-sermon-card-surface-dark); --fpc-home-duo-hero-strip-ink: var(--fpc-sermon-chip-text); --fpc-home-duo-hero-mirror-bg: rgb(var(--fpc-canvas-rgb) / 1); --fpc-home-duo-hero-tint: rgb(var(--fpc-overlay-rgb) / 0.48); --fpc-home-recent-play-bg: rgb(var(--fpc-accent-rgb) / 0.24); --fpc-home-recent-play-icon: var(--fpc-accent-text); --fpc-home-strands-brown-dim: #b8ac9f; --fpc-home-strands-brown-accent: #c9a888; --fpc-home-strands-brown-thick: #0c0907; --fpc-home-strands-blue-dim: #a2aebe; --fpc-home-strands-blue-accent: #94a6be; --fpc-home-strands-blue-thick: #060a14; --fpc-home-strands-opacity: 0.12; --fpc-home-strands-blend: screen; } /* =================================================================== * Semantic component classes — used from Phase 1 onward. * Plain CSS (not @layer) so @import always emits them in the build. * =================================================================== */ .fpc-glass-card { background-color: var(--fpc-surface); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--fpc-border-strong); transition: background-color var(--fpc-transition), border-color var(--fpc-transition); } /* Modal / drawer scrim — opaque enough to read, never uses text token as fill */ .fpc-overlay-scrim { background-color: var(--fpc-overlay); } .fpc-overlay-scrim-heavy { background-color: var(--fpc-overlay-heavy); } .fpc-btn-primary { background-color: var(--fpc-accent-fill); color: var(--fpc-on-fill); font-weight: 800; border-radius: 0.75rem; transition: background-color var(--fpc-transition), transform 150ms ease; } .fpc-btn-primary:hover { background-color: var(--fpc-accent-fill-hover); } .text-fpc-accent-text { color: var(--fpc-accent-text); } .fpc-btn-primary:active { transform: scale(0.98); } .fpc-btn-secondary { background-color: var(--fpc-raised); color: var(--fpc-text-soft); border: 1px solid var(--fpc-border-strong); font-weight: 800; border-radius: 0.75rem; transition: background-color var(--fpc-transition), color var(--fpc-transition), border-color var(--fpc-transition); } .fpc-btn-secondary:hover { color: var(--fpc-text); border-color: var(--fpc-accent); } .fpc-focusable:focus { outline: none; } .fpc-focusable:focus-visible { outline: 2px solid var(--fpc-focus); outline-offset: 2px; border-color: var(--fpc-focus); }