@churchapps/apphelper 1.7.2 → 1.7.4

package/dist/website/styles/pages.css

@@ -1,963 +1,963 @@
-:root {
-  scroll-behavior: auto;
-  --light-bg-text-color: #333;
-  --light-bg-link-color: #0b4a7f;
-  --dark-bg-text-color: #EEEEEE;
-  --dark-bg-link-color: #FFFFFF;
-  --nav-bg-color: #FFFFFF;
-}
-
-body {
-  font-family: "Roboto", sans-serif;
-  color: var(--light-bg-text-color);
-}
-
-.sectionAnchor {
-  display: block;
-  position: relative;
-  top: -80px;
-  visibility: hidden;
-
-}
-
-/*
-:target {
-  scroll-margin-top: 80px;
-}*/
-
-.table {
-  width: 100%;
-}
-
-.table thead tr th {
-  text-align: left;
-}
-
-.d-block {
-  display: block;
-}
-
-a {
-  color: var(--light-bg-link-color);
-  text-decoration: none;
-}
-
-img {
-  width: 100%;
-}
-
-body {
-  background-color: #f3f3f6;
-  margin: 0px;
-}
-
-#headerLogo {
-  max-width: 260px;
-  max-height: 65px;
-}
-
-.page .editor-input {
-  font-size: inherit;
-}
-
-.page {
-  font-family: var(--bodyFont), "Roboto", sans-serif;
-}
-
-.page h1,
-.page h2,
-.page h3,
-.page h4,
-.page h5,
-.page h6 {
-  font-family: var(--headingFont), "Roboto", sans-serif;
-}
-
-.page h1 {
-  font-size: 3em;
-  line-height: 1.2em;
-  border-bottom: none;
-  /*margin-bottom: 40px;*/
-}
-
-.page h2 {
-  /*
-  padding-bottom: 10px;
-  margin-bottom: 25px;
-  font-size: 35px;
-  line-height: 40px;*/
-  font-size: 2.2em;
-  line-height: 1.2em;
-  text-transform: none;
-}
-
-.page h3 {
-  /*font-size: 22px;
-  line-height: 26px;*/
-  font-size: 1.6em;
-  line-height: 1.2em;
-}
-
-.page h4 {
-  /*font-size: 22px;
-  line-height: 26px;*/
-  font-size: 1.3em;
-  line-height: 1.2em;
-}
-
-.page .section {
-  min-height: 100px;
-  padding-top: 40px;
-  padding-bottom: 40px;
-  position: relative;
-}
-
-.page .sectionVideo {
-  min-height: 100px;
-  padding-top: 40px;
-  padding-bottom: 40px;
-}
-
-.page .sectionFirst {
-  padding-top: 160px;
-}
-
-.page .videoDark {
-  color: var(--dark-bg-text-color);
-}
-
-.page .sectionDark {
-  color: var(--dark-bg-text-color);
-}
-
-
-.page .sectionDark .editor-link {
-  color: var(--dark-bg-link-color);
-  font-weight: bold;
-}
-
-.page .sectionBG {
-  /*background-attachment: fixed;*/
-  background-position-x: 50%;
-  background-position-y: 50%;
-  background-size: cover;
-  position: relative;
-}
-
-.page .sectionBG:before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  background: #000;
-  opacity: .55;
-  box-sizing: inherit;
-}
-
-/* Box background overlay/tint — opt-in via inline --overlay-opacity (defaults off) */
-.page .boxBG {
-  background-size: cover;
-  background-position: 50% 50%;
-  position: relative;
-}
-
-.page .boxBG:before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: var(--overlay-color, #000);
-  opacity: var(--overlay-opacity, 0);
-  pointer-events: none;
-  box-sizing: inherit;
-}
-
-.page .boxBG > * {
-  position: relative;
-  z-index: 1;
-}
-
-/*
-.section {
-  color: #333;
-}
-*/
-
-#navbar.transparent {
-  background-color: rgba(0, 0, 0, 0) !important;
-  box-shadow: none;
-}
-
-/*
-#navbar.transparent:not(.light) a {
-  color: var(--dark-bg-link-color);
-}
-*/
-
-#navbar:not(.transparent) button,
-#navbar.transparent.light button {
-  color: #333;
-}
-
-#navbar.transparent:not(.light) button {
-  color: #FFF;
-}
-
-.capitalize {
-  text-transform: capitalize;
-}
-
-.btn-warning,
-.btn-warning:hover {
-  color: #fff;
-}
-
-.logo {
-  display: flex;
-  width: 200px;
-  margin-right: 15px;
-}
-
-#navbar {
-  background-color: var(--nav-bg-color) !important;
-  padding: 11px 0;
-  margin-bottom: 20px;
-  box-shadow: 0px 3px 3px 0px #999;
-}
-
-#navbar .nav-item {
-  font-size: 14px;
-}
-
-#navbar .nav-link {
-  color: #555;
-  height: 55px;
-  vertical-align: middle;
-  line-height: 45px;
-  max-width: 150px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-#navbar svg {
-  height: 15px;
-  width: 15px;
-}
-
-#navbar .active {
-  border-bottom: 2px solid #03a9f4;
-}
-
-#navRight {
-  white-space: nowrap;
-}
-
-#navRight img {
-  width: 32px;
-  height: 24px;
-  margin-top: -3px;
-  margin-right: 8px;
-}
-
-
-#navSpacer {
-  height: 57px;
-  margin-bottom: 25px;
-}
-
-.blue {
-  color: #03a9f4;
-}
-
-.btn-info {
-  background-color: var(--light-bg-link-color);
-  border-color: var(--light-bg-link-color);
-}
-
-.btn-primary:hover {
-  filter: brightness(90%);
-}
-
-.btn-success {
-  background-color: #77cc00;
-  border-color: #70db86;
-}
-
-.btn-success:hover {
-  background-color: #55aa00;
-  border-color: #55aa00;
-}
-
-.btn-danger {
-  background-color: #cc0011;
-  border-color: #cc0011;
-}
-
-.btn-danger:hover {
-  background-color: #bb0000;
-  border-color: #bb0000;
-}
-
-#footer {
-  background-color: #333;
-  padding-top: 40px;
-  padding-bottom: 40px;
-  color: #eee;
-}
-
-#footer img {
-  max-width: 450px;
-  margin-bottom: 20px;
-}
-
-.form-control::placeholder {
-  color: #ccc;
-}
-
-label .description {
-  font-size: 12px;
-  padding-left: 10px;
-}
-
-.alert p {
-  margin-bottom: 0;
-}
-
-.no-default-style {
-  border: none;
-  background: none;
-}
-
-.lead {
-  font-size: 20px;
-  font-weight: 300;
-}
-
-.videoWrapper {
-  position: relative;
-  padding-bottom: 56.25%;
-  height: 0;
-}
-
-.videoWrapper iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-dropdown-menu a {
-  color: #03a9f4;
-}
-
-.btn-light {
-  border: 1px solid #333;
-}
-
-.smallCenterBlock {
-  max-width: 350px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-#loginBox {
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  padding: 20px;
-}
-
-#loginBox .form-group {
-  margin-bottom: 1rem;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.form-control.is-invalid {
-  background-image: none;
-}
-
-a.dropdown-toggle::after {
-  display: none;
-}
-
-.modalMarkdown textarea {
-  height: 75vh !important;
-  overflow-y: scroll !important;
-}
-
-#markdownPreview table {
-  border-spacing: 0px;
-}
-
-#markdownPreview table td,
-#markdownPreview table th {
-  border: 1px solid #DDD;
-  margin: 0px;
-  padding: 2px
-}
-
-.sectionEditButton,
-.elementEditButton {
-  float: right;
-  background-color: "#FFF";
-  border-radius: 5px;
-  background-color: #FFF;
-}
-
-.columnWrapper:hover {
-  background-color: #FF9999;
-}
-
-.elementWrapper:not(:has(.elementWrapper:hover)):hover {
-  /*background-color: #28a745;*/
-  border: 3px solid #28a745;
-}
-
-.elementWrapper:not(:has(.elementWrapper:hover)):hover:before {
-  content: "ELEMENT";
-  font-size: 14px;
-  background-color: #28a745;
-  color: #FFF;
-  display: block;
-  width: 100px;
-  position: relative;
-  text-align: center;
-  margin-top: -18px;
-  margin-left: -3px;
-  height: 18px;
-  margin-bottom: -2px;
-}
-
-.elementWrapper.box:not(:has(.elementWrapper:hover)):hover:before {
-  content: "BOX" !important;
-}
-
-.elementWrapper.card:not(:has(.elementWrapper:hover)):hover:before {
-  content: "CARD" !important;
-}
-
-.elementWrapper.carousel:not(:has(.elementWrapper:hover)):hover:before {
-  content: "CAROUSEL" !important;
-}
-
-.elementWrapper.embed:not(:has(.elementWrapper:hover)):hover:before {
-  content: "EMBED" !important;
-}
-
-.elementWrapper.expandable:not(:has(.elementWrapper:hover)):hover:before {
-  content: "EXPANDABLE" !important;
-}
-
-.elementWrapper.html:not(:has(.elementWrapper:hover)):hover:before {
-  content: "HTML" !important;
-}
-
-.elementWrapper.image:not(:has(.elementWrapper:hover)):hover:before {
-  content: "IMAGE" !important;
-}
-
-.elementWrapper.location:not(:has(.elementWrapper:hover)):hover:before {
-  content: "LOCATION" !important;
-}
-
-.elementWrapper.row:not(:has(.elementWrapper:hover)):hover:before {
-  content: "ROW" !important;
-}
-
-.elementWrapper.table:not(:has(.elementWrapper:hover)):hover:before {
-  content: "TABLE" !important;
-}
-
-.elementWrapper.text:not(:has(.elementWrapper:hover)):hover:before {
-  content: "TEXT" !important;
-}
-
-.elementWrapper.textWithPhoto:not(:has(.elementWrapper:hover)):hover:before {
-  content: "TEXT WITH PHOTO" !important;
-}
-
-.elementWrapper.video:not(:has(.elementWrapper:hover)):hover:before {
-  content: "VIDEO" !important;
-}
-
-.elementWrapper.whiteSpace:not(:has(.elementWrapper:hover)):hover:before {
-  content: "WHITE SPACE" !important;
-}
-
-.draggable-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  cursor: text; /* Keeps text selection */
-}
-
-/* Drag handle - Always present but only visible on hover */
-.drag-handle {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  background-color: green;
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 3px;
-  cursor: grab;
-  user-select: none;
-  pointer-events: all;
-  opacity: 0;
-  transition: opacity 0.2s;
-  z-index: 1500;
-}
-
-/* Section drag handle - INSIDE top-left corner */
-.section-handle {
-  background-color: #3333FF;
-  left: 1px;
-  top: 30px;
-  z-index: 100;
-}
-
-/* Element drag handle - Middle-left */
-.drag-handle:not(.section-handle) {
-  left: 5px;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-/* Content area - text remains selectable */
-.draggable-content {
-  flex: 1;
-  user-select: text;
-}
-
-
-.sectionWrapper:not(:has(.elementWrapper:hover)):hover {
-  /*background-color: #9999FF !important;*/
-  border: 3px solid #3333FF;
-  padding-bottom: 38px;
-}
-
-.sectionWrapper:not(:has(.elementWrapper:hover)):hover:before {
-  content: "SECTION";
-  background-color: #3333FF;
-  color: #FFF;
-  display: block;
-  width: 100px;
-  position: relative;
-  text-align: center;
-  font-size: 14px;
-  height: 18px;
-  /*margin-bottom: -29px;*/
-  margin-top: -40px !important;
-  margin-bottom: 20px;
-}
-
-.sectionWrapper.sectionBlock:not(:has(.elementWrapper:hover)):hover:before {
-  content: "BLOCK" !important;
-}
-
-/*
-.sectionWrapper {
-  padding-top: 0 !important;
-}*/
-
-.sectionDark {
-  color: var(--dark-bg-text-color);
-}
-
-/*
-.sectionDark.sectionWrapper:not(:has(.elementWrapper:hover)):hover {
-  background-color: #007bff !important;
-}*/
-
-.sectionDark .columnWrapper:hover {
-  background-color: #990000;
-}
-
-/*
-.sectionDark .elementWrapper:hover {
-  background-color: #009900;
-}
-*/
-.sectionActions {
-  display: none;
-  position: absolute;
-  top: 1;
-  right: 0;
-  margin-top: -70px;
-  z-index: 999;
-}
-
-.sectionActions.alwaysVisible {
-  display: block;
-  z-index: 9999;
-}
-
-.sectionBlock .sectionActions {
-  margin-top: 30px;
-}
-
-.sectionWrapper:not(:has(.elementWrapper:hover)):hover .sectionActions {
-  display: block;
-}
-
-.elementActions {
-  display: none;
-  position: absolute;
-  top: 10;
-  right: 0;
-}
-
-.elementWrapper:hover .elementActions {
-  display: block;
-  z-index: 2;
-}
-
-#embeddedLayout {
-  height: 100vh;
-  background-color: #FFFFFF;
-}
-
-#embeddedLayout .page .sectionFirst {
-  padding-top: 0px;
-}
-
-.no-resize {
-  width: auto;
-  max-width: 100%;
-}
-
-.elBox {
-  margin-bottom: 20px;
-}
-
-.elTextWithPhoto {
-  margin-bottom: 20px;
-}
-
-.elText {
-  margin-bottom: 20px;
-}
-
-/* Style inline code */
-code {
-  background-color: #f5f5f5;
-  padding: 2px 4px;
-  border-radius: 3px;
-  font-family: "Source Code Pro", monospace !important;
-}
-
-pre {
-  background-color: #f8f9fa;
-  padding: 12px;
-  border-radius: 6px;
-  border-left: 4px solid #6c757d;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  overflow-x: auto;
-}
-
-/* Ensure code inside block follows styling */
-pre.code-block code {
-  font-size: 14px;
-  color: #222;
-  background: none;
-  padding: 0;
-}
-.editor-list-ul,
-.editor-list-ol {
-  padding-left: 0px;
-  margin-left: 40px;
-}
-
-.editor-list-ol li {
-  list-style-type: decimal !important;
-  margin-bottom: 0px;
-}
-
-
-.editor-list-ul li {
-  list-style-type: disc !important;
-}
-
-.page th {
-  font-weight: bold;
-}
-
-.pageTable {
-  width: 100%;
-}
-
-.pageTable th {
-  text-align: left;
-}
-
-.pageTable td,
-.pageTable th {
-  border-bottom: 1px solid;
-  color: inherit;
-}
-
-.calbox,
-#conbtn {
-  color: #FFFFFF;
-  background: linear-gradient(rgb(0, 0, 0), var(--darkAccent));
-}
-
-code {
-  color: #000;
-}
-
-
-
-#groupHero {
-  min-height: 200px;
-  background-color: var(--darkAccent);
-  color: #FFFFFF;
-}
-
-#groupHero .content {
-  background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0));
-  width: 100%;
-  height: 100%;
-  padding-top: 110px;
-  min-height: 260px;
-}
-
-#groupHero H1 {
-  margin-top: 0px;
-  padding-bottom: 0px;
-  margin-bottom: 0px;
-  font-size: 40px;
-}
-
-#groupHero .badge {
-  border-radius: 10px;
-  float: right;
-  margin-top: -150px;
-  margin-bottom: -120px;
-  position: relative;
-  z-index: 1000;
-
-}
-
-
-@media (max-width: 768px) {
-  #calEntity {
-    order: -1;
-  }
-
-  #groupHero .badge {
-    float: left;
-    margin-top: 15px;
-    width:100%;
-    height:auto;
-    margin-bottom: 15px;
-  }
-}
-
-.headingsLight h1, .headingsLight h2, .headingsLight h3, .headingsLight h4 { color: var(--light); }
-.headingsLightAccent h1, .headingsLightAccent h2, .headingsLightAccent h3, .headingsLightAccent h4 { color: var(--lightAccent); }
-.headingsAccent h1, .headingsAccent h2, .headingsAccent h3, .headingsAccent h4 { color: var(--accent); }
-.headingsDarkAccent h1, .headingsDarkAccent h2, .headingsDarkAccent h3, .headingsDarkAccent h4 { color: var(--darkAccent); }
-.headingsDark h1, .headingsDark h2, .headingsDark h3, .headingsDark h4 { color: var(--dark); }
-
-.linksLight a { color: var(--light); }
-.linksLightAccent a { color: var(--lightAccent); }
-.linksAccent a { color: var(--accent); }
-.linksDarkAccent a { color: var(--darkAccent); }
-.linksDark a { color: var(--dark); }
-
-/* Lightbox overlay */
-.b1-lightbox {
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  background: rgba(0, 0, 0, 0.85);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-
-.b1-lightbox img {
-  width: 98vw;
-  height: 98vh;
-  object-fit: contain;
-  cursor: default;
-}
-
-.b1-lightbox__close {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  background: none;
-  border: none;
-  color: #fff;
-  font-size: 36px;
-  line-height: 1;
-  cursor: pointer;
-  padding: 4px 12px;
-  opacity: 0.8;
-  transition: opacity 0.2s;
-}
-
-.b1-lightbox__close:hover {
-  opacity: 1;
-}
-
-/* DraggableWrapper - show drag indicator on hover (CSS-only, no React state) */
-.draggable-wrapper:hover .drag-indicator {
-  opacity: 1 !important;
-}
-
-
-/* Per-device visibility (hide flags stored in stylesJSON desktop/mobile display:none) */
-@media (min-width: 768px) {
-  .hiddenOnDesktop { display: none !important; }
-}
-@media (max-width: 767px) {
-  .hiddenOnMobile { display: none !important; }
-}
-
-/* iconFeature */
-.iconFeature h3 { margin-top: 8px; }
-
-/* gallery */
-.gallery-caption { font-size: 0.85rem; padding: 4px 2px; opacity: 0.85; }
-.gallery-empty,
-.testimonial-empty,
-.social-icons-empty,
-.stats-empty,
-.campaign-empty,
-.staff-empty,
-.service-times-empty {
-  padding: 24px;
-  border: 1px dashed #bbb;
-  border-radius: 4px;
-  text-align: center;
-  color: #888;
-}
-.gallery-lightbox { position: relative; display: flex; flex-direction: column; align-items: center; }
-.gallery-lightbox__img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
-.gallery-lightbox__caption { color: #fff; margin-top: 12px; text-align: center; }
-.gallery-lightbox__close { position: absolute !important; top: -48px; right: 0; }
-.gallery-lightbox__prev { position: absolute !important; left: -56px; top: 50%; transform: translateY(-50%); }
-.gallery-lightbox__next { position: absolute !important; right: -56px; top: 50%; transform: translateY(-50%); }
-@media (max-width: 767px) {
-  .gallery-lightbox__prev { left: 0; }
-  .gallery-lightbox__next { right: 0; }
-}
-
-/* testimonial */
-.testimonial-quote { padding: 16px 24px; }
-.testimonial-text { font-size: 1.25rem; font-style: italic; line-height: 1.5; }
-.testimonial-author { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 12px; }
-.testimonial-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
-.testimonial-name { font-weight: 600; font-style: normal; }
-.testimonial-role { font-size: 0.85rem; opacity: 0.75; }
-
-/* countdown */
-.countdown { text-align: center; }
-.countdown-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 12px; }
-.countdown-tiles { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
-.countdown-tile { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 12px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.06); }
-.countdown-value { font-size: 2rem; font-weight: 700; line-height: 1; }
-.countdown-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; margin-top: 4px; }
-.countdown-complete { font-size: 1.5rem; font-weight: 700; }
-
-/* stats */
-.stats { text-align: center; }
-.stat-value { font-size: 2.5rem; font-weight: 700; line-height: 1.1; }
-.stat-label { font-size: 0.9rem; opacity: 0.75; margin-top: 4px; }
-
-/* section dividers */
-.sectionWithDivider { position: relative; overflow: hidden; }
-.sectionDivider { position: absolute; left: 0; width: 100%; line-height: 0; pointer-events: none; overflow: hidden; z-index: 1; }
-.sectionDivider svg { display: block; width: 100%; height: 100%; }
-
-/* sermons layouts (grid / list / featuredLatest) */
-.sermonGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; padding: 20px 0; }
-.sermonList { display: flex; flex-direction: column; gap: 16px; padding: 20px 0; }
-.sermonListItem { display: flex; gap: 16px; align-items: center; cursor: pointer; }
-.sermonCard { cursor: pointer; }
-.sermonFeatured { cursor: pointer; max-width: 960px; margin: 20px auto; }
-.sermonThumb { position: relative; overflow: hidden; }
-.sermonThumb img { display: block; width: 100%; height: 190px; object-fit: cover; object-position: center; }
-.sermonThumbList { width: 220px; flex-shrink: 0; }
-.sermonThumbList img { height: 124px; }
-.sermonThumbFeatured img { height: 420px; }
-.sermonPlayIcon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; opacity: 0.9; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
-.sermonListBody { flex: 1; min-width: 0; }
-.sermonCardTitle { font-size: 20px; font-weight: 500; margin: 8px 0 2px; color: #333; }
-.sermonFeaturedTitle { font-size: 32px; font-weight: 600; margin: 12px 0 4px; color: #333; }
-.sermonCardDate { font-size: 0.85rem; opacity: 0.7; }
-.sermonListDesc { font-size: 0.9rem; opacity: 0.8; margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
-
-/* podcast (external RSS feed) */
-.podcast { max-width: 960px; margin: 0 auto; }
-.podcastHeader { display: flex; gap: 20px; align-items: center; margin-bottom: 8px; }
-.podcastArtwork { width: 120px; height: 120px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
-.podcastTitle { font-size: 28px; font-weight: 600; margin: 0 0 4px; }
-.podcastDesc { margin: 0; opacity: 0.8; }
-.podcastList .sermonListItem { cursor: default; align-items: flex-start; scroll-margin-top: 80px; }
-.podcastEpisodeMeta { font-size: 0.85rem; opacity: 0.7; }
-.podcastMetaSep { padding: 0 2px; }
-.podcastEpisodeDesc { font-size: 0.9rem; opacity: 0.85; margin: 6px 0 0; white-space: pre-line; }
-.podcastAudio { display: block; width: 100%; max-width: 640px; margin-top: 10px; }
-.podcastEmpty { padding: 12px; border: 1px dashed #bbb; border-radius: 4px; opacity: 0.8; }
-
-/* campaignProgress */
-.campaignProgress { max-width: 720px; }
-.campaign-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 8px; }
-.campaign-bar { height: 20px; border-radius: 10px; background: rgba(0, 0, 0, 0.1); overflow: hidden; }
-.campaign-bar-fill { height: 100%; border-radius: 10px; background: var(--accent, #1565c0); transition: width 1.2s ease; }
-.campaign-percent { font-size: 1.5rem; font-weight: 700; margin-top: 8px; }
-.campaign-amounts { opacity: 0.85; }
-.campaign-count { font-size: 0.85rem; opacity: 0.7; margin-top: 2px; }
-.campaign-give { display: inline-block; margin-top: 12px; padding: 8px 20px; border-radius: 4px; background: var(--accent, #1565c0); color: #fff; text-decoration: none; }
-
-/* staffGrid */
-.staff-card { text-align: center; }
-.staff-photo { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; margin: 0 auto; display: block; }
-.staff-photo--placeholder { background: rgba(0, 0, 0, 0.08); }
-.staff-name { font-weight: 600; margin-top: 10px; }
-.staff-role { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 12px; font-size: 0.75rem; background: rgba(0, 0, 0, 0.08); }
-
-/* serviceTimes */
-.service-times-title { margin: 0 0 12px; }
-.service-group { margin-bottom: 16px; }
-.service-name { font-weight: 600; font-size: 1.1rem; }
-.service-campus { font-size: 0.85rem; opacity: 0.7; }
-.service-time-list { list-style: none; padding: 0; margin: 6px 0 0; }
-.service-time { padding: 2px 0; opacity: 0.9; }
-
-/* announcement banner */
-.announcement-banner { position: sticky; top: 0; z-index: 1250; width: 100%; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 48px; text-align: center; box-sizing: border-box; }
-.announcement-banner__text { font-weight: 500; }
-.announcement-banner__link { text-decoration: underline; font-weight: 600; white-space: nowrap; }
-.announcement-banner__close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px; opacity: 0.85; }
-.announcement-banner__close:hover { opacity: 1; }
-
-/* launcher (floating action hub) */
-.launcher { position: fixed; bottom: 24px; z-index: 1300; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
-.launcher--bottomRight { right: 24px; align-items: flex-end; }
-.launcher--bottomLeft { left: 24px; align-items: flex-start; }
-.launcher-actions { display: flex; flex-direction: column; gap: 10px; }
-.launcher--bottomLeft .launcher-actions { align-items: flex-start; }
-.launcher--bottomRight .launcher-actions { align-items: flex-end; }
-.launcher-action { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 22px; background: #fff; color: #333; text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
-.launcher[data-open="true"] .launcher-action { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
-.launcher-action-label { font-weight: 500; white-space: nowrap; }
-.launcher-fab { width: 56px; height: 56px; border-radius: 50%; border: none; color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; align-self: flex-end; }
-.launcher--bottomLeft .launcher-fab { align-self: flex-start; }
-.launcher-fab-icon { transition: transform 0.25s ease; }
-.launcher[data-open="true"] .launcher-fab-icon { transform: rotate(135deg); }
+:root {
+  scroll-behavior: auto;
+  --light-bg-text-color: #333;
+  --light-bg-link-color: #0b4a7f;
+  --dark-bg-text-color: #EEEEEE;
+  --dark-bg-link-color: #FFFFFF;
+  --nav-bg-color: #FFFFFF;
+}
+
+body {
+  font-family: "Roboto", sans-serif;
+  color: var(--light-bg-text-color);
+}
+
+.sectionAnchor {
+  display: block;
+  position: relative;
+  top: -80px;
+  visibility: hidden;
+
+}
+
+/*
+:target {
+  scroll-margin-top: 80px;
+}*/
+
+.table {
+  width: 100%;
+}
+
+.table thead tr th {
+  text-align: left;
+}
+
+.d-block {
+  display: block;
+}
+
+a {
+  color: var(--light-bg-link-color);
+  text-decoration: none;
+}
+
+img {
+  width: 100%;
+}
+
+body {
+  background-color: #f3f3f6;
+  margin: 0px;
+}
+
+#headerLogo {
+  max-width: 260px;
+  max-height: 65px;
+}
+
+.page .editor-input {
+  font-size: inherit;
+}
+
+.page {
+  font-family: var(--bodyFont), "Roboto", sans-serif;
+}
+
+.page h1,
+.page h2,
+.page h3,
+.page h4,
+.page h5,
+.page h6 {
+  font-family: var(--headingFont), "Roboto", sans-serif;
+}
+
+.page h1 {
+  font-size: 3em;
+  line-height: 1.2em;
+  border-bottom: none;
+  /*margin-bottom: 40px;*/
+}
+
+.page h2 {
+  /*
+  padding-bottom: 10px;
+  margin-bottom: 25px;
+  font-size: 35px;
+  line-height: 40px;*/
+  font-size: 2.2em;
+  line-height: 1.2em;
+  text-transform: none;
+}
+
+.page h3 {
+  /*font-size: 22px;
+  line-height: 26px;*/
+  font-size: 1.6em;
+  line-height: 1.2em;
+}
+
+.page h4 {
+  /*font-size: 22px;
+  line-height: 26px;*/
+  font-size: 1.3em;
+  line-height: 1.2em;
+}
+
+.page .section {
+  min-height: 100px;
+  padding-top: 40px;
+  padding-bottom: 40px;
+  position: relative;
+}
+
+.page .sectionVideo {
+  min-height: 100px;
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+
+.page .sectionFirst {
+  padding-top: 160px;
+}
+
+.page .videoDark {
+  color: var(--dark-bg-text-color);
+}
+
+.page .sectionDark {
+  color: var(--dark-bg-text-color);
+}
+
+
+.page .sectionDark .editor-link {
+  color: var(--dark-bg-link-color);
+  font-weight: bold;
+}
+
+.page .sectionBG {
+  /*background-attachment: fixed;*/
+  background-position-x: 50%;
+  background-position-y: 50%;
+  background-size: cover;
+  position: relative;
+}
+
+.page .sectionBG:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity: .55;
+  box-sizing: inherit;
+}
+
+/* Box background overlay/tint — opt-in via inline --overlay-opacity (defaults off) */
+.page .boxBG {
+  background-size: cover;
+  background-position: 50% 50%;
+  position: relative;
+}
+
+.page .boxBG:before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--overlay-color, #000);
+  opacity: var(--overlay-opacity, 0);
+  pointer-events: none;
+  box-sizing: inherit;
+}
+
+.page .boxBG > * {
+  position: relative;
+  z-index: 1;
+}
+
+/*
+.section {
+  color: #333;
+}
+*/
+
+#navbar.transparent {
+  background-color: rgba(0, 0, 0, 0) !important;
+  box-shadow: none;
+}
+
+/*
+#navbar.transparent:not(.light) a {
+  color: var(--dark-bg-link-color);
+}
+*/
+
+#navbar:not(.transparent) button,
+#navbar.transparent.light button {
+  color: #333;
+}
+
+#navbar.transparent:not(.light) button {
+  color: #FFF;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.btn-warning,
+.btn-warning:hover {
+  color: #fff;
+}
+
+.logo {
+  display: flex;
+  width: 200px;
+  margin-right: 15px;
+}
+
+#navbar {
+  background-color: var(--nav-bg-color) !important;
+  padding: 11px 0;
+  margin-bottom: 20px;
+  box-shadow: 0px 3px 3px 0px #999;
+}
+
+#navbar .nav-item {
+  font-size: 14px;
+}
+
+#navbar .nav-link {
+  color: #555;
+  height: 55px;
+  vertical-align: middle;
+  line-height: 45px;
+  max-width: 150px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#navbar svg {
+  height: 15px;
+  width: 15px;
+}
+
+#navbar .active {
+  border-bottom: 2px solid #03a9f4;
+}
+
+#navRight {
+  white-space: nowrap;
+}
+
+#navRight img {
+  width: 32px;
+  height: 24px;
+  margin-top: -3px;
+  margin-right: 8px;
+}
+
+
+#navSpacer {
+  height: 57px;
+  margin-bottom: 25px;
+}
+
+.blue {
+  color: #03a9f4;
+}
+
+.btn-info {
+  background-color: var(--light-bg-link-color);
+  border-color: var(--light-bg-link-color);
+}
+
+.btn-primary:hover {
+  filter: brightness(90%);
+}
+
+.btn-success {
+  background-color: #77cc00;
+  border-color: #70db86;
+}
+
+.btn-success:hover {
+  background-color: #55aa00;
+  border-color: #55aa00;
+}
+
+.btn-danger {
+  background-color: #cc0011;
+  border-color: #cc0011;
+}
+
+.btn-danger:hover {
+  background-color: #bb0000;
+  border-color: #bb0000;
+}
+
+#footer {
+  background-color: #333;
+  padding-top: 40px;
+  padding-bottom: 40px;
+  color: #eee;
+}
+
+#footer img {
+  max-width: 450px;
+  margin-bottom: 20px;
+}
+
+.form-control::placeholder {
+  color: #ccc;
+}
+
+label .description {
+  font-size: 12px;
+  padding-left: 10px;
+}
+
+.alert p {
+  margin-bottom: 0;
+}
+
+.no-default-style {
+  border: none;
+  background: none;
+}
+
+.lead {
+  font-size: 20px;
+  font-weight: 300;
+}
+
+.videoWrapper {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+}
+
+.videoWrapper iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+dropdown-menu a {
+  color: #03a9f4;
+}
+
+.btn-light {
+  border: 1px solid #333;
+}
+
+.smallCenterBlock {
+  max-width: 350px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#loginBox {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 20px;
+}
+
+#loginBox .form-group {
+  margin-bottom: 1rem;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.form-control.is-invalid {
+  background-image: none;
+}
+
+a.dropdown-toggle::after {
+  display: none;
+}
+
+.modalMarkdown textarea {
+  height: 75vh !important;
+  overflow-y: scroll !important;
+}
+
+#markdownPreview table {
+  border-spacing: 0px;
+}
+
+#markdownPreview table td,
+#markdownPreview table th {
+  border: 1px solid #DDD;
+  margin: 0px;
+  padding: 2px
+}
+
+.sectionEditButton,
+.elementEditButton {
+  float: right;
+  background-color: "#FFF";
+  border-radius: 5px;
+  background-color: #FFF;
+}
+
+.columnWrapper:hover {
+  background-color: #FF9999;
+}
+
+.elementWrapper:not(:has(.elementWrapper:hover)):hover {
+  /*background-color: #28a745;*/
+  border: 3px solid #28a745;
+}
+
+.elementWrapper:not(:has(.elementWrapper:hover)):hover:before {
+  content: "ELEMENT";
+  font-size: 14px;
+  background-color: #28a745;
+  color: #FFF;
+  display: block;
+  width: 100px;
+  position: relative;
+  text-align: center;
+  margin-top: -18px;
+  margin-left: -3px;
+  height: 18px;
+  margin-bottom: -2px;
+}
+
+.elementWrapper.box:not(:has(.elementWrapper:hover)):hover:before {
+  content: "BOX" !important;
+}
+
+.elementWrapper.card:not(:has(.elementWrapper:hover)):hover:before {
+  content: "CARD" !important;
+}
+
+.elementWrapper.carousel:not(:has(.elementWrapper:hover)):hover:before {
+  content: "CAROUSEL" !important;
+}
+
+.elementWrapper.embed:not(:has(.elementWrapper:hover)):hover:before {
+  content: "EMBED" !important;
+}
+
+.elementWrapper.expandable:not(:has(.elementWrapper:hover)):hover:before {
+  content: "EXPANDABLE" !important;
+}
+
+.elementWrapper.html:not(:has(.elementWrapper:hover)):hover:before {
+  content: "HTML" !important;
+}
+
+.elementWrapper.image:not(:has(.elementWrapper:hover)):hover:before {
+  content: "IMAGE" !important;
+}
+
+.elementWrapper.location:not(:has(.elementWrapper:hover)):hover:before {
+  content: "LOCATION" !important;
+}
+
+.elementWrapper.row:not(:has(.elementWrapper:hover)):hover:before {
+  content: "ROW" !important;
+}
+
+.elementWrapper.table:not(:has(.elementWrapper:hover)):hover:before {
+  content: "TABLE" !important;
+}
+
+.elementWrapper.text:not(:has(.elementWrapper:hover)):hover:before {
+  content: "TEXT" !important;
+}
+
+.elementWrapper.textWithPhoto:not(:has(.elementWrapper:hover)):hover:before {
+  content: "TEXT WITH PHOTO" !important;
+}
+
+.elementWrapper.video:not(:has(.elementWrapper:hover)):hover:before {
+  content: "VIDEO" !important;
+}
+
+.elementWrapper.whiteSpace:not(:has(.elementWrapper:hover)):hover:before {
+  content: "WHITE SPACE" !important;
+}
+
+.draggable-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: text; /* Keeps text selection */
+}
+
+/* Drag handle - Always present but only visible on hover */
+.drag-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background-color: green;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px;
+  cursor: grab;
+  user-select: none;
+  pointer-events: all;
+  opacity: 0;
+  transition: opacity 0.2s;
+  z-index: 1500;
+}
+
+/* Section drag handle - INSIDE top-left corner */
+.section-handle {
+  background-color: #3333FF;
+  left: 1px;
+  top: 30px;
+  z-index: 100;
+}
+
+/* Element drag handle - Middle-left */
+.drag-handle:not(.section-handle) {
+  left: 5px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Content area - text remains selectable */
+.draggable-content {
+  flex: 1;
+  user-select: text;
+}
+
+
+.sectionWrapper:not(:has(.elementWrapper:hover)):hover {
+  /*background-color: #9999FF !important;*/
+  border: 3px solid #3333FF;
+  padding-bottom: 38px;
+}
+
+.sectionWrapper:not(:has(.elementWrapper:hover)):hover:before {
+  content: "SECTION";
+  background-color: #3333FF;
+  color: #FFF;
+  display: block;
+  width: 100px;
+  position: relative;
+  text-align: center;
+  font-size: 14px;
+  height: 18px;
+  /*margin-bottom: -29px;*/
+  margin-top: -40px !important;
+  margin-bottom: 20px;
+}
+
+.sectionWrapper.sectionBlock:not(:has(.elementWrapper:hover)):hover:before {
+  content: "BLOCK" !important;
+}
+
+/*
+.sectionWrapper {
+  padding-top: 0 !important;
+}*/
+
+.sectionDark {
+  color: var(--dark-bg-text-color);
+}
+
+/*
+.sectionDark.sectionWrapper:not(:has(.elementWrapper:hover)):hover {
+  background-color: #007bff !important;
+}*/
+
+.sectionDark .columnWrapper:hover {
+  background-color: #990000;
+}
+
+/*
+.sectionDark .elementWrapper:hover {
+  background-color: #009900;
+}
+*/
+.sectionActions {
+  display: none;
+  position: absolute;
+  top: 1;
+  right: 0;
+  margin-top: -70px;
+  z-index: 999;
+}
+
+.sectionActions.alwaysVisible {
+  display: block;
+  z-index: 9999;
+}
+
+.sectionBlock .sectionActions {
+  margin-top: 30px;
+}
+
+.sectionWrapper:not(:has(.elementWrapper:hover)):hover .sectionActions {
+  display: block;
+}
+
+.elementActions {
+  display: none;
+  position: absolute;
+  top: 10;
+  right: 0;
+}
+
+.elementWrapper:hover .elementActions {
+  display: block;
+  z-index: 2;
+}
+
+#embeddedLayout {
+  height: 100vh;
+  background-color: #FFFFFF;
+}
+
+#embeddedLayout .page .sectionFirst {
+  padding-top: 0px;
+}
+
+.no-resize {
+  width: auto;
+  max-width: 100%;
+}
+
+.elBox {
+  margin-bottom: 20px;
+}
+
+.elTextWithPhoto {
+  margin-bottom: 20px;
+}
+
+.elText {
+  margin-bottom: 20px;
+}
+
+/* Style inline code */
+code {
+  background-color: #f5f5f5;
+  padding: 2px 4px;
+  border-radius: 3px;
+  font-family: "Source Code Pro", monospace !important;
+}
+
+pre {
+  background-color: #f8f9fa;
+  padding: 12px;
+  border-radius: 6px;
+  border-left: 4px solid #6c757d;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-x: auto;
+}
+
+/* Ensure code inside block follows styling */
+pre.code-block code {
+  font-size: 14px;
+  color: #222;
+  background: none;
+  padding: 0;
+}
+.editor-list-ul,
+.editor-list-ol {
+  padding-left: 0px;
+  margin-left: 40px;
+}
+
+.editor-list-ol li {
+  list-style-type: decimal !important;
+  margin-bottom: 0px;
+}
+
+
+.editor-list-ul li {
+  list-style-type: disc !important;
+}
+
+.page th {
+  font-weight: bold;
+}
+
+.pageTable {
+  width: 100%;
+}
+
+.pageTable th {
+  text-align: left;
+}
+
+.pageTable td,
+.pageTable th {
+  border-bottom: 1px solid;
+  color: inherit;
+}
+
+.calbox,
+#conbtn {
+  color: #FFFFFF;
+  background: linear-gradient(rgb(0, 0, 0), var(--darkAccent));
+}
+
+code {
+  color: #000;
+}
+
+
+
+#groupHero {
+  min-height: 200px;
+  background-color: var(--darkAccent);
+  color: #FFFFFF;
+}
+
+#groupHero .content {
+  background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0));
+  width: 100%;
+  height: 100%;
+  padding-top: 110px;
+  min-height: 260px;
+}
+
+#groupHero H1 {
+  margin-top: 0px;
+  padding-bottom: 0px;
+  margin-bottom: 0px;
+  font-size: 40px;
+}
+
+#groupHero .badge {
+  border-radius: 10px;
+  float: right;
+  margin-top: -150px;
+  margin-bottom: -120px;
+  position: relative;
+  z-index: 1000;
+
+}
+
+
+@media (max-width: 768px) {
+  #calEntity {
+    order: -1;
+  }
+
+  #groupHero .badge {
+    float: left;
+    margin-top: 15px;
+    width:100%;
+    height:auto;
+    margin-bottom: 15px;
+  }
+}
+
+.headingsLight h1, .headingsLight h2, .headingsLight h3, .headingsLight h4 { color: var(--light); }
+.headingsLightAccent h1, .headingsLightAccent h2, .headingsLightAccent h3, .headingsLightAccent h4 { color: var(--lightAccent); }
+.headingsAccent h1, .headingsAccent h2, .headingsAccent h3, .headingsAccent h4 { color: var(--accent); }
+.headingsDarkAccent h1, .headingsDarkAccent h2, .headingsDarkAccent h3, .headingsDarkAccent h4 { color: var(--darkAccent); }
+.headingsDark h1, .headingsDark h2, .headingsDark h3, .headingsDark h4 { color: var(--dark); }
+
+.linksLight a { color: var(--light); }
+.linksLightAccent a { color: var(--lightAccent); }
+.linksAccent a { color: var(--accent); }
+.linksDarkAccent a { color: var(--darkAccent); }
+.linksDark a { color: var(--dark); }
+
+/* Lightbox overlay */
+.b1-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.b1-lightbox img {
+  width: 98vw;
+  height: 98vh;
+  object-fit: contain;
+  cursor: default;
+}
+
+.b1-lightbox__close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: none;
+  border: none;
+  color: #fff;
+  font-size: 36px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 4px 12px;
+  opacity: 0.8;
+  transition: opacity 0.2s;
+}
+
+.b1-lightbox__close:hover {
+  opacity: 1;
+}
+
+/* DraggableWrapper - show drag indicator on hover (CSS-only, no React state) */
+.draggable-wrapper:hover .drag-indicator {
+  opacity: 1 !important;
+}
+
+
+/* Per-device visibility (hide flags stored in stylesJSON desktop/mobile display:none) */
+@media (min-width: 768px) {
+  .hiddenOnDesktop { display: none !important; }
+}
+@media (max-width: 767px) {
+  .hiddenOnMobile { display: none !important; }
+}
+
+/* iconFeature */
+.iconFeature h3 { margin-top: 8px; }
+
+/* gallery */
+.gallery-caption { font-size: 0.85rem; padding: 4px 2px; opacity: 0.85; }
+.gallery-empty,
+.testimonial-empty,
+.social-icons-empty,
+.stats-empty,
+.campaign-empty,
+.staff-empty,
+.service-times-empty {
+  padding: 24px;
+  border: 1px dashed #bbb;
+  border-radius: 4px;
+  text-align: center;
+  color: #888;
+}
+.gallery-lightbox { position: relative; display: flex; flex-direction: column; align-items: center; }
+.gallery-lightbox__img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
+.gallery-lightbox__caption { color: #fff; margin-top: 12px; text-align: center; }
+.gallery-lightbox__close { position: absolute !important; top: -48px; right: 0; }
+.gallery-lightbox__prev { position: absolute !important; left: -56px; top: 50%; transform: translateY(-50%); }
+.gallery-lightbox__next { position: absolute !important; right: -56px; top: 50%; transform: translateY(-50%); }
+@media (max-width: 767px) {
+  .gallery-lightbox__prev { left: 0; }
+  .gallery-lightbox__next { right: 0; }
+}
+
+/* testimonial */
+.testimonial-quote { padding: 16px 24px; }
+.testimonial-text { font-size: 1.25rem; font-style: italic; line-height: 1.5; }
+.testimonial-author { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 12px; }
+.testimonial-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
+.testimonial-name { font-weight: 600; font-style: normal; }
+.testimonial-role { font-size: 0.85rem; opacity: 0.75; }
+
+/* countdown */
+.countdown { text-align: center; }
+.countdown-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 12px; }
+.countdown-tiles { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
+.countdown-tile { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 12px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.06); }
+.countdown-value { font-size: 2rem; font-weight: 700; line-height: 1; }
+.countdown-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; margin-top: 4px; }
+.countdown-complete { font-size: 1.5rem; font-weight: 700; }
+
+/* stats */
+.stats { text-align: center; }
+.stat-value { font-size: 2.5rem; font-weight: 700; line-height: 1.1; }
+.stat-label { font-size: 0.9rem; opacity: 0.75; margin-top: 4px; }
+
+/* section dividers */
+.sectionWithDivider { position: relative; overflow: hidden; }
+.sectionDivider { position: absolute; left: 0; width: 100%; line-height: 0; pointer-events: none; overflow: hidden; z-index: 1; }
+.sectionDivider svg { display: block; width: 100%; height: 100%; }
+
+/* sermons layouts (grid / list / featuredLatest) */
+.sermonGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; padding: 20px 0; }
+.sermonList { display: flex; flex-direction: column; gap: 16px; padding: 20px 0; }
+.sermonListItem { display: flex; gap: 16px; align-items: center; cursor: pointer; }
+.sermonCard { cursor: pointer; }
+.sermonFeatured { cursor: pointer; max-width: 960px; margin: 20px auto; }
+.sermonThumb { position: relative; overflow: hidden; }
+.sermonThumb img { display: block; width: 100%; height: 190px; object-fit: cover; object-position: center; }
+.sermonThumbList { width: 220px; flex-shrink: 0; }
+.sermonThumbList img { height: 124px; }
+.sermonThumbFeatured img { height: 420px; }
+.sermonPlayIcon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; opacity: 0.9; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
+.sermonListBody { flex: 1; min-width: 0; }
+.sermonCardTitle { font-size: 20px; font-weight: 500; margin: 8px 0 2px; color: #333; }
+.sermonFeaturedTitle { font-size: 32px; font-weight: 600; margin: 12px 0 4px; color: #333; }
+.sermonCardDate { font-size: 0.85rem; opacity: 0.7; }
+.sermonListDesc { font-size: 0.9rem; opacity: 0.8; margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+
+/* podcast (external RSS feed) */
+.podcast { max-width: 960px; margin: 0 auto; }
+.podcastHeader { display: flex; gap: 20px; align-items: center; margin-bottom: 8px; }
+.podcastArtwork { width: 120px; height: 120px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
+.podcastTitle { font-size: 28px; font-weight: 600; margin: 0 0 4px; }
+.podcastDesc { margin: 0; opacity: 0.8; }
+.podcastList .sermonListItem { cursor: default; align-items: flex-start; scroll-margin-top: 80px; }
+.podcastEpisodeMeta { font-size: 0.85rem; opacity: 0.7; }
+.podcastMetaSep { padding: 0 2px; }
+.podcastEpisodeDesc { font-size: 0.9rem; opacity: 0.85; margin: 6px 0 0; white-space: pre-line; }
+.podcastAudio { display: block; width: 100%; max-width: 640px; margin-top: 10px; }
+.podcastEmpty { padding: 12px; border: 1px dashed #bbb; border-radius: 4px; opacity: 0.8; }
+
+/* campaignProgress */
+.campaignProgress { max-width: 720px; }
+.campaign-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 8px; }
+.campaign-bar { height: 20px; border-radius: 10px; background: rgba(0, 0, 0, 0.1); overflow: hidden; }
+.campaign-bar-fill { height: 100%; border-radius: 10px; background: var(--accent, #1565c0); transition: width 1.2s ease; }
+.campaign-percent { font-size: 1.5rem; font-weight: 700; margin-top: 8px; }
+.campaign-amounts { opacity: 0.85; }
+.campaign-count { font-size: 0.85rem; opacity: 0.7; margin-top: 2px; }
+.campaign-give { display: inline-block; margin-top: 12px; padding: 8px 20px; border-radius: 4px; background: var(--accent, #1565c0); color: #fff; text-decoration: none; }
+
+/* staffGrid */
+.staff-card { text-align: center; }
+.staff-photo { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; margin: 0 auto; display: block; }
+.staff-photo--placeholder { background: rgba(0, 0, 0, 0.08); }
+.staff-name { font-weight: 600; margin-top: 10px; }
+.staff-role { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 12px; font-size: 0.75rem; background: rgba(0, 0, 0, 0.08); }
+
+/* serviceTimes */
+.service-times-title { margin: 0 0 12px; }
+.service-group { margin-bottom: 16px; }
+.service-name { font-weight: 600; font-size: 1.1rem; }
+.service-campus { font-size: 0.85rem; opacity: 0.7; }
+.service-time-list { list-style: none; padding: 0; margin: 6px 0 0; }
+.service-time { padding: 2px 0; opacity: 0.9; }
+
+/* announcement banner */
+.announcement-banner { position: sticky; top: 0; z-index: 1250; width: 100%; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 48px; text-align: center; box-sizing: border-box; }
+.announcement-banner__text { font-weight: 500; }
+.announcement-banner__link { text-decoration: underline; font-weight: 600; white-space: nowrap; }
+.announcement-banner__close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px; opacity: 0.85; }
+.announcement-banner__close:hover { opacity: 1; }
+
+/* launcher (floating action hub) */
+.launcher { position: fixed; bottom: 24px; z-index: 1300; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
+.launcher--bottomRight { right: 24px; align-items: flex-end; }
+.launcher--bottomLeft { left: 24px; align-items: flex-start; }
+.launcher-actions { display: flex; flex-direction: column; gap: 10px; }
+.launcher--bottomLeft .launcher-actions { align-items: flex-start; }
+.launcher--bottomRight .launcher-actions { align-items: flex-end; }
+.launcher-action { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 22px; background: #fff; color: #333; text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.launcher[data-open="true"] .launcher-action { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
+.launcher-action-label { font-weight: 500; white-space: nowrap; }
+.launcher-fab { width: 56px; height: 56px; border-radius: 50%; border: none; color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; align-self: flex-end; }
+.launcher--bottomLeft .launcher-fab { align-self: flex-start; }
+.launcher-fab-icon { transition: transform 0.25s ease; }
+.launcher[data-open="true"] .launcher-fab-icon { transform: rotate(135deg); }