/** * Yolyc Company Reports - Public styles * * Colors are expressed with CSS custom properties so the modal * automatically inherits Yolyc's light/dark theme. Update the values * inside :root / [data-theme="dark"] to match the active theme system, * or simply let them fall through if the theme already defines the * --yolyc-* variables globally. */ /* * Palette matches the site's brand colors and mirrors the tokens used by * the Yolyc Dark Mode Toggle plugin, which sets data-theme="dark|light" * on . Primary is brand blue in both modes on purpose: the dark * mode plugin forces button[type="submit"] to #246EB9 with !important, * so keeping blue as the primary action color in light mode too avoids * the submit button changing color when the theme switches. */ :root { --yolyc-cr-bg: #ffffff; --yolyc-cr-surface: #ffffff; --yolyc-cr-text: #00171f; --yolyc-cr-text-muted: #4a6068; --yolyc-cr-border: rgba(0, 23, 31, 0.18); --yolyc-cr-primary: #246eb9; --yolyc-cr-primary-hover: #1c5490; --yolyc-cr-focus: #246eb9; --yolyc-cr-overlay: rgba(0, 23, 31, 0.5); --yolyc-cr-error: #b3261e; --yolyc-cr-success: #1e7e34; } [data-theme="dark"] { --yolyc-cr-bg: #00171f; --yolyc-cr-surface: #012a38; --yolyc-cr-text: #ffffff; --yolyc-cr-text-muted: #9fc2cc; --yolyc-cr-border: #246eb9; --yolyc-cr-primary: #246eb9; --yolyc-cr-primary-hover: #3a85cf; --yolyc-cr-focus: #dff3e4; --yolyc-cr-overlay: rgba(0, 23, 31, 0.7); --yolyc-cr-error: #ff8a80; --yolyc-cr-success: #7fe0a0; } .yolyc-cr-wrapper { margin: 2em 0 1em; font-size: 0.9rem; } .yolyc-cr-trigger { display: inline-flex; align-items: center; gap: 0.4em; background: none; border: none; color: var(--yolyc-cr-text-muted); cursor: pointer; font-size: inherit; padding: 0.25em 0; text-decoration: underline; text-underline-offset: 2px; } .yolyc-cr-trigger__icon { display: inline-flex; align-items: center; line-height: 1; transform: translateY(0.1em); } .yolyc-cr-trigger__label { line-height: 1; } .yolyc-cr-trigger:hover, .yolyc-cr-trigger:focus-visible { color: var(--yolyc-cr-primary); } .yolyc-cr-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; } .yolyc-cr-modal[hidden] { display: none; } .yolyc-cr-modal__overlay { position: absolute; inset: 0; background: var(--yolyc-cr-overlay); } .yolyc-cr-modal__panel { position: relative; background: var(--yolyc-cr-bg); color: var(--yolyc-cr-text); border-radius: 12px; max-width: 480px; width: calc(100% - 2rem); max-height: calc(100vh - 4rem); overflow-y: auto; padding: 1.75rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .yolyc-cr-modal__close { position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--yolyc-cr-text-muted); cursor: pointer; padding: 0.25rem; } .yolyc-cr-modal__close:hover { color: var(--yolyc-cr-text); } .yolyc-cr-modal__title { margin: 0 1.5rem 1rem 0; font-size: 1.15rem; font-weight: 600; color: var(--yolyc-cr-text); } .yolyc-cr-field { margin-bottom: 1rem; } .yolyc-cr-field label { display: block; margin-bottom: 0.35rem; font-weight: 500; font-size: 0.85rem; color: var(--yolyc-cr-text); } .yolyc-cr-required { color: var(--yolyc-cr-error); } .yolyc-cr-field select, .yolyc-cr-field textarea, .yolyc-cr-field input[type="email"] { width: 100%; box-sizing: border-box; background: var(--yolyc-cr-surface); color: var(--yolyc-cr-text); border: 1px solid var(--yolyc-cr-border); border-radius: 8px; padding: 0.55rem 0.7rem; font-size: 0.9rem; font-family: inherit; } .yolyc-cr-field select:focus, .yolyc-cr-field textarea:focus, .yolyc-cr-field input[type="email"]:focus { outline: 2px solid var(--yolyc-cr-focus); outline-offset: 1px; } .yolyc-cr-char-count { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--yolyc-cr-text-muted); text-align: right; } .yolyc-cr-help { margin: 0.35rem 0 0; font-size: 0.75rem; color: var(--yolyc-cr-text-muted); } .yolyc-cr-form-message { background: var(--yolyc-cr-surface); border: 1px solid var(--yolyc-cr-border); border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.85rem; margin: 0 0 1rem; } .yolyc-cr-form-message[data-state="error"] { color: var(--yolyc-cr-error); border-color: var(--yolyc-cr-error); } .yolyc-cr-form-message[hidden] { display: none; } .yolyc-cr-form-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.25rem; } .yolyc-cr-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; box-sizing: border-box !important; line-height: 1.2 !important; margin: 0 !important; padding-top: 0.55rem !important; padding-bottom: 0.55rem !important; padding-left: 1.1rem !important; padding-right: 1.1rem !important; border-radius: 8px; font-size: 0.85rem; font-weight: 500; cursor: pointer; border: 1px solid transparent; } .yolyc-cr-btn__label { display: inline-block; white-space: nowrap; line-height: 1.2; } .yolyc-cr-btn--secondary { background: transparent; border-color: var(--yolyc-cr-border); color: var(--yolyc-cr-text); } .yolyc-cr-btn--secondary:hover { background: var(--yolyc-cr-surface); } .yolyc-cr-btn--primary { background: var(--yolyc-cr-primary); color: #fff; } .yolyc-cr-btn--primary:hover { background: var(--yolyc-cr-primary-hover); } .yolyc-cr-btn:disabled { opacity: 0.6; cursor: not-allowed; } .yolyc-cr-success { text-align: center; padding: 1rem 0; color: var(--yolyc-cr-success); font-weight: 500; } .yolyc-cr-success[hidden] { display: none; }