/* OrgFuse public app */ .of-app{max-width:860px;margin:0 auto;font-size:16px;line-height:1.5} .of-header{display:flex;gap:16px;align-items:center;margin-bottom:16px} .of-header img{width:72px;height:72px;object-fit:contain;border-radius:8px} .of-header h2{margin:0} .of-header p{margin:4px 0 0;color:#555} .of-card{background:#fff;border:1px solid #e2e2e2;border-radius:10px;padding:20px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.05)} .of-grid{display:flex;flex-wrap:wrap;gap:12px} .of-field{display:flex;flex-direction:column;margin-bottom:10px;flex:1 1 100%} /* grid_size N = 1/N of the row (legacy pure-u-1-N semantics) */ .of-grid .of-grid-1{flex-basis:100%} .of-grid .of-grid-2{flex-basis:47%} .of-grid .of-grid-3{flex-basis:30.5%} .of-grid .of-grid-4{flex-basis:22%} .of-grid .of-grid-6{flex-basis:14%} .of-grid .of-grid-8{flex-basis:10%} .of-grid .of-grid-12{flex-basis:100%} .of-field label{font-weight:600;margin-bottom:4px} .of-field input,.of-field select,.of-field textarea{padding:8px 10px;border:1px solid #ccc;border-radius:6px;font:inherit} .of-field small{color:#666;margin-top:3px} .of-req{color:#c00} .of-radio-group{display:flex;gap:14px;flex-wrap:wrap} .of-radio{font-weight:400;display:inline-flex;align-items:flex-start;gap:8px;line-height:1.45;cursor:pointer} .of-field input[type=checkbox],.of-field input[type=radio]{width:auto;padding:0;border:0;border-radius:0;box-shadow:none;margin:3px 0 0;flex:0 0 auto;min-height:0} .of-field>.of-radio{margin-top:4px} .of-consent{align-items:flex-start} .of-btn{padding:10px 18px;border-radius:6px;border:1px solid #bbb;background:#f5f5f5;cursor:pointer;font:inherit} .of-btn-primary{background:#2271b1;border-color:#2271b1;color:#fff} .of-btn:disabled{opacity:.5;cursor:not-allowed} .of-error{background:#fdecea;border:1px solid #e5b3ae;color:#8a1f16;padding:10px 14px;border-radius:6px;margin-bottom:12px} .of-loading{padding:30px;color:#555;display:flex;align-items:center;justify-content:center;gap:10px} .of-loading::before{content:"";width:20px;height:20px;flex:0 0 auto;border:2px solid #d5dbe1;border-top-color:var(--of-brand,#2271b1);border-radius:50%;animation:of-spin .7s linear infinite} .of-tier{background:#f0f6fb;padding:8px 12px;border-radius:6px} .of-packages{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px} .of-package{border:2px solid #ddd;border-radius:8px;padding:12px 16px;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-width:180px} .of-package.selected{border-color:#2271b1;background:#f0f6fb} .of-package.closed{opacity:.55;cursor:not-allowed} .of-package input{position:absolute;opacity:0} .of-package-name{font-weight:700} .of-package-price{font-size:1.15em} .of-package-window{color:#a05a00;font-size:.85em} .of-package-closed{color:#c00;font-size:.85em} .of-addon{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #eee} .of-addon input{width:70px;padding:6px;border:1px solid #ccc;border-radius:6px} .of-total{font-size:1.3em;margin:16px 0;text-align:right} .of-lines{color:#444} .of-payment{margin-top:10px} #of-payment-element{margin-bottom:14px} .of-offline{margin-top:16px;border-top:1px dashed #ccc;padding-top:12px} .of-done h3{color:#1a7a2e} .of-table{width:100%;border-collapse:collapse;margin:10px 0} .of-table th,.of-table td{border:1px solid #e2e2e2;padding:6px 10px;text-align:left} .of-status-paid strong{color:#1a7a2e} .of-status-pending_approval strong{color:#a05a00} @media(max-width:640px){.of-grid .of-field{flex-basis:100%!important}} .of-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;margin-right:8px;vertical-align:-2px;animation:of-spin .7s linear infinite} @keyframes of-spin{to{transform:rotate(360deg)}} .of-closed h3{color:#a05a00;text-align:center;margin:20px 0} .of-info-block{background:#f8f7f2;border:1px solid #e8e4d8;border-radius:8px;padding:14px 18px} .of-info-block h4{margin:0 0 8px} .of-info-body{color:#333} .of-info-body p{margin:.5em 0} .of-file-note{color:#888} .of-events{display:flex;flex-direction:column;gap:10px} .of-event-choice{display:flex;align-items:center;gap:14px;padding:12px 16px;border:2px solid #ddd;border-radius:8px;background:#fff;cursor:pointer;text-align:left;font:inherit} .of-event-choice:hover{border-color:#2271b1;background:#f0f6fb} .of-event-choice img{width:48px;height:48px;object-fit:contain} .of-event-title{font-weight:700;font-size:1.05em} .of-event-meta{color:#666;margin-left:auto} .of-intro{background:#fbfaf6} .of-intro-letter{border-top:1px dashed #ddd;margin-top:10px;padding-top:10px} .of-btn-doc{display:inline-block;text-decoration:none;background:#f0f6fb;border-color:#2271b1;color:#2271b1;font-weight:600} .of-help{color:#777;font-style:italic} .of-addon-info{flex:1} .of-addon-controls{display:flex;gap:8px;align-items:center} .of-addon-controls select{padding:6px 8px;border:1px solid #ccc;border-radius:6px;max-width:240px} .of-section{margin-bottom:8px} .of-repeater{margin:6px 0 14px} .of-repeater-row{border:1px solid #e2e2e2;border-radius:8px;padding:12px;margin-bottom:10px;background:#fafafa} .of-repeater-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px} .of-repeater-toggle{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer} .of-repeater-caret{color:var(--of-brand);font-size:12px;line-height:1} .of-repeater-name{color:#555;font-weight:400} .of-repeater-actions{display:flex;gap:6px;flex-shrink:0} .of-repeater-row.is-collapsed{padding:8px 12px;background:#fff} .of-rating{display:flex;align-items:center;gap:4px;flex-wrap:wrap} .of-star{background:none;border:0;padding:0 2px;font-size:26px;line-height:1;color:#d4d4d4;cursor:pointer} .of-star.on{color:#f5b301} .of-star:hover{color:#f5c542} .of-rating-clear{background:none;border:0;color:#777;font-size:12px;cursor:pointer;margin-left:6px;text-decoration:underline} .of-scale-btns{display:flex;flex-wrap:wrap;gap:6px} .of-scale-btn{min-width:40px;padding:9px 0;border:1px solid #ccc;border-radius:6px;background:#fff;cursor:pointer;font:inherit;color:inherit} .of-scale-btn:hover{border-color:var(--of-brand)} .of-scale-btn.on{background:var(--of-brand);color:var(--of-brand-text);border-color:var(--of-brand)} .of-scale-ends{display:flex;justify-content:space-between;font-size:12px;color:#666;margin-top:5px} .of-nps .of-scale-btn{min-width:34px} .of-btn-small{padding:3px 10px;font-size:12px} .of-amount input{width:90px;padding:6px;border:1px solid #ccc;border-radius:6px} .of-auto-qty{display:inline-block;min-width:32px;text-align:center;font-weight:700;background:#eef4fb;border-radius:6px;padding:4px 8px} /* ===== Form engine v2: real 12-column grid (overrides earlier fake grid) ===== */ .of-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;align-items:start} .of-grid .of-field{grid-column:span 12;margin-bottom:0} .of-grid .of-grid-1{grid-column:span 1} .of-grid .of-grid-2{grid-column:span 2} .of-grid .of-grid-3{grid-column:span 3} .of-grid .of-grid-4{grid-column:span 4} .of-grid .of-grid-5{grid-column:span 5} .of-grid .of-grid-6{grid-column:span 6} .of-grid .of-grid-7{grid-column:span 7} .of-grid .of-grid-8{grid-column:span 8} .of-grid .of-grid-9{grid-column:span 9} .of-grid .of-grid-10{grid-column:span 10} .of-grid .of-grid-11{grid-column:span 11} .of-grid .of-grid-12{grid-column:span 12} .of-field input,.of-field select,.of-field textarea{width:100%} @media(max-width:640px){.of-grid .of-field{grid-column:span 12 !important}} /* Add-on rows: padding + spacing (esp. colored bgcolor rows) */ .of-addons{display:flex;flex-direction:column;gap:8px} .of-addon{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;border:1px solid #e6e6e6;border-radius:8px} .of-addon-controls{flex-shrink:0} /* Inline validation */ .of-field-error input,.of-field-error select,.of-field-error textarea{border-color:#d63638 !important;background:#fff6f6} .of-inline-error{color:#8a1f16;font-size:12px;margin-top:3px;display:block} .of-error-summary{background:#fdecea;border:1px solid #e5b3ae;color:#8a1f16;padding:10px 14px;border-radius:6px;margin-bottom:12px} /* ===== OrgFuse owns its CSS: theme isolation + brand theming ===== */ #orgfuse-app,#orgfuse-membership{--of-brand:#2271b1;--of-brand-text:#fff;--of-accent:#1a7a2e} /* Buttons: fully self-defined so no theme washes them out (opacity/filter/bg). */ #orgfuse-app .of-btn,#orgfuse-membership .of-btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; padding:10px 18px;border-radius:6px;border:1px solid #c7c7c7;background:#f3f4f5;color:#1d2327; font:inherit;font-weight:600;line-height:1.2;cursor:pointer;opacity:1;filter:none; text-decoration:none;text-shadow:none;box-shadow:none;transition:background .12s,border-color .12s} #orgfuse-app .of-btn:hover,#orgfuse-membership .of-btn:hover{background:#e9eaec;border-color:#a9a9a9;color:#1d2327} #orgfuse-app .of-btn-primary,#orgfuse-membership .of-btn-primary{ background:var(--of-brand);border-color:var(--of-brand);color:var(--of-brand-text)} #orgfuse-app .of-btn-primary:hover,#orgfuse-membership .of-btn-primary:hover{ background:var(--of-brand);border-color:var(--of-brand);color:var(--of-brand-text);filter:brightness(.92)} #orgfuse-app .of-btn:disabled,#orgfuse-membership .of-btn:disabled{opacity:.55;cursor:not-allowed;filter:none} #orgfuse-app .of-btn-doc,#orgfuse-membership .of-btn-doc{background:#eef4fb;border-color:var(--of-brand);color:var(--of-brand)} /* Repeater "add" button reads as a friendly branded action, not a washed ghost. */ #orgfuse-app .of-repeater>.of-btn{border-style:dashed;border-color:var(--of-brand);color:var(--of-brand);background:#f7fafd} #orgfuse-app .of-repeater>.of-btn:hover{background:var(--of-brand);color:var(--of-brand-text);border-style:solid} /* Selected package + links use brand. */ #orgfuse-app .of-package.selected{border-color:var(--of-brand);background:#f2f7fb} #orgfuse-app .of-tier a,#orgfuse-app .of-intro a:not(.of-btn){color:var(--of-brand)} #orgfuse-app .of-done h3,#orgfuse-membership .of-done h3{color:var(--of-accent)} /* Inputs shouldn't inherit theme quirks. */ #orgfuse-app .of-field input,#orgfuse-app .of-field select,#orgfuse-app .of-field textarea, #orgfuse-membership .of-field input,#orgfuse-membership .of-field select,#orgfuse-membership .of-field textarea{ background:#fff;color:#1d2327;box-shadow:none} /* Selects: custom caret + reserved right padding so the arrow never sits over the value. */ #orgfuse-app select,#orgfuse-membership select{-webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important;padding-right:30px !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23555' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 11px center !important;background-size:10px 6px !important} /* Defeat theme !important on buttons (Themify sets color:#fff!important on all buttons). */ #orgfuse-app .of-btn,#orgfuse-membership .of-btn{color:#1d2327 !important;background:#f3f4f5 !important;border-color:#c7c7c7 !important;-webkit-appearance:none !important;text-transform:none !important} #orgfuse-app .of-btn:hover,#orgfuse-membership .of-btn:hover{color:#1d2327 !important;background:#e9eaec !important;border-color:#a9a9a9 !important} #orgfuse-app .of-btn-primary,#orgfuse-membership .of-btn-primary{color:var(--of-brand-text) !important;background:var(--of-brand) !important;border-color:var(--of-brand) !important} #orgfuse-app .of-btn-primary:hover,#orgfuse-membership .of-btn-primary:hover{color:var(--of-brand-text) !important;background:var(--of-brand) !important;filter:brightness(.92)} #orgfuse-app .of-repeater>.of-btn{color:var(--of-brand) !important;background:#f7fafd !important;border-color:var(--of-brand) !important} #orgfuse-app .of-repeater>.of-btn:hover{color:var(--of-brand-text) !important;background:var(--of-brand) !important} #orgfuse-app .of-btn-doc{color:var(--of-brand) !important;background:#eef4fb !important;border-color:var(--of-brand) !important} #orgfuse-app .of-btn:disabled,#orgfuse-membership .of-btn:disabled{opacity:.55 !important} .of-paylater{margin-top:10px;padding-top:8px;border-top:1px dashed #ddd} .of-coverage{margin:6px 0 0;padding:8px 12px;border-radius:6px;font-size:14px} .of-coverage-ok{background:#e7f6ec;color:#116329;border:1px solid #bfe3cb} .of-coverage-warn{background:#fdf3e0;color:#7a4f01;border:1px solid #f0d9ac} .of-account h2{margin:0 0 12px} .of-account-table{width:100%;border-collapse:collapse;margin-top:6px;font-size:14px} .of-account-table th,.of-account-table td{border:1px solid #e6e6e6;padding:7px 10px;text-align:left} .of-account-table thead th{background:#f6f7f7} #orgfuse-account .of-card{margin-bottom:16px} /* public form: counter + section break */ .of-counter{display:block;text-align:right;color:#787c82;font-size:11px} .of-counter.over{color:#d63638;font-weight:600} .of-section-break h4{margin:18px 0 2px;padding-top:12px;border-top:2px solid #e0e0e0;font-size:16px} /* ---- composite address + confirm-email (#107) ---- */ .of-address{display:block} .of-addr-legend{display:block;font-weight:600;margin-bottom:6px} .of-addr-grid{display:flex;flex-wrap:wrap;margin:0 -6px} .of-addr-cell{padding:0 6px 10px;box-sizing:border-box} .of-addr-cell label{display:block;font-size:12px;color:#50575e;margin-bottom:3px;font-weight:400} .of-addr-cell input,.of-addr-cell select{width:100%;box-sizing:border-box} .of-addr-cell.of-grid-12{flex:0 0 100%} .of-addr-cell.of-grid-6{flex:0 0 50%} .of-addr-cell.of-grid-3{flex:0 0 25%} @media (max-width:600px){ .of-addr-cell.of-grid-6,.of-addr-cell.of-grid-3{flex:0 0 100%} } .of-confirm{display:block;margin-top:8px} .of-confirm label{display:block;font-size:12px;color:#50575e;margin-bottom:3px} .of-confirm input{width:100%;box-sizing:border-box} /* ---- spam protection (#104) ---- */ /* Honeypot: off-screen rather than display:none — some bots skip hidden inputs entirely, and an off-screen field still looks "real" to them while being unreachable for people (tabIndex -1 + aria-hidden handle keyboard/AT). */ .of-hp{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important} .of-turnstile{margin:14px 0} .of-custom-confirm h1,.of-custom-confirm h2,.of-custom-confirm h3{margin-top:0} .of-note-step1{background:#f0f6fc;border-left:4px solid #2271b1;padding:10px 14px;border-radius:4px;margin:14px 0;font-size:14px} /* Add-a-gift at checkout (Donations add-on) */ #orgfuse-app .of-gift{border:1px solid #e2e5e9;border-radius:10px;background:#fafbfc;padding:12px 14px;margin:0 0 14px} #orgfuse-app .of-gift-title{margin:0 0 8px;font-size:14px;font-weight:600;color:#1d2327} #orgfuse-app .of-gift-amts{display:flex;flex-wrap:wrap;gap:6px} #orgfuse-app .of-gift-btn{flex:0 1 auto;padding:8px 14px;border:2px solid #d4d8dd;background:#fff !important;color:#1d2327 !important;border-radius:8px;font-size:14px;font-weight:600;line-height:1.2;cursor:pointer} #orgfuse-app .of-gift-btn.on{border-color:var(--of-brand);background:var(--of-brand) !important;color:var(--of-brand-text) !important} #orgfuse-app .of-gift-custom,#orgfuse-app .of-gift-fund{margin-top:8px;width:100%;max-width:220px;padding:9px;border:1px solid #ccd0d4;border-radius:8px;font-size:15px} /* ===== Public events calendar [orgfuse_calendar] ===== */ #orgfuse-calendar{--ofc-brand:var(--of-brand,#2271b1);--ofc-line:#e3e8ed;color:#1d2327} .ofc{font-size:14px} .ofc-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .ofc-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .ofc-title{font-size:20px;font-weight:700;margin:0 0 0 6px} .ofc-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #cbd2d9;background:#fff;color:#26313c;border-radius:7px;padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;line-height:1} .ofc-btn:hover{border-color:var(--ofc-brand);color:var(--ofc-brand)} .ofc-arrow{font-size:16px;padding:6px 11px} .ofc-views{display:inline-flex;border:1px solid #cbd2d9;border-radius:8px;overflow:hidden} .ofc-vbtn{border:0;background:#fff;color:#3c4a58;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer} .ofc-vbtn+.ofc-vbtn{border-left:1px solid #e3e8ed} .ofc-vbtn.active{background:var(--ofc-brand);color:#fff} .ofc-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px} .ofc-search,.ofc-filter{border:1px solid #cbd2d9;border-radius:7px;padding:7px 10px;font-size:13px} .ofc-search{min-width:200px} .ofc-spacer{flex:1} .ofc-sub{background:var(--ofc-brand);border-color:var(--ofc-brand);color:#fff} .ofc-sub:hover{color:#fff;filter:brightness(.94)} .ofc-month{border:1px solid var(--ofc-line);border-radius:12px;overflow:hidden;background:#fff} .ofc-dow{display:grid;grid-template-columns:repeat(7,1fr);background:#f7f9fb;border-bottom:1px solid var(--ofc-line)} .ofc-dow>div{padding:8px 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#6a7683;text-align:left} .ofc-grid{display:flex;flex-direction:column} .ofc-wrow{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--ofc-line)} .ofc-wrow:last-child{border-bottom:0} .ofc-cell{min-height:104px;border-right:1px solid var(--ofc-line);padding:5px 6px;display:flex;flex-direction:column;gap:4px;overflow:hidden} .ofc-cell:last-child{border-right:0} .ofc-cell.other{background:#fafbfc} .ofc-cell.other .ofc-daynum{color:#b3bcc4} .ofc-cell.today{background:#f2f8fc} .ofc-daynum{align-self:flex-start;border:0;background:none;font-size:13px;font-weight:700;color:#3c4a58;cursor:pointer;width:26px;height:26px;border-radius:50%;line-height:26px;text-align:center;padding:0} .ofc-cell.today .ofc-daynum{background:var(--ofc-brand);color:#fff} .ofc-daynum:hover{background:#e6eef5} .ofc-cell-events{display:flex;flex-direction:column;gap:3px;overflow:hidden} .ofc-chip{display:flex;align-items:center;gap:5px;font-size:12px;text-decoration:none;color:#26313c;background:#eef4fa;border-radius:5px;padding:2px 6px;white-space:nowrap;overflow:hidden} .ofc-chip:hover{background:#e2eef8} .ofc-chip-time{color:#6a7683;font-variant-numeric:tabular-nums} .ofc-chip-title{overflow:hidden;text-overflow:ellipsis} .ofc-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:#8a929b} .ofc-st-open{background:#1f9d55} .ofc-st-closed{background:#8a929b} .ofc-st-cancelled,.ofc-st-canceled{background:#c0392b} .ofc-more{border:0;background:none;color:var(--ofc-brand);font-size:11px;font-weight:600;cursor:pointer;text-align:left;padding:0 6px} .ofc-weekview{display:grid;grid-template-columns:repeat(7,1fr);gap:10px} .ofc-wcol{border:1px solid var(--ofc-line);border-radius:10px;overflow:hidden;background:#fff;min-height:120px} .ofc-wcol.today{border-color:var(--ofc-brand)} .ofc-wcol-head{display:flex;align-items:baseline;gap:6px;padding:8px 10px;background:#f7f9fb;border-bottom:1px solid var(--ofc-line)} .ofc-wdow{font-size:11px;font-weight:700;text-transform:uppercase;color:#6a7683} .ofc-wdate{font-size:15px;font-weight:700} .ofc-wcol-body{padding:8px;display:flex;flex-direction:column;gap:6px} .ofc-dayview,.ofc-list{display:flex;flex-direction:column;gap:8px} .ofc-ag{display:flex;align-items:center;gap:10px;border:1px solid var(--ofc-line);border-radius:9px;background:#fff;padding:11px 13px;text-decoration:none;color:#1d2327} .ofc-ag:hover{border-color:var(--ofc-brand);box-shadow:0 2px 8px rgba(16,42,67,.06)} .ofc-ag.compact{padding:7px 8px;font-size:12.5px;border-radius:7px} .ofc-ag-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .ofc-ag-title{font-weight:600;overflow:hidden;text-overflow:ellipsis} .ofc-ag-meta{font-size:12px;color:#6a7683} .ofc-ag-cta{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--ofc-brand)} .ofc-empty{padding:28px;text-align:center;color:#8a929b;border:1px dashed var(--ofc-line);border-radius:10px} .ofc-empty-mini{color:#c2c9d0;font-size:12px;text-align:center;padding:6px 0} @media(max-width:820px){.ofc-weekview{grid-template-columns:1fr}.ofc-cell{min-height:76px}} @media(max-width:600px){.ofc-toolbar{flex-direction:column;align-items:flex-start}.ofc-dow>div{font-size:10px;padding:6px 4px}.ofc-cell{min-height:62px;padding:3px}.ofc-chip-title{display:none}} .ofc-ag.compact .ofc-ag-cta{display:none} .ofc-ag.compact .ofc-ag-title{white-space:normal} .ofc-cell{min-width:0} @media(max-width:600px){.ofc-chip{padding:1px 3px;background:transparent;gap:3px}.ofc-chip-time{display:none}.ofc-cell-events{flex-direction:row;flex-wrap:wrap;gap:2px}} #orgfuse-calendar *{box-sizing:border-box} /* Calendar: defeat theme