/** * 인천송도교회 공용 디자인 토큰 + 웹폰트 (CDN) * * icsd-homepage, icsd-sermon-archive, icsd-boards 세 플러그인의 모든 화면이 * 이 파일 하나를 공유합니다. 색을 바꾸고 싶으면 아래 :root 값만 고치면 * 전체 사이트에 반영됩니다. * * 배색은 사랑의교회(sarang.org) 스타일을 참고한 화이트·블루 계열입니다. */ /* Pretendard - jsdelivr CDN */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css'); /* Noto Sans KR — biz2(레퍼런스 Biz Theme 2) 메뉴 글씨체가 이 폰트라 실측 후 추가. icsd_hp_inline_font_choices()의 '노토 산스' 선택지가 실제로 로드되도록. */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap'); /* Roboto — biz1(레퍼런스 Biz Theme 1) 히어로 타이틀 글씨체가 이 폰트라 실측 후 추가. icsd_hp_inline_font_choices()의 'Roboto' 선택지가 실제로 로드되도록. */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); :root{ --sm-bg:#F6F7F9; --sm-card:#FFFFFF; --sm-border:#E5E8EC; --sm-text:#1A1D21; --sm-text-sub:#6B7280; --sm-accent:#1E6FEB; --sm-accent-on:#FFFFFF; /* ---- 히어로 전용 (실제 설교 썸네일 위 오버레이) ---- */ --hero-dark:#0B1220; } /* ------------------------------------------------- * 공용 사이트 헤더/푸터 * icsd_site_header() / icsd_site_footer() 헬퍼(icsd-homepage.php, * icsd-sermon-archive.php, icsd-boards.php에 동일하게 정의됨)가 출력하는 * 마크업과 짝을 이루는 스타일입니다. 모든 페이지가 이 파일을 불러오므로 * 설교/교제/앨범 게시판을 포함한 사이트 전체에 같은 상단 메뉴가 나옵니다. * ------------------------------------------------- */ *{box-sizing:border-box} .icsd-wrap{max-width:1100px;margin:0 auto;padding:0 24px} .icsd-header{position:sticky;top:0;z-index:20;background:var(--menu-bar-bg,rgba(255,255,255,.92));backdrop-filter:blur(6px);border-bottom:.5px solid var(--sm-border);font-family:'Pretendard',sans-serif;transition:box-shadow .25s ease} .icsd-header-static{position:static} /* 사진 배너 위에 곧바로 얹히는 오버레이 헤더(icsd_site_header(true), 레퍼런스 서브페이지 구조를 실측해서 재현) — 문서 흐름에서 빼서(fixed) 배너가 그 자리를 그대로 차지하게 하고, 배경은 완전 투명, 로고는 사진 위에서도 잘 보이도록 밝은 필터를 씀. */ .icsd-header-overlay{position:fixed;left:0;right:0;background:transparent!important;backdrop-filter:none;border-bottom:none;box-shadow:none;transition:background .25s ease} .icsd-header-overlay .icsd-logo img{filter:brightness(0) invert(1)} /* 사진/여러 색이 섞인 로고로 바꾸면 위 강제 흰색 필터 때문에 흰 사각형처럼 뭉개져 보여서 "로고를 바꿨는데 안 바뀐다"는 착시가 남 — 관리자가 이 강제 변환을 끄면 이 클래스가 붙어 원래 로고 색 그대로 나옵니다(icsd_hp_menu_logo_invert). */ .icsd-header-overlay .icsd-logo img.icsd-logo-no-invert{filter:none} /* 레퍼런스는 히어로/배너를 벗어나면(is-scrolled, 기존 스크롤 축소 JS가 이미 토글하던 클래스 재사용) 투명하던 헤더가 불투명 어두운 배경으로 바뀜(getComputedStyle로 부모 래퍼가 rgba(0,0,0,.8)인 것 확인) — 흰 글자는 그대로라 밝은 배경 섹션 위에서도 계속 읽힘. 서브메뉴도 오버레이 모드에선 원래 투명인데, 밝은 섹션 위로 열릴 수도 있어서 방문자 가독성을 위해 항상 어두운 반투명 배경을 줌(레퍼런스보다 더 안전한 절충). 예전엔 이 배경색을 !important로 고정 하드코딩해서 관리자가 서브메뉴 배경/투명도를 실시간 편집기로 아무리 바꿔도 오버레이 페이지(예: biz2 서브페이지)에서는 화면에 전혀 반영되지 않는 버그가 있었음(92번 이후 사용자가 "투명도 조절해도 적용 안 된다"고 재확인해서 발견) — 이제 --menu-submenu-bg-overlay 변수(overlay_submenu_bg_color/opacity, icsd_hp_nav_menu_link_attributes()가 오버레이일 때 이 필드를 가리키도록 분기)로 대체해 실제로 조절되게 하고, !important 없이 `.icsd-nav`를 셀렉터에 추가해 자연스러운 상세도로 아래(약 75번째 줄) 일반 `.icsd-nav .sub-menu` 규칙을 이깁니다(선언 순서가 아니라 상세도로 이기게 해서 향후 파일 순서가 바뀌어도 깨지지 않도록). */ .icsd-header-overlay.is-scrolled{background:rgba(0,0,0,.8)!important} .icsd-header-overlay .icsd-nav .sub-menu{background:var(--menu-submenu-bg-overlay,rgba(20,20,24,.94));border-color:rgba(255,255,255,.12)} .icsd-header-overlay .sub-menu a{color:#fff!important} .icsd-header-shadow{box-shadow:0 2px 12px rgba(16,24,40,.08)} /* 스크롤 축소 효과 — sticky/static 여부·그림자 고정 옵션과 무관하게 항상 켜져 있습니다(2udesign 레퍼런스 사이트의 헤더 축소 효과를 재현, 예전 백로그 "메뉴 효과" 항목). icsd_site_header()의 인라인 스크립트가 일정 스크롤 이후 .icsd-header에 .is-scrolled를 붙입니다. */ .icsd-header.is-scrolled{box-shadow:0 2px 12px rgba(16,24,40,.08)} .icsd-header .icsd-wrap{position:relative;display:flex;align-items:center;justify-content:var(--menu-align,space-between);gap:32px;height:var(--menu-bar-height,64px);transition:height .25s ease} .icsd-header.is-scrolled .icsd-wrap{height:max(48px,calc(var(--menu-bar-height,64px) - 12px))} .icsd-logo{font-family:'Pretendard',sans-serif;font-weight:700;font-size:18px;text-decoration:none;color:var(--sm-text);display:flex;align-items:center;transition:transform .25s ease} .icsd-header.is-scrolled .icsd-logo{transform:scale(.9);transform-origin:left center} .icsd-logo img{height:var(--menu-logo-height,32px);width:auto;display:block} .icsd-nav{display:flex;gap:var(--menu-item-gap,24px);list-style:none;margin:0;padding:0;align-items:center} .icsd-nav li{position:relative} .icsd-nav a{font-size:var(--menu-item-font-size,14px);font-family:var(--menu-item-font,inherit);text-decoration:none;color:var(--menu-item-color,var(--sm-text-sub))} .icsd-nav a:hover{color:var(--menu-item-hover-color,var(--sm-accent))} .icsd-nav-toggle{display:none;background:none;border:none;padding:8px;margin:-8px;cursor:pointer;color:var(--sm-text)} .icsd-nav-toggle svg{width:24px;height:24px;display:block} /* ---- 서브메뉴(드롭다운) — 기본은 호버로 열림(별도 JS 불필요). data-submenu-trigger="click"이면 호버로는 안 열리고(아래 :not() 규칙), icsd_site_header()의 인라인 스크립트가 클릭으로 .is-submenu-open 클래스를 토글합니다(호버가 없는 터치 기기 대응 겸 선택 옵션). ---- */ .icsd-nav .sub-menu{display:none;position:absolute;top:100%;left:0;min-width:180px;list-style:none;margin:0;padding:6px 0;background:var(--menu-submenu-bg,#fff);border:var(--menu-submenu-border-width,1px) solid var(--menu-submenu-border-color,var(--sm-border));border-radius:var(--menu-submenu-radius,8px);box-shadow:0 8px 16px rgba(16,24,40,.08);z-index:30} .icsd-nav:not([data-submenu-trigger="click"]) li:hover > .sub-menu{display:block} .icsd-nav[data-submenu-trigger="click"] li.is-submenu-open > .sub-menu{display:block} /* 실시간 편집 모드에서는 trigger 설정과 무관하게 항상 호버로 서브메뉴를 볼 수 있어야 톱니로 스타일을 만질 수 있습니다(방문자 경험은 위 규칙이 그대로 담당). */ body.icsd-edit-mode .icsd-nav li:hover > .sub-menu{display:block} /* 서브메뉴 항목의 톱니를 누르러 마우스를 옮기는 동안 li:hover가 풀려 서브메뉴가 먼저 사라져버리는 문제 — 톱니/스타일 패널이 그 항목을 위해 떠 있는 동안은 inline-editor.js가 이 클래스를 붙여 강제로 열린 상태를 유지시킵니다. */ body.icsd-edit-mode .icsd-nav li.icsd-ie-pin-open > .sub-menu{display:block} .icsd-nav .sub-menu li{width:100%} .icsd-nav .sub-menu li+li{margin-top:var(--menu-submenu-gap,0px)} .icsd-nav .sub-menu a{font-size:var(--menu-submenu-font-size,14px);font-family:var(--menu-submenu-font,inherit);color:var(--menu-submenu-color,var(--sm-text));padding:8px 16px;display:block} .icsd-nav .sub-menu a:hover{color:var(--menu-item-hover-color,var(--sm-accent))} .icsd-footer{background:#080D18;color:rgba(255,255,255,.55);text-align:center;font-size:12px;padding:24px;font-family:'Pretendard',sans-serif} .icsd-footer-company{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.12)} .icsd-footer-company span{white-space:nowrap} .icsd-footer-company b{color:rgba(255,255,255,.75);font-weight:600;margin-right:4px} /* ---- 맨 위로 버튼 — icsd_site_header()가 헤더 뒤에 같이 출력하고, 인라인 스크립트가 스크롤량에 따라 .is-visible을 토글합니다(2udesign 레퍼런스의 우하단 원형 버튼 재현). ---- */ .icsd-back-to-top{position:fixed;right:24px;bottom:24px;width:44px;height:44px;border-radius:50%;background:var(--sm-accent);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(16,24,40,.2);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:19} .icsd-back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)} .icsd-back-to-top:hover{background:var(--menu-item-hover-color,var(--sm-accent))} .icsd-back-to-top svg{width:20px;height:20px} @media (max-width:760px){ .icsd-back-to-top{right:16px;bottom:16px;width:40px;height:40px} } @media (max-width:760px){ .icsd-nav-toggle{display:block} .icsd-nav{display:none;flex-direction:column;gap:0;list-style:none;margin:0;padding:8px 0;position:absolute;top:100%;left:0;right:0;background:var(--menu-mobile-bg,var(--sm-card));border-bottom:.5px solid var(--sm-border);box-shadow:0 8px 16px rgba(16,24,40,.08)} .icsd-nav.is-open{display:flex} .icsd-nav li{width:100%} .icsd-nav a{display:block;padding:14px 24px;border-bottom:.5px solid var(--sm-border)} /* 모바일엔 호버가 없어서, 절대 위치 드롭다운 대신 부모 아래 항상 펼쳐서 보여줍니다 */ .icsd-nav .sub-menu{display:block;position:static;box-shadow:none;border:none;border-radius:0;background:var(--sm-bg)} .icsd-nav .sub-menu a{padding-left:40px} } /* ------------------------------------------------- * 공용 섹션 블록 스타일 — front-page.php(통합 섹션)와 page.php(서브페이지, "기업 테마 1"의 * 실제 서브페이지 15개가 대표적) 양쪽 모두에서 icsd/feature-grid, icsd/image-cta, * icsd/video-section, icsd/portfolio-grid, icsd/contact-form, icsd/media-text-row, * icsd/timeline, icsd/faq-accordion 블록을 재사용할 수 있도록 여기(모든 화면이 공유하는 * brand.css)로 옮겨왔습니다 — front-page.php 전용이었을 땐 인라인