/* CG1 Optional Skin ā€” inert unless .cg1-theme-on is present on */ .cg1-theme-on { --cg1-primary: #007660; --cg1-secondary: #20A740; --cg1-on-primary:#FFFFFF; --cg1-radius: 12px; --cg1-shadow: 0 6px 20px rgba(0,0,0,.08); --cg1-shadow-sm: 0 2px 8px rgba(0,0,0,.06); --cg1-focus: 0 0 0 3px rgba(32,167,64,.35); } /* Gradient utility: always Lā†’R secondary ā†’ primary */ .cg1-theme-on .cg1-gradient { background-image: linear-gradient(90deg, var(--cg1-secondary), var(--cg1-primary)); } /* Buttons (scoped) */ .cg1-theme-on .cg1-btn { display:inline-flex; align-items:center; justify-content:center; padding:.7rem 1rem; min-height:48px; border-radius:var(--cg1-radius); border:0; background:var(--cg1-primary); color:var(--cg1-on-primary); font-weight:600; box-shadow:var(--cg1-shadow-sm); transition:transform .08s ease, box-shadow .2s ease, background-color .2s ease, filter .2s ease; text-decoration:none; } .cg1-theme-on .cg1-btn:hover { background:var(--cg1-secondary); box-shadow:var(--cg1-shadow); transform:translateY(-1px); } .cg1-theme-on .cg1-btn:active { background:#00664F; transform:translateY(0); } .cg1-theme-on .cg1-btn--grad { background-image: linear-gradient(90deg, var(--cg1-secondary), var(--cg1-primary)); color:#fff; } /* Gentle focus ring for inputs used in your own templates (scoped) */ .cg1-theme-on input:focus, .cg1-theme-on select:focus, .cg1-theme-on textarea:focus { outline:none; box-shadow:var(--cg1-focus); } /* --- Ensure bright white, bold text on brand CTAs --- */ .cg1-theme-on .cg1-btn, .cg1-theme-on .cg1-btn:link, .cg1-theme-on .cg1-btn:visited, .cg1-theme-on .cg1-btn--grad, .cg1-theme-on .cg1-btn--grad:link, .cg1-theme-on .cg1-btn--grad:visited { color: #fff !important; font-weight: 700 !important; text-decoration: none !important; text-shadow: 0 1px 0 rgba(0,0,0,.18); } /* Desk primary buttons when skin is ON */ .cg1-theme-on .btn-primary, .cg1-theme-on .btn.btn-primary { color: #fff !important; font-weight: 700 !important; text-shadow: 0 1px 0 rgba(0,0,0,.18); } /* --- Card & section text contrast when skin is ON --- */ .cg1-theme-on .cg1-card, .cg1-theme-on .card { color:#1f2937; } .cg1-theme-on .cg1-card h1, .cg1-theme-on .cg1-card h2, .cg1-theme-on .cg1-card h3, .cg1-theme-on .card h1, .cg1-theme-on .card h2, .cg1-theme-on .card h3, .cg1-theme-on .form-section .section-title, .cg1-theme-on .form-dashboard-section .section-title, .cg1-theme-on .modal-title { color:#145A4B !important; /* deep teal on white for high contrast */ font-weight:700 !important; letter-spacing:-0.01em; } /* Form labels / table headers */ .cg1-theme-on .control-label, .cg1-theme-on .grid-heading-row, .cg1-theme-on .table th { color:#214F44 !important; font-weight:600 !important; }