/* HolyLink - site header / footer and shared pieces (10-10). Functional styling only; the design pass comes later. Container width comes from --hl-container in directory.css. */ .hl-header { border-bottom: 1px solid #e4e7ec; background: #fff; } .hl-header__inner { max-width: var(--hl-container, 1750px); margin: 0 auto; padding: 14px var(--hl-gutter, 20px); display: flex; align-items: center; gap: 28px; } .hl-header__logo { font-weight: 800; font-size: 20px; color: #7a1f2b; text-decoration: none; letter-spacing: -.01em; } .hl-header__nav { display: flex; gap: 20px; flex: 1; } .hl-header__actions { display: flex; align-items: center; gap: 16px; margin-left: auto; } .hl-header__link { color: #16181d; text-decoration: none; font-size: 15px; font-weight: 500; } .hl-header__link:hover { color: #7a1f2b; } .hl-header__link--manage { font-weight: 700; } .hl-header__lang { font-size: 13px; padding: 5px 11px; border: 1px solid #e4e7ec; border-radius: 999px; color: #16181d; text-decoration: none; } .hl-header a span, .hl-footer a span { margin: 0; } .hl-footer { margin-top: 64px; border-top: 1px solid #e4e7ec; background: #f7f8fa; } .hl-footer__inner { max-width: var(--hl-container, 1750px); margin: 0 auto; padding: 32px var(--hl-gutter, 20px); display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 48px; } .hl-footer__logo { margin: 0; font-weight: 800; color: #7a1f2b; } .hl-footer__tag { margin: 4px 0 0; font-size: 13px; color: #646b7a; } .hl-footer__nav { display: flex; gap: 20px; flex: 1; } .hl-footer__link { font-size: 14px; color: #3d434f; text-decoration: none; } .hl-footer__copy { margin: 0; font-size: 12px; color: #646b7a; width: 100%; } /* the directory runs edge to edge: no footer gap above it */ body.page .hl-dir + * { margin-top: 0; } @media (max-width: 767px) { .hl-header__inner { flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px; } .hl-header__nav { order: 3; width: 100%; flex: none; gap: 16px; } .hl-header__actions { gap: 12px; } .hl-header__link { font-size: 14px; } } /* ---------- manage page ---------- */ .cb-mg_page { max-width: var(--hl-container, 1750px); margin: 0 auto; padding: 28px var(--hl-gutter, 20px) 72px; } .cb-mg_page h1 { margin: 0 0 16px; font-size: 28px; } .hl-manage__switch { margin: 0 0 24px; } .hl-manage__switch:not(:has(.hl-switch)) { display: none; } .hl-manage__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } .hl-manage__card { border: 1px solid #e4e7ec; border-radius: 14px; background: #fff; padding: 22px 24px; } .hl-manage__card--wide { grid-column: 1 / -1; } .hl-manage__card h2 { margin: 0 0 12px; font-size: 18px; } .hl-manage__card h3 { margin: 18px 0 8px; font-size: 14px; color: #646b7a; } .hl-manage__row { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid #f0f2f5; font-size: 14px; } .hl-manage__row > :nth-child(2) { flex: 1; } .hl-manage__row a { font-size: 13px; color: #7a1f2b; } .hl-manage__row a.hl-del { color: #b42318; } .hl-manage__new { font-size: 13px; color: #7a1f2b; } @media (max-width: 1024px) { .hl-manage__grid { grid-template-columns: 1fr; } } /* ---------- parish board (functional; restyled in the design pass) ---------- */ .hl-church__tab.cb-sp_tab_board_body { max-width: none; } .hl-notice:not(:empty) { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #eef6ee; color: #1d5b2a; font-size: 14px; } .hl-board__gate { display: grid; gap: 12px; max-width: 640px; } .hl-board__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; } .hl-board__cats { display: flex; flex-wrap: wrap; gap: 6px; } .hl-bcat { padding: 6px 12px; border: 1px solid var(--hl-line, #e4e7ec); border-radius: 999px; font-size: 13px; color: var(--hl-ink, #16181d); text-decoration: none; } body.hl-bcat-all .hl-bcat--all, body.hl-bcat-sharing .hl-bcat--sharing, body.hl-bcat-question .hl-bcat--question, body.hl-bcat-market .hl-bcat--market, body.hl-bcat-etc .hl-bcat--etc { background: var(--hl-accent, #7a1f2b); border-color: var(--hl-accent, #7a1f2b); color: #fff; } .hl-board__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 12px 4px; border-bottom: 1px solid var(--hl-line, #e4e7ec); color: var(--hl-ink, #16181d); text-decoration: none; } .hl-board__row:hover .hl-board__title { text-decoration: underline; } .hl-board__title { flex: 1 1 320px; font-weight: 600; } .hl-board__cat { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--hl-bg-soft, #f6f7f9); color: var(--hl-muted, #646b7a); } .hl-board__badge:not(:empty) { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: #fdecea; color: #b42318; } .hl-board__meta { font-size: 13px; color: var(--hl-muted, #646b7a); } .hl-board__post h3 { margin: 8px 0 4px; font-size: 22px; } .hl-board__body { margin: 16px 0; line-height: 1.7; white-space: normal; overflow-wrap: anywhere; } .hl-board__images { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin: 12px 0; } .hl-board__images img { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; display: block; } .hl-board__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 0; font-size: 13px; } .hl-board__actions a { color: var(--hl-muted, #646b7a); } .hl-board__actions a.hl-del, .hl-board__actions a.hl-report { color: #b42318; } .hl-board__comments { margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--hl-line, #e4e7ec); } .hl-board__comment { padding: 12px 0; border-bottom: 1px solid #f0f2f5; } .hl-board__comment .hl-board__body { margin: 6px 0; } .hl-board__view > .hl-link, .hl-board__write > .hl-link { display: inline-block; margin-top: 16px; } .hl-board__write { max-width: 860px; }.hl-manage__note { margin: 0 0 16px; padding: 12px 14px; border-radius: 8px; background: #f6f7f9; font-size: 14px; color: #3d434f; } .hl-manage__note p { margin: 0 0 6px; } /* Church picker on the manage page (2+ churches) */ .hl-switch { display: grid; gap: 8px; max-width: 860px; padding: 16px; border-radius: 10px; background: #f6f7f9; } .hl-switch__label { font-size: 14px; font-weight: 600; color: #16181d; } .hl-switch__label span { font-weight: 400; color: #6b7280; } .hl-switch__row { display: flex; flex-wrap: wrap; gap: 8px; } .hl-switch__q, .hl-switch__sel { box-sizing: border-box; height: 44px; padding: 0 12px; border: 1px solid #ccd0d5; border-radius: 6px; background: #fff; font-size: 16px; color: #16181d; } .hl-switch__q { flex: 1 1 220px; min-width: 0; } .hl-switch__sel { flex: 2 1 320px; min-width: 0; } .hl-switch__sel:disabled { opacity: .5; } .hl-switch__go { height: 44px; padding: 0 18px; border: 0; border-radius: 6px; background: #16181d; color: #fff; font-size: 15px; cursor: pointer; } .hl-switch__empty { margin: 0; font-size: 14px; color: #b42318; } .hl-switch [hidden] { display: none !important; } @media (max-width: 600px) { .hl-switch__q, .hl-switch__sel { flex-basis: 100%; } } .hl-manage .cb-mg_cur_name { margin: 0 0 4px; font-size: 28px; font-weight: 700; line-height: 1.3; color: #16181d; } /* ---------- my church: [Church] [Altar servers] tabs + altar area (10-11, functional) ---------- */ .cb-ma_page { max-width: var(--hl-container, 1750px); margin: 0 auto; padding: 28px var(--hl-gutter, 20px) 72px; } .cb-ma_page h1 { margin: 0 0 16px; font-size: 28px; } .hl-manage .cb-ma_cur_name { margin: 0 0 4px; font-size: 28px; font-weight: 700; line-height: 1.3; color: #16181d; } .hl-manage__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 24px; border-bottom: 2px solid #16181d; } .hl-manage__tabs:not(:has(a)) { display: none; } .hl-manage__tab { padding: 12px 28px; font-size: 16px; font-weight: 700; color: #646b7a; background: #f6f7f9; border: 1px solid #e4e7ec; border-bottom: 0; border-radius: 8px 8px 0 0; text-decoration: none; } .hl-manage__tab:hover { color: #16181d; background: #eef0f3; } body.hl-manage--church .hl-manage__tab--church, body.hl-manage--altar .hl-manage__tab--altar { color: #fff; background: #16181d; border-color: #16181d; } .hl-manage__desc { margin: 0 0 12px; font-size: 14px; color: #646b7a; } .hl-manage__row a.hl-altar-remove { color: #b42318; } .hl-altar-add { display: grid; gap: 8px; max-width: 640px; margin: 18px 0 0; padding: 16px; border-radius: 10px; background: #f6f7f9; } .hl-altar-add__label { font-size: 14px; font-weight: 600; color: #16181d; } .hl-altar-add__row { display: flex; flex-wrap: wrap; gap: 8px; } .hl-altar-add__sel, .hl-altar-add__email { box-sizing: border-box; height: 44px; padding: 0 12px; border: 1px solid #ccd0d5; border-radius: 6px; background: #fff; font-size: 16px; color: #16181d; } .hl-altar-add__email { flex: 1 1 260px; min-width: 0; } .hl-altar-add__go { height: 44px; padding: 0 18px; border: 0; border-radius: 6px; background: #16181d; color: #fff; font-size: 15px; cursor: pointer; } .hl-altar-add__hint { margin: 0; font-size: 13px; color: #646b7a; } @media (max-width: 600px) { .hl-manage__tab { padding: 10px 18px; font-size: 15px; } } /* ---------- church page: altar-server tab (10-11 step 2, functional) ---------- */ body.hl-tab-altar .hl-tabs__link--altar { color: #fff; background: var(--hl-ink, #16181d); border-color: var(--hl-ink, #16181d); } .hl-altar__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; } .hl-altar__signup { margin: 0 0 20px; max-width: 720px; } .hl-altar__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--hl-line, #e4e7ec); font-size: 15px; } .hl-altar__row > strong { min-width: 220px; } .hl-altar__go { margin-left: auto; font-weight: 600; color: var(--hl-accent, #7a1f2b); } @media (max-width: 1024px) { .hl-altar__grid { grid-template-columns: 1fr; } .hl-altar__row > strong { min-width: 0; flex-basis: 100%; } } /* ---------- /manage/altar/ (10-11 step 3, functional) ---------- */ .hl-altar__mrow { flex-wrap: wrap; gap: 4px 12px; } .hl-altar__mrow > strong { min-width: 200px; } .hl-altar__mrow a { margin-left: 4px; } .hl-altar__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 10px; } .hl-altar__nav strong { font-size: 17px; } .hl-af { display: grid; gap: 10px; margin: 14px 0 0; padding: 16px; border-radius: 10px; background: #f6f7f9; } .hl-af--inline { grid-template-columns: minmax(0, 260px) auto; align-items: end; } .hl-af__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; } .hl-af__field { display: grid; gap: 4px; } .hl-af__label { font-size: 13px; font-weight: 600; color: #16181d; } .hl-af__hint { font-size: 12px; color: #646b7a; } .hl-af__input { box-sizing: border-box; width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid #ccd0d5; border-radius: 6px; background: #fff; font-size: 15px; color: #16181d; } .hl-af__needs { display: flex; flex-wrap: wrap; gap: 10px; } .hl-af__need { display: grid; gap: 4px; font-size: 13px; } .hl-af__need .hl-af__input { width: 90px; } .hl-af__actions { display: flex; gap: 8px; } .hl-af__go { height: 42px; padding: 0 18px; border: 0; border-radius: 6px; background: #16181d; color: #fff; font-size: 15px; cursor: pointer; } .hl-btn--ghost { background: #fff; color: #16181d; border: 1px solid #16181d; } .hl-af__head { margin: 14px 0 0; font-weight: 600; } .hl-af__preview { margin: 10px 0 0; font-size: 14px; } .hl-af__preview ul { margin: 6px 0 0 18px; columns: 2; } .hl-altar__assignform { max-width: 640px; } @media (max-width: 600px) { .hl-af--inline { grid-template-columns: 1fr; } .hl-af__preview ul { columns: 1; } } .hl-altar__req { margin: 20px 0 0; max-width: 860px; } .hl-altar__cancelnote { margin: 12px 0 0; } /* ---------- 10-11 fixes: view-page button in the tab row, altar switch, readable form buttons ---------- */ .hl-manage__tabs { align-items: flex-end; } .hl-manage__view { margin: 0 0 8px auto; padding: 8px 14px; border: 1px solid #16181d; border-radius: 8px; font-size: 14px; font-weight: 600; color: #16181d; text-decoration: none; background: #fff; } .hl-manage__view:hover { background: #16181d; color: #fff; } .hl-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 16px; padding: 14px 16px; border-radius: 10px; background: #f6f7f9; } .hl-toggle .hl-toggle__btn { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: #16181d; font: inherit; cursor: pointer; } .hl-toggle .hl-toggle__btn:hover, .hl-toggle .hl-toggle__btn:focus { background: none; color: #16181d; } .hl-toggle__track { position: relative; width: 46px; height: 26px; border-radius: 999px; background: #c5cad3; transition: background .15s; flex: 0 0 auto; } .hl-toggle__knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; } .hl-toggle.is-on .hl-toggle__track { background: #1d7a3a; } .hl-toggle.is-on .hl-toggle__knob { left: 23px; } .hl-toggle__label { font-size: 16px; font-weight: 700; } .hl-toggle__state { font-size: 14px; font-weight: 700; color: #646b7a; } .hl-toggle.is-on .hl-toggle__state { color: #1d7a3a; } .hl-toggle__hint { flex-basis: 100%; font-size: 13px; color: #646b7a; } .hl-toggle .hl-toggle__btn:focus-visible .hl-toggle__track { outline: 2px solid #16181d; outline-offset: 2px; } /* theme button styles (transparent bg + accent text) were winning over ours */ .hl-af button.hl-af__go, .hl-altar-add button.hl-altar-add__go { background: #16181d !important; color: #fff !important; border: 1px solid #16181d !important; } .hl-af button.hl-af__go:hover, .hl-altar-add button.hl-altar-add__go:hover { background: #3d434f !important; } .hl-af button.hl-btn--ghost { background: #fff !important; color: #16181d !important; border: 1px solid #16181d !important; } .hl-af button.hl-btn--ghost:hover { background: #16181d !important; color: #fff !important; } @media (max-width: 600px) { .hl-manage__view { margin: 8px 0; } } /* ---------- step 4: report table, attendance, notices, unavailable (functional) ---------- */ .hl-report { overflow-x: auto; } .hl-report__table { width: 100%; border-collapse: collapse; font-size: 14px; } .hl-report__table th, .hl-report__table td { padding: 8px 10px; border-bottom: 1px solid #e4e7ec; text-align: center; white-space: nowrap; } .hl-report__table th:first-child, .hl-report__table td:first-child { text-align: left; white-space: normal; } .hl-report__table thead th { background: #f6f7f9; font-weight: 700; } .hl-report__table tfoot th { border-top: 2px solid #16181d; } .hl-report__csv { margin: 10px 0 0; } .hl-altar__warn { color: #b42318; } .hl-altar__notices { margin: 0 0 20px; } .hl-altar__notice { padding: 12px 0; border-bottom: 1px solid #e4e7ec; } .hl-altar__nthead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .hl-altar__ntbody { margin: 6px 0 0; font-size: 15px; line-height: 1.6; } .hl-altar__unavail { margin: 20px 0 0; max-width: 860px; } /* Sign-up page (10-13) */ .hl-account{max-width:560px} .hl-af__check{display:flex;gap:10px;align-items:flex-start;margin:4px 0 12px;line-height:1.5;cursor:pointer} .hl-af__check input{margin-top:4px;flex:0 0 auto} .hl-account__login{margin-top:18px} /* Church admin apply (10-13) */ .hl-admin-apply-link{margin:0;font-size:14px;color:var(--hl-muted)} .hl-admin-list{margin:0 0 14px;padding-left:18px} .hl-admin-req{border:1px solid var(--hl-line);border-radius:10px;padding:12px 16px;margin:0 0 10px} .hl-admin-req p{margin:0 0 8px} .hl-admin-req__memo{white-space:normal;color:var(--hl-text)} .hl-admin-req__h{margin:14px 0 8px;font-size:16px} .hl-muted{color:var(--hl-muted)} .hl-admin-list__remove{margin-left:8px;font-size:13px;color:var(--hl-accent)} /* ---------- 10-13: section menu on manage pages + parent altar tab ---------- */ .hl-sec { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; } .hl-sec__off { display: none !important; } nav.hl-sec__nav--side { position: sticky; top: calc(var(--hl-top, 0px) + 16px); display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid #e4e7ec; border-radius: 14px; background: #fff; } nav.hl-sec__nav button.hl-sec__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 0; padding: 11px 14px; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: #3d434f !important; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; box-shadow: none !important; } nav.hl-sec__nav button.hl-sec__item:hover { background: #f3f4f6 !important; color: #16181d !important; } nav.hl-sec__nav button.hl-sec__item.is-on { background: #16181d !important; color: #fff !important; } .hl-sec__count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #b42318; color: #fff; font-size: 12px; line-height: 18px; text-align: center; } nav.hl-sec__nav--pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; } nav.hl-sec__nav--pills button.hl-sec__item { width: auto; padding: 9px 18px; border: 1px solid #e4e7ec !important; border-radius: 999px !important; background: #fff !important; font-size: 14px; } nav.hl-sec__nav--pills button.hl-sec__item.is-on { background: #16181d !important; border-color: #16181d !important; color: #fff !important; } @media (max-width: 900px) { .hl-sec { grid-template-columns: 1fr; gap: 16px; } nav.hl-sec__nav--side { top: var(--hl-top, 0px); z-index: 5; flex-direction: row; overflow-x: auto; border-radius: 12px; -webkit-overflow-scrolling: touch; } nav.hl-sec__nav--side button.hl-sec__item { width: auto; white-space: nowrap; padding: 9px 14px; font-size: 14px; } } /* ---------- 10-13: row actions look like buttons ---------- */ .hl-manage__row a, .hl-altar__mrow a, a.hl-admin-list__remove { display: inline-flex; align-items: center; margin-left: 4px; padding: 4px 11px; border: 1px solid #c9ced6; border-radius: 7px; background: #fff; font-size: 13px; font-weight: 600; line-height: 1.4; color: #16181d; text-decoration: none; white-space: nowrap; } .hl-manage__row a:hover, .hl-altar__mrow a:hover { background: #f3f4f6; color: #16181d; } .hl-manage__row a.hl-del, .hl-manage__row a.hl-altar-remove, .hl-manage__row a.hl-altar-reject, .hl-manage__row a.hl-altar-unassign, .hl-manage__row a.hl-altar-mass-cancel, .hl-manage__row a.hl-altar-unlink, .hl-manage__row a.hl-altar-delete, .hl-altar__mrow a.hl-del, .hl-altar__mrow a.hl-altar-remove, .hl-altar__mrow a.hl-altar-reject, .hl-altar__mrow a.hl-altar-unassign, .hl-altar__mrow a.hl-altar-mass-cancel, .hl-altar__mrow a.hl-altar-unlink, .hl-altar__mrow a.hl-altar-delete, a.hl-admin-list__remove { border-color: #f1b3ad; color: #b42318; } .hl-manage__row a.hl-del:hover, .hl-altar__mrow a.hl-del:hover, a.hl-admin-list__remove:hover, .hl-manage__row a[class*="hl-altar-"]:hover, .hl-altar__mrow a[class*="hl-altar-"]:hover { background: #fef3f2; } a.hl-altar__go { display: inline-flex; padding: 5px 13px; border-radius: 7px; background: #16181d; color: #fff !important; font-size: 13px; text-decoration: none; } .hl-admin-list li { padding: 6px 0; } @media (max-width: 600px) { .hl-altar__mrow > strong, .hl-altar__mrow > strong + * { flex-basis: 100%; min-width: 0; } .hl-altar__mrow a { margin-left: 0; } .hl-manage__row { flex-wrap: wrap; } } /* 10-13: 'cancel edit' / 'add new' links as buttons */ .hl-af__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .hl-af__head a, a.hl-manage__new { display: inline-flex; align-items: center; padding: 6px 14px; border: 1px solid #16181d; border-radius: 8px; background: #fff; color: #16181d; font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none; } .hl-af__head a:hover, a.hl-manage__new:hover { background: #16181d; color: #fff; } .hl-af__head a::before { content: '\2190'; margin-right: 6px; } /* 10-13: list rows — info on the left, buttons always together on the right */ .hl-manage__row { flex-wrap: nowrap; align-items: center; } .hl-manage__row > * { flex: 0 0 auto; white-space: nowrap; } .hl-manage__row > :nth-child(2) { flex: 0 0 auto; } .hl-manage__row > strong { min-width: 72px; } .hl-manage__row > span:not(.hl-board__meta) { flex: 0 1 auto; min-width: 0; white-space: normal; } .hl-manage__row > a:first-of-type { margin-left: auto; } .hl-manage__row > a + a { margin-left: 4px; } #hl-altar-rules, #hl-altar-positions { grid-column: 1 / -1; } @media (max-width: 700px) { .hl-manage__row { flex-wrap: wrap; } .hl-manage__row > strong { flex-basis: 100%; } .hl-manage__row > a:first-of-type { margin-left: 0; } } /* ---------- 10-13: altar month calendar + print ---------- */ .hl-cal__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; } .hl-cal__month { font-size: 18px; } .hl-cal__step { font-size: 14px; color: #3d434f; text-decoration: none; } .hl-cal__step:hover { text-decoration: underline; } button.hl-cal__print { margin-left: auto !important; padding: 7px 16px !important; border: 1px solid #16181d !important; border-radius: 8px !important; background: #fff !important; color: #16181d !important; font-size: 14px !important; font-weight: 600; cursor: pointer; } button.hl-cal__print:hover { background: #16181d !important; color: #fff !important; } .hl-cal__ptitle { display: none; } .hl-cal__grid { width: 100%; border-collapse: collapse; table-layout: fixed; } .hl-cal__grid th { padding: 8px 6px; font-size: 13px; font-weight: 700; color: #646b7a; text-align: left; border-bottom: 2px solid #16181d; } .hl-cal__grid th.is-sun, .hl-cal__grid td.is-sun .hl-cal__num { color: #b42318; } .hl-cal__grid th.is-sat, .hl-cal__grid td.is-sat .hl-cal__num { color: #1d4ed8; } .hl-cal__grid td { height: 108px; padding: 6px; vertical-align: top; border: 1px solid #e4e7ec; } .hl-cal__grid td.is-pad { background: #fafafa; } .hl-cal__grid td.is-today { background: #fffbeb; } .hl-cal__day { display: flex; align-items: baseline; gap: 6px; margin: 0 0 4px; } .hl-cal__num { font-size: 14px; font-weight: 700; color: #16181d; } .hl-cal__dow { display: none; } .hl-cal__mass { display: block; margin: 0 0 4px; padding: 4px 6px; border-radius: 6px; background: #f3f4f6; font-size: 12px; line-height: 1.35; color: #16181d; text-decoration: none; } a.hl-cal__mass:hover { background: #e5e7eb; } .hl-cal__mass.is-off { opacity: .55; text-decoration: line-through; } .hl-cal__mass.is-mine { background: #e3ebe3; box-shadow: inset 3px 0 0 #55786a; font-weight: 600; } .hl-cal__time { font-weight: 700; } .hl-cal__tag { display: inline-block; padding: 0 5px; border-radius: 4px; background: #fff; font-size: 11px; color: #646b7a; } .hl-cal__tag.is-full { color: #067647; } .hl-cal__tag.is-off { color: #b42318; } .hl-cal__who { display: block; margin-top: 2px; color: #3d434f; font-weight: 500; } .hl-cal__legend { margin: 10px 0 0; } .hl-cal__legend .hl-cal__mass { display: inline-block; } @media screen and (max-width: 760px) { .hl-cal__grid, .hl-cal__grid tbody, .hl-cal__grid tr, .hl-cal__grid td { display: block; width: 100%; } .hl-cal__grid thead { display: none; } .hl-cal__grid td { height: auto; border: 0; border-bottom: 1px solid #e4e7ec; padding: 10px 0; } .hl-cal__grid td.is-pad, .hl-cal__grid td.is-empty { display: none; } .hl-cal__num { display: none; } .hl-cal__dow { display: inline; font-size: 14px; font-weight: 700; } .hl-cal__mass { font-size: 14px; padding: 8px 10px; } } @media print { body * { visibility: hidden !important; } .hl-cal, .hl-cal * { visibility: visible !important; } .hl-cal { position: absolute; left: 0; top: 0; width: 100%; } .hl-cal__nav, .hl-cal__legend { display: none !important; } .hl-cal__ptitle { display: block; margin: 0 0 8px; font-size: 16px; } .hl-cal__grid td { height: 90px; } .hl-cal__mass { background: none !important; padding: 1px 0; border-bottom: 1px dotted #999; } @page { size: landscape; margin: 10mm; } } /* past serving */ .hl-hist__cards { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; } .hl-hist__card { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid #e4e7ec; border-radius: 10px; background: #f6f8f4; font-size: 14px; } .hl-hist__wrap { overflow-x: auto; } .hl-hist__table { width: 100%; border-collapse: collapse; font-size: 14px; } .hl-hist__table th, .hl-hist__table td { padding: 8px 10px; border-bottom: 1px solid #eef0f3; text-align: left; white-space: nowrap; } .hl-hist__table th { font-size: 13px; color: #646b7a; } .hl-hist__table tr.is-present .hl-hist__att { color: #067647; font-weight: 600; } .hl-hist__table tr.is-absent .hl-hist__att { color: #b42318; font-weight: 600; } .hl-hist__table tr.is-off { opacity: .55; } .hl-altar__cal, .hl-altar__hist { margin: 0 0 20px; } .hl-altar-add__roles { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 10px; } .hl-manage__row a.hl-altar-rule-cancel, .hl-altar__mrow a.hl-altar-rule-cancel { border-color: #f1b3ad; color: #b42318; } .hl-cal__grid tbody tr, .hl-cal__grid tbody tr:nth-child(odd), .hl-cal__grid tbody tr:nth-child(even) { background: #fff; } .hl-cal__grid tbody td { background: #fff; } .hl-cal__grid tbody td.is-pad { background: #fafafa; } .hl-cal__grid tbody td.is-today { background: #fffbeb; } .hl-hist__table, .hl-hist__table th, .hl-hist__table td { border-left: 0; border-right: 0; border-top: 0; } .hl-hist__table tbody tr, .hl-hist__table tbody tr:nth-child(odd) { background: transparent; } /* 10-13: my child's serving day = whole cell */ .hl-cal__grid tbody td.is-mine-day { background: #dce9dd; box-shadow: inset 0 0 0 2px #55786a; } .hl-cal__grid tbody td.is-mine-day .hl-cal__num { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 999px; background: #55786a; color: #fff !important; text-align: center; } .hl-cal__grid tbody td.is-mine-day .hl-cal__mass { background: rgba(255,255,255,.7); } .hl-cal__grid tbody td.is-mine-day .hl-cal__mass.is-mine { background: #fff; } .hl-cal__legend { display: flex; align-items: center; gap: 8px; font-size: 14px; } .hl-cal__key { display: inline-block; width: 18px; height: 18px; border-radius: 4px; background: #dce9dd; box-shadow: inset 0 0 0 2px #55786a; } @media screen and (max-width: 760px) { .hl-cal__grid tbody td.is-mine-day { padding: 10px 8px; border-radius: 8px; } } /* 10-13: beat the theme's zebra rows; today label; my day cards without white */ .hl-cal__grid tbody tr > td { background: #fff !important; } .hl-cal__grid tbody tr > td.is-pad { background: #fafafa !important; } .hl-cal__grid tbody tr > td.is-today { background: #fffbeb !important; } .hl-cal__grid tbody tr > td.is-mine-day { background: #dce9dd !important; } .hl-cal__grid tbody td.is-mine-day .hl-cal__mass, .hl-cal__grid tbody td.is-mine-day .hl-cal__mass.is-mine { background: transparent !important; box-shadow: none; padding-left: 0; padding-right: 0; } .hl-cal__today { margin-left: auto; padding: 0 6px; border-radius: 4px; background: #f59e0b; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; } .hl-hist__table tbody tr > td { background: transparent !important; } /* 10-13: no outline on my serving day (background only) */ .hl-cal__grid tbody td.is-mine-day { box-shadow: none !important; } .hl-cal__key { box-shadow: none !important; } /* 10-13: keep the day grid lines on every cell, green days included */ .hl-cal__grid tbody tr > td, .hl-cal__grid tbody tr > td.is-mine-day { border: 1px solid #d9dde3 !important; } @media screen and (max-width: 760px) { .hl-cal__grid tbody tr > td, .hl-cal__grid tbody tr > td.is-mine-day { border: 0 !important; border-bottom: 1px solid #e4e7ec !important; } } /* ---------- 10-13: my account (/account/) ---------- */ .hl-acc { max-width: 1100px; margin: 0 auto; padding: 32px var(--hl-gutter, 20px) 64px; } .hl-acc > h1 { margin: 0 0 20px; } .hl-acc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } .hl-acc__card { border: 1px solid #e4e7ec; border-radius: 14px; background: #fff; padding: 22px 24px; } .hl-acc__card--wide, .hl-acc__foot { grid-column: 1 / -1; } .hl-acc__card h2 { margin: 0 0 14px; font-size: 18px; } .hl-acc__card .hl-af { max-width: none; } .hl-acc__value { margin: 0 0 10px; word-break: break-all; } .hl-acc__badge { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #fdecec; color: #b42318; vertical-align: 1px; } .hl-acc__badge--ok { background: #e7f3ec; color: #24704a; } .hl-acc__pending { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: #fff8e6; font-size: 14px; } .hl-acc__more { margin-top: 12px; } .hl-acc__more > summary { cursor: pointer; font-weight: 600; color: var(--hl-accent, #3d5a80); } .hl-acc__more[open] > summary { margin-bottom: 12px; } .hl-acc__small { font-size: 13px; margin: 6px 0 0; } .hl-acc__church { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid #eef0f3; } .hl-acc__churches .hl-acc__church { border-top: 1px solid #eef0f3; } .hl-acc__church-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .hl-acc__church-name { font-weight: 700; color: inherit; text-decoration: none; } .hl-acc__church-name:hover { text-decoration: underline; } .hl-acc__roles { font-size: 14px; color: var(--hl-muted, #6b7280); } a.hl-acc__church-manage { flex: 0 0 auto; padding: 6px 12px; border: 1px solid #cfd4dc; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; color: #2d3340; } a.hl-acc__church-manage:hover { background: #f4f5f7; } .hl-acc__btns { display: flex; gap: 10px; flex-wrap: wrap; } .hl-acc__foot { text-align: right; } .hl-acc__logout { font-size: 14px; color: var(--hl-muted, #6b7280); } .hl-acc .hl-notice:empty { display: none; } @media (max-width: 800px) { .hl-acc__grid { grid-template-columns: minmax(0, 1fr); } .hl-acc__card { padding: 18px 16px; } .hl-acc__church { flex-wrap: wrap; } } /* ---------- 10-13: text pages (privacy) ---------- */ .hl-doc { max-width: 820px; margin: 0 auto; padding: 32px var(--hl-gutter, 20px) 72px; line-height: 1.75; } .hl-doc h2 { margin: 32px 0 10px; font-size: 19px; } .hl-doc__body ul { margin: 0 0 12px; padding-left: 20px; } .hl-doc__body li { margin: 4px 0; } .hl-doc__body p { margin: 0 0 12px; } .hl-account__privacy { margin: -4px 0 14px; } /* ---------- 10-13: Leaflet map (OSM) ---------- */ .hl-map .leaflet-container, .hl-map__canvas.leaflet-container { font: inherit; background: #eceff3; } .hl-map .leaflet-popup-content { margin: 12px 14px; } .hl-map .leaflet-popup-content-wrapper { border-radius: 12px; } .hl-map__pin, .hl-map__dot { background: none; border: 0; } .hl-map__pin svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); } .hl-map .marker-cluster-small, .hl-map .marker-cluster-medium, .hl-map .marker-cluster-large { background-color: rgba(180, 35, 43, .22); } .hl-map .marker-cluster-small div, .hl-map .marker-cluster-medium div, .hl-map .marker-cluster-large div { background-color: #b4232b; color: #fff; font-weight: 700; font-family: inherit; } .hl-map .marker-cluster.is-active div { background-color: #111827; } .hl-map .marker-cluster.is-active { background-color: rgba(17, 24, 39, .25); } .hl-map .leaflet-control-attribution { font-size: 11px; } /* ---------- 10-13: community (/community/) ---------- */ .hl-comm { max-width: 1100px; margin: 0 auto; padding: 32px var(--hl-gutter, 20px) 72px; } .hl-comm__head h1 { margin: 0 0 6px; } .hl-comm__intro { margin: 0 0 18px; color: var(--hl-muted, #6b7280); } .hl-comm__tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 22px; padding-bottom: 12px; border-bottom: 1px solid #e4e7ec; } .hl-comm__tabs a.hl-comm__tab { padding: 8px 14px; border-radius: 999px; border: 1px solid #d9dde3; color: #2d3340; font-weight: 600; font-size: 15px; text-decoration: none; background: #fff; } .hl-comm__tabs a.hl-comm__tab:hover { background: #f4f5f7; } .hl-comm-view-hub a.hl-comm__tab--hub, .hl-comm-view-write a.hl-comm__tab--hub, .hl-comm-b-prayer a.hl-comm__tab--prayer, .hl-comm-b-news a.hl-comm__tab--news, .hl-comm-b-pilgrim a.hl-comm__tab--pilgrim, .hl-comm-b-free a.hl-comm__tab--free, .hl-comm-b-jobs a.hl-comm__tab--jobs { background: #111827; border-color: #111827; color: #fff; } .hl-comm-view-write.hl-comm-b-prayer a.hl-comm__tab--hub, .hl-comm-view-write.hl-comm-b-news a.hl-comm__tab--hub, .hl-comm-view-write.hl-comm-b-pilgrim a.hl-comm__tab--hub, .hl-comm-view-write.hl-comm-b-free a.hl-comm__tab--hub, .hl-comm-view-write.hl-comm-b-jobs a.hl-comm__tab--hub { background: #fff; border-color: #d9dde3; color: #2d3340; } .hl-comm__board { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 6px; background: #eef2ff; color: #3b4a7a; font-size: 12px; font-weight: 700; } .hl-comm-view-list .hl-comm__board { display: none; } a.hl-comm__row { display: block; padding: 14px 4px; border-bottom: 1px solid #eef0f3; color: inherit; text-decoration: none; } a.hl-comm__row:hover .hl-board__title { text-decoration: underline; } .hl-comm__row .hl-board__meta { display: block; margin-top: 4px; } .hl-comm__imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 16px 0; } .hl-comm__imgs img { width: 100%; height: 180px; object-fit: cover; border-radius: 10px; display: block; } .hl-comm__keep { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; } .hl-comm__keep-item { display: flex; flex-direction: column; gap: 6px; width: 140px; } .hl-comm__keep-item img { width: 140px; height: 105px; object-fit: cover; border-radius: 8px; } .hl-comm__form textarea, .hl-comm__cform textarea { width: 100%; } .hl-comm__gate { padding: 18px 20px; border: 1px solid #e4e7ec; border-radius: 12px; background: #fafbfc; } .hl-comm__gate p { margin: 0 0 10px; } .hl-comm .hl-af { max-width: 760px; } [hidden].hl-comm__anon { display: none !important; } /* ---------- 10-13: listings (/business/, /holy-sites/) ---------- */ .hl-biz { max-width: 1100px; margin: 0 auto; padding: 32px var(--hl-gutter, 20px) 72px; } .hl-biz h1 { margin: 0 0 6px; } .hl-biz__bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 0 0 16px; } .hl-lfilter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .hl-lfilter select { min-height: 40px; padding: 6px 10px; border: 1px solid #d9dde3; border-radius: 8px; background: #fff; font-size: 15px; max-width: 220px; } .hl-biz__map { border-radius: 12px; overflow: hidden; margin: 0 0 20px; border: 1px solid #e4e7ec; } a.hl-biz__card { display: flex; flex-direction: column; height: 100%; border: 1px solid #e4e7ec; border-radius: 12px; overflow: hidden; color: inherit; text-decoration: none; background: #fff; transition: box-shadow .15s; } a.hl-biz__card:hover { box-shadow: 0 6px 20px rgba(17, 24, 39, .08); } a.hl-biz__card:hover .hl-biz__name { text-decoration: underline; } .hl-biz__media { aspect-ratio: 16 / 10; background: #f4f5f7; } .hl-biz__media img, .hl-biz__photo { width: 100%; height: 100%; object-fit: cover; display: block; } .hl-biz__cbody { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; } .hl-biz__cat { display: inline-block; align-self: flex-start; padding: 2px 8px; border-radius: 6px; background: #eef5f1; color: #3d5c4f; font-size: 12px; font-weight: 700; } .hl-biz__name { font-size: 17px; line-height: 1.35; } .hl-biz__alt { color: var(--hl-muted, #6b7280); font-size: 14px; } .hl-biz__place { color: #2d3340; font-size: 14px; } .hl-biz__snip { color: var(--hl-muted, #6b7280); font-size: 14px; line-height: 1.5; margin-top: 4px; } .hl-biz .cb-el-pagination { margin-top: 24px; } .hl-biz__head { display: flex; gap: 16px; align-items: center; margin: 4px 0 18px; } .hl-biz__logo { width: 84px; height: 84px; object-fit: contain; border-radius: 12px; border: 1px solid #e4e7ec; background: #fff; flex: none; } .hl-biz__ht { display: flex; flex-direction: column; gap: 4px; } .hl-biz__ht .hl-biz__alt { margin: 0; } .hl-biz__hero { width: 100%; max-height: 420px; object-fit: cover; border-radius: 12px; display: block; margin: 0 0 20px; } .hl-biz__info { display: grid; gap: 0; margin: 0 0 20px; border-top: 1px solid #eef0f3; } .hl-biz__row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 2px; border-bottom: 1px solid #eef0f3; } .hl-biz__k { color: var(--hl-muted, #6b7280); font-size: 14px; font-weight: 600; } .hl-biz__intro { margin: 0 0 20px; } .hl-biz__detail > .hl-biz__map { margin-top: 8px; } .hl-biz__detail .hl-board__actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 20px; } .hl-biz__mine { margin: 18px 0 26px; padding: 16px 18px; border: 1px solid #e4e7ec; border-radius: 12px; background: #fafbfc; } .hl-biz__mine h2 { margin: 0 0 8px; font-size: 18px; } .hl-biz__mrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #eef0f3; } .hl-biz__mrow:last-child { border-bottom: 0; } a.hl-biz__mname { font-weight: 700; color: inherit; } .hl-biz__formh { margin: 8px 0 14px; font-size: 20px; } .hl-biz__cur { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; } .hl-biz__cur img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; } @media (max-width: 640px) { .hl-biz__bar { flex-direction: column; align-items: stretch; } .hl-lfilter select { max-width: none; flex: 1 1 140px; } .hl-biz__row { grid-template-columns: 1fr; gap: 2px; } .hl-biz__logo { width: 64px; height: 64px; } } .hl-biz__suggest { margin-top: 28px; color: var(--hl-muted, #6b7280); font-size: 14px; } /* ---------- 10-13: shared tokens + listing fixes ---------- */ /* Colour tokens were only set inside the directory / church page wrappers, so .hl-btn on other pages had no background (white text on white). Site-wide defaults here; the wrappers still override them locally. */ :root { --hl-ink: #16181d; --hl-text: #374151; --hl-muted: #646b7a; --hl-line: #e4e7ec; --hl-accent: #7a1f2b; --hl-bg-soft: #f7f8fa; } .hl-biz, .hl-comm { width: 100%; box-sizing: border-box; } a.hl-btn { margin-top: 0; white-space: nowrap; } a.hl-btn:hover { filter: brightness(1.1); color: #fff; } a.hl-btn.hl-btn--line { background: #fff; color: var(--hl-ink); border: 1px solid #c9ced6; } a.hl-btn.hl-btn--line:hover { background: var(--hl-bg-soft); color: var(--hl-ink); filter: none; } .hl-lfilter button.hl-btn { min-height: 40px; padding: 8px 18px !important; border: 0 !important; border-radius: 8px !important; background: var(--hl-ink) !important; color: #fff !important; font-size: 15px !important; font-weight: 600; cursor: pointer; } .hl-lfilter button.hl-btn:hover { background: #000 !important; } .hl-biz__bar { flex-wrap: nowrap; } .hl-biz__filters { flex: 1 1 auto; min-width: 0; } .hl-biz__bar > a.hl-btn { flex: none; padding: 10px 16px; font-size: 15px; } @media (max-width: 900px) { .hl-biz__bar { flex-wrap: wrap; } } /* ---------- 10-13: one page width + even form fields ---------- */ /* Every page lines up with the header/footer container (--hl-container). */ .hl-account-page, .hl-acc, .hl-comm, .hl-biz, .hl-doc { width: 100%; max-width: var(--hl-container, 1750px); margin-left: auto; margin-right: auto; box-sizing: border-box; padding-left: var(--hl-gutter, 20px); padding-right: var(--hl-gutter, 20px); } .hl-account-page { padding-top: 32px; padding-bottom: 72px; } .hl-doc > * { max-width: 900px; } .hl-comm .hl-af { max-width: none; } /* Form fields: one height, aligned rows and columns. Hints sit under the field and never stretch the neighbours. */ .hl-af__grid { align-items: start; } .hl-af__field { align-content: start; } .hl-af__label { min-height: 18px; line-height: 18px; } .hl-af input.hl-af__input:not([type=checkbox]):not([type=radio]), .hl-af select.hl-af__input, .hl-lfilter select { height: 44px !important; min-height: 44px !important; padding: 0 12px !important; border: 1px solid #ccd0d5 !important; border-radius: 8px !important; background-color: #fff; font-size: 15px !important; box-sizing: border-box !important; box-shadow: none; } .hl-af input.hl-af__input[type=file] { padding: 0 6px !important; line-height: 42px; } .hl-af input.hl-af__input[type=file]::file-selector-button { height: 32px; margin: 5px 10px 5px 0; padding: 0 12px; border: 1px solid #ccd0d5; border-radius: 6px; background: #f4f5f7; cursor: pointer; } .hl-af textarea.hl-af__input { padding: 10px 12px !important; border: 1px solid #ccd0d5 !important; border-radius: 8px !important; font-size: 15px !important; line-height: 1.6; box-sizing: border-box !important; } .hl-af .hl-af__input:focus, .hl-lfilter select:focus { outline: 2px solid #16181d; outline-offset: 0; border-color: #16181d !important; } .hl-af button.hl-af__go, .hl-lfilter button.hl-btn { height: 44px; min-height: 44px; padding: 0 22px !important; border-radius: 8px !important; font-size: 15px !important; } .hl-lfilter select { max-width: 240px; } /* back-to-list links shown as buttons */ :is(.hl-biz, .hl-comm, .hl-acc) a.hl-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; margin-top: 0; padding: 0 20px; border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none; } a.hl-btn.hl-back { margin-top: 16px; } .hl-biz__form .hl-af__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1024px) { .hl-biz__form .hl-af__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .hl-biz__form .hl-af__grid { grid-template-columns: 1fr; } } /* ---------- 10-13: drag & drop file fields (assets/dropzone.js) ---------- */ .hl-drop { position: relative; display: flex; align-items: center; justify-content: center; min-height: 112px; padding: 18px; border: 2px dashed #c9ced6; border-radius: 12px; background: #fff; color: #646b7a; text-align: center; transition: border-color .15s, background .15s; box-sizing: border-box; } .hl-drop:hover { border-color: #8b93a1; background: #fafbfc; } .hl-drop.is-over { border-color: var(--hl-accent, #7a1f2b); background: #fbf3f4; color: var(--hl-accent, #7a1f2b); } .hl-drop.has-files { border-style: solid; border-color: #a9b0bb; } .hl-drop__face { display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; } .hl-drop__icon { display: inline-flex; color: inherit; } .hl-drop__text { font-size: 15px; font-weight: 600; color: inherit; } .hl-drop__count { font-size: 13px; color: #16181d; font-weight: 600; } .hl-drop__count:empty { display: none; } .hl-af .hl-drop input.hl-drop__input, .hl-drop input.hl-drop__input { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0; padding: 0 !important; border: 0 !important; opacity: 0; cursor: pointer; font-size: 0 !important; } .hl-drop__input:focus-visible { opacity: 0; } .hl-drop:focus-within { outline: 2px solid #16181d; outline-offset: 2px; } .hl-drop__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; } .hl-drop__list:empty { display: none; } .hl-drop__item { position: relative; display: flex; flex-direction: column; gap: 4px; width: 104px; } .hl-drop__item img, .hl-drop__file { width: 104px; height: 78px; object-fit: cover; border-radius: 8px; border: 1px solid #e4e7ec; display: flex; align-items: center; justify-content: center; background: #f4f5f7; font-size: 13px; font-weight: 700; color: #646b7a; } .hl-drop__name { font-size: 12px; color: #646b7a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hl-drop__item button.hl-drop__rm { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; min-height: 0; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #16181d !important; color: #fff !important; font-size: 16px !important; line-height: 24px; cursor: pointer; } .hl-drop__msg { margin: 6px 0 0; font-size: 13px; color: #b42318; } .hl-drop__msg:empty { display: none; } .hl-drop--jfb { min-height: 96px; margin-bottom: 8px; } .hl-biz__form .hl-biz__imgs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 16px; margin: 6px 0; } @media (max-width: 600px) { .hl-biz__form .hl-biz__imgs { grid-template-columns: 1fr; } } .hl-biz__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 8px; } .hl-biz__actions a.hl-btn { margin-top: 0; } .hl-biz__actions .hl-del { margin-left: auto; } /* the form carries its own back button; the page one is for the no-form states */ .hl-biz__register:has(.hl-biz__form) a.hl-back { display: none; } /* submit + back: same size, wider */ .hl-biz__actions { gap: 12px 32px; } .hl-biz__actions button.hl-af__go, .hl-biz__actions a.hl-btn { display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box !important; width: 180px; height: 48px !important; min-height: 48px; padding: 0 20px !important; border-radius: 8px !important; font-size: 16px !important; font-weight: 600; line-height: 1; } .hl-biz__actions a.hl-btn.hl-btn--line { border: 1px solid #16181d !important; color: #16181d !important; background: #fff !important; } @media (max-width: 600px) { .hl-biz__actions button.hl-af__go, .hl-biz__actions a.hl-btn { flex: 1 1 0; width: auto; } } /* .hl-btn carries margin-top: 10px (single.css) - it pushed the submit button down */ .hl-biz__actions { align-items: center; } .hl-biz__actions > button, .hl-biz__actions > a { margin: 0 !important; vertical-align: middle; } .hl-af__actions > button.hl-btn, .hl-af__actions > a.hl-btn { margin-top: 0 !important; } /* ---------- 10-13: form system (all .hl-af forms) ---------- One rhythm for every form: 16px between rows, 20px between columns, label 6px above its control, controls 44px, action buttons 48px in one row, centred on one line. Page-specific rules (e.g. .hl-biz__actions) only change widths. */ .hl-af { gap: 16px; padding: 20px 24px; } .hl-af__grid { gap: 16px 20px; } .hl-af__field { gap: 6px; } .hl-af__label { font-size: 13px; font-weight: 600; } .hl-af__hint { margin: 0; line-height: 1.45; } .hl-af__check { display: flex; align-items: center; gap: 10px; margin: 0; line-height: 1.5; } .hl-af__check input[type=checkbox], .hl-af__check input[type=radio] { width: 18px; height: 18px; margin: 0 !important; flex: 0 0 auto; } .hl-af__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 4px 0 0; } .hl-af__actions > button, .hl-af__actions > a.hl-btn { display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box !important; height: 48px !important; min-height: 48px; min-width: 140px; margin: 0 !important; padding: 0 22px !important; border-radius: 8px !important; font-size: 16px !important; font-weight: 600; line-height: 1; text-decoration: none; vertical-align: middle; } .hl-af__actions > a.hl-link, .hl-af__actions > .hl-link { display: inline-flex; align-items: center; height: 48px; } .hl-af__actions > .hl-del { margin-left: auto; } /* compact one-line forms: the button matches the 44px field next to it */ .hl-af--inline { align-items: end; } .hl-af--inline .hl-af__actions > button, .hl-af--inline > button { height: 44px !important; min-height: 44px; min-width: 0; } @media (max-width: 600px) { .hl-af { padding: 16px; } .hl-af__actions > button, .hl-af__actions > a.hl-btn { flex: 1 1 0; min-width: 0; } .hl-af__actions > .hl-del { margin-left: 0; flex-basis: 100%; justify-content: center; } } /* ---------- 10-13: log-in / sign-up (/login/, /signup/) ---------- */ .hl-auth { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); width: 100%; min-height: calc(100vh - 66px - var(--wp-admin--admin-bar--height, 0px)); background: #fff; } .hl-auth__art { position: relative; min-height: 520px; background-color: #DCE8E0; background-repeat: no-repeat; background-size: cover; background-position: center; } .hl-auth--day .hl-auth__art { background-image: url(auth/login.svg); } .hl-auth--night .hl-auth__art { background-color: #17233F; background-image: url(auth/signup.svg); } .hl-auth__art::after { content: ""; position: absolute; top: 0; right: -1px; width: 120px; height: 100%; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20800%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M120%2C0%20L58%2C0%20C20%2C90%2092%2C170%2064%2C270%20C38%2C360%206%2C420%2040%2C520%20C70%2C610%20104%2C680%2070%2C800%20L120%2C800%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E") no-repeat right center / 100% 100%; } .hl-auth__side { display: flex; align-items: center; justify-content: center; padding: 56px 32px; } .hl-auth__box { width: 100%; max-width: 420px; } h1.hl-auth__title { margin: 0 0 8px; font-size: 30px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: #16181d; } .hl-auth__lead { margin: 0 0 28px; color: #646b7a; font-size: 15px; line-height: 1.6; } .hl-auth .hl-notice { margin: 0 0 20px; } .hl-auth .hl-account { max-width: none; } .hl-auth .hl-af { margin: 0; padding: 0; gap: 16px; background: none; border-radius: 0; } .hl-auth .hl-af input.hl-af__input:not([type=checkbox]):not([type=radio]), .hl-auth .hl-af select.hl-af__input { height: 48px !important; min-height: 48px !important; border-radius: 10px !important; padding: 0 14px !important; } .hl-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .hl-auth__lost { font-size: 14px; color: #646b7a; text-decoration: none; } .hl-auth__lost:hover { color: #16181d; text-decoration: underline; } .hl-auth .hl-af__actions { margin-top: 8px; } .hl-auth .hl-af__actions > button.hl-af__go { width: 100%; height: 50px !important; min-height: 50px; border-radius: 10px !important; } .hl-auth--day .hl-af button.hl-af__go { background: #23463c !important; border-color: #23463c !important; } .hl-auth--day .hl-af button.hl-af__go:hover { background: #1a362e !important; } .hl-auth--night .hl-af button.hl-af__go { background: #7a1f2b !important; border-color: #7a1f2b !important; } .hl-auth--night .hl-af button.hl-af__go:hover { background: #631823 !important; } .hl-auth__switch, .hl-auth .hl-account__login { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid #e4e7ec; font-size: 15px; color: #646b7a; } .hl-auth__switch a, .hl-auth .hl-account__login a { color: #16181d; font-weight: 700; } .hl-auth .hl-account__privacy { margin: -6px 0 0; } @media (max-width: 860px) { .hl-auth { grid-template-columns: 1fr; min-height: 0; } .hl-auth__art { order: 2; min-height: 0; height: 320px; background-position: center 22%; } .hl-auth__art::after { top: -1px; right: 0; left: 0; width: 100%; height: 56px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20390%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C0%20L390%2C0%20L390%2C22%20C330%2C52%20270%2C8%20200%2C30%20C130%2C52%2070%2C14%200%2C40%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E") no-repeat center top / 100% 100%; } .hl-auth__side { padding: 32px 20px 36px; } h1.hl-auth__title { font-size: 26px; } } /* log-in / sign-up: no site header or footer; logo sits above the form */ body.hl-auth-page #crocoblocks-theme-builder-header, body.hl-auth-page #crocoblocks-theme-builder-footer { display: none !important; } body.hl-auth-page .hl-auth { min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); } .hl-auth__top { display: flex; align-items: center; justify-content: space-between; margin: 0 0 40px; } a.hl-auth__logo { font-weight: 800; font-size: 26px; color: #7a1f2b; text-decoration: none; letter-spacing: -.01em; } a.hl-auth__lang { padding: 6px 14px; border: 1px solid #d9dde3; border-radius: 999px; font-size: 14px; color: #3d434f; text-decoration: none; } a.hl-auth__lang:hover { background: #f4f5f7; } @media (max-width: 860px) { .hl-auth__top { margin-bottom: 28px; } a.hl-auth__logo { font-size: 22px; } } a.hl-auth__logo { display: inline-flex; align-items: center; line-height: 0; } .hl-auth__logo img, img.hl-auth__logoimg { display: block; height: 40px; width: auto; max-width: none; } @media (max-width: 860px) { .hl-auth__logo img, img.hl-auth__logoimg { height: 34px; } } .hl-auth__head h1.hl-auth__title { margin-top: 0; } /* ---------- 10-13: header + footer (theme templates 3 / 4) ---------- */ .hl-header .hl-header__inner { min-height: 68px; padding: 0 var(--hl-gutter, 20px); gap: 36px; flex-wrap: nowrap; } a.hl-header__logo { display: inline-flex; align-items: center; flex: none; line-height: 0; } .hl-header__logoimg { display: block; height: 34px; width: auto; max-width: none; } .hl-header__burger { display: none; } .hl-header__menu { display: flex; align-items: center; gap: 32px; flex: 1; min-width: 0; } .hl-header .hl-header__nav { display: flex; align-items: center; gap: 4px; flex: 1; order: 0; width: auto; } a.hl-header__link { position: relative; display: inline-flex; align-items: center; height: 68px; padding: 0 12px; color: #16181d; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; } a.hl-header__link:hover { color: #7a1f2b; } .hl-header__nav a.hl-header__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; } body.hl-sec-churches a.hl-header__link--churches, body.hl-sec-clergy a.hl-header__link--clergy, body.hl-sec-holy a.hl-header__link--holy, body.hl-sec-community a.hl-header__link--community, body.hl-sec-business a.hl-header__link--business { color: #7a1f2b; font-weight: 700; } body.hl-sec-churches a.hl-header__link--churches::after, body.hl-sec-clergy a.hl-header__link--clergy::after, body.hl-sec-holy a.hl-header__link--holy::after, body.hl-sec-community a.hl-header__link--community::after, body.hl-sec-business a.hl-header__link--business::after { background: #7a1f2b; } .hl-header .hl-header__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; } .hl-header__actions a.hl-header__link { height: 40px; padding: 0 10px; font-size: 14px; } a.hl-header__link--quiet { color: #646b7a; } body.hl-sec-account a.hl-header__link--account, body.hl-sec-manage a.hl-header__link--manage { color: #7a1f2b; } a.hl-header__cta { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; margin: 0 6px; border-radius: 8px; background: #7a1f2b; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; } a.hl-header__cta:hover { background: #631823; color: #fff; } a.hl-header__lang { display: inline-flex; align-items: center; height: 32px; margin-left: 6px; } @media (max-width: 1100px) { .hl-header .hl-header__inner { gap: 20px; } a.hl-header__link { padding: 0 8px; } } @media (max-width: 960px) { .hl-header .hl-header__inner { flex-wrap: wrap; min-height: 60px; padding: 0 16px; gap: 0; } .hl-header__logoimg { height: 28px; } a.hl-header__logo { height: 60px; } a.hl-header__burger { display: inline-flex; align-items: center; gap: 8px; height: 40px; margin-left: auto; padding: 0 14px; border: 1px solid #d9dde3; border-radius: 8px; color: #16181d; font-size: 14px; font-weight: 600; text-decoration: none; } a.hl-header__burger::before { content: ""; width: 16px; height: 12px; background: linear-gradient(#16181d 0 0) top / 100% 2px no-repeat, linear-gradient(#16181d 0 0) center / 100% 2px no-repeat, linear-gradient(#16181d 0 0) bottom / 100% 2px no-repeat; } .hl-header__menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 0 16px; border-top: 1px solid #e4e7ec; } .hl-header.is-open .hl-header__menu { display: flex; } .hl-header .hl-header__nav { flex-direction: column; align-items: stretch; gap: 0; } a.hl-header__link, .hl-header__actions a.hl-header__link { height: 48px; padding: 0 4px; font-size: 16px; border-bottom: 1px solid #f0f2f5; } .hl-header__nav a.hl-header__link::after { left: -16px; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; border-radius: 0 3px 3px 0; } .hl-header .hl-header__actions { flex-direction: column; align-items: stretch; gap: 0; margin: 0; } a.hl-header__cta { justify-content: center; height: 48px; margin: 14px 0 0; font-size: 16px; } a.hl-header__lang { align-self: flex-start; margin: 14px 0 0; } } .hl-footer .hl-footer__inner { gap: 20px 56px; padding: 40px var(--hl-gutter, 20px); } .hl-footer__brand { display: flex; flex-direction: column; gap: 8px; } .hl-footer__logoimg { display: block; height: 26px; width: auto; max-width: none; } .hl-footer .hl-footer__tag { margin: 0; } .hl-footer .hl-footer__nav { flex-wrap: wrap; gap: 10px 24px; align-items: center; } @media (max-width: 760px) { .hl-footer .hl-footer__nav { flex-direction: column; align-items: flex-start; } } .hl-header a.hl-header__lang { height: 32px; padding: 0 12px; box-sizing: border-box; line-height: 1; font-size: 13px; } /* ---------- 10-13 (2): header 72px (= the directory filter bar), centred menu, icon actions ---------- */ .hl-header .hl-header__inner { min-height: 72px; } .hl-header__logoimg { height: 44px; } .hl-header a.hl-header__link--icon::before { content: ""; display: block; width: 22px; height: 22px; flex: none; background: currentColor; -webkit-mask: var(--hl-ico) center / contain no-repeat; mask: var(--hl-ico) center / contain no-repeat; } .hl-ico-login { --hl-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203h4a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202h-4%22%2F%3E%3Cpath%20d%3D%22M3%2012h11%22%2F%3E%3Cpath%20d%3D%22M10%208l4%204-4%204%22%2F%3E%3C%2Fsvg%3E"); } .hl-ico-account { --hl-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021c0-4.4%203.6-7%208-7s8%202.6%208%207%22%2F%3E%3C%2Fsvg%3E"); } .hl-ico-logout { --hl-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%203H6a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h4%22%2F%3E%3Cpath%20d%3D%22M10%2012h11%22%2F%3E%3Cpath%20d%3D%22M17%208l4%204-4%204%22%2F%3E%3C%2Fsvg%3E"); } @media (min-width: 961px) { .hl-header .hl-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; } .hl-header__menu { display: contents; } .hl-header .hl-header__nav { grid-column: 2; justify-content: center; flex: none; } a.hl-header__link { height: 72px; } .hl-header .hl-header__actions { grid-column: 3; justify-self: end; margin: 0; gap: 4px; } .hl-header__actions a.hl-header__link--icon { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 50%; color: #3d434f; } .hl-header__actions a.hl-header__link--icon:hover { background: #f4f5f7; color: #7a1f2b; } .hl-header__actions a.hl-header__link--icon span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } body.hl-sec-account .hl-header__actions a.hl-header__link--account { background: #f6eef0; color: #7a1f2b; } } @media (max-width: 960px) { .hl-header .hl-header__inner { min-height: 64px; } .hl-header__logoimg { height: 34px; } a.hl-header__logo { height: 64px; } .hl-header__actions a.hl-header__link--icon { gap: 12px; } .hl-header__actions a.hl-header__link--icon::before { width: 20px; height: 20px; } } /* ---------- 10-13: MapLibre map (assets/map-ml.js) ---------- */ .hl-map { position: relative; overflow: hidden; background: #eef1ee; } .hl-map .hl-map__canvas { position: absolute; inset: 0; } .hl-map .maplibregl-canvas:focus { outline: none; } /* controls, top right: white rounded stacks like the reference */ .hl-map__ctrl { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; flex-direction: column; gap: 8px; } .hl-map__group { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e4e7ec; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .08); } .hl-map button.hl-map__btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; color: #16181d !important; cursor: pointer; box-shadow: none; } .hl-map button.hl-map__btn + button.hl-map__btn { border-top: 1px solid #eef0f3 !important; } .hl-map button.hl-map__btn:hover { background: #f4f5f7 !important; } .hl-map button.hl-map__btn:focus-visible { outline: 2px solid #16181d; outline-offset: -2px; } .hl-map button.hl-map__btn.is-busy { opacity: .5; cursor: progress; } .hl-map__needle { position: relative; display: block; width: 10px; height: 20px; transition: transform .1s; } .hl-map__needle i { position: absolute; left: 0; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; } .hl-map__needle i:first-child { top: 0; border-bottom: 10px solid #d92d20; } .hl-map__needle i:last-child { bottom: 0; border-top: 10px solid #c4c9d1; } /* map style select, top left */ .hl-map select.hl-map__style { position: absolute; top: 12px; left: 12px; z-index: 2; height: 36px; min-height: 36px; padding: 0 30px 0 12px; border: 1px solid #e4e7ec; border-radius: 10px; background-color: #fff; color: #16181d; font-size: 14px; box-shadow: 0 1px 3px rgba(16, 24, 40, .08); cursor: pointer; max-width: 140px; } /* attribution: the round (i) button, bottom right */ .hl-map .maplibregl-ctrl-attrib.maplibregl-compact { margin: 0 10px 10px 0; border-radius: 12px; background: rgba(255, 255, 255, .9); font-size: 11px; } .hl-map .maplibregl-ctrl-attrib a { color: #3d434f; } /* markers */ .hl-map__pin { cursor: pointer; line-height: 0; transition: transform .12s; transform-origin: 50% 100%; } .hl-map__pin svg path { fill: #b4232b; } .hl-map__pin.is-active { z-index: 5; transform: scale(1.2); } .hl-map__pin.is-active svg path { fill: #111827; } .hl-map__dot { width: 14px; height: 14px; border-radius: 50%; background: #b4232b; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); cursor: pointer; transition: transform .12s, background .12s; } .hl-map__dot.is-active { z-index: 5; background: #111827; transform: scale(1.4); } .hl-map__cluster { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(180, 35, 43, .9); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 0 0 5px rgba(180, 35, 43, .22); cursor: pointer; transition: background .12s, box-shadow .12s; } .hl-map__cluster.is-mid { width: 40px; height: 40px; } .hl-map__cluster.is-big { width: 46px; height: 46px; font-size: 14px; } .hl-map__cluster.is-active { z-index: 5; background: #111827; box-shadow: 0 0 0 5px rgba(17, 24, 39, .25); } .hl-map__me { width: 16px; height: 16px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(26, 115, 232, .2), 0 1px 3px rgba(0, 0, 0, .3); } /* popup */ .hl-map .maplibregl-popup-content { padding: 0; border-radius: 12px; box-shadow: 0 8px 24px rgba(16, 24, 40, .16); overflow: hidden; } .hl-map .maplibregl-popup-close-button { width: 26px; height: 26px; top: 4px; right: 4px; border-radius: 50%; background: rgba(255, 255, 255, .9) !important; color: #16181d !important; font-size: 18px; line-height: 24px; padding: 0 !important; border: 0 !important; } .hl-map .hl-map__info { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; min-width: 200px; font-size: 13px; line-height: 1.45; } .hl-map .hl-map__info-img { display: block; width: calc(100% + 28px); max-width: none; height: 110px; margin: -12px -14px 8px; object-fit: cover; } .hl-map .hl-map__info strong { font-size: 14px; color: #16181d; padding-right: 18px; } .hl-map .hl-map__info span { color: #646b7a; } .hl-map .hl-map__info a { margin-top: 6px; font-weight: 600; color: #7a1f2b; } /* iPhone (no Fullscreen API): CSS full screen */ .hl-map.is-full { position: fixed !important; inset: 0; z-index: 99999; height: auto !important; } .hl-map:fullscreen { width: 100%; height: 100% !important; } /* marker root is moved by MapLibre (inline transform): keep it plain; z-order for the active one */ .hl-map .hl-map__mk { cursor: pointer; line-height: 0; } .hl-map .hl-map__mk:focus-visible { outline: none; } .hl-map .hl-map__mk:focus-visible > * { outline: 2px solid #16181d; outline-offset: 2px; } .hl-map .maplibregl-marker:has(.is-active) { z-index: 5; } /* ---------- 10-13: church filters = chips + search dialog ---------- */ .hl-dir .hl-dir__map .hl-locate, .hl-dir .hl-locate__msg { display: none !important; } /* the map has its own 내 위치 button */ form.hl-filters--chips { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; width: 100%; } .hl-fchips { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; } .hl-fchips::-webkit-scrollbar { display: none; } a.hl-fchip { display: inline-flex; align-items: center; flex: none; height: 38px; padding: 0 16px; border: 1px solid #d9dde3; border-radius: 999px; background: #fff; color: #2d3340; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; } a.hl-fchip:hover { border-color: #9aa1ad; color: #16181d; } a.hl-fchip.is-active { border-color: #7a1f2b; box-shadow: inset 0 0 0 1px #7a1f2b; color: #7a1f2b; font-weight: 700; } .hl-filters button.hl-fopen { position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none; height: 38px; padding: 0 18px !important; border: 0 !important; border-radius: 999px !important; background: #16181d !important; color: #fff !important; font-size: 14px !important; font-weight: 600; cursor: pointer; white-space: nowrap; } .hl-filters button.hl-fopen:hover { background: #000 !important; } .hl-fopen svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .hl-fopen__n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #fff; color: #16181d; font-size: 12px; } dialog.hl-fdialog { width: min(440px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px; box-shadow: 0 24px 64px rgba(16, 24, 40, .24); color: #16181d; } dialog.hl-fdialog::backdrop { background: rgba(16, 24, 40, .45); } .hl-fdialog__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 8px; } .hl-fdialog__head h2 { margin: 0; font-size: 20px; font-weight: 700; } .hl-fdialog button.hl-fdialog__x { width: 36px; height: 36px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: #16181d !important; font-size: 26px !important; line-height: 1; cursor: pointer; } .hl-fdialog button.hl-fdialog__x:hover { background: #f4f5f7 !important; } .hl-fdialog__body { display: grid; gap: 16px; padding: 12px 24px 20px; } .hl-ffield { display: grid; gap: 6px; margin: 0; } .hl-ffield > span { font-size: 13px; font-weight: 600; } .hl-ffield input, .hl-ffield select { box-sizing: border-box; width: 100%; height: 48px !important; min-height: 48px; padding: 0 14px !important; border: 1px solid #ccd0d5 !important; border-radius: 10px !important; background-color: #fff; font-size: 15px !important; color: #16181d; } .hl-ffield input:focus, .hl-ffield select:focus { outline: 2px solid #16181d; outline-offset: 0; border-color: #16181d !important; } .hl-fdialog__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px 20px; border-top: 1px solid #eef0f3; } a.hl-freset { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border: 1px solid #d9dde3; border-radius: 999px; color: #16181d; font-size: 15px; font-weight: 600; text-decoration: none; } a.hl-freset:hover { background: #f4f5f7; } .hl-fdialog button.hl-fsubmit { height: 44px; min-width: 120px; padding: 0 24px !important; border: 0 !important; border-radius: 999px !important; background: #7a1f2b !important; color: #fff !important; font-size: 15px !important; font-weight: 700; cursor: pointer; } .hl-fdialog button.hl-fsubmit:hover { background: #631823 !important; } @media (max-width: 767px) { dialog.hl-fdialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 16px 16px 0 0; } .hl-filters button.hl-fopen span { display: none; } .hl-filters button.hl-fopen { width: 38px; padding: 0 !important; justify-content: center; } .hl-fopen__n { position: absolute; top: -6px; right: -6px; } } /* 10-13: 지도 이동 시 검색 toggle sits bottom-left, clear of the map controls */ .hl-dir .hl-area { top: auto; right: auto; bottom: 12px; left: 12px; } .hl-dir .hl-area__btn { top: 12px; } @media (max-width: 420px) { .hl-dir .hl-area__btn { top: 56px; } } /* 10-13: filter bar sits on top of the list column (right), not across the page */ .hl-dir { --hl-toolbar: 0px; } .hl-dir__split { margin-top: 20px; } .hl-dir__side { min-width: 0; } .hl-dir .hl-dir__side .hl-dir__toolbar { position: sticky; top: var(--hl-top); z-index: 30; margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid var(--hl-line); background: #fff; } @media (max-width: 1023px) { .hl-dir .hl-dir__side .hl-dir__toolbar { position: static; } .hl-dir--map .hl-dir__side { order: -1; } } /* ---------- 10-13: holy site detail (/holy-sites//) — photo + text left, facts right ---------- */ .hl-hsd-page { max-width: 1200px; margin: 0 auto; } .hl-hsd { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; padding-top: 32px; } .hl-hsd__main { min-width: 0; } .hl-hsd img.hl-hsd__photo { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 8px; } .hl-hsd__credit { margin-top: 8px; text-align: right; font-size: 13px; color: #7b8494; } .hl-hsd h2.hl-hsd__h { display: flex; align-items: center; gap: 10px; margin: 36px 0 16px; font-size: 24px; font-weight: 800; line-height: 1.3; color: #16181d; } .hl-hsd h2.hl-hsd__h::before { content: ""; width: 30px; height: 30px; flex: none; background: #b4232b; -webkit-mask: var(--hl-church-ico) center / contain no-repeat; mask: var(--hl-church-ico) center / contain no-repeat; } .hl-hsd { --hl-church-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M464.46 246.68L352 179.2V128h48c8.84 0 16-7.16 16-16V80c0-8.84-7.16-16-16-16h-48V16c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v48h-48c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h48v51.2l-112.46 67.48A32 32 0 0 0 160 274.12V512h96v-96c0-35.35 28.65-64 64-64s64 28.65 64 64v96h96V274.12c0-11.24-5.9-21.66-15.54-27.44zM0 395.96V496c0 8.84 7.16 16 16 16h112V320L19.39 366.54A32 32 0 0 0 0 395.96zm620.61-29.42L512 320v192h112c8.84 0 16-7.16 16-16V395.96c0-12.8-7.63-24.37-19.39-29.42z'/%3E%3C/svg%3E"); } .hl-hsd__intro { font-size: 16px; line-height: 1.85; color: #3d434f; word-break: keep-all; } .hl-hsd__side { position: sticky; top: calc(var(--hl-top, 0px) + 24px); display: flex; flex-direction: column; } .admin-bar .hl-hsd__side { --hl-top: 32px; } .hl-hsd__cat { align-self: flex-start; margin-bottom: 12px; padding: 4px 10px; border-radius: 999px; background: #f6e9ea; color: #7a1f2b; font-size: 13px; font-weight: 700; } .hl-hsd h1.hl-hsd__title { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: #16181d; word-break: keep-all; } .hl-hsd p.hl-hsd__alt { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: #646b7a; } .hl-hsd__facts { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; padding-top: 24px; border-top: 1px solid #e4e7ec; } .hl-hsd__row { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.55; color: #3d434f; } .hl-hsd__row a { color: #3d434f; } .hl-hsd__k { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #b4232b; } .hl-hsd__btns { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; padding-top: 24px; border-top: 1px solid #e4e7ec; } .hl-hsd__btns a.hl-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin: 0; } .hl-hsd__map { margin-top: 24px; border: 1px solid #e4e7ec; border-radius: 10px; overflow: hidden; } .hl-hsd__map select.hl-map__style { display: none; } .hl-hsd-page .hl-back { margin-top: 48px; } .hl-hsd *, .hl-hsd *::before { box-sizing: border-box; } @media (max-width: 960px) { .hl-hsd { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 20px; } .hl-hsd__cat { align-self: flex-start; } .hl-hsd__main, .hl-hsd__side { display: contents; } .hl-hsd__cat { order: 1; } .hl-hsd h1.hl-hsd__title { order: 2; font-size: 28px; } .hl-hsd p.hl-hsd__alt { order: 3; } .hl-hsd img.hl-hsd__photo { order: 4; margin-top: 20px; } .hl-hsd__credit { order: 5; } .hl-hsd__facts { order: 6; margin-top: 16px; padding-top: 0; border-top: 0; } .hl-hsd__btns { order: 7; flex-direction: row; margin-top: 20px; padding-top: 0; border-top: 0; } .hl-hsd__btns a.hl-btn { flex: 1; } .hl-hsd h2.hl-hsd__h { order: 8; margin-top: 32px; } .hl-hsd__intro { order: 9; } .hl-hsd__map { order: 10; margin-top: 28px; } } /* ---------- 10-13: filled buttons use the logo colour (was burgundy #7a1f2b) ---------- */ :root { --hl-brand: #ed1262; --hl-brand-dark: #c80e51; } a.hl-btn:not(.hl-btn--line):not(.hl-btn--ghost) { background: var(--hl-brand); border-color: var(--hl-brand); color: #fff; } a.hl-btn:not(.hl-btn--line):not(.hl-btn--ghost):hover { background: var(--hl-brand-dark); border-color: var(--hl-brand-dark); color: #fff; } a.hl-header__cta, .hl-fdialog button.hl-fsubmit, .hl-auth--night .hl-af button.hl-af__go { background: var(--hl-brand) !important; border-color: var(--hl-brand) !important; color: #fff !important; } a.hl-header__cta:hover, .hl-fdialog button.hl-fsubmit:hover, .hl-auth--night .hl-af button.hl-af__go:hover { background: var(--hl-brand-dark) !important; border-color: var(--hl-brand-dark) !important; } body.hl-bcat-all .hl-bcat--all, body.hl-bcat-sharing .hl-bcat--sharing, body.hl-bcat-question .hl-bcat--question, body.hl-bcat-market .hl-bcat--market, body.hl-bcat-etc .hl-bcat--etc { background: var(--hl-brand); border-color: var(--hl-brand); color: #fff; } /* ---------- 10-13: listing filter row (/business/, /holy-sites/) — one 44px line ---------- */ .hl-biz__bar { align-items: center; } .hl-lfilter { align-items: center; gap: 8px; } .hl-lfilter select, .hl-lfilter .hl-btn, .hl-biz__bar > a.hl-btn { height: 44px !important; min-height: 44px !important; margin: 0 !important; box-sizing: border-box !important; vertical-align: middle; } .hl-lfilter .hl-btn, .hl-biz__bar > a.hl-btn { display: inline-flex !important; align-items: center; justify-content: center; padding: 0 20px !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; } .hl-lfilter a.hl-btn.hl-btn--line { border: 1px solid #ccd0d5 !important; background: #fff !important; color: #16181d !important; } .hl-lfilter a.hl-btn.hl-btn--line:hover { border-color: #16181d !important; } /* ---------- 10-13: /business/ list = cards (3 across) + right column kept for an ad ---------- */ .hl-biz__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; margin-top: 24px; } .hl-biz__main { min-width: 0; } .hl-ad--side { position: sticky; top: 24px; width: 300px; min-height: 600px; } .admin-bar .hl-ad--side { top: 56px; } .hl-ad--side:empty { border-radius: 10px; } .admin-bar .hl-ad--side:empty { display: flex; align-items: center; justify-content: center; border: 2px dashed #d9dde3; color: #9aa1ad; font-size: 14px; } .admin-bar .hl-ad--side:empty::before { content: "광고 자리 300 × 600"; } @media (max-width: 1100px) { .hl-biz__body { grid-template-columns: minmax(0, 1fr); } .hl-ad--side { position: static; width: 100%; min-height: 0; } .hl-ad--side:empty, .admin-bar .hl-ad--side:empty { display: none; } } .hl-ad--side { min-height: 0; } .hl-ad a.hl-ad__link { display: block; border-radius: 10px; overflow: hidden; line-height: 0; } .hl-ad img.hl-ad__img { display: block; width: 300px; max-width: 100%; height: auto; } @media (max-width: 1100px) { .hl-ad--side { display: flex; justify-content: center; } } /* ---------- 10-13: /business/ home (featured + recent) and /business/list/ (featured cards + plain rows) ---------- */ .hl-biz__bar--home { align-items: flex-start; } .hl-biz__cats { flex: 1 1 auto; min-width: 0; } .hl-bcats { display: flex; flex-wrap: wrap; gap: 8px; } a.hl-bcat-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid #d9dde3; border-radius: 999px; background: #fff; color: #2d3340; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; } a.hl-bcat-chip b { font-size: 12px; font-weight: 700; color: #ed1262; } a.hl-bcat-chip:hover { border-color: #ed1262; color: #16181d; } a.hl-bcat-chip.is-empty { color: #9aa1ad; } .hl-biz__sec + .hl-biz__sec, .hl-biz__sec + .hl-brows { margin-top: 36px; } .hl-biz h2.hl-biz__sech { margin: 0 0 16px; font-size: 22px; font-weight: 800; color: #16181d; } .hl-biz__card { position: relative; } .hl-biz__card.is-premium { border-color: #f5b5cc; box-shadow: 0 2px 10px rgba(237, 18, 98, .08); } .hl-biz__badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: #ed1262; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; } .hl-biz__card .hl-biz__badge { position: absolute; top: 12px; left: 12px; z-index: 2; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); } .hl-biz__badge--inline { align-self: flex-start; margin-bottom: 6px; } .hl-biz__more { display: flex; justify-content: center; margin-top: 32px; } .hl-biz__more a.hl-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; min-width: 220px; padding: 0 28px; margin: 0; border-radius: 8px; font-weight: 600; } /* plain rows */ .hl-brows { margin-top: 8px; border-top: 1px solid #e4e7ec; } .hl-biz__sec + .hl-brows { margin-top: 32px; } a.hl-brow { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 8px; border-bottom: 1px solid #e4e7ec; color: #3d434f; font-size: 15px; text-decoration: none; } a.hl-brow:hover { background: #f8f9fb; } .hl-brow__nm { display: flex; flex-direction: column; min-width: 0; } .hl-brow__name { color: #16181d; font-weight: 700; } .hl-brow__alt { font-size: 13px; color: #7b8494; } .hl-brow__cat { font-size: 14px; color: #646b7a; } .hl-brow__phone { text-align: right; font-variant-numeric: tabular-nums; } @media (max-width: 700px) { a.hl-brow { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; } .hl-brow__nm { grid-column: 1 / -1; } .hl-brow__cat, .hl-brow__place { font-size: 13px; } .hl-brow__phone { grid-column: 1 / -1; text-align: left; font-size: 14px; } } /* 10-13: featured / recent cards 5 across — tighter text */ .hl-biz__sec .hl-biz__cbody { padding: 12px 14px 14px; } .hl-biz__sec .hl-biz__name { font-size: 15.5px; line-height: 1.35; } .hl-biz__sec .hl-biz__alt, .hl-biz__sec .hl-biz__place { font-size: 13px; } .hl-biz__sec .hl-biz__snip { font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hl-biz__sec .hl-biz__card .hl-biz__badge { top: 8px; left: 8px; height: 22px; padding: 0 8px; font-size: 11.5px; } /* 10-13: category chips on the business home — one line, swipe / scroll sideways */ .hl-biz__bar--home { flex-wrap: nowrap; align-items: center; } .hl-biz__bar--home .hl-biz__cats { flex: 1 1 auto; min-width: 0; } .hl-bcats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); } .hl-bcats::-webkit-scrollbar { display: none; } .hl-bcats a.hl-bcat-chip { flex: none; } .hl-bcats a.hl-bcat-chip:last-child { margin-right: 32px; } .hl-biz__bar--home > a.hl-btn { flex: none; } @media (max-width: 700px) { .hl-biz__bar--home { flex-wrap: wrap; } .hl-biz__bar--home .hl-biz__cats { flex-basis: 100%; } } /* 10-13: chips a bit smaller so all 19 fit next to the button on a normal desktop; space before the button */ .hl-biz__bar--home { gap: 24px; } .hl-bcats { gap: 6px; } .hl-bcats a.hl-bcat-chip { height: 34px; padding: 0 11px; font-size: 13.5px; gap: 4px; } .hl-bcats a.hl-bcat-chip:last-child { margin-right: 24px; } /* 10-13: register page — "고치기" and "업소 삭제" as buttons */ .hl-biz__mrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .hl-biz__mrow a.hl-btn.hl-biz__medit { display: inline-flex !important; align-items: center; justify-content: center; height: 36px !important; min-height: 36px; margin: 0 0 0 auto !important; padding: 0 16px !important; border: 1px solid #16181d !important; border-radius: 8px !important; background: #fff !important; color: #16181d !important; font-size: 14px !important; font-weight: 600; text-decoration: none; line-height: 1; } .hl-biz__mrow a.hl-btn.hl-biz__medit:hover { background: #16181d !important; color: #fff !important; } .hl-biz__actions a.hl-btn.hl-btn--danger { flex: 0 0 auto; width: 140px; margin-left: auto !important; border: 1px solid #d92d20 !important; background: #fff !important; color: #d92d20 !important; } .hl-biz__actions a.hl-btn.hl-btn--danger:hover { background: #d92d20 !important; color: #fff !important; } /* 10-13: "고치기" sits right after the name and place, not at the far edge */ .hl-biz__mrow { justify-content: flex-start; gap: 12px 16px; } .hl-biz__mrow a.hl-btn.hl-biz__medit { margin: 0 0 0 8px !important; } /* ========================================================================== 10-13: home page (page 10) — hero, feature cards over the hero, sections ========================================================================== */ .hl-homepage { --hl-home-w: 1400px; padding-bottom: 0; color: #2d3340; } .hl-homepage *, .hl-homepage *::before { box-sizing: border-box; } /* hero */ .hl-hero { position: relative; display: flex; align-items: center; min-height: 600px; overflow: hidden; background: #1b1d22; } .hl-hero img.hl-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 40%; } .hl-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16, 12, 20, .82) 0%, rgba(16, 12, 20, .55) 45%, rgba(16, 12, 20, .15) 100%), linear-gradient(0deg, rgba(16, 12, 20, .45), transparent 40%); } .hl-hero__in { position: relative; z-index: 1; width: 100%; max-width: var(--hl-home-w); margin: 0 auto; padding: 72px 24px 150px; color: #fff; } .hl-hero p.hl-hero__kicker { margin: 0 0 14px; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ff8fb5; } .hl-hero h1.hl-hero__title { max-width: 720px; margin: 0; font-size: 52px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #fff; word-break: keep-all; } .hl-hero p.hl-hero__sub { max-width: 600px; margin: 18px 0 0; font-size: 18px; line-height: 1.65; color: rgba(255, 255, 255, .86); word-break: keep-all; } .hl-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .hl-hero a.hl-btn.hl-hero__btn { display: inline-flex !important; align-items: center; justify-content: center; height: 52px; min-width: 170px; margin: 0 !important; padding: 0 28px !important; border-radius: 999px !important; font-size: 16px !important; font-weight: 700; text-decoration: none; } .hl-hero a.hl-btn.hl-hero__btn--ghost { border: 1.5px solid rgba(255, 255, 255, .8) !important; background: transparent !important; color: #fff !important; } .hl-hero a.hl-btn.hl-hero__btn--ghost:hover { background: #fff !important; color: #16181d !important; } /* feature cards, pulled up over the hero */ .hl-feats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; max-width: var(--hl-home-w); margin: -100px auto 0; padding: 0 24px; } a.hl-feat { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 10px 30px rgba(16, 24, 40, .14); transition: transform .15s, box-shadow .15s; } a.hl-feat:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(16, 24, 40, .2); } .hl-feat img.hl-feat__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; } .hl-feat__body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; } .hl-feat h3.hl-feat__title { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.35; color: #16181d; word-break: keep-all; } .hl-feat p.hl-feat__sub { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: #646b7a; } .hl-feat__go { margin-top: auto; padding-top: 12px; font-size: 13.5px; font-weight: 700; color: #ed1262; } /* sections */ .hl-hsec { max-width: var(--hl-home-w); margin: 80px auto 0; padding: 0 24px; } .hl-hsec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .hl-homepage h2.hl-hsec__title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.01em; color: #16181d; } a.hl-hsec__more { flex: none; font-size: 14px; font-weight: 700; color: #ed1262; text-decoration: none; } a.hl-hsec__more:hover { text-decoration: underline; } /* Vatican News */ .hl-vnews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } a.hl-vnews__item { display: flex; flex-direction: column; color: inherit; text-decoration: none; } .hl-vnews__img { display: block; overflow: hidden; border-radius: 12px; background: #eef0f3; aspect-ratio: 16 / 9; } .hl-vnews__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } a.hl-vnews__item:hover .hl-vnews__img img { transform: scale(1.04); } .hl-vnews__body { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; } .hl-vnews__title { font-size: 17px; font-weight: 700; line-height: 1.4; color: #16181d; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; } a.hl-vnews__item:hover .hl-vnews__title { text-decoration: underline; } .hl-vnews__text { font-size: 14px; line-height: 1.6; color: #646b7a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hl-vnews__date { font-size: 12.5px; color: #9aa1ad; } /* community (left) + businesses (right) */ .hl-hsec-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; max-width: var(--hl-home-w); margin: 80px auto 0; padding: 0 24px; } .hl-hsec-two > .hl-hsec { margin: 0; padding: 0; max-width: none; } .hl-hsec-two [data-id="hm_biz_p"] > .cb-collection__items, .hl-hsec-two [data-id="hm_biz_r"] > .cb-collection__items { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .hl-hsec--comm .hl-comm__row { border-radius: 0; } /* register band */ .hl-regband { margin-top: 96px; background: linear-gradient(120deg, #c80e51 0%, #ed1262 55%, #ff5f8f 100%); color: #fff; } .hl-regband__in { max-width: 900px; margin: 0 auto; padding: 64px 24px; text-align: center; } .hl-homepage h2.hl-regband__title { margin: 0; font-size: 32px; font-weight: 800; line-height: 1.25; color: #fff; word-break: keep-all; } .hl-homepage p.hl-regband__text { margin: 14px auto 0; max-width: 640px; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .92); word-break: keep-all; } .hl-homepage a.hl-btn.hl-regband__btn { display: inline-flex !important; align-items: center; justify-content: center; height: 52px; margin: 28px 0 0 !important; padding: 0 32px !important; border-radius: 999px !important; background: #fff !important; border-color: #fff !important; color: #c80e51 !important; font-size: 16px !important; font-weight: 800; text-decoration: none; } .hl-homepage a.hl-btn.hl-regband__btn:hover { background: #16181d !important; border-color: #16181d !important; color: #fff !important; } /* home: footer sits right under the band */ body.hl-home .hl-footer { margin-top: 0; } @media (max-width: 1200px) { .hl-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hl-hsec-two { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .hl-hero { min-height: 520px; } .hl-hero__in { padding: 56px 20px 120px; } .hl-hero h1.hl-hero__title { font-size: 34px; } .hl-hero p.hl-hero__sub { font-size: 16px; } .hl-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: -80px; padding: 0 16px; } a.hl-feat:last-child { grid-column: 1 / -1; } .hl-feat__body { padding: 12px 14px 14px; } .hl-feat h3.hl-feat__title { font-size: 15px; } .hl-feat p.hl-feat__sub { display: none; } .hl-hsec, .hl-hsec-two { margin-top: 56px; padding: 0 16px; } .hl-vnews { grid-template-columns: minmax(0, 1fr); gap: 20px; } .hl-hsec-two [data-id="hm_biz_p"] > .cb-collection__items, .hl-hsec-two [data-id="hm_biz_r"] > .cb-collection__items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .hl-homepage h2.hl-hsec__title { font-size: 22px; } .hl-homepage h2.hl-regband__title { font-size: 24px; } } /* ---------- 10-13: video catechism (/videos/) + pop-up player ---------- */ .hl-vids { max-width: var(--hl-container, 1400px); margin: 0 auto; padding: 0 20px 64px; } .hl-vids__grid { margin-top: 24px; } a.hl-vid { display: flex; flex-direction: column; color: inherit; text-decoration: none; } .hl-vid__thumb { position: relative; overflow: hidden; border-radius: 12px; background: #111; aspect-ratio: 16 / 9; } .hl-vid__thumb img.hl-vid__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s, opacity .2s; } a.hl-vid:hover .hl-vid__img { transform: scale(1.04); opacity: .85; } .hl-vid__play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(237, 18, 98, .92); box-shadow: 0 4px 16px rgba(0, 0, 0, .3); transition: transform .15s; } .hl-vid__play::after { content: ""; position: absolute; left: 23px; top: 18px; border-left: 17px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; } a.hl-vid:hover .hl-vid__play { transform: scale(1.1); } .hl-vid__body { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; } .hl-vid__ep { font-size: 12.5px; font-weight: 700; color: #ed1262; } .hl-vid__title { font-size: 16px; font-weight: 700; line-height: 1.4; color: #16181d; word-break: keep-all; } .hl-vids__src { margin-top: 32px; font-size: 13px; color: #7b8494; } dialog.hl-vplayer { width: min(1000px, 94vw); max-width: none; padding: 0; border: 0; background: transparent; overflow: visible; } dialog.hl-vplayer::backdrop { background: rgba(10, 10, 14, .82); } .hl-vplayer__box { position: relative; } .hl-vplayer__frame { aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; } .hl-vplayer__frame iframe { display: block; width: 100%; height: 100%; border: 0; } button.hl-vplayer__x { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, .15) !important; color: #fff !important; font-size: 24px !important; line-height: 1; cursor: pointer; } button.hl-vplayer__x:hover { background: rgba(255, 255, 255, .3) !important; } /* ---------- 10-13: Catholic saints (/saints/) ---------- */ .hl-saints { max-width: var(--hl-container, 1400px); margin: 0 auto; padding: 0 20px 64px; } .hl-stoday { margin: 20px 0 28px; padding: 20px 22px 22px; border-radius: 14px; background: linear-gradient(120deg, #fff4f8, #fdf8ee); border: 1px solid #f6d3e1; } .hl-saints h2.hl-stoday__h { margin: 0 0 14px; font-size: 20px; font-weight: 800; color: #c80e51; } .hl-saints__filters { margin: 8px 0 20px; } .hl-sfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; } .hl-sfilter .hl-smonths { flex: 1 1 520px; min-width: 0; } a.hl-bcat-chip.is-on { border-color: #ed1262; background: #ed1262; color: #fff; font-weight: 700; } .hl-ssearch { flex: 0 1 auto; } .hl-ssearch input[type=search] { width: 220px; height: 44px; padding: 0 14px; border: 1px solid #ccd0d5; border-radius: 8px; font-size: 15px; box-sizing: border-box; } .hl-scard { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 18px; border: 1px solid #e4e7ec; border-radius: 12px; background: #fff; } .hl-stoday .hl-scard { border-color: #f6d3e1; } .hl-scard__top { margin-bottom: 2px; } .hl-scard__feast { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: #f6e9ee; color: #c80e51; font-size: 12.5px; font-weight: 700; } .hl-scard__name { font-size: 17px; font-weight: 800; line-height: 1.35; color: #16181d; word-break: keep-all; } .hl-scard__alt { font-size: 13.5px; color: #7b8494; } .hl-scard__kind { font-size: 13.5px; color: #3d434f; } a.hl-scard__more { margin-top: auto; padding-top: 10px; font-size: 13.5px; font-weight: 700; color: #ed1262; text-decoration: none; } a.hl-scard__more:hover { text-decoration: underline; } .hl-saints__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 36px; padding-top: 20px; border-top: 1px solid #e4e7ec; } .hl-saints__note { margin: 0; font-size: 13px; color: #7b8494; } .hl-saints a.hl-btn.hl-saints__gnall { display: inline-flex; align-items: center; height: 44px; margin: 0; padding: 0 18px; border-radius: 8px; } @media (max-width: 700px) { .hl-ssearch, .hl-ssearch input[type=search] { width: 100%; } .hl-ssearch { display: flex; gap: 8px; } } /* ========================================================================== 10-13 (2): "신앙생활" dropdown · home header over the hero · full-screen hero · colour blocks ========================================================================== */ .hl-header__dd { position: relative; display: flex; align-items: center; } a.hl-header__ddbtn::before { content: ""; order: 2; width: 7px; height: 7px; margin: -3px 0 0 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); } .hl-header__ddmenu { position: absolute; top: calc(100% - 8px); left: 50%; z-index: 60; display: flex; flex-direction: column; min-width: 180px; padding: 8px; border: 1px solid #e4e7ec; border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(16, 24, 40, .14); transform: translate(-50%, 6px); opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s, visibility .15s; } .hl-header__dd:hover .hl-header__ddmenu, .hl-header__dd:focus-within .hl-header__ddmenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); } a.hl-header__ddlink { display: block; padding: 10px 14px; border-radius: 8px; color: #16181d; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; } a.hl-header__ddlink:hover { background: #f6f7f9; color: #ed1262; } body.hl-sec-videos a.hl-header__link--faith, body.hl-sec-saints a.hl-header__link--faith, body.hl-sec-prayers a.hl-header__link--faith { color: #7a1f2b; font-weight: 700; } body.hl-sec-videos a.hl-header__link--faith::after, body.hl-sec-saints a.hl-header__link--faith::after, body.hl-sec-prayers a.hl-header__link--faith::after { background: #7a1f2b; } @media (max-width: 960px) { .hl-header__dd { flex-direction: column; align-items: stretch; } a.hl-header__ddbtn::before { display: none; } .hl-header__ddmenu { position: static; min-width: 0; padding: 0 0 6px 16px; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; background: transparent; } a.hl-header__ddlink { padding: 10px 4px; font-size: 15px; color: #3d434f; } } /* home: header floats over the hero */ body.hl-home .hl-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; border-bottom: 1px solid rgba(255, 255, 255, .16); background: linear-gradient(180deg, rgba(10, 10, 16, .45), rgba(10, 10, 16, .12)); transition: background .2s, border-color .2s, box-shadow .2s; } body.hl-home.admin-bar .hl-header { top: 32px; } @media (max-width: 782px) { body.hl-home.admin-bar .hl-header { top: 46px; } } body.hl-home:not(.hl-scrolled) .hl-header:not(.is-open) a.hl-header__link, body.hl-home:not(.hl-scrolled) .hl-header:not(.is-open) a.hl-header__lang, body.hl-home:not(.hl-scrolled) .hl-header:not(.is-open) a.hl-header__burger { color: #fff; } body.hl-home:not(.hl-scrolled) .hl-header:not(.is-open) a.hl-header__lang, body.hl-home:not(.hl-scrolled) .hl-header:not(.is-open) a.hl-header__burger { border-color: rgba(255, 255, 255, .5); } body.hl-home:not(.hl-scrolled) .hl-header:not(.is-open) a.hl-header__burger::before { filter: invert(1); } body.hl-home:not(.hl-scrolled) .hl-header:not(.is-open) .hl-header__logoimg { filter: brightness(0) invert(1); } body.hl-home:not(.hl-scrolled) .hl-header:not(.is-open) .hl-header__actions a.hl-header__link--icon:hover { background: rgba(255, 255, 255, .15); color: #fff; } body.hl-home .hl-header__nav a.hl-header__link::after { display: none; } body.hl-home.hl-scrolled .hl-header, body.hl-home .hl-header.is-open { background: #fff; border-bottom-color: #e4e7ec; box-shadow: 0 2px 12px rgba(16, 24, 40, .08); } /* full-screen hero, centred like the reference */ body.hl-home .hl-hero { min-height: 100vh; min-height: 100svh; align-items: center; justify-content: center; text-align: center; } body.hl-home .hl-hero::after { background: radial-gradient(ellipse at center, rgba(12, 10, 18, .35) 0%, rgba(12, 10, 18, .62) 70%), linear-gradient(180deg, rgba(12, 10, 18, .35), rgba(12, 10, 18, .1) 30%, rgba(12, 10, 18, .45)); } body.hl-home .hl-hero__in { display: flex; flex-direction: column; align-items: center; padding: 120px 24px 96px; } body.hl-home .hl-hero p.hl-hero__kicker { margin: 0 0 18px; font-family: Georgia, "Times New Roman", "Nanum Myeongjo", "AppleMyungjo", serif; font-size: 26px; font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .92); } body.hl-home .hl-hero h1.hl-hero__title { max-width: none; font-size: clamp(56px, 10vw, 150px); font-weight: 800; line-height: 1; letter-spacing: -.03em; text-shadow: 0 4px 30px rgba(0, 0, 0, .25); } body.hl-home .hl-hero p.hl-hero__title2 { margin: 18px 0 0; font-size: clamp(24px, 3.6vw, 52px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .25); } body.hl-home .hl-hero__btns { justify-content: center; margin-top: 44px; } body.hl-home .hl-hero a.hl-btn.hl-hero__btn { height: 54px; min-width: 190px; border: 2px solid #fff !important; background: transparent !important; color: #fff !important; font-size: 15px !important; font-weight: 800; letter-spacing: .06em; } body.hl-home .hl-hero a.hl-btn.hl-hero__btn:hover { background: #fff !important; color: #16181d !important; } /* five colour blocks right under the hero */ body.hl-home .hl-feats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; max-width: none; margin: 0; padding: 0; } body.hl-home a.hl-feat { border-radius: 0; box-shadow: none; color: #fff; transform: none; } body.hl-home a.hl-feat:nth-child(1) { background: #3f4253; } body.hl-home a.hl-feat:nth-child(2) { background: #9e4038; } body.hl-home a.hl-feat:nth-child(3) { background: #cf4a3e; } body.hl-home a.hl-feat:nth-child(4) { background: #e27238; } body.hl-home a.hl-feat:nth-child(5) { background: #f2a13c; } body.hl-home a.hl-feat:hover { transform: none; box-shadow: none; filter: brightness(1.08); } body.hl-home .hl-feat img.hl-feat__img { display: none; } body.hl-home .hl-feat__body { align-items: center; justify-content: center; min-height: 200px; padding: 40px 20px; text-align: center; } body.hl-home .hl-feat h3.hl-feat__title { font-size: 24px; font-weight: 800; color: #fff; } body.hl-home .hl-feat p.hl-feat__sub { display: block; margin-top: 8px; font-family: Georgia, "Nanum Myeongjo", "AppleMyungjo", serif; font-size: 15px; font-style: italic; color: rgba(255, 255, 255, .88); } body.hl-home .hl-feat__go { margin-top: 18px; padding-top: 0; font-size: 13px; font-weight: 800; letter-spacing: .08em; color: #fff; } @media (max-width: 1100px) { body.hl-home .hl-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.hl-home a.hl-feat:last-child { grid-column: 1 / -1; } body.hl-home .hl-feat__body { min-height: 150px; padding: 28px 16px; } } @media (max-width: 760px) { body.hl-home .hl-hero p.hl-hero__kicker { font-size: 17px; } body.hl-home .hl-feat h3.hl-feat__title { font-size: 18px; } body.hl-home .hl-feat p.hl-feat__sub { font-size: 13px; } } /* ========================================================================== 10-13 (3): home — hero slider + colour-photo blocks fit one screen, sample-style header ========================================================================== */ body.hl-home { --hl-feats-h: 210px; } body.hl-home .hl-hero { min-height: calc(100vh - var(--hl-feats-h)); min-height: calc(100svh - var(--hl-feats-h)); } body.hl-home.admin-bar .hl-hero { min-height: calc(100vh - var(--hl-feats-h) - 32px); } .hl-hero:has(.hl-slides)::after { display: none; } .hl-slides { position: absolute; inset: 0; z-index: 1; } .hl-slides > .cb-collection__items { position: absolute; inset: 0; display: block !important; } .hl-slides .cb-collection-item { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; } .hl-slides .cb-collection-item.is-active { opacity: 1; visibility: visible; } .hl-slides .cb-collection-item:first-child:not(.is-active):not(:has(~ .is-active)) { opacity: 1; visibility: visible; } .hl-slides .cb-collection-item__content, .hl-slide { position: absolute; inset: 0; } .hl-slide img.hl-slide__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.04); transition: transform 7s ease-out; } .hl-slides .is-active img.hl-slide__bg { transform: scale(1); } .hl-slide::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(12, 10, 18, .35) 0%, rgba(12, 10, 18, .66) 75%), linear-gradient(180deg, rgba(12, 10, 18, .4), rgba(12, 10, 18, .05) 35%, rgba(12, 10, 18, .4)); } .hl-slide__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; max-width: 1100px; margin: 0 auto; padding: 110px 72px 60px; text-align: center; color: #fff; } .hl-homepage .hl-slide p.hl-hero__kicker { margin: 0 0 16px; font-family: Georgia, "Times New Roman", "Nanum Myeongjo", "AppleMyungjo", serif; font-size: 24px; font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .92); } .hl-homepage .hl-slide h2.hl-slide__title { margin: 0; font-size: clamp(34px, 5.4vw, 76px); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; color: #fff; word-break: keep-all; text-shadow: 0 4px 30px rgba(0, 0, 0, .3); } .hl-homepage .hl-slide p.hl-slide__text { max-width: 760px; margin: 18px 0 0; font-size: clamp(16px, 1.6vw, 21px); line-height: 1.6; color: rgba(255, 255, 255, .9); word-break: keep-all; } .hl-homepage .hl-slide a.hl-btn.hl-hero__btn { display: inline-flex !important; align-items: center; justify-content: center; height: 54px; min-width: 190px; margin: 36px 0 0 !important; padding: 0 28px !important; border: 2px solid #fff !important; border-radius: 999px !important; background: transparent !important; color: #fff !important; font-size: 15px !important; font-weight: 800; letter-spacing: .06em; text-decoration: none; } .hl-homepage .hl-slide a.hl-btn.hl-hero__btn:hover { background: #fff !important; color: #16181d !important; } .hl-slides__nav { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 3; display: flex; justify-content: center; gap: 10px; } button.hl-slides__dot { width: 10px; height: 10px; padding: 0 !important; border: 2px solid #fff !important; border-radius: 50% !important; background: transparent !important; cursor: pointer; opacity: .8; } button.hl-slides__dot.is-on { background: #fff !important; opacity: 1; } button.hl-slides__arrow { position: absolute; top: 50%; z-index: 3; width: 48px; height: 48px; margin-top: -24px; padding: 0 !important; border: 1.5px solid rgba(255, 255, 255, .6) !important; border-radius: 50% !important; background: rgba(0, 0, 0, .15) !important; cursor: pointer; } button.hl-slides__arrow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; border-top: 2px solid #fff; border-left: 2px solid #fff; } button.hl-slides__arrow.is-prev { left: 28px; } button.hl-slides__arrow.is-prev::before { transform: translate(-30%, -50%) rotate(-45deg); } button.hl-slides__arrow.is-next { right: 28px; } button.hl-slides__arrow.is-next::before { transform: translate(-70%, -50%) rotate(135deg); } button.hl-slides__arrow:hover { background: rgba(255, 255, 255, .2) !important; } /* colour blocks with the holylink.org photos underneath */ body.hl-home a.hl-feat { position: relative; overflow: hidden; } body.hl-home .hl-feat img.hl-feat__img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transition: transform .4s; } body.hl-home a.hl-feat::after { content: ""; position: absolute; inset: 0; opacity: .82; transition: opacity .2s; } body.hl-home a.hl-feat:nth-child(1)::after { background: #3f4253; } body.hl-home a.hl-feat:nth-child(2)::after { background: #9e4038; } body.hl-home a.hl-feat:nth-child(3)::after { background: #cf4a3e; } body.hl-home a.hl-feat:nth-child(4)::after { background: #e27238; } body.hl-home a.hl-feat:nth-child(5)::after { background: #f2a13c; } body.hl-home a.hl-feat:hover::after { opacity: .7; } body.hl-home a.hl-feat:hover img.hl-feat__img { transform: scale(1.06); } body.hl-home a.hl-feat:hover { filter: none; } body.hl-home .hl-feat__body { position: relative; z-index: 1; height: var(--hl-feats-h); min-height: 0; padding: 24px 18px; } /* header like the sample: light translucent band, small bold caps-style links with dividers */ body.hl-home:not(.hl-scrolled) .hl-header:not(.is-open) { background: rgba(255, 255, 255, .1); border-bottom-color: rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } body.hl-home .hl-header .hl-header__inner { min-height: 84px; } body.hl-home .hl-header__nav a.hl-header__link { height: 84px; padding: 0 18px; font-size: 13.5px; font-weight: 700; letter-spacing: .05em; } body.hl-home .hl-header__nav > * { position: relative; } body.hl-home .hl-header__nav > * + *::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; margin-top: -7px; background: rgba(255, 255, 255, .35); } body.hl-home.hl-scrolled .hl-header__nav > * + *::before { background: #e4e7ec; } body.hl-home.hl-scrolled .hl-header .hl-header__inner, body.hl-home.hl-scrolled .hl-header__nav a.hl-header__link { min-height: 68px; height: 68px; } @media (max-width: 1100px) { body.hl-home { --hl-feats-h: 150px; } body.hl-home .hl-feat__body { height: 150px; } body.hl-home .hl-hero { min-height: 82vh; } } @media (max-width: 960px) { body.hl-home .hl-header__nav > * + *::before { display: none; } body.hl-home .hl-header .hl-header__inner { min-height: 64px; } } @media (max-width: 760px) { .hl-slide__in { padding: 96px 24px 64px; } button.hl-slides__arrow { display: none; } .hl-homepage .hl-slide p.hl-hero__kicker { font-size: 17px; } } /* 10-13 (4): hero + five blocks fill exactly one screen; dark dropdown like the sample */ body.hl-home section.hl-hero { min-height: 0 !important; height: calc(100vh - 210px); height: calc(100svh - 210px); } body.hl-home.admin-bar section.hl-hero { height: calc(100vh - 242px); height: calc(100svh - 242px); } body.hl-home .hl-feats a.hl-feat { height: 210px; } body.hl-home .hl-feats .hl-feat__body { height: 100%; min-height: 0; justify-content: center; } @media (max-width: 1100px) { body.hl-home section.hl-hero, body.hl-home.admin-bar section.hl-hero { height: auto; min-height: 78vh !important; } body.hl-home .hl-feats a.hl-feat { height: 160px; } } /* dropdown: dark square panel, light small links */ .hl-header .hl-header__ddmenu { top: 100%; min-width: 230px; padding: 18px 0; border: 0; border-radius: 0; background: #2c2e38; box-shadow: 0 14px 34px rgba(0, 0, 0, .28); transform: translate(-50%, 8px); } .hl-header__dd:hover .hl-header__ddmenu, .hl-header__dd:focus-within .hl-header__ddmenu { transform: translate(-50%, 0); } .hl-header a.hl-header__ddlink { padding: 10px 26px; border-radius: 0; color: #c3c6cf !important; font-size: 14px; font-weight: 400; letter-spacing: 0; } .hl-header a.hl-header__ddlink:hover { background: rgba(255, 255, 255, .06); color: #fff !important; } @media (max-width: 960px) { .hl-header .hl-header__ddmenu { padding: 0 0 6px 16px; background: transparent; box-shadow: none; transform: none; } .hl-header a.hl-header__ddlink { padding: 10px 4px; color: #3d434f !important; } } /* 10-13 (5): every page gets the home header metrics (84px, small bold links with dividers) */ @media (min-width: 961px) { .hl-header .hl-header__inner { min-height: 84px; } .hl-header__nav a.hl-header__link { height: 84px; padding: 0 18px; font-size: 13.5px; font-weight: 700; letter-spacing: .05em; } .hl-header__nav > * { position: relative; } .hl-header__nav > * + *::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; margin-top: -7px; background: #dfe2e7; } body.hl-home:not(.hl-scrolled) .hl-header__nav > * + *::before { background: rgba(255, 255, 255, .35); } .hl-header__nav a.hl-header__link::after { left: 18px; right: 18px; } .hl-header__actions a.hl-header__link:not(.hl-header__link--icon) { font-size: 13.5px; font-weight: 700; letter-spacing: .03em; } } /* phones: WordPress stops fixing the admin bar under 600px, so the floating home header must go to the very top once the page scrolls */ @media (max-width: 600px) { body.hl-home.admin-bar.hl-scrolled .hl-header { top: 0; } } /* 10-13: saints — per-day Goodnews links */ a.hl-scard__day { font-size: 12.5px; font-weight: 600; color: #7b8494; text-decoration: none; } a.hl-scard__day:hover { color: #ed1262; text-decoration: underline; } .hl-scard a.hl-scard__more { margin-top: auto; } .hl-stoday__none { margin: 0 0 12px; color: #646b7a; font-size: 15px; } .hl-saints a.hl-btn.hl-stoday__all { display: inline-flex; align-items: center; height: 40px; margin: 14px 0 0; padding: 0 16px; border-radius: 8px; font-size: 14px; } /* ---------- 10-13: magazine single (/magazine//) + list (/magazine/) ---------- */ .hl-mag__hero { position: relative; display: flex; align-items: flex-end; min-height: 460px; overflow: hidden; background: #1b1d22; } .hl-mag__bg, .hl-mag__bg img.hl-mag__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } .hl-mag__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 10, 18, .25), rgba(12, 10, 18, .72)); } .hl-mag__heroin { position: relative; z-index: 1; width: 100%; max-width: 900px; margin: 0 auto; padding: 120px 24px 48px; text-align: center; color: #fff; } .hl-mag p.hl-mag__kicker { margin: 0 0 12px; font-family: Georgia, "Nanum Myeongjo", "AppleMyungjo", serif; font-size: 20px; font-style: italic; color: rgba(255, 255, 255, .9); } .hl-mag h1.hl-mag__title { margin: 0; font-size: clamp(30px, 4.4vw, 54px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #fff; word-break: keep-all; } .hl-mag p.hl-mag__date { margin: 16px 0 0; font-size: 14px; letter-spacing: .04em; color: rgba(255, 255, 255, .8); } .hl-mag__body { max-width: 820px; margin: 0 auto; padding: 56px 24px 80px; } .hl-mag p.hl-mag__lead { margin: 0 0 28px; padding-bottom: 24px; border-bottom: 1px solid #e4e7ec; font-size: 20px; font-weight: 600; line-height: 1.6; color: #16181d; word-break: keep-all; } .hl-mag__content { font-size: 17px; line-height: 1.9; color: #2d3340; word-break: keep-all; } .hl-mag__content p { margin: 0 0 1.2em; } .hl-mag__content h2, .hl-mag__content h3 { margin: 1.6em 0 .6em; font-weight: 800; color: #16181d; } .hl-mag__content img { max-width: 100%; height: auto; border-radius: 10px; } .hl-mag__content a { color: #ed1262; } .hl-mag .hl-back { margin-top: 40px; } .hl-maglist { max-width: var(--hl-container, 1400px); margin: 0 auto; padding: 0 20px 72px; } a.hl-mcard { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; } .hl-mcard__media { overflow: hidden; border-radius: 12px; background: #eef0f3; aspect-ratio: 16 / 10; } .hl-mcard__media img.hl-mcard__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; } a.hl-mcard:hover img.hl-mcard__img { transform: scale(1.04); } .hl-mcard__body { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; } .hl-mcard__date { font-size: 13px; color: #9aa1ad; } .hl-mcard__title { font-size: 19px; font-weight: 800; line-height: 1.4; color: #16181d; word-break: keep-all; } a.hl-mcard:hover .hl-mcard__title { text-decoration: underline; } .hl-mcard__text { font-size: 14.5px; line-height: 1.6; color: #646b7a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 760px) { .hl-mag__hero { min-height: 340px; } .hl-mag__body { padding: 36px 20px 56px; } .hl-mag p.hl-mag__lead { font-size: 18px; } } /* ---- 10-14: help / FAQ ---- */ .hl-faq__jumps{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 8px} .hl-faq__jumps a.hl-faq__jump{display:inline-flex;align-items:center;height:38px;padding:0 16px;border:1px solid #ddd;border-radius:999px;font-size:14px;font-weight:600;color:#222;text-decoration:none;background:#fff} .hl-faq__jumps a.hl-faq__jump:hover{border-color:var(--hl-brand,#ed1262);color:var(--hl-brand,#ed1262)} .hl-faq__sec{margin-top:36px;scroll-margin-top:100px} .hl-faq__lead p{color:#666;margin:0 0 10px} .hl-faq__q{margin:0} details.hl-faq__item{border-bottom:1px solid #e6e6e6} details.hl-faq__item>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 4px;font-weight:600;font-size:16px;line-height:1.5} details.hl-faq__item>summary::-webkit-details-marker{display:none} details.hl-faq__item>summary::after{content:'+';flex:none;font-size:22px;font-weight:400;line-height:1;color:var(--hl-brand,#ed1262)} details.hl-faq__item[open]>summary::after{content:'\2212'} details.hl-faq__item>summary:focus-visible{outline:2px solid var(--hl-brand,#ed1262);outline-offset:2px} .hl-faq__a{padding:0 4px 18px;line-height:1.75;color:#333} .hl-faq__a p{margin:0 0 8px} .hl-faq__a ol,.hl-faq__a ul{margin:0 0 8px;padding-left:22px} .hl-faq__a li{margin:4px 0} /* 10-14: directory no-admin badge, business name search */ .hl-dir .hl-card__noadmin { display: inline-block; margin: 6px 0 0; padding: 2px 8px; border: 1px solid #d9dde3; border-radius: 999px; background: #f5f6f8; color: #6b7280; font-size: 12px; font-weight: 600; line-height: 1.5; } .hl-lfilter input.hl-lfilter__q { height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 12px !important; border: 1px solid #ccd0d5 !important; border-radius: 8px !important; background: #fff; font-size: 15px !important; box-sizing: border-box !important; box-shadow: none; width: 220px; max-width: 100%; } .hl-lfilter input.hl-lfilter__q:focus { outline: 2px solid #16181d; outline-offset: 0; border-color: #16181d !important; } @media (max-width: 700px) { .hl-lfilter input.hl-lfilter__q { width: 100%; flex: 1 1 100%; } } /* 10-14: church picker (state + church on one line) */ .hl-chsel { display: flex; gap: 8px; width: 100%; align-items: center; } .hl-af .hl-chsel select.hl-chsel__state { flex: 0 0 200px; width: 200px !important; min-width: 0; } .hl-af .hl-chsel select.hl-chsel__church { flex: 1 1 auto; width: auto !important; min-width: 0; } @media (max-width: 560px) { .hl-chsel { flex-wrap: wrap; } .hl-af .hl-chsel select.hl-chsel__state, .hl-af .hl-chsel select.hl-chsel__church { flex: 1 1 100%; width: 100% !important; } } /* 10-14: altar numbers (stat cards, season summary, tiers) */ .hl-astats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; } .hl-astat { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid #e3e6ea; border-radius: 12px; background: #fff; min-width: 0; } .hl-astat__label { font-size: 13px; color: #6b7280; font-weight: 600; } .hl-astat__value { font-size: 24px; line-height: 1.2; color: #16181d; font-weight: 700; overflow-wrap: anywhere; } .hl-astat__sub { font-size: 13px; color: #6b7280; overflow-wrap: anywhere; } .hl-astat--ok { border-color: #b7d7c4; background: #f3faf6; } .hl-astat--ok .hl-astat__value { color: #23663f; } .hl-astat--warn { border-color: #f1d3a6; background: #fffaf2; } .hl-manage__stats { margin: 16px 0 4px; } .hl-astats-kids { margin: 0 0 16px; } .hl-astats-kids__season { margin: 0 0 8px; font-size: 13px; color: #6b7280; } .hl-astats-kid { margin: 0 0 12px; } .hl-astats-kid__name { margin: 0 0 8px; font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; } .hl-astats-kid .hl-astats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; } .hl-tier { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.6; border: 1px solid transparent; white-space: nowrap; } .hl-tier--gold { background: #fdf3d1; color: #8a6500; border-color: #ecd27a; } .hl-tier--silver { background: #eef0f3; color: #4b5563; border-color: #cfd4da; } .hl-tier--bronze { background: #f8e8dc; color: #8a4b22; border-color: #e3bc9e; } .hl-season { margin-top: 8px; } .hl-season__h { margin: 28px 0 4px; } .hl-season__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; } .hl-season__label { font-size: 16px; text-align: center; } .hl-season__bar a.hl-btn.hl-season__nav { height: 38px !important; min-height: 38px !important; padding: 0 14px !important; margin: 0 !important; display: inline-flex !important; align-items: center; font-size: 14px !important; } .hl-season__legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; } .hl-season__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .hl-season__table { min-width: 860px; } .hl-season__table th, .hl-season__table td { text-align: center; white-space: nowrap; } .hl-season__table th:first-child, .hl-season__table td:first-child { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; } .hl-season__tiers { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eceef1; } .hl-season__tierrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 20px; } .hl-season__tierrow .hl-af__field { width: 140px; margin: 0; } .hl-season__tierrow .hl-af__actions { margin: 0; } .hl-season__tierrow .hl-af__actions button.hl-af__go { height: 44px; min-height: 44px; } @media (max-width: 1100px) { .hl-astats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .hl-astats, .hl-astats-kid .hl-astats { grid-template-columns: 1fr 1fr; } .hl-astat__value { font-size: 20px; } .hl-season__bar a.hl-btn.hl-season__nav { padding: 0 10px !important; font-size: 13px !important; } .hl-season__tierrow .hl-af__field { width: calc(33.333% - 14px); min-width: 0; } } @media (max-width: 560px) { .hl-season__bar { flex-wrap: wrap; } .hl-season__label { order: -1; flex: 1 1 100%; } .hl-season__bar a.hl-btn.hl-season__nav { flex: 1 1 0; justify-content: center; white-space: nowrap; } .hl-astat__value { font-size: 18px; } .hl-astats-kid .hl-astat:last-child { grid-column: 1 / -1; } } /* 10-14: altar server photos */ img.hl-aphoto { display: block; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #eef0f3; flex: 0 0 auto; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .hl-aphoto-wrap { display: inline-flex; align-items: center; flex: 0 0 auto; } .hl-astats-kid__name img.hl-aphoto { width: 40px; height: 40px; } .hl-aphoto-set { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eceef1; } .hl-aphoto-set__purge { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .hl-aphoto-set__purge button.hl-btn { height: 40px; min-height: 40px; padding: 0 16px !important; margin: 0 !important; border-color: #f1b3ad !important; color: #b42318 !important; background: #fff !important; } .hl-aphoto-edit { margin-top: 20px; padding-top: 16px; border-top: 1px solid #eceef1; } .hl-aphoto-edit__row { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; } .hl-aphoto-edit__pic img.hl-aphoto { width: 120px; height: 120px; border-radius: 16px; } .hl-aphoto-edit__none { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; border-radius: 16px; background: #f3f4f6; color: #6b7280; font-size: 13px; } .hl-aphoto-edit__form { flex: 1 1 320px; min-width: 0; } .hl-aphoto-edit__form .hl-af__check { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 6px; font-size: 14px; } .hl-aphoto-edit__rm { align-self: flex-end; } .hl-aphoto-edit__rm button.hl-btn { height: 44px; min-height: 44px; padding: 0 16px !important; margin: 0 !important; border-color: #f1b3ad !important; color: #b42318 !important; background: #fff !important; } @media (max-width: 560px) { .hl-aphoto-edit__rm { align-self: stretch; } .hl-aphoto-edit__rm button.hl-btn { width: 100%; } } /* 10-14: altar calendar on phones - compact grid + tap a day (needs JS: .hl-cal.is-js) */ .hl-cal__detail, .hl-cal__dots { display: none; } @media screen and (max-width: 760px) { .hl-cal.is-js .hl-cal__grid { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; } .hl-cal.is-js .hl-cal__grid thead { display: table-header-group; } .hl-cal.is-js .hl-cal__grid tbody { display: table-row-group; } .hl-cal.is-js .hl-cal__grid tr { display: table-row; } .hl-cal.is-js .hl-cal__grid th { display: table-cell; padding: 6px 0; text-align: center; font-size: 12px; border-bottom: 1px solid #16181d; } .hl-cal.is-js .hl-cal__grid tbody tr > td, .hl-cal.is-js .hl-cal__grid tbody tr > td.is-pad, .hl-cal.is-js .hl-cal__grid tbody tr > td.is-empty, .hl-cal.is-js .hl-cal__grid tbody tr > td.is-mine-day { display: table-cell; width: auto; height: 54px; padding: 5px 0 4px !important; text-align: center; vertical-align: top; border: 1px solid #eceef1 !important; border-radius: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .hl-cal.is-js .hl-cal__grid tbody tr > td.is-pad { cursor: default; } .hl-cal.is-js .hl-cal__day { justify-content: center; margin: 0; } .hl-cal.is-js .hl-cal__num { display: inline-block; font-size: 14px; } .hl-cal.is-js .hl-cal__dow, .hl-cal.is-js .hl-cal__today, .hl-cal.is-js td .hl-cal__mass { display: none; } .hl-cal.is-js .hl-cal__dots { display: flex; justify-content: center; gap: 3px; margin-top: 5px; min-height: 6px; } .hl-cal.is-js .hl-cal__dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #646b7a; } .hl-cal.is-js .hl-cal__dots i.is-mine { background: #55786a; } .hl-cal.is-js .hl-cal__dots i.is-off { background: #d0d4da; } .hl-cal.is-js .hl-cal__grid tbody tr > td.is-today .hl-cal__num { color: #b45309; text-decoration: underline; text-underline-offset: 3px; } .hl-cal.is-js .hl-cal__grid tbody td.is-mine-day .hl-cal__num { min-width: 0; padding: 0 5px; } .hl-cal.is-js .hl-cal__grid tbody tr > td.is-sel { box-shadow: inset 0 0 0 2px #16181d !important; } .hl-cal.is-js .hl-cal__grid tbody tr > td:focus-visible { outline: 2px solid #1d4ed8; outline-offset: -2px; } .hl-cal.is-js .hl-cal__detail { display: block; margin: 12px 0 0; } .hl-cal__dhead { margin: 0 0 8px; font-size: 15px; font-weight: 700; } .hl-cal__dnone { margin: 0; color: #646b7a; font-size: 14px; } .hl-cal.is-js .hl-cal__detail .hl-cal__mass { display: block; margin: 0 0 6px; padding: 10px 12px; font-size: 14px; border-radius: 8px; background: #f3f4f6; } .hl-cal.is-js .hl-cal__detail .hl-cal__mass.is-mine { background: #e3ebe3; box-shadow: inset 3px 0 0 #55786a; } .hl-cal.is-js .hl-cal__nav { gap: 8px 12px; } } @media print { .hl-cal__detail, .hl-cal__dots { display: none !important; } } /* 10-14: month navigation as buttons (calendar + masses list): title, then 이전 달 · 이번 달 · 다음 달 */ .hl-cal__nav, .hl-altar__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .hl-cal__nav .hl-cal__month, .hl-altar__nav .cb-ma_ms_label { order: 0; margin-right: 8px; } .hl-cal__nav a.hl-cal__step, .hl-altar__nav a.hl-link { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 14px; border: 1px solid #ccd0d5; border-radius: 8px; background: #fff; color: #16181d !important; font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none !important; white-space: nowrap; box-sizing: border-box; } .hl-cal__nav a.hl-cal__step:hover, .hl-altar__nav a.hl-link:hover { border-color: #16181d; background: #f5f6f8; } .hl-cal__nav a.hl-cal__step:nth-of-type(1), .hl-altar__nav a.cb-ma_ms_prev { order: 1; } .hl-cal__nav a.hl-cal__step:nth-of-type(3), .hl-altar__nav a.cb-ma_ms_now { order: 2; } .hl-cal__nav a.hl-cal__step:nth-of-type(2), .hl-altar__nav a.cb-ma_ms_next { order: 3; } .hl-cal__nav button.hl-cal__print { order: 4; display: inline-flex !important; align-items: center; height: 38px; padding: 0 16px !important; margin: 0 0 0 auto !important; } @media screen and (max-width: 760px) { .hl-cal__nav, .hl-altar__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .hl-cal__nav .hl-cal__month { grid-column: 1 / span 2; margin: 0; align-self: center; } .hl-cal__nav button.hl-cal__print { order: 0; grid-column: 3; justify-self: end; margin: 0 !important; } .hl-altar__nav .cb-ma_ms_label { grid-column: 1 / -1; margin: 0; } .hl-cal__nav a.hl-cal__step, .hl-altar__nav a.hl-link { width: 100%; padding: 0 6px; font-size: 13.5px; } } /* 10-14: 'view church page' button at the right end of the manage tab row */ .hl-manage__tabs a.hl-manage__view { margin-left: auto !important; } .hl-manage__view { font-variant-emoji: text; } /* 10-14: church info form (JFB 230) as a grid - ko | en side by side, contacts in one row, logo 25% | photo 25% | gallery 50% */ form.jet-form-builder[data-form-id="230"] { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: 18px; align-items: start; } form.jet-form-builder[data-form-id="230"] > * { grid-column: 1 / -1; min-width: 0; margin-top: 0 !important; margin-bottom: 0 !important; } form.jet-form-builder[data-form-id="230"] > input[type="hidden"] { display: none; } form[data-form-id="230"] > .jet-form-builder-row:has([name="intro"]) { order: 1; grid-column: span 6; } form[data-form-id="230"] > .jet-form-builder-row:has([name="intro_en"]) { order: 2; grid-column: span 6; } form[data-form-id="230"] > .jet-form-builder-row:has([name="registration_info"]) { order: 3; grid-column: span 6; } form[data-form-id="230"] > .jet-form-builder-row:has([name="registration_info_en"]) { order: 4; grid-column: span 6; } form[data-form-id="230"] > .jet-form-builder-row:has([name="founded_year"]) { order: 5; grid-column: span 3; } form[data-form-id="230"] > .jet-form-builder-row:has([name="phone"]) { order: 6; grid-column: span 3; } form[data-form-id="230"] > .jet-form-builder-row:has([name="email"]) { order: 7; grid-column: span 3; } form[data-form-id="230"] > .jet-form-builder-row:has([name="website"]) { order: 8; grid-column: span 3; } form[data-form-id="230"] > .jet-form-builder-row:has([name="logo"]) { order: 9; grid-column: span 3; } form[data-form-id="230"] > .jet-form-builder-row:has([name="photo"]) { order: 10; grid-column: span 3; } form[data-form-id="230"] > .jet-form-builder-row:has([name="gallery[]"]) { order: 11; grid-column: span 6; } form[data-form-id="230"] > .field-type-submit-field { order: 20; } form[data-form-id="230"] > .jet-form-builder-messages-wrap { order: 21; } form[data-form-id="230"] > .field-type-media-field { align-self: stretch; } @media (max-width: 1100px) { form[data-form-id="230"] > .jet-form-builder-row:has([name="founded_year"]), form[data-form-id="230"] > .jet-form-builder-row:has([name="phone"]), form[data-form-id="230"] > .jet-form-builder-row:has([name="email"]), form[data-form-id="230"] > .jet-form-builder-row:has([name="website"]), form[data-form-id="230"] > .jet-form-builder-row:has([name="logo"]), form[data-form-id="230"] > .jet-form-builder-row:has([name="photo"]) { grid-column: span 6; } form[data-form-id="230"] > .jet-form-builder-row:has([name="gallery[]"]) { grid-column: 1 / -1; } } @media (max-width: 760px) { form.jet-form-builder[data-form-id="230"] > .jet-form-builder-row { grid-column: 1 / -1 !important; } } /* 10-14: church info form - stack each field top-to-bottom (label, field, hint); media fields as boxes */ form[data-form-id="230"] > .jet-form-builder-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 6px; min-width: 0; } form[data-form-id="230"] > .jet-form-builder-row > * { width: 100% !important; max-width: 100% !important; min-width: 0; margin-left: 0 !important; margin-right: 0 !important; flex: 0 0 auto !important; box-sizing: border-box; } form[data-form-id="230"] > .field-type-media-field { padding: 14px; border: 1px solid #e4e7ec; border-radius: 12px; background: #fafbfc; align-self: stretch; } form[data-form-id="230"] > .field-type-media-field .jet-form-builder__label-text { font-weight: 700; } form[data-form-id="230"] > .field-type-media-field .jet-form-builder__desc { order: 1; color: #646b7a; line-height: 1.45; } form[data-form-id="230"] > .field-type-media-field .jet-form-builder__field-wrap { order: 2; } form[data-form-id="230"] .jet-form-builder-file-upload__content { display: flex; flex-wrap: wrap; gap: 8px; } form[data-form-id="230"] .jet-form-builder-file-upload__files { display: flex; flex-wrap: wrap; gap: 8px; } form[data-form-id="230"] .jet-form-builder-file-upload__file img { width: 96px !important; height: 72px !important; object-fit: cover; border-radius: 8px; } form[data-form-id="230"] .hl-drop--jfb { min-height: 88px; padding: 12px; } form[data-form-id="230"] .hl-drop__text { font-size: 13.5px; } form[data-form-id="230"] .jet-form-builder-file-upload__message small { color: #8b93a1; } form[data-form-id="230"] > .field-type-submit-field .jet-form-builder__submit-wrap { justify-content: flex-start; } /* 10-14: manage cards - divider instead of 'add or edit', editing banner only while editing */ .hl-manage__card .hl-manage__sep { height: 0; margin: 20px 0 14px; border-top: 1px solid #eceef1; } .hl-manage__card p.hl-manage__editing { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 9px 12px; border: 1px solid #f1d3a6; border-radius: 8px; background: #fffaf2; font-size: 14px; } .hl-manage__editing .hl-editing__label { font-weight: 700; color: #8a4b00; } .hl-manage__editing a.hl-editing__cancel { margin-left: auto; font-size: 13px; font-weight: 600; color: #16181d; text-decoration: underline; text-underline-offset: 3px; } /* 10-14: bulletins in their own section, full width */ .hl-manage__grid > #hl-bulletin { grid-column: 1 / -1; } /* 10-14: adult servers - badges, kind / audience forms, adult request */ .hl-kind-wrap { display: inline-flex; align-items: center; } .hl-kind { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.6; white-space: nowrap; border: 1px solid transparent; } .hl-kind--adult { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; } .hl-kind--any { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; } .hl-adult-kind, .hl-adult-aud { margin-top: 18px; padding-top: 14px; border-top: 1px solid #eceef1; } .hl-adult-kind__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; } .hl-adult-kind__opt { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; } .hl-adult-kind__row button.hl-btn, .hl-adult-aud__row button.hl-btn { height: 40px; min-height: 40px; padding: 0 16px !important; margin: 0 !important; } .hl-adult-aud__row { display: flex; gap: 10px; align-items: center; } .hl-adult-aud__row select.hl-af__input { flex: 1 1 auto; max-width: 320px; } .hl-adult-req { margin-top: 24px; padding-top: 18px; border-top: 1px solid #eceef1; } .hl-adult-req__h { margin: 0 0 6px; font-size: 17px; } /* 10-14: altar sign-up / assign form (JFB 388) - same look as the other altar forms */ form.jet-form-builder[data-form-id="388"] { display: grid; gap: 14px; max-width: 560px; } form.jet-form-builder[data-form-id="388"] .jet-form-builder-row { display: grid; gap: 4px; margin: 0; padding: 0; } form.jet-form-builder[data-form-id="388"] .jet-form-builder__label { margin: 0; padding: 0; } form.jet-form-builder[data-form-id="388"] .jet-form-builder__label-text { font-size: 13px; font-weight: 600; line-height: 18px; color: #16181d; } form.jet-form-builder[data-form-id="388"] .jet-form-builder__required { color: #b42318; } form.jet-form-builder[data-form-id="388"] select.jet-form-builder__field, form.jet-form-builder[data-form-id="388"] textarea.jet-form-builder__field { box-sizing: border-box; width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid #ccd0d5; border-radius: 6px; background: #fff; font-size: 15px; color: #16181d; } form.jet-form-builder[data-form-id="388"] textarea.jet-form-builder__field { min-height: 72px; } form.jet-form-builder[data-form-id="388"] .jet-form-builder__desc { margin: 2px 0 0; font-size: 12px; color: #646b7a; } form.jet-form-builder[data-form-id="388"] .jet-form-builder__submit-wrap { display: flex; justify-content: flex-start; margin: 0; } form.jet-form-builder[data-form-id="388"] button.jet-form-builder__submit { display: inline-flex; align-items: center; justify-content: center; height: 42px; line-height: 1; padding: 0 18px; border: 1px solid #16181d !important; border-radius: 6px; background: #16181d !important; color: #fff !important; font-size: 15px; font-weight: 600; cursor: pointer; } form.jet-form-builder[data-form-id="388"] button.jet-form-builder__submit:hover { background: #3d434f !important; } #hl-altar-assign form.jet-form-builder[data-form-id="388"] .jet-form-builder__desc { display: none; } #hl-altar-signup a.hl-link { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: #16181d; text-decoration: underline; text-underline-offset: 3px; } /* 10-14: altar manage - a card shown alone in its menu group uses the full width; request rows wrap instead of squeezing */ .hl-manage__grid > #hl-altar-requests, .hl-manage__grid > #hl-altar-notices, .hl-manage__grid > #hl-altar-unavail { grid-column: 1 / -1; } #hl-altar-requests .hl-manage__row { flex-wrap: wrap; row-gap: 6px; } #hl-altar-requests .cb-ma_rq_child { white-space: nowrap; } #hl-altar-requests .cb-ma_rq_person { min-width: 0; overflow-wrap: anywhere; } /* 10-14: help pages - "screen example" figures (hl-shot) */ .hl-shot { margin: 14px 0 10px; } .hl-shot__frame { position: relative; padding: 38px 16px 16px; overflow: hidden; border: 1px solid #d9dce1; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(22, 24, 29, .04); } .hl-shot__frame::before { content: ""; position: absolute; top: 15px; right: 16px; width: 38px; height: 8px; background: radial-gradient(circle, #d9dce1 3.5px, transparent 4px) 0 0 / 13px 8px repeat-x; } .hl-shot__frame::after { content: ""; position: absolute; top: 30px; left: 0; right: 0; border-top: 1px solid #eceef1; } .hl-shot__tag { position: absolute; top: 9px; left: 16px; font-size: 12px; font-weight: 600; line-height: 18px; color: #646b7a; } .hl-shot__view { pointer-events: none; user-select: none; font-size: 15px; line-height: 1.5; color: #16181d; } .hl-shot__clip { max-height: 520px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); } .hl-shot__clip--s { max-height: 360px; } .hl-shot__cap { margin: 8px 2px 0; font-size: 13px; line-height: 1.5; color: #646b7a; } .hl-doc .hl-shot__view h2, .hl-doc .hl-shot__view h3 { margin-top: 0; } .hl-faq__a .hl-shot__view ol, .hl-faq__a .hl-shot__view ul { margin: 0; padding: 0; } .hl-faq__a .hl-shot__view li { margin: 0; } .hl-shot__view .hl-manage__card { margin: 0 0 14px; } .hl-shot__view .hl-manage__card:last-child { margin-bottom: 0; } .hl-shot__view .hl-sec__item { cursor: default; } @media (max-width: 760px) { .hl-shot__frame { padding: 36px 10px 10px; } } /* 10-14: list rows wrap by the card's own width (tablets with the side menu, help-page examples), not only on phones */ .hl-manage__card { container-type: inline-size; } @container (max-width: 720px) { .hl-manage__row { flex-wrap: wrap; row-gap: 6px; } .hl-altar__mrow > strong { flex-basis: 100%; } } /* 10-14: link to the help guide */ p.hl-help-link { margin: 4px 0 16px; font-size: 14px; } p.hl-help-link a { color: #16181d; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* 10-14: my account - side menu like the manage pages, one group at a time */ .hl-acc .hl-sec { margin-top: 8px; } .hl-acc .hl-sec__body.hl-acc__grid { grid-template-columns: minmax(0, 1fr); max-width: 760px; } .hl-acc .hl-sec__body.hl-acc__grid > .hl-acc__card { grid-column: auto; } /* 10-14: profile photo / initials avatar */ .hl-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: var(--hl-av, #3d434f); color: #fff; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .02em; user-select: none; } .hl-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } .hl-avatar--big { width: 88px; height: 88px; font-size: 32px; } .hl-header a.hl-header__link--account:has(.hl-avatar)::before { display: none; } .hl-header a.hl-header__link--account span.hl-header__av, .hl-header a.hl-header__link--account span.hl-avatar { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; } .hl-header a.hl-header__link--account span.hl-header__av { display: inline-flex; } .hl-header a.hl-header__link--account span.hl-avatar { width: 32px; height: 32px; overflow: hidden; } .hl-header a.hl-header__link--account:has(.hl-avatar) { padding: 0; } .hl-avatar-set { display: flex; align-items: center; gap: 18px; margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid #eceef1; } .hl-avatar-set__body { display: grid; gap: 8px; justify-items: start; } .hl-avatar-set__up, .hl-avatar-set__rm { margin: 0; } .hl-avatar-set__pick { position: relative; display: inline-flex; align-items: center; height: 38px; padding: 0 16px; cursor: pointer; } .hl-avatar-set__pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .hl-avatar-set__pick:focus-within { outline: 2px solid #1d4ed8; outline-offset: 2px; } button.hl-avatar-set__del { padding: 0; border: 0; background: none; color: #b42318; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } label.hl-avatar-set__pick { border: 1px solid #16181d; border-radius: 8px; background: #fff; color: #16181d; font-size: 14px; font-weight: 600; line-height: 1; } label.hl-avatar-set__pick:hover { background: #16181d; color: #fff; } /* 10-14: interactive hover buttons (prev / next / go-to) - see header.js */ a.hl-ihb { position: relative; isolation: isolate; display: inline-flex !important; align-items: center; justify-content: center; height: 38px; padding: 0 18px !important; overflow: hidden; border: 1px solid #d0d4da !important; border-radius: 999px !important; background: #fff !important; color: #16181d !important; font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none !important; white-space: nowrap; cursor: pointer; } .hl-ihb__idle { display: flex; align-items: center; gap: 8px; } .hl-ihb--prev .hl-ihb__idle { flex-direction: row-reverse; } .hl-ihb__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #16181d; transition: transform .3s ease; } .hl-ihb__txt { display: inline-block; transition: transform .3s ease, opacity .3s ease; } .hl-ihb__hover { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; color: #fff; opacity: 0; transform: translateX(48px); transition: transform .3s ease, opacity .3s ease; pointer-events: none; } .hl-ihb--prev .hl-ihb__hover { transform: translateX(-48px); } .hl-ihb--out .hl-ihb__arrow { transform: rotate(-45deg); } .hl-ihb--prev .hl-ihb__arrow { transform: rotate(180deg); } a.hl-ihb:hover .hl-ihb__dot, a.hl-ihb:focus-visible .hl-ihb__dot { transform: scale(100); } a.hl-ihb:hover .hl-ihb__txt, a.hl-ihb:focus-visible .hl-ihb__txt { opacity: 0; transform: translateX(48px); } a.hl-ihb--prev:hover .hl-ihb__txt, a.hl-ihb--prev:focus-visible .hl-ihb__txt { transform: translateX(-48px); } a.hl-ihb:hover .hl-ihb__hover, a.hl-ihb:focus-visible .hl-ihb__hover { opacity: 1; transform: translateX(0); } a.hl-ihb:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; } a.hl-ihb[aria-disabled="true"] { opacity: .45; pointer-events: none; } @media (hover: none) { a.hl-ihb:active .hl-ihb__dot { transform: scale(100); } a.hl-ihb:active .hl-ihb__txt { opacity: 0; } a.hl-ihb:active .hl-ihb__hover { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .hl-ihb__dot, .hl-ihb__txt, .hl-ihb__hover { transition: none; } } /* 10-14: interactive hover buttons - looks: brand (pink dot / fill), light (on dark photos), lg (bigger) */ a.hl-ihb--brand .hl-ihb__dot { background: var(--hl-brand, #ed1262); } a.hl-ihb--brand { color: var(--hl-brand, #ed1262) !important; border-color: #f3c3d4 !important; } a.hl-ihb--light { background: transparent !important; border-color: rgba(255, 255, 255, .75) !important; color: #fff !important; } a.hl-ihb--light .hl-ihb__dot { background: #fff; } a.hl-ihb--light .hl-ihb__hover { color: #16181d; } a.hl-ihb--lg { height: 48px; padding: 0 28px !important; font-size: 16px; } a.hl-ihb--lg .hl-ihb__dot { width: 9px; height: 9px; } a.hl-hsec__more.hl-ihb { height: 34px; padding: 0 14px !important; font-size: 13px; } a.hl-ihb--onbrand .hl-ihb__dot { background: var(--hl-brand, #ed1262); } /* 10-14: site footer - dark card (HolyLink colours), columns, badges, contact */ .hl-footer { margin-top: 64px; padding: 0 var(--hl-gutter, 20px) 24px; border: 0 !important; background: transparent !important; } body.hl-home .hl-footer { margin-top: 0; padding-top: 24px; } .hl-footer__card { position: relative; max-width: 1240px; margin: 0 auto; padding: 48px 48px 22px; overflow: hidden; border-radius: 20px; background: radial-gradient(600px 320px at 88% 0%, rgba(237, 18, 98, .14), transparent 70%), #17151a; color: #b9bcc5; } .hl-footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 2.5fr); gap: 40px; } .hl-footer__brand { display: flex; flex-direction: column; gap: 14px; max-width: 340px; } .hl-footer__logo { display: inline-flex; width: max-content; } .hl-footer .hl-footer__logoimg { display: block; height: 30px; width: auto; max-width: none; } .hl-footer .hl-footer__tag { margin: 0; font-size: 14px; line-height: 1.6; color: #b9bcc5; } .hl-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .hl-footer__h { margin: 0 0 14px; font-size: 14px; font-weight: 700; color: #fff; } .hl-footer__list { display: grid; gap: 10px; } .hl-footer a.hl-footer__link { width: max-content; font-size: 14px; line-height: 1.4; color: #a4a8b2; text-decoration: none; transition: color .15s; } .hl-footer a.hl-footer__link:hover, .hl-footer a.hl-footer__link:focus-visible { color: #fff; } .hl-footer__mid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 40px; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); } .hl-footer__badges { display: flex; flex-wrap: wrap; gap: 10px; } .hl-footer__badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 9px; background: rgba(255, 255, 255, .05); font-size: 13px; font-weight: 600; line-height: 1; color: #eceef2; } .hl-footer__badge::before { content: ""; flex: none; width: 15px; height: 15px; background: #ff5c93; -webkit-mask: var(--hl-fi) center / contain no-repeat; mask: var(--hl-fi) center / contain no-repeat; } .hl-footer__badge--church { --hl-fi: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202v4M10%204h4%22/%3E%3Cpath%20d%3D%22M6%2010l6-4%206%204v11H6z%22/%3E%3Cpath%20d%3D%22M10%2021v-4a2%202%200%200%201%204%200v4%22/%3E%3C/svg%3E"); } .hl-footer__badge--altar { --hl-fi: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%202v4M8%202v4M3%2010h18%22%2F%3E%3Cpath%20d%3D%22m9%2016%202%202%204-4%22%2F%3E%3C%2Fsvg%3E"); } .hl-footer__badge--privacy { --hl-fi: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22/%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22/%3E%3C/svg%3E"); } .hl-footer__badgenum { color: #fff; } .hl-footer__ctawrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .hl-footer .hl-footer__ctaq { margin: 0; font-size: 13px; color: #a4a8b2; } .hl-footer a.hl-footer__cta { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: 9px; background: var(--hl-brand, #ed1262); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; transition: background .15s; } .hl-footer a.hl-footer__cta:hover, .hl-footer a.hl-footer__cta:focus-visible { background: #ff2e7a; } .hl-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-top: 20px; } .hl-footer .hl-footer__copy { width: auto; margin: 0; font-size: 12.5px; color: #82868f; } .hl-footer__meta { display: flex; align-items: center; gap: 18px; } .hl-footer a.hl-footer__metalink { font-size: 12.5px; color: #82868f; text-decoration: none; } .hl-footer a.hl-footer__metalink:hover { color: #fff; } .hl-footer a.hl-footer__lang { padding: 5px 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; color: #d5d7dd; } .hl-footer a:focus-visible { outline: 2px solid #ff5c93; outline-offset: 3px; border-radius: 4px; } @media (max-width: 900px) { .hl-footer__top { grid-template-columns: minmax(0, 1fr); gap: 32px; } } @media (max-width: 600px) { .hl-footer { padding: 0 12px 12px; } .hl-footer__card { padding: 32px 22px 18px; border-radius: 16px; } .hl-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; } .hl-footer__ctawrap { width: 100%; } .hl-footer__bottom { flex-direction: column-reverse; align-items: flex-start; } } /* 10-14: footer full width, square, always at the bottom of the window on short pages */ body { display: flex; flex-direction: column; min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); } #crocoblocks-theme-builder-content { flex: 1 0 auto; } #crocoblocks-theme-builder-footer { flex-shrink: 0; } .hl-footer { margin-top: 64px; padding: 0 !important; } body.hl-home .hl-footer { margin-top: 0; } .hl-footer__card { max-width: none; margin: 0; border-radius: 0; padding: 56px max(var(--hl-gutter, 20px), calc((100% - 1240px) / 2)) 24px; } @media (max-width: 600px) { .hl-footer__card { padding: 36px 20px 20px; border-radius: 0; } } /* 10-14: footer content width = page body width (same box as header and page containers) */ .hl-footer__card { padding-left: max(var(--hl-gutter, 20px), calc((100% - var(--hl-container, 1750px)) / 2 + var(--hl-gutter, 20px))); padding-right: max(var(--hl-gutter, 20px), calc((100% - var(--hl-container, 1750px)) / 2 + var(--hl-gutter, 20px))); } body.hl-home .hl-footer__card { padding-left: max(24px, calc((100% - var(--hl-home-w, 1400px)) / 2 + 24px)); padding-right: max(24px, calc((100% - var(--hl-home-w, 1400px)) / 2 + 24px)); } @media (max-width: 600px) { .hl-footer__card, body.hl-home .hl-footer__card { padding-left: 20px; padding-right: 20px; } } /* 10-14: footer pinned by margin-top auto (some templates leave #crocoblocks-theme-builder-content empty and put main beside it, so growing it pushed the page down) */ #crocoblocks-theme-builder-content { flex: 0 0 auto; } #crocoblocks-theme-builder-footer { margin-top: auto; } /* church picker: long church names must not widen the select past the card */ .hl-af .hl-chsel select.hl-chsel__church { flex: 1 1 0; width: 0 !important; } .hl-af__field { min-width: 0; } @media (max-width: 600px) { .hl-af .hl-chsel select.hl-chsel__church { flex: 1 1 100%; width: 100% !important; } } /* 10-14: church registration request (/church-register/) */ .hl-account.hl-creg { max-width: 760px; } .hl-creg__first { margin: 0 0 18px; color: var(--hl-muted, #5c5f66); } .hl-creg__h { font-size: 17px; font-weight: 700; margin: 26px 0 10px; letter-spacing: -0.01em; } .hl-creg__form .hl-creg__h:first-of-type { margin-top: 0; } .hl-creg__form .hl-af__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; } .hl-creg__form .hl-af__grid.hl-creg__where { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 0.7fr); } .hl-creg__form .hl-af__check { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 12px; } .hl-creg__form .hl-af__check input { margin-top: 4px; flex: 0 0 auto; } .hl-creg__form:not(:has(#hl-creg-manage:checked)) .hl-creg__role { display: none; } .hl-creg__mine { margin: 0 0 26px; padding: 16px 18px; border: 1px solid var(--hl-line, #e6e6ea); border-radius: 12px; background: #fafafb; } .hl-creg__mine .hl-creg__h { margin-top: 0; } .hl-creg__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .hl-creg__st { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef0f3; color: #44474e; } .hl-creg__st--pending { background: #fff4dc; color: #8a5a00; } .hl-creg__st--approved { background: #e3f5ea; color: #136c3a; } .hl-creg__st--rejected { background: #fde8ee; color: #a3123f; } .hl-creg-link { margin: 10px 0 0; font-size: 14px; color: var(--hl-muted, #5c5f66); } .hl-creg-link a { font-weight: 600; } @media (max-width: 600px) { .hl-creg__form .hl-af__grid, .hl-creg__form .hl-af__grid.hl-creg__where { grid-template-columns: minmax(0, 1fr); } } .hl-creg__form .hl-af__grid { gap: 16px 14px; margin-bottom: 16px; } .hl-creg__form .hl-creg__pubhint { display: block; margin: -8px 0 16px; } /* 10-14: pagination row - the nav itself was display:block, so prev / numbers / next stacked on three lines */ nav.cb-el-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } nav.cb-el-pagination > .cb-el-pagination__items { flex: 0 1 auto; } nav.cb-el-pagination > .cb-el-pagination__item--prev, nav.cb-el-pagination > .cb-el-pagination__item--next { height: 40px; } @media (max-width: 600px) { nav.cb-el-pagination > .cb-el-pagination__item--prev, nav.cb-el-pagination > .cb-el-pagination__item--next { height: 36px; } } /* 10-14: pagination round numbers to match the pill buttons, centered everywhere, fits one line on phones */ nav.cb-el-pagination { justify-content: center; } nav.cb-el-pagination .cb-el-pagination__item--number { border-radius: 999px; } @media (max-width: 600px) { nav.cb-el-pagination, nav.cb-el-pagination > .cb-el-pagination__items { gap: 4px; } nav.cb-el-pagination > a.hl-ihb { padding: 0 12px !important; font-size: 13px; } nav.cb-el-pagination .cb-el-pagination__item--number { min-width: 34px; height: 34px; padding: 0 8px; } nav.cb-el-pagination .cb-el-pagination__item--delimiter { min-width: 16px; } } /* 10-14: suggest line centered under the centered pagination */ p.hl-biz__suggest { text-align: center; } /* 10-14: home = page body width. Every home section (hero text, Vatican news, community + businesses, holy sites) uses the same box as the header and the other pages: --hl-container with --hl-gutter. Rule: content width always follows the page body. */ :root, .hl-homepage { --hl-home-w: var(--hl-container, 1750px); } body.hl-home .hl-hero__in, body.hl-home .hl-hsec, body.hl-home .hl-hsec-two { padding-left: var(--hl-gutter, 20px); padding-right: var(--hl-gutter, 20px); } body.hl-home .hl-hsec-two > .hl-hsec { padding: 0; } body.hl-home .hl-footer__card { padding-left: max(var(--hl-gutter, 20px), calc((100% - var(--hl-container, 1750px)) / 2 + var(--hl-gutter, 20px))); padding-right: max(var(--hl-gutter, 20px), calc((100% - var(--hl-container, 1750px)) / 2 + var(--hl-gutter, 20px))); } @media (max-width: 600px) { body.hl-home .hl-footer__card { padding-left: 20px; padding-right: 20px; } } /* 10-14: one vertical rhythm for every page = the home page gap between the hero and Vatican news (80px, 56px on phones). Header -> page content, page content -> footer. Pages that open with a full-bleed hero or a full-height layout keep their top. */ :root { --hl-gap: 80px; } @media (max-width: 760px) { :root { --hl-gap: 56px; } } main.crocoblocks-fullwidth > .crocoblocks-document > :first-child:not(.hl-homepage):not(.hl-auth):not(.hl-dir) { padding-top: var(--hl-gap) !important; padding-bottom: 0 !important; } main.crocoblocks-fullwidth > .crocoblocks-document > :first-child:not(.hl-homepage):not(.hl-auth):not(.hl-dir) > :first-child { margin-top: 0 !important; } main.crocoblocks-fullwidth > .crocoblocks-document > :first-child:not(.hl-homepage):not(.hl-auth):not(.hl-dir) > :last-child { margin-bottom: 0 !important; } .hl-footer { margin-top: var(--hl-gap); } body.hl-home .hl-footer { margin-top: 0; } main.crocoblocks-fullwidth > .crocoblocks-document > :first-child:not(.hl-homepage):not(.hl-auth):not(.hl-dir) > :first-child > :first-child { margin-top: 0 !important; } main.crocoblocks-fullwidth > .crocoblocks-document > :first-child:not(.hl-homepage):not(.hl-auth):not(.hl-dir) > .hl-hsd-page { padding-top: 0 !important; } .hl-hsd-page .hl-hsd { padding-top: 0 !important; } .hl-biz__view > .hl-biz__head:first-child { margin-top: 0 !important; } main.crocoblocks-fullwidth > .crocoblocks-document > :first-child:not(.hl-homepage):not(.hl-auth):not(.hl-dir) :is(p, ul, ol):last-child { margin-bottom: 0; } /* sections inside a page: same gap as between home sections */ .hl-faq__sec { margin-top: var(--hl-gap) !important; } article.cb-sp_page > .cb-sp_tabs { margin-top: var(--hl-gap) !important; } article.cb-sp_page > .cb-sp_near { margin-top: var(--hl-gap) !important; } /* a page that ends with a full-width band (church page "nearby") touches the footer, like the home page */ body.single-church_page .hl-footer { margin-top: 0; } /* magazine article: no extra bottom padding before the footer gap */ .hl-mag, .hl-mag__body { padding-bottom: 0 !important; } .hl-dir { padding-bottom: 0 !important; } /* ---------- 10-14: header redesign ---------- Every page: the same 84px header as the home page (the home header no longer shrinks to 68px on scroll), larger menu text, a colour change on hover, and no underline bar under menu items (home already had none). */ .hl-header a.hl-header__link { transition: color .18s ease, background-color .18s ease; } @media (min-width: 961px) { body.hl-home.hl-scrolled .hl-header .hl-header__inner, body.hl-home.hl-scrolled .hl-header__nav a.hl-header__link { min-height: 84px; height: 84px; } .hl-header .hl-header__nav a.hl-header__link, body.hl-home .hl-header__nav a.hl-header__link { padding: 0 20px; font-size: 15.5px; font-weight: 700; letter-spacing: .02em; } .hl-header .hl-header__nav a.hl-header__link::after { display: none; } .hl-header .hl-header__nav a.hl-header__link:hover, .hl-header .hl-header__nav a.hl-header__link:focus-visible, .hl-header .hl-header__dd:hover > a.hl-header__link { color: var(--hl-brand, #ed1262); } /* home, over the photo: light pink so it reads on the dark hero */ body.hl-home:not(.hl-scrolled) .hl-header:not(.is-open) .hl-header__nav a.hl-header__link:hover, body.hl-home:not(.hl-scrolled) .hl-header:not(.is-open) .hl-header__nav a.hl-header__link:focus-visible, body.hl-home:not(.hl-scrolled) .hl-header:not(.is-open) .hl-header__dd:hover > a.hl-header__link { color: #ff9cc2; } } @media (min-width: 961px) and (max-width: 1200px) { .hl-header .hl-header__nav a.hl-header__link, body.hl-home .hl-header__nav a.hl-header__link { padding: 0 13px; font-size: 14.5px; letter-spacing: .01em; } } /* phone menu: the home page now uses the same rows as every other page (it had 84px rows and 13.5px text) */ @media (max-width: 960px) { body.hl-home .hl-header__nav a.hl-header__link { height: 48px; padding: 0 4px; font-size: 16px; letter-spacing: 0; } .hl-header a.hl-header__link:hover { color: var(--hl-brand, #ed1262); } } /* ---------- 10-14: leave a church / delete account ---------- */ .hl-acc__church-main { flex: 1 1 auto; } a.hl-acc__church-leave { flex: 0 0 auto; padding: 6px 12px; border: 1px solid #e4e7ec; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; color: #646b7a; } a.hl-acc__church-leave:hover { border-color: #d92d20; color: #d92d20; background: #fff; } .hl-close { margin: 0 0 18px; padding: 20px 22px; border: 1px solid #f1c4cf; border-radius: 12px; background: #fdf4f6; } .hl-close__h { margin: 0 0 10px; font-size: 16px; line-height: 1.4; } .hl-close__lead { margin: 0 0 16px; font-weight: 600; } .hl-close__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .hl-close__col { padding: 14px 16px; border: 1px solid #eef0f3; border-radius: 10px; background: #fafbfc; } .hl-close__sub { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #3d434f; } .hl-close__list { margin: 0 0 14px; padding-left: 20px; line-height: 1.6; } .hl-close__col .hl-close__list { margin: 0; } .hl-close__list li + li { margin-top: 4px; } .hl-close__tip { display: block; margin: 12px 0 0; } .hl-close__warn { margin: 14px 0 0; padding: 12px 14px; border: 1px solid #f3d6a4; border-radius: 10px; background: #fff7eb; color: #6b4300; line-height: 1.6; } .hl-close__warn p { margin: 0; } .hl-close__warn ul { margin: 6px 0 0; padding-left: 20px; } .hl-close .hl-close__warn { margin: 0 0 14px; } .hl-close__more { margin-top: 16px; } .hl-close__more > summary { color: #b42318; } .hl-af button.hl-close__go, .hl-close button.hl-close__go { background: #d92d20 !important; border-color: #d92d20 !important; color: #fff !important; } .hl-af button.hl-close__go:hover, .hl-close button.hl-close__go:hover { background: #b42318 !important; border-color: #b42318 !important; } .hl-close .hl-af__actions > a.hl-btn, .hl-close .hl-af__actions > button { height: 48px; } @media (max-width: 600px) { .hl-close { padding: 16px; } .hl-close__cols { grid-template-columns: 1fr; gap: 12px; } a.hl-acc__church-manage, a.hl-acc__church-leave { flex: 1 1 0; text-align: center; } } /* 10-14: leave / delete - fixes after review */ .hl-close, .hl-acc__card--danger { word-break: keep-all; overflow-wrap: break-word; } .hl-close form.hl-af { padding: 0; border: 0; background: none; box-shadow: none; } a.hl-acc__church-leave { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 38px; padding: 0 18px; border: 1px solid #d0d4da; border-radius: 999px; background: #fff; } a.hl-acc__church-leave:hover { border-color: #d92d20; background: #fff; color: #d92d20; } @media (max-width: 600px) { .hl-acc__church .hl-acc__church-main { flex: 1 1 100%; } .hl-acc__church a.hl-acc__church-manage, .hl-acc__church a.hl-acc__church-leave { flex: 1 1 0; min-width: 0; justify-content: center; } } /* ---------- 10-14: sign in with Google ---------- */ .hl-gwrap { margin: 0 0 22px; } a.hl-gbtn { display: flex; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box; height: 48px; padding: 0 20px; border: 1px solid #dadce0; border-radius: 10px; background: #fff; color: #1f1f1f !important; font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none !important; transition: background-color .15s, border-color .15s, box-shadow .15s; } a.hl-gbtn:hover { background: #f8f9fa; border-color: #c6c9cd; box-shadow: 0 1px 3px rgba(16, 24, 40, .08); } a.hl-gbtn:focus-visible { outline: 2px solid #4285f4; outline-offset: 2px; } .hl-gbtn__g { flex: none; width: 20px; height: 20px; } .hl-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 0; color: #646b7a; font-size: 13px; } .hl-or::before, .hl-or::after { content: ''; flex: 1 1 0; height: 1px; background: #e4e7ec; } .hl-acc__card .hl-af__actions a.hl-gbtn { display: inline-flex; height: 44px; } .hl-finish__h { margin: 0 0 8px; font-size: 22px; line-height: 1.35; } .hl-finish__lead { margin: 0 0 22px; color: #3d434f; line-height: 1.6; word-break: keep-all; } .hl-finish .hl-af__check { margin: 4px 0 12px; align-items: flex-start; } .hl-finish .hl-af__check input { margin-top: 3px !important; } /* 10-14: churches without a photo show a faint HolyLink logo (ghost) */ .cb-cb2_media:not(:has(img)) { background: #f4f2f3; } .cb-cb2_media:not(:has(img))::before { content: ''; position: absolute; inset: 0; background: url('/wp-content/uploads/2026/10/cropped-logo-HolyLink_512x512.webp') center / auto 62% no-repeat; opacity: .09; filter: grayscale(.2); pointer-events: none; } /* ---------- 10-14: HolyLink staff workspace (/staff/) ---------- */ .hl-staff__cards { display: grid; gap: 20px; } .hl-staff__gate p { margin: 0 0 16px; } .hl-staff__who { color: var(--hl-muted); font-size: 14px; } .hl-staff__card h3.hl-staff__h { margin: 26px 0 10px; font-size: 16px; } .hl-staff__card h2 + div > h3.hl-staff__h:first-child { margin-top: 0; } .hl-staff__bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; } .hl-staff__back { margin: 0 0 12px; } .hl-staff__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hl-line); } .hl-staff__row { display: flex; align-items: center; gap: 10px 16px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--hl-line); } .hl-staff__row--wrap { flex-wrap: wrap; } .hl-staff__main { flex: 1 1 260px; min-width: 0; display: grid; gap: 3px; } .hl-staff__main strong { font-size: 15px; word-break: keep-all; overflow-wrap: anywhere; } .hl-staff__meta { font-size: 13px; color: var(--hl-muted); word-break: keep-all; } .hl-staff__meta a { color: inherit; text-decoration: underline; } .hl-staff__memo { display: block; padding: 6px 10px; border-radius: 6px; background: var(--hl-bg-soft); color: var(--hl-text); font-size: 13px; white-space: pre-line; } .hl-staff__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } .hl-staff__list--compact .hl-staff__row { padding: 8px 0; } /* one button size in lists and bars */ .hl-staff-page :is(.hl-staff__acts, .hl-staff__bar, .hl-staff__back, .hl-staff__imgbar) :is(a.hl-btn, button.hl-btn) { display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box !important; height: 38px !important; min-height: 38px; margin: 0 !important; padding: 0 14px !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; } .hl-staff-page :is(.hl-staff__acts, .hl-staff__bar) :is(a.hl-btn, button.hl-btn):not(.hl-btn--line) { background: var(--hl-ink) !important; color: #fff !important; border: 1px solid var(--hl-ink) !important; } .hl-staff-page :is(.hl-staff__acts, .hl-staff__back, .hl-staff__imgbar) :is(a, button).hl-btn--line { background: #fff !important; color: var(--hl-ink) !important; border: 1px solid #c9ced6 !important; } .hl-staff-page :is(.hl-staff__acts, .hl-staff__back, .hl-staff__imgbar) :is(a, button).hl-btn--line:hover { background: var(--hl-bg-soft) !important; } .hl-staff-page :is(a, button).hl-staff__del { background: #fff !important; color: #b42318 !important; border: 1px solid #e5b5ae !important; } .hl-staff-page :is(a, button).hl-staff__del:hover { background: #fdf1ef !important; } .hl-staff__acts a.hl-btn::before { content: none; } /* small inline forms (business directory) */ .hl-staff__inline { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; background: none; } .hl-staff__inline .hl-af__input { width: 170px; height: 38px !important; min-height: 38px !important; padding: 0 10px !important; border: 1px solid #ccd0d5; border-radius: 8px; font-size: 14px !important; box-sizing: border-box; } /* badges */ .hl-staff__badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #eef0f3; color: #3d434f; font-size: 12px; font-weight: 600; line-height: 1.6; vertical-align: 1px; } .hl-staff__badge--ok { background: #e6f2ea; color: #1f6b3a; } .hl-staff__badge--warn { background: #fdf0d8; color: #8a5300; } .hl-staff__badge--feat { background: #f6e8ea; color: var(--hl-accent); } /* forms */ .hl-staff__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hl-staff__wide { grid-column: 1 / -1; } .hl-staff__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .hl-staff__thumb { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: start; } .hl-staff__thumb:not(:has(img)) { grid-template-columns: minmax(0, 1fr); } .hl-staff__thumb img { width: 132px; height: 88px; object-fit: cover; border-radius: 8px; background: var(--hl-bg-soft); } .hl-staff__thumb .hl-af__check { grid-column: 2; } .hl-staff__imgbar { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; } .hl-staff__body .wp-editor-wrap { border-radius: 8px; overflow: hidden; } .hl-staff__body .wp-editor-container { border: 1px solid #ccd0d5; } .hl-staff__body textarea.wp-editor-area { border: 0 !important; font-size: 15px; line-height: 1.7; } .hl-staff__body .wp-switch-editor { height: auto; margin: 0 0 0 4px; padding: 4px 10px; font-size: 13px; } /* approval requests open in place */ .hl-staff__item { margin: 0 0 10px; border: 1px solid var(--hl-line); border-radius: 10px; background: #fff; } .hl-staff__item > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 14px; cursor: pointer; } .hl-staff__item[open] > summary { border-bottom: 1px solid var(--hl-line); } .hl-staff__item > .hl-af { margin: 0; border-radius: 0 0 10px 10px; } /* team */ .hl-staff__teamadd { grid-template-columns: minmax(0, 1fr) 220px auto; align-items: start; margin-top: 16px; } .hl-staff__teamadd .hl-af__actions { margin-top: 24px; } .hl-staff__teamadd .hl-af__actions > button { height: 44px !important; min-height: 44px; } @media (max-width: 700px) { .hl-staff__grid, .hl-staff__teamadd { grid-template-columns: 1fr; } .hl-staff__teamadd .hl-af__actions { margin-top: 0; } .hl-staff__row { flex-wrap: wrap; } .hl-staff__acts { justify-content: flex-start; } .hl-staff__inline { flex-wrap: wrap; } .hl-staff__thumb, .hl-staff__thumb:has(img) { grid-template-columns: 1fr; } .hl-staff__thumb .hl-af__check { grid-column: auto; } } /* 10-14b: staff - red delete/hide buttons win over the line style; sub-headings */ .hl-staff-page .hl-staff__acts :is(a, button).hl-btn.hl-staff__del, .hl-staff-page .hl-af__actions button.hl-staff__del { background: #fff !important; color: #b42318 !important; border: 1px solid #e5b5ae !important; } .hl-staff-page .hl-staff__acts :is(a, button).hl-btn.hl-staff__del:hover, .hl-staff-page .hl-af__actions button.hl-staff__del:hover { background: #fdf1ef !important; } .hl-staff__card h3.hl-staff__h { font-size: 15px; font-weight: 700; color: var(--hl-ink); } /* ---------- 10-14c: button states (active + hover stay readable) ---------- */ /* community board tabs: the selected tab stays dark on hover (was white text on light grey) */ .hl-comm__tabs a.hl-comm__tab:hover { color: #2d3340; } .hl-comm-view-hub .hl-comm__tabs a.hl-comm__tab--hub, .hl-comm-view-write:not(.hl-comm-b-prayer):not(.hl-comm-b-news):not(.hl-comm-b-pilgrim):not(.hl-comm-b-free):not(.hl-comm-b-jobs) .hl-comm__tabs a.hl-comm__tab--hub, .hl-comm-b-prayer .hl-comm__tabs a.hl-comm__tab--prayer, .hl-comm-b-news .hl-comm__tabs a.hl-comm__tab--news, .hl-comm-b-pilgrim .hl-comm__tabs a.hl-comm__tab--pilgrim, .hl-comm-b-free .hl-comm__tabs a.hl-comm__tab--free, .hl-comm-b-jobs .hl-comm__tabs a.hl-comm__tab--jobs { background: #111827; border-color: #111827; color: #fff; } /* category chips under the tabs: the selected one is filled */ a.hl-bcat { display: inline-flex; align-items: center; background: #fff; transition: background .15s, border-color .15s; } a.hl-bcat:hover { border-color: #9aa1ad; background: #f4f5f7; color: var(--hl-ink, #16181d); } a.hl-bcat.is-active, a.hl-bcat.is-active:hover { background: var(--hl-brand, #ed1262); border-color: var(--hl-brand, #ed1262); color: #fff; font-weight: 600; } /* ghost link buttons: a.hl-btn:hover turned their text white on white */ a.hl-btn.hl-btn--ghost:hover { background: var(--hl-ink, #16181d); border-color: var(--hl-ink, #16181d); color: #fff; filter: none; } /* tabs were sitting right under the board intro line */ .hl-comm__head + .hl-comm__tabs { margin-top: 18px; } /* 10-14: login / sign-up photos */ .hl-auth--day .hl-auth__art { background-image: url(/wp-content/uploads/2026/10/bg-login-holylink.jpg); } .hl-auth--night .hl-auth__art { background-image: url(/wp-content/uploads/2026/10/bg-register-holylink.jpg); } /* keep the cross in view (cross sits ~25% from the left of both photos) */ .hl-auth--day .hl-auth__art { background-position: 10% center; } .hl-auth--night .hl-auth__art { background-position: 4% center; } @media (max-width: 900px) { .hl-auth--day .hl-auth__art, .hl-auth--night .hl-auth__art { background-position: 0% center; } } /* 10-14: register band text on one line on wider screens */ @media (min-width: 900px) { .hl-homepage .hl-regband__in { max-width: 1000px; } .hl-homepage p.hl-regband__text { max-width: none; white-space: nowrap; } } /* 10-14: home - community / business columns as two soft panels so they read as separate blocks */ body.hl-home .hl-hsec-two { gap: 24px; align-items: stretch; } body.hl-home .hl-hsec-two > .hl-hsec { padding: 28px 28px 24px !important; border: 1px solid var(--hl-line, #e4e7ec); border-radius: 18px; background: var(--hl-bg-soft, #f7f8fa); } body.hl-home .hl-hsec-two > .hl-hsec .hl-hsec__head { margin-top: 0; } body.hl-home .hl-hsec--comm [data-id="hm_comm_loop"] .cb-collection-item:last-child a, body.hl-home .hl-hsec--comm [data-id="hm_comm_loop"] .cb-collection-item:last-child .hl-comm__row { border-bottom: 0; } @media (max-width: 700px) { body.hl-home .hl-hsec-two { gap: 16px; } body.hl-home .hl-hsec-two > .hl-hsec { padding: 20px 16px !important; border-radius: 14px; } } /* 10-14: Google / moved-account finish screen - the generic sign-up intro does not apply */ body.hl-finishing .hl-auth__lead.cb-su_intro { display: none; } /* 10-14: home - one-time message after sign-in (e.g. Google finish) shown as a toast */ .hl-toast { position: fixed; top: 100px; left: 50%; z-index: 9999; max-width: min(560px, calc(100vw - 32px)); margin: 0; padding: 14px 20px; border-radius: 12px; background: #16181d; color: #fff; font-size: 15px; line-height: 1.5; text-align: center; box-shadow: 0 12px 32px rgba(16, 24, 40, .25); transform: translateX(-50%); animation: hl-toast 6s ease forwards; pointer-events: none; } .hl-toast:empty { display: none; } @keyframes hl-toast { 0% { opacity: 0; transform: translate(-50%, -8px); } 6%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -8px); visibility: hidden; } } /* 10-14: home - community | magazine panels, business directory full width (directory premium card size) */ @media (min-width: 1201px) { body.hl-home .hl-hsec-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .hl-mnews { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--hl-line, #e4e7ec); color: inherit; text-decoration: none; } body.hl-home [data-id="hm_mag_loop"] .cb-collection-item:first-child .hl-mnews { padding-top: 4px; } body.hl-home [data-id="hm_mag_loop"] .cb-collection-item:last-child .hl-mnews { border-bottom: 0; padding-bottom: 0; } .hl-mnews__media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: #e9ecf0 url(/wp-content/uploads/2026/10/cropped-logo-HolyLink_512x512.webp) center / 40% no-repeat; } .hl-mnews__media img.hl-mnews__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } a.hl-mnews:hover img.hl-mnews__img { transform: scale(1.04); } .hl-mnews__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .hl-mnews__title { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--hl-ink, #16181d); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; } a.hl-mnews:hover .hl-mnews__title { text-decoration: underline; } .hl-mnews__text { font-size: 14px; line-height: 1.55; color: var(--hl-text, #374151); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hl-mnews__date { font-size: 12.5px; color: var(--hl-muted, #646b7a); } @media (max-width: 600px) { .hl-mnews { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; } .hl-mnews__title { font-size: 15px; } .hl-mnews__text { -webkit-line-clamp: 1; } } /* business directory row on home: same size as the directory page premium row */ body.hl-home .hl-hsec--biz { margin-top: 64px; } @media (max-width: 600px) { body.hl-home .hl-hsec-two .hl-hsec__title { font-size: 22px !important; white-space: nowrap; } body.hl-home .hl-hsec-two .hl-hsec__head { gap: 10px; } body.hl-home .hl-hsec-two .hl-hsec__more { white-space: nowrap; } } /* ---------- 10-15: sticky header on every page (home keeps its own fixed/transparent header) ---------- */ body:not(.hl-home) #crocoblocks-theme-builder-header { position: sticky; top: 0; z-index: 100; } body.admin-bar:not(.hl-home) #crocoblocks-theme-builder-header { top: 32px; } @media (max-width: 782px) { body.admin-bar:not(.hl-home) #crocoblocks-theme-builder-header { top: 46px; } } @media (max-width: 600px) { body.admin-bar:not(.hl-home) #crocoblocks-theme-builder-header { top: 0; } } body:not(.hl-home).hl-scrolled .hl-header { box-shadow: 0 2px 12px rgba(16, 24, 40, .08); } /* in-page jumps (#anchors) stop below the pinned header */ html { scroll-padding-top: 100px; } /* ---------- 10-15: section heading -> content gap (one step wider everywhere) ---------- */ :root { --hl-head-gap: 30px; --hl-card-head-gap: 18px; } @media (max-width: 760px) { :root { --hl-head-gap: 22px; --hl-card-head-gap: 16px; } } .hl-hsec__head { margin-bottom: var(--hl-head-gap); } .hl-card h2 { margin-bottom: var(--hl-head-gap); } .cb-sp_near.hl-card h2 { margin-bottom: var(--hl-head-gap); } .hl-biz h2.hl-biz__sech { margin-bottom: var(--hl-head-gap); } .hl-hsd h2.hl-hsd__h { margin-bottom: 22px; } .hl-faq__sec > h2, .hl-faq__sec h2:first-child { margin-bottom: var(--hl-head-gap); } .hl-acc__card h2, .hl-manage__card h2, .hl-biz__mine h2 { margin-bottom: var(--hl-card-head-gap); } .hl-doc h2 { margin-bottom: 14px; } .hl-saints h2.hl-stoday__h { margin-bottom: var(--hl-card-head-gap); } /* ---------- 10-15: page title (h1 + intro) -> page content: one wider gap on every page ---------- */ :root { --hl-title-gap: 36px; } @media (max-width: 760px) { :root { --hl-title-gap: 26px; } } /* list pages: churches-style head block (community, business, holy sites, videos, magazine) */ .hl-comm__head { margin-bottom: var(--hl-title-gap) !important; } .hl-comm__head h1 { margin: 0 0 10px !important; } .hl-comm__head .hl-comm__intro { margin: 0 !important; } .hl-comm__head + .hl-comm__tabs { margin-top: 0; } /* form / account pages: h1 (+ intro line) */ .crocoblocks-document > .cb-el > h1.cb-el-heading:first-child { margin-bottom: var(--hl-title-gap); } .crocoblocks-document > .cb-el > h1.cb-el-heading:first-child:has(+ p.hl-account__intro) { margin-bottom: 10px !important; } p.hl-account__intro { margin: 0 0 var(--hl-title-gap) !important; } .hl-acc > h1 { margin-bottom: var(--hl-title-gap) !important; } /* documents (privacy, terms, FAQ) */ .hl-doc > h1, .hl-doc__lang > h1 { margin-bottom: 28px !important; } /* 10-15: video cards - no play button over the thumbnail */ .hl-vid__play { display: none !important; } /* 10-15: video cards - episode number and title on one line */ .hl-vid__body { flex-direction: row !important; align-items: baseline; gap: 8px !important; } .hl-vid__ep { flex: none; white-space: nowrap; } .hl-vid__title { min-width: 0; } /* ---------- 10-15: video lesson page (/videos//) ---------- */ .hl-vsingle { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; } .hl-vsingle__player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #000; } .hl-vsingle__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .hl-vsingle h2.hl-vsingle__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 26px 0 8px; font-size: 24px; font-weight: 800; line-height: 1.35; color: var(--hl-ink, #16181d); word-break: keep-all; } .hl-vsingle__series { position: relative; padding-right: 14px; color: var(--hl-brand, #ed1262); } .hl-vsingle__series::after { content: ""; position: absolute; right: 0; top: .2em; bottom: .2em; width: 2px; background: #d9dde3; } .hl-vsingle__src { margin: 0; font-size: 14px; color: var(--hl-muted, #646b7a); } .hl-vsingle__src strong { margin-left: 6px; color: var(--hl-ink, #16181d); } .hl-vsingle__about { margin: 22px 0 0; padding: 18px 22px; border: 1px solid var(--hl-line, #e4e7ec); border-radius: 12px; background: var(--hl-bg-soft, #f7f8fa); font-size: 15px; line-height: 1.7; color: var(--hl-text, #374151); word-break: keep-all; } .hl-vsingle__nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 28px; } a.hl-vsingle__step { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 14px; border: 1px solid var(--hl-line, #e4e7ec); border-radius: 10px; color: var(--hl-ink, #16181d); text-decoration: none; } a.hl-vsingle__step:hover { border-color: #9aa1ad; background: var(--hl-bg-soft, #f7f8fa); } a.hl-vsingle__step small { font-size: 12px; color: var(--hl-muted, #646b7a); } a.hl-vsingle__step span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; } a.hl-vsingle__step--prev small::before { content: "\2190 "; } a.hl-vsingle__step--next { text-align: right; } a.hl-vsingle__step--next small::after { content: " \2192"; } .hl-vids a.hl-btn.hl-vsingle__list { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 26px; border-radius: 999px; font-size: 15px; font-weight: 700; text-decoration: none; } .hl-vsingle__side { display: flex; flex-direction: column; gap: 24px; } .hl-vsingle h3.hl-vsingle__sideh { margin: 0 0 -8px; font-size: 17px; font-weight: 800; color: var(--hl-ink, #16181d); } .hl-vsingle__more { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; } .hl-vsingle__more a { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center; color: inherit; text-decoration: none; } .hl-vsingle__mthumb { overflow: hidden; aspect-ratio: 16 / 9; border-radius: 8px; background: #111; } .hl-vsingle__mthumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .hl-vsingle__more a:hover img { transform: scale(1.05); } .hl-vsingle__mtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .hl-vsingle__mtext small { font-size: 12px; font-weight: 700; color: var(--hl-brand, #ed1262); } .hl-vsingle__mtext strong { font-size: 14px; line-height: 1.4; color: var(--hl-ink, #16181d); word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hl-vsingle__more a:hover strong { text-decoration: underline; } a.hl-vsingle__ad { display: block; } a.hl-vsingle__ad img { display: block; width: 100%; height: auto; border-radius: 12px; } @media (max-width: 960px) { .hl-vsingle { grid-template-columns: minmax(0, 1fr); gap: 36px; } a.hl-vsingle__ad { max-width: 300px; } } @media (max-width: 600px) { .hl-vsingle h2.hl-vsingle__title { font-size: 20px; } .hl-vsingle__nav { grid-template-columns: 1fr 1fr; } .hl-vsingle__nav .hl-vsingle__list { grid-column: 1 / -1; grid-row: 2; } } /* ---------- 10-15: mobile menu - the open menu was overflowing a fixed-height (home) header with no background ---------- */ @media (max-width: 960px) { .hl-header.is-open { height: auto !important; max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; background: #fff !important; box-shadow: 0 12px 32px rgba(16, 24, 40, .18); } body.admin-bar .hl-header.is-open { max-height: calc(100dvh - 46px); } .hl-header.is-open .hl-header__menu { background: #fff; } /* home (scrolled) pins the inner row to 68px - let it grow while the menu is open */ body.hl-home .hl-header.is-open .hl-header__inner, .hl-header.is-open .hl-header__inner { height: auto !important; } body.hl-home .hl-header.is-open .hl-header__nav a.hl-header__link { height: 48px !important; min-height: 0 !important; } } /* 10-15b: video page - next lessons as a 2 x 3 thumbnail grid (same width as the banner), even bottom nav */ .hl-vsingle__side { gap: 16px; } .hl-vsingle__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .hl-vsingle__more a { display: block; position: relative; } .hl-vsingle__mthumb { display: block; border-radius: 8px; } .hl-vsingle__mep { position: absolute; left: 6px; bottom: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(17, 19, 24, .78); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1.6; } .hl-vsingle__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } a.hl-vsingle__step, .hl-vids a.hl-btn.hl-vsingle__list { min-height: 62px; box-sizing: border-box; } .hl-vids a.hl-btn.hl-vsingle__list { display: flex; height: auto; padding: 0 16px; border: 1px solid var(--hl-ink, #16181d); border-radius: 10px; background: #fff !important; color: var(--hl-ink, #16181d) !important; font-size: 15px; font-weight: 700; filter: none; } .hl-vids a.hl-btn.hl-vsingle__list:hover { background: var(--hl-ink, #16181d) !important; color: #fff !important; } .hl-vsingle__nav > span:empty { display: block; } @media (max-width: 600px) { .hl-vsingle__nav { grid-template-columns: 1fr 1fr; } .hl-vsingle__nav > span:empty { display: none; } } .hl-vsingle__mep { display: none; } /* the thumbnails already show the lesson number */ /* ---------- 10-15: mobile drawer menu (slides in from the right) + collapsible sub menu ---------- */ .hl-header__close, .hl-header__ddtoggle, .hl-menu-veil { display: none; } @media (max-width: 960px) { .hl-header.is-open { height: auto !important; max-height: none !important; overflow: visible !important; box-shadow: none !important; } .hl-header .hl-header__menu, .hl-header.is-open .hl-header__menu { display: flex !important; position: fixed; top: 0; right: 0; bottom: 0; z-index: 1001; flex-direction: column; flex-basis: auto; align-items: stretch; gap: 0; width: min(340px, 86vw); margin: 0; padding: 68px 22px 28px; box-sizing: border-box; border: 0; background: #fff; box-shadow: -14px 0 40px rgba(16, 24, 40, .2); overflow-y: auto; overscroll-behavior: contain; transform: translateX(105%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s; } .hl-header.is-open .hl-header__menu { transform: none; visibility: visible; transition: transform .28s ease; } body.admin-bar .hl-header .hl-header__menu { top: 46px; } .hl-menu-veil { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(17, 19, 24, .45); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s linear .25s; } .hl-header.is-open .hl-menu-veil { opacity: 1; visibility: visible; transition: opacity .25s; } html.hl-menu-open, html.hl-menu-open body { overflow: hidden; } .hl-header button.hl-header__close { display: flex; align-items: center; justify-content: center; position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #f4f5f7 !important; color: #16181d !important; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: none !important; } .hl-header button.hl-header__close:hover { background: #e9ebef !important; } /* sub menu: closed until tapped; never moves on hover */ .hl-header .hl-header__dd { position: relative; display: block; } .hl-header .hl-header__ddmenu, .hl-header .hl-header__dd:hover .hl-header__ddmenu, .hl-header .hl-header__dd:focus-within .hl-header__ddmenu { display: none; position: static; transform: none !important; opacity: 1; visibility: visible; padding: 0 0 8px 14px; background: transparent; box-shadow: none; } .hl-header .hl-header__dd.is-sub-open .hl-header__ddmenu { display: flex; flex-direction: column; } .hl-header button.hl-header__ddtoggle { display: block; position: absolute; top: 4px; right: -6px; width: 44px; height: 40px; margin: 0; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; cursor: pointer; } .hl-header button.hl-header__ddtoggle::before { content: ""; display: block; width: 9px; height: 9px; margin: 0 auto; border-right: 2px solid #3d434f; border-bottom: 2px solid #3d434f; transform: translateY(-3px) rotate(45deg); transition: transform .2s; } .hl-header .hl-header__dd.is-sub-open > button.hl-header__ddtoggle::before { transform: translateY(2px) rotate(-135deg); } .hl-header .hl-header__dd > a.hl-header__ddbtn { padding-right: 44px; } } @media (max-width: 960px) { .hl-header .hl-header__menu .hl-header__nav { flex: none; width: 100%; } .hl-header .hl-header__nav .hl-header__dd { width: 100%; } .hl-header .hl-header__menu .hl-header__actions { flex: none; margin-top: 8px; } } @media (max-width: 960px) { .hl-header .hl-header__dd > a.hl-header__ddbtn { display: flex; width: 100%; box-sizing: border-box; } .hl-header .hl-header__dd.is-sub-open .hl-header__ddmenu { border-bottom: 1px solid #f0f2f5; } } /* 10-15c: drawer - sub links stay readable on hover; account block at the bottom; English at the top */ @media (max-width: 960px) { .hl-header .hl-header__ddmenu a.hl-header__ddlink:hover, .hl-header .hl-header__ddmenu a.hl-header__ddlink:focus-visible { background: #f6f7f9 !important; color: var(--hl-brand, #ed1262) !important; } .hl-header .hl-header__menu .hl-header__actions { margin-top: auto !important; padding-top: 18px; } .hl-header .hl-header__menu a.hl-header__lang { position: absolute; top: 16px; left: 22px; margin: 0 !important; } } /* ---------- 10-15: community lists - search + sort bar ---------- */ .hl-ctools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; } .hl-ctools__q { flex: 1 1 260px; max-width: 440px; margin: 0; } .hl-ctools input[type=search], .hl-ctools select { box-sizing: border-box; width: 100%; height: 42px; margin: 0; border: 1px solid #d9dde3; border-radius: 999px; background-color: #fff; color: #16181d; font-size: 14.5px; } .hl-ctools input[type=search] { padding: 0 16px; } .hl-ctools__sort { flex: none; margin: 0; } .hl-ctools select { width: auto; min-width: 130px; padding: 0 34px 0 14px; cursor: pointer; } .hl-ctools input[type=search]:focus, .hl-ctools select:focus { outline: 2px solid #16181d; outline-offset: 0; border-color: #16181d; } .hl-ctools button.hl-ctools__go { height: 42px; margin: 0; padding: 0 20px !important; border: 0 !important; border-radius: 999px !important; background: #16181d !important; color: #fff !important; font-size: 14.5px; font-weight: 600; cursor: pointer; } .hl-ctools button.hl-ctools__go:hover { background: #000 !important; } .hl-ctools__note { margin: -6px 0 14px; font-size: 14px; color: var(--hl-muted, #646b7a); } .hl-ctools__note a { margin-left: 6px; color: var(--hl-ink, #16181d); text-decoration: underline; } @media (max-width: 600px) { .hl-ctools__q { flex-basis: 100%; max-width: none; } .hl-ctools__sort { flex: 1; } .hl-ctools select { width: 100%; } } /* 10-15b: search + sort sit in the board bar, just left of the write button */ .hl-board__bar .hl-ctools-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; } .hl-board__bar .hl-ctools { flex-wrap: nowrap; margin: 0; } .hl-board__bar .hl-ctools__q { flex: 0 1 240px; width: 240px; } .hl-board__bar .hl-ctools__note { margin: 0; } .hl-board__bar .hl-ctools-wrap + a.hl-btn { margin-left: 0; } @media (max-width: 760px) { .hl-board__bar .hl-ctools-wrap { order: 3; flex-basis: 100%; align-items: stretch; margin-left: 0; } .hl-board__bar .hl-ctools { flex-wrap: wrap; } .hl-board__bar .hl-ctools__q { flex: 1 1 100%; width: auto; } .hl-board__bar .hl-ctools__note { margin: 0; } } .hl-board__bar .hl-ctools input[type=search], .hl-board__bar .hl-ctools select, .hl-board__bar .hl-ctools button.hl-ctools__go { height: 44px; } .hl-board__bar:has(.hl-ctools__note) { align-items: flex-start; } /* 10-15: hero slide titles get a wider line so a normal title fits on one line; long ones wrap evenly */ @media (min-width: 900px) { .hl-homepage .hl-slide .hl-slide__in { max-width: 1500px; } } .hl-homepage .hl-slide h2.hl-slide__title { text-wrap: balance; } /* ---------- 10-15: community hub + board lists get a right sidebar (banner) ---------- */ .hl-comm__side { display: none; } @media (min-width: 1000px) { body:is(.hl-comm-view-hub, .hl-comm-view-list) .hl-comm { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 40px; align-items: start; grid-auto-flow: row dense; } body:is(.hl-comm-view-hub, .hl-comm-view-list) .hl-comm > * { grid-column: 1 / -1; } body:is(.hl-comm-view-hub, .hl-comm-view-list) .hl-comm > .hl-comm__hub, body:is(.hl-comm-view-hub, .hl-comm-view-list) .hl-comm > .hl-comm__list { grid-column: 1; min-width: 0; } body:is(.hl-comm-view-hub, .hl-comm-view-list) .hl-comm > .hl-comm__side { display: flex; flex-direction: column; gap: 16px; grid-column: 2; position: sticky; top: 104px; } body.admin-bar:is(.hl-comm-view-hub, .hl-comm-view-list) .hl-comm > .hl-comm__side { top: 136px; } .hl-comm__side a.hl-ad__link { display: block; } .hl-comm__side img.hl-ad__img { display: block; width: 100%; height: auto; border-radius: 12px; } } /* 10-15: holy site video */ .hl-hsd__video{margin-top:var(--hl-head-gap,30px)} .hl-hsd__player{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000} .hl-hsd__player iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* 10-15: holy site gallery + photo lightbox (any .hl-gallery) */ .hl-hsd__gallery{margin-top:var(--hl-head-gap,30px)} .hl-gallery--holy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .hl-gallery--holy .hl-gallery__item{display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--hl-line,#e5e5e5);cursor:zoom-in} .hl-gallery--holy .hl-gallery__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease} .hl-gallery--holy .hl-gallery__item:hover img{transform:scale(1.04)} @media (max-width:600px){.hl-gallery--holy{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}} .hl-lb{position:fixed;inset:0;z-index:100000;background:rgba(10,10,10,.92);display:flex;align-items:center;justify-content:center;padding:56px 64px} .hl-lb[hidden]{display:none} .hl-lb__img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.4)} .hl-lb__btn{position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;width:44px;height:44px;border-radius:50%;font-size:22px;line-height:44px;text-align:center;cursor:pointer;padding:0} .hl-lb__btn:hover{background:rgba(255,255,255,.25)} .hl-lb__close{top:14px;right:14px} .hl-lb__prev{left:12px;top:50%;transform:translateY(-50%)} .hl-lb__next{right:12px;top:50%;transform:translateY(-50%)} .hl-lb__count{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:rgba(255,255,255,.8);font-size:14px} .hl-lb--single .hl-lb__prev,.hl-lb--single .hl-lb__next,.hl-lb--single .hl-lb__count{display:none} @media (max-width:600px){.hl-lb{padding:56px 8px}.hl-lb__prev,.hl-lb__next{top:auto;bottom:10px;transform:none}} html.hl-lb-open{overflow:hidden} /* 10-15: staff holy gallery editor */ .hl-staff__gal{display:flex;flex-direction:column;gap:10px} .hl-staff__gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px} .hl-staff__gal-item{display:flex;flex-direction:column;border:1px solid var(--hl-line,#e5e5e5);border-radius:10px;overflow:hidden;background:#fff;cursor:pointer} .hl-staff__gal-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .hl-staff__gal-x{display:flex;align-items:center;gap:6px;height:36px;padding:0 10px;font-size:14px} .hl-staff__gal-item:has(input:checked){border-color:#c0392b} .hl-staff__gal-item:has(input:checked) img{opacity:.35} /* 10-15: staff gallery reorder */ .hl-staff__gal-x{justify-content:space-between} .hl-staff__gal-rm{display:flex;align-items:center;gap:6px;cursor:pointer} .hl-staff__gal-move{width:32px;height:28px;border:1px solid var(--hl-line,#ddd);border-radius:6px;background:#fff;color:#666;font-size:16px;line-height:1;cursor:grab;touch-action:none;padding:0} .hl-staff__gal-move:hover,.hl-staff__gal-move:focus-visible{border-color:#888;color:#222} .hl-staff__gal-item{cursor:default} .hl-staff__gal-item.is-dragging{position:fixed;z-index:9999;pointer-events:none;box-shadow:0 12px 30px rgba(0,0,0,.25);transform:rotate(1.5deg);opacity:.95} .hl-staff__gal-ph{border:2px dashed var(--hl-brand,#c8102e);border-radius:10px;background:rgba(0,0,0,.03)} body:has(.hl-staff__gal-item.is-dragging){cursor:grabbing;user-select:none} /* 10-15: holy site gallery/video on phones - keep them after the intro (main/side are display:contents there) */ @media (max-width: 960px) { .hl-hsd .hl-hsd__gallery { order: 10; margin-top: 32px; } .hl-hsd .hl-hsd__video { order: 11; margin-top: 32px; } .hl-hsd .hl-hsd__map { order: 12; } .hl-hsd__gallery h2.hl-hsd__h, .hl-hsd__video h2.hl-hsd__h { margin-top: 0; } } /* 10-15: visually hidden (still read by screen readers and search engines) */ .hl-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} /* 10-15: header login as a button (icon + "로그인"), desktop; the mobile drawer keeps its row look */ @media (min-width: 961px) { .hl-header .hl-header__actions a.hl-header__link--icon.hl-header__link--btn { width: auto; height: 38px; padding: 0 14px 0 12px; gap: 6px; border: 1px solid #d9dde3; border-radius: 8px; color: #16181d; font-size: 14px; font-weight: 600; letter-spacing: 0; background: #fff; box-sizing: border-box; } .hl-header .hl-header__actions a.hl-header__link--icon.hl-header__link--btn::before { width: 18px; height: 18px; } .hl-header .hl-header__actions a.hl-header__link--icon.hl-header__link--btn span { position: static; width: auto; height: auto; overflow: visible; clip: auto; } .hl-header .hl-header__actions a.hl-header__link--icon.hl-header__link--btn:hover { border-color: var(--hl-brand, #7a1f2b); color: var(--hl-brand, #7a1f2b); background: #fff; } body.hl-home:not(.hl-scrolled) .hl-header:not(.is-open) .hl-header__actions a.hl-header__link--btn { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; } body.hl-home:not(.hl-scrolled) .hl-header:not(.is-open) .hl-header__actions a.hl-header__link--btn:hover { background: rgba(255, 255, 255, .15); border-color: #fff; color: #fff; } } /* 10-15: staff holy-site filters */ .hl-staff__filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto auto; gap: 8px; align-items: center; margin: 14px 0 6px; } .hl-staff__filters .hl-af__input { height: 42px; margin: 0; box-sizing: border-box; } .hl-staff__filters .hl-btn { height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; box-sizing: border-box; white-space: nowrap; } .hl-staff__count { margin: 6px 0 10px; color: #6b7280; font-size: 13px; } .hl-staff__acts { display: flex; gap: 6px; } @media (max-width: 700px) { .hl-staff__filters { grid-template-columns: 1fr 1fr; } .hl-staff__filters input[type="search"] { grid-column: 1 / -1; } } /* 10-15b: staff filters - one height, one radius, dark search button like the other staff buttons */ form.hl-staff__filters input.hl-af__input, form.hl-staff__filters select.hl-af__input { height: 42px !important; min-height: 42px; border-radius: 8px !important; font-size: 14px; } form.hl-staff__filters .hl-btn, form.hl-staff__filters a.hl-btn.hl-btn--line { height: 42px !important; min-height: 42px; border-radius: 8px; font-size: 14px; box-sizing: border-box; line-height: 1; } form.hl-staff__filters button.hl-btn { background: #16181d !important; border-color: #16181d !important; color: #fff !important; } form.hl-staff__filters button.hl-btn:hover { background: #000 !important; } /* 10-15: staff list pagination - round numbers like the site's other pagers */ .hl-staff__pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; margin: 18px 0 4px; } .hl-staff__pg { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #e4e7ec; border-radius: 999px; background: #fff; color: #16181d; font-size: 14px; font-weight: 600; text-decoration: none; box-sizing: border-box; } a.hl-staff__pg:hover { border-color: #16181d; } .hl-staff__pg.is-current { background: #16181d; border-color: #16181d; color: #fff; } .hl-staff__pg--nav { padding: 0 14px; } .hl-staff__pg.is-off { color: #b5bac3; border-color: #eef0f3; } .hl-staff__pg.is-gap { border: 0; min-width: 20px; padding: 0; } /* 10-15: featured period - no end date checkbox */ .hl-staff__forever { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; white-space: nowrap; cursor: pointer; } .hl-staff__forever input { width: 16px; height: 16px; margin: 0; } /* 10-15: business delete - solid red so it reads stronger than 숨기기 */ .hl-staff .hl-btn.hl-staff__del--hard, .hl-btn.hl-staff__del--hard { background: #c62828; border-color: #c62828; color: #fff; } .hl-btn.hl-staff__del--hard:hover { background: #a91f1f; border-color: #a91f1f; color: #fff; } /* 10-15: photo licence lines (main photo + gallery captions) */ .hl-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px} .hl-gallery--holy .hl-gallery__fig{margin:0;min-width:0} .hl-gallery__cap{margin-top:6px;font-size:12px;line-height:1.4;color:var(--hl-muted,#6b6b6b);overflow-wrap:anywhere} .hl-gallery__cap a{color:inherit;text-decoration:underline;text-underline-offset:2px} /* 10-16: badges removed - keep the contact CTA on the right */ .hl-footer__mid .hl-footer__ctawrap{margin-left:auto} /* 10-16: altar servers promo page (/altar-servers/) */ .hl-promo { max-width: var(--hl-container, 1750px); margin: 0 auto; padding: 0 var(--hl-gutter, 20px) 96px; color: #2d3340; } .hl-promo p { margin: 0; } .hl-promo__hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; padding: 64px 0 24px; } .hl-promo p.hl-promo__kicker { display: inline-block; margin-bottom: 14px; padding: 6px 12px; border-radius: 999px; background: #fde7ef; color: var(--hl-brand-dark, #c80e51); font-size: 14px; font-weight: 700; letter-spacing: .02em; } .hl-promo h1.hl-promo__title { margin: 0; font-size: clamp(34px, 4.4vw, 56px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--hl-ink, #16181d); word-break: keep-all; } .hl-promo .hl-promo__lead p { margin-top: 18px; max-width: 560px; font-size: 18px; line-height: 1.7; color: var(--hl-text, #374151); word-break: keep-all; } .hl-promo__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .hl-promo a.hl-btn.hl-promo__btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 24px; border-radius: 999px; font-size: 16px; font-weight: 700; text-decoration: none; } .hl-promo .hl-shot { margin: 0; } .hl-promo .hl-shot__frame { box-shadow: 0 18px 50px rgba(22, 24, 29, .10); } .hl-promo .hl-shot__view { max-height: 460px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); } .hl-promo__sec { margin-top: 96px; } .hl-promo h2.hl-promo__h2 { margin: 0 0 28px; font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--hl-ink, #16181d); word-break: keep-all; } .hl-promo__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .hl-promo__card { padding: 28px 26px; border: 1px solid var(--hl-line, #e4e7ec); border-radius: 18px; background: var(--hl-bg-soft, #f7f8fa); } .hl-promo p.hl-promo__was { font-size: 14px; color: var(--hl-muted, #646b7a); text-decoration: line-through; text-decoration-color: rgba(100, 107, 122, .5); } .hl-promo h3.hl-promo__cardtitle { margin: 8px 0 10px; font-size: 20px; font-weight: 800; line-height: 1.35; color: var(--hl-ink, #16181d); word-break: keep-all; } .hl-promo .hl-promo__cardtext p { font-size: 15px; line-height: 1.7; color: var(--hl-text, #374151); word-break: keep-all; } .hl-promo__row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; padding: 36px 0; border-top: 1px solid var(--hl-line, #e4e7ec); } .hl-promo__row:first-of-type { border-top: 0; padding-top: 0; } .hl-promo__row--b .hl-promo__rowtxt { order: 2; } .hl-promo p.hl-promo__num { font-size: 14px; font-weight: 800; color: var(--hl-brand, #ed1262); } .hl-promo h3.hl-promo__rowtitle { margin: 6px 0 14px; font-size: 26px; font-weight: 800; line-height: 1.3; color: var(--hl-ink, #16181d); word-break: keep-all; } .hl-promo .hl-promo__list ul, .hl-promo .hl-promo__checks ul { margin: 0; padding: 0; list-style: none; } .hl-promo .hl-promo__list li, .hl-promo .hl-promo__checks li { position: relative; margin: 0 0 10px; padding-left: 28px; font-size: 16px; line-height: 1.6; color: var(--hl-text, #374151); word-break: keep-all; } .hl-promo .hl-promo__list li::before, .hl-promo .hl-promo__checks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: #fde7ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c80e51' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; } .hl-promo__case { padding: 56px 48px; border-radius: 24px; background: var(--hl-ink, #16181d); color: #fff; } .hl-promo__case p.hl-promo__kicker { background: rgba(255, 255, 255, .1); color: #ff8fb4; } .hl-promo h2.hl-promo__caseh { margin: 0; max-width: 900px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; line-height: 1.3; color: #fff; word-break: keep-all; } .hl-promo .hl-promo__casep p { margin-top: 16px; max-width: 820px; font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, .82); word-break: keep-all; } .hl-promo .hl-promo__casep a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .hl-promo ol.hl-promo__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; } .hl-promo li.hl-promo__step { margin: 0; padding: 28px 26px; border: 1px solid var(--hl-line, #e4e7ec); border-radius: 18px; background: #fff; } .hl-promo span.hl-promo__stepn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--hl-brand, #ed1262); color: #fff; font-size: 16px; font-weight: 800; } .hl-promo h3.hl-promo__steph { margin: 16px 0 8px; font-size: 19px; font-weight: 800; color: var(--hl-ink, #16181d); word-break: keep-all; } .hl-promo .hl-promo__stepp p { font-size: 15px; line-height: 1.7; color: var(--hl-text, #374151); word-break: keep-all; } .hl-promo__priv { padding: 44px 48px; border-radius: 24px; background: var(--hl-bg-soft, #f7f8fa); } .hl-promo__priv h2.hl-promo__h2 { margin-bottom: 20px; } .hl-promo__faq { max-width: 860px; } .hl-promo__faq h2.hl-promo__h2 { margin-bottom: 8px; } .hl-promo__faq .hl-faq__a a { color: var(--hl-brand-dark, #c80e51); } .hl-promo__cta { padding: 60px 32px; border-radius: 24px; background: linear-gradient(120deg, #c80e51 0%, #ed1262 55%, #ff5f8f 100%); color: #fff; text-align: center; } .hl-promo h2.hl-promo__ctah { margin: 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; line-height: 1.3; color: #fff; word-break: keep-all; } .hl-promo .hl-promo__ctap p { margin: 12px auto 0; max-width: 640px; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .92); word-break: keep-all; } .hl-promo .hl-promo__ctap a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .hl-promo a.hl-btn.hl-promo__btn--light { margin-top: 26px; background: #fff !important; border-color: #fff !important; color: var(--hl-brand-dark, #c80e51) !important; } .hl-promo a.hl-btn.hl-promo__btn--light:hover { background: var(--hl-ink, #16181d) !important; border-color: var(--hl-ink, #16181d) !important; color: #fff !important; } @media (max-width: 1000px) { .hl-promo__hero, .hl-promo__row { grid-template-columns: minmax(0, 1fr); gap: 28px; } .hl-promo__row--b .hl-promo__rowtxt { order: 0; } .hl-promo__cards, .hl-promo ol.hl-promo__steps { grid-template-columns: minmax(0, 1fr); gap: 14px; } } @media (max-width: 600px) { .hl-promo__hero { padding-top: 36px; } .hl-promo__sec { margin-top: 64px; } .hl-promo__case, .hl-promo__priv { padding: 36px 22px; border-radius: 18px; } .hl-promo__cta { padding: 44px 20px; border-radius: 18px; } .hl-promo .hl-shot__view { max-height: 360px; } .hl-promo__btns a.hl-btn.hl-promo__btn { flex: 1 1 100%; } } /* 10-16: home altar-server band */ .hl-altband { max-width: var(--hl-container, 1200px); margin: 96px auto 0; padding: 0 var(--hl-gutter, 24px); } .hl-altband__in { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 48px; align-items: center; padding: 48px 56px; border-radius: 24px; background: #fff3f7; border: 1px solid #fbd3e1; overflow: hidden; } .hl-homepage p.hl-altband__kicker { display: inline-block; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--hl-brand-dark, #c80e51); font-size: 13px; font-weight: 800; } .hl-homepage h2.hl-altband__title { margin: 0; font-size: 32px; line-height: 1.25; font-weight: 800; color: var(--hl-ink, #16181d); word-break: keep-all; } .hl-homepage p.hl-altband__text { margin: 14px 0 0; font-size: 16px; line-height: 1.7; color: var(--hl-text, #374151); word-break: keep-all; } .hl-homepage a.hl-btn.hl-altband__btn { display: inline-flex !important; align-items: center; height: 50px; margin: 26px 0 0 !important; padding: 0 28px !important; border-radius: 999px !important; background: var(--hl-brand, #ed1262) !important; border-color: var(--hl-brand, #ed1262) !important; color: #fff !important; font-size: 15px !important; font-weight: 800; text-decoration: none; } .hl-homepage a.hl-btn.hl-altband__btn:hover { background: var(--hl-brand-dark, #c80e51) !important; border-color: var(--hl-brand-dark, #c80e51) !important; } .hl-altband__shot { min-width: 0; } .hl-altband__shot .hl-shot { margin: 0; } .hl-altband__shot .hl-shot__view { max-height: 440px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); } .hl-altband__shot figcaption, .hl-altband__shot .hl-shot__cap { display: none; } @media (max-width: 900px) { .hl-altband__in { grid-template-columns: 1fr; gap: 28px; padding: 32px 22px; } .hl-homepage h2.hl-altband__title { font-size: 24px; } .hl-altband__shot .hl-shot__view { max-height: 340px; } }