/* ====================== COMMUNITY HUB (scoped / namespaced) ====================== */ #page-community-hub{ background:#F4EEE3; } #page-community-hub .ch-body{ max-width:1120px; margin:0 auto; padding:6px 20px 84px; } /* hero */ #page-community-hub .ch-hero{ background:linear-gradient(160deg,#1f3a2c 0%,#2e5640 100%) !important; border-radius:0 0 34px 34px; padding:54px 24px 60px; text-align:center; position:relative; overflow:hidden; } #page-community-hub .ch-hero::after{ content:""; position:absolute; width:440px; height:440px; right:-130px; top:-170px; background:radial-gradient(circle, rgba(248,210,190,0.20), transparent 70%); pointer-events:none; } #page-community-hub .ch-hero::before{ content:""; position:absolute; width:360px; height:360px; left:-120px; bottom:-180px; background:radial-gradient(circle, rgba(198,232,212,0.16), transparent 70%); pointer-events:none; } #page-community-hub .ch-hero-in, #page-community-hub .ch-hero-sub, #page-community-hub .ch-hero-btns{ background:transparent !important; background-image:none !important; } #page-community-hub .ch-hero-in{ position:relative; z-index:1; max-width:760px; margin:0 auto; } #page-community-hub .ch-kicker{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.22); color:#FBEFC4 !important; font-size:0.7rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; padding:6px 15px; border-radius:50px; margin-bottom:18px; } #page-community-hub .ch-hero h1{ font-family:Georgia,'Times New Roman',serif; color:#fff !important; font-size:clamp(2.1rem,4.5vw,3.1rem); font-weight:700; line-height:1.12; margin:0 0 14px; } #page-community-hub .ch-hero-sub{ color:rgba(255,255,255,0.84) !important; font-size:1.05rem; line-height:1.6; margin:0 auto 28px; max-width:560px; } #page-community-hub .ch-hero-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } /* buttons */ #page-community-hub .ch-btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:inherit; font-weight:700; font-size:0.92rem; padding:12px 22px; border-radius:50px; border:1.5px solid transparent; transition:transform .15s, box-shadow .15s, background .15s; white-space:nowrap; } #page-community-hub .ch-btn:hover{ transform:translateY(-2px); } #page-community-hub .ch-btn-primary{ background:#F8D2BE; color:#243447 !important; box-shadow:0 8px 22px rgba(248,210,190,0.35); } #page-community-hub .ch-btn-ghost{ background:transparent; color:#fff !important; border-color:rgba(255,255,255,0.55); } #page-community-hub .ch-btn-ghost:hover{ background:rgba(255,255,255,0.10); } #page-community-hub .ch-btn-sm{ font-size:0.82rem; padding:9px 16px; } #page-community-hub .ch-btn-navy{ background:#243447; color:#fff !important; } #page-community-hub .ch-btn-soft{ background:#fff; color:#243447 !important; border-color:#E7DECB; } #page-community-hub .ch-btn-full{ width:100%; justify-content:center; } /* section scaffolding */ #page-community-hub .ch-section{ margin-top:48px; scroll-margin-top:80px; } #page-community-hub .ch-sec-head{ margin-bottom:20px; } #page-community-hub .ch-eyek{ color:#C9826A !important; font-size:0.72rem; font-weight:800; letter-spacing:0.13em; text-transform:uppercase; margin-bottom:6px; } #page-community-hub .ch-section h2{ color:#243447 !important; font-family:Georgia,serif; font-size:1.6rem; font-weight:700; margin:0 0 4px; } #page-community-hub .ch-sec-sub{ color:#6b6256 !important; font-size:0.95rem; margin:0; line-height:1.5; } /* generic cream card */ #page-community-hub .ch-box{ background:#FCF7EE; border:1px solid #EFE6D4; border-radius:20px; padding:24px; box-shadow:0 6px 18px rgba(36,52,71,0.05); } /* highlights grid */ #page-community-hub .ch-hl-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } #page-community-hub .ch-hl{ background:#FCF7EE; border:1px solid #EFE6D4; border-radius:20px; padding:20px; border-top:4px solid var(--ch-ac,#F8D2BE); box-shadow:0 6px 18px rgba(36,52,71,0.05); display:flex; flex-direction:column; } #page-community-hub .ch-ic{ width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:12px; background:var(--ch-ac,#F8D2BE); } #page-community-hub .ch-hl-k{ font-size:0.66rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:#9a8f7e !important; margin-bottom:7px; } #page-community-hub .ch-hl-q{ color:#3a4452 !important; font-size:0.95rem; line-height:1.5; font-weight:600; margin:0 0 12px; flex:1; } #page-community-hub .ch-hl-by{ color:#857c6e !important; font-size:0.8rem; display:flex; align-items:center; gap:6px; flex-wrap:wrap; } /* form */ #page-community-hub .ch-form{ display:grid; gap:16px; } #page-community-hub .ch-row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } #page-community-hub .ch-fld{ display:flex; flex-direction:column; gap:6px; } #page-community-hub .ch-lab{ font-size:0.82rem; font-weight:700; color:#3a4452 !important; } #page-community-hub .ch-fld input[type=text], #page-community-hub .ch-fld textarea, #page-community-hub .ch-fld select{ width:100%; box-sizing:border-box; font-family:inherit; font-size:0.92rem; color:#243447 !important; background:#fff !important; border:1.5px solid #E5DBC8 !important; border-radius:12px !important; padding:11px 14px !important; outline:none; transition:border-color .15s; -webkit-appearance:none; appearance:none; } #page-community-hub .ch-fld textarea{ min-height:100px; resize:vertical; } #page-community-hub .ch-fld input[type=text]:focus, #page-community-hub .ch-fld textarea:focus, #page-community-hub .ch-fld select:focus{ border-color:#C9826A !important; } #page-community-hub .ch-file{ border:1.5px dashed #D9CDB6; border-radius:14px; padding:18px; text-align:center; color:#857c6e !important; cursor:pointer; background:#FBF6EB; font-size:0.88rem; display:block; } #page-community-hub .ch-file input{ display:none; } #page-community-hub .ch-tog-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 16px; background:#FBF6EB; border:1px solid #EFE6D4; border-radius:14px; } #page-community-hub .ch-tog-lab{ font-size:0.9rem; font-weight:600; color:#3a4452 !important; } #page-community-hub .ch-sw{ width:46px; height:26px; border-radius:50px; background:#D9CFC0; position:relative; cursor:pointer; transition:background .2s; flex:none; border:none; padding:0; } #page-community-hub .ch-sw::after{ content:""; position:absolute; width:20px; height:20px; border-radius:50%; background:#fff; top:3px; left:3px; transition:left .2s; box-shadow:0 1px 3px rgba(0,0,0,0.2); } #page-community-hub .ch-sw.on{ background:#8BBF9F; } #page-community-hub .ch-sw.on::after{ left:23px; } #page-community-hub .ch-ok{ display:none; align-items:center; gap:10px; background:#DCF1E5; border:1px solid #B6DEC6; color:#256d47 !important; padding:14px 16px; border-radius:14px; font-weight:600; font-size:0.92rem; } #page-community-hub .ch-ok.show{ display:flex; } /* category grid */ #page-community-hub .ch-cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } #page-community-hub .ch-cat{ background:#FCF7EE; border:1px solid #EFE6D4; border-radius:18px; padding:18px; cursor:pointer; transition:transform .15s, box-shadow .15s; text-align:left; display:flex; flex-direction:column; gap:10px; } #page-community-hub .ch-cat:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(36,52,71,0.09); } #page-community-hub .ch-cat-nm{ font-weight:700; color:#243447 !important; font-size:0.98rem; } #page-community-hub .ch-cat-ct{ font-size:0.78rem; color:#857c6e !important; } /* tabs */ #page-community-hub .ch-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; } #page-community-hub .ch-tab{ cursor:pointer; font-family:inherit; font-weight:700; font-size:0.85rem; padding:8px 16px; border-radius:50px; border:1.5px solid #E5DBC8; background:#fff; color:#5b5346 !important; transition:all .15s; } #page-community-hub .ch-tab:hover{ border-color:#C9826A; } #page-community-hub .ch-tab.on{ background:#243447; color:#fff !important; border-color:#243447; } /* feed posts */ #page-community-hub .ch-feed{ display:grid; gap:16px; } #page-community-hub .ch-post{ background:#FCF7EE; border:1px solid #EFE6D4; border-radius:18px; padding:20px; box-shadow:0 6px 18px rgba(36,52,71,0.05); } #page-community-hub .ch-post-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; } #page-community-hub .ch-av{ width:34px; height:34px; border-radius:50%; background:#DBD0F0; display:flex; align-items:center; justify-content:center; font-size:0.95rem; flex:none; } #page-community-hub .ch-user{ font-weight:700; color:#243447 !important; font-size:0.9rem; } #page-community-hub .ch-time{ color:#9a8f7e !important; font-size:0.78rem; } #page-community-hub .ch-type{ margin-left:auto; font-size:0.68rem; font-weight:800; letter-spacing:0.03em; padding:4px 11px; border-radius:50px; background:var(--ch-ac,#DCF1E5); color:#3a4452 !important; } #page-community-hub .ch-post h3{ color:#243447 !important; font-size:1.08rem; font-weight:700; margin:0 0 6px; } #page-community-hub .ch-prev{ color:#5b5346 !important; font-size:0.92rem; line-height:1.55; margin:0 0 12px; } #page-community-hub .ch-kws{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; } #page-community-hub .ch-kw{ font-size:0.74rem; font-weight:600; color:#7a7184 !important; background:#EFE9F6; padding:4px 11px; border-radius:50px; } #page-community-hub .ch-acts{ display:flex; gap:4px; flex-wrap:wrap; border-top:1px solid #EFE6D4; padding-top:12px; } #page-community-hub .ch-act{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-family:inherit; font-size:0.82rem; font-weight:600; color:#5b5346 !important; background:transparent; border:none; padding:6px 11px; border-radius:10px; transition:background .12s, color .12s; } #page-community-hub .ch-act:hover{ background:#F4EEE2; } #page-community-hub .ch-act.on{ color:#C9826A !important; } #page-community-hub .ch-act.ch-save.on{ color:#256d47 !important; } #page-community-hub .ch-act.ch-report:hover{ color:#b4543a !important; } #page-community-hub .ch-n{ font-variant-numeric:tabular-nums; } /* ask */ #page-community-hub .ch-ask{ background:linear-gradient(150deg,#2e5640 0%,#1f3a2c 100%); border-radius:24px; padding:32px; } #page-community-hub .ch-ask h2{ color:#fff !important; } #page-community-hub .ch-ask .ch-sec-sub{ color:rgba(255,255,255,0.80) !important; } #page-community-hub .ch-ask .ch-eyek{ color:#FBEFC4 !important; } #page-community-hub .ch-q-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0 22px; } #page-community-hub .ch-q{ display:flex; align-items:center; gap:11px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); border-radius:14px; padding:14px 16px; cursor:pointer; color:#fff !important; font-size:0.92rem; font-weight:600; text-align:left; transition:background .15s, transform .15s; } #page-community-hub .ch-q:hover{ background:rgba(255,255,255,0.16); transform:translateY(-2px); } #page-community-hub .ch-q span{ font-size:1.1rem; } /* challenges */ #page-community-hub .ch-chal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } #page-community-hub .ch-chal{ background:#FCF7EE; border:1px solid #EFE6D4; border-radius:18px; padding:20px; box-shadow:0 6px 18px rgba(36,52,71,0.05); display:flex; flex-direction:column; } #page-community-hub .ch-chal-ic{ font-size:1.7rem; margin-bottom:8px; } #page-community-hub .ch-chal h3{ color:#243447 !important; font-size:1.05rem; font-weight:700; margin:0 0 4px; } #page-community-hub .ch-chal p{ color:#6b6256 !important; font-size:0.86rem; line-height:1.45; margin:0 0 14px; flex:1; } #page-community-hub .ch-bar{ height:8px; border-radius:50px; background:#EAE1D0; overflow:hidden; margin-bottom:7px; } #page-community-hub .ch-bar-fill{ height:100%; border-radius:50px; background:linear-gradient(90deg,#8BBF9F,#C6E8D4); transition:width .45s ease; } #page-community-hub .ch-chal-meta{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } #page-community-hub .ch-mem{ font-size:0.78rem; color:#857c6e !important; } #page-community-hub .ch-pct{ font-size:0.78rem; font-weight:700; color:#5a9277 !important; } /* saved inspiration */ #page-community-hub .ch-sv-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; } #page-community-hub .ch-sv{ background:#fff; border:1px solid #EFE6D4; border-radius:14px; padding:14px; display:flex; gap:11px; align-items:flex-start; } #page-community-hub .ch-sv-ic{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex:none; background:var(--ch-ac,#FBEFC4); } #page-community-hub .ch-sv-t{ font-size:0.88rem; font-weight:700; color:#243447 !important; line-height:1.3; } #page-community-hub .ch-sv-s{ font-size:0.76rem; color:#857c6e !important; margin-top:2px; } /* trust */ #page-community-hub .ch-trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px; } #page-community-hub .ch-trust{ display:flex; gap:12px; align-items:flex-start; } #page-community-hub .ch-trust-ic{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex:none; background:var(--ch-ac,#DBD0F0); } #page-community-hub .ch-trust-t{ font-weight:700; color:#243447 !important; font-size:0.92rem; margin-bottom:3px; } #page-community-hub .ch-trust-d{ color:#6b6256 !important; font-size:0.82rem; line-height:1.45; } #page-community-hub .ch-kind{ margin-top:24px; background:linear-gradient(135deg,#F8D2BE,#FBEFC4); border-radius:18px; padding:26px; text-align:center; } #page-community-hub .ch-kind-t{ font-family:Georgia,serif; font-size:1.3rem; font-weight:700; color:#243447 !important; font-style:italic; margin:0; } /* responsive */ @media (max-width:900px){ #page-community-hub .ch-hl-grid{ grid-template-columns:1fr 1fr; } #page-community-hub .ch-cat-grid{ grid-template-columns:1fr 1fr; } #page-community-hub .ch-chal-grid{ grid-template-columns:1fr 1fr; } #page-community-hub .ch-trust-grid{ grid-template-columns:1fr; } #page-community-hub .ch-q-grid{ grid-template-columns:1fr; } #page-community-hub .ch-row2{ grid-template-columns:1fr; } } @media (max-width:560px){ #page-community-hub .ch-hl-grid{ grid-template-columns:1fr; } #page-community-hub .ch-cat-grid{ grid-template-columns:1fr; } #page-community-hub .ch-chal-grid{ grid-template-columns:1fr; } #page-community-hub .ch-hero h1{ font-size:2rem; } #page-community-hub .ch-hero-btns .ch-btn{ width:100%; justify-content:center; } #page-community-hub .ch-body{ padding-left:14px; padding-right:14px; } }