/** * Business Hours Widget/Shortcode Styles. * * Brand colors flow in via --idst-brand-* CSS custom properties output in * by id-site-tools.php. Fallbacks preserve the original neutral palette. */ .blm-hours-display { font-family: inherit; color: var(--idst-brand-text, inherit); } .blm-hours-list { list-style: none; margin: 0; padding: 0; } .blm-hours-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #eee; } .blm-hours-row:last-child { border-bottom: none; } .blm-hours-day { font-weight: 600; color: var(--idst-brand-text, #333); } .blm-hours-time { color: #666; color: color-mix(in srgb, var(--idst-brand-text, #333) 60%, transparent); } /* Today highlight (uses brand accent for emphasis, with a static fallback for browsers that lack color-mix). Keeps the same row geometry as other rows so columns stay aligned. */ .blm-hours-today { background: #fbeaea; background: color-mix(in srgb, var(--idst-brand-accent, #d63638) 8%, transparent); border-radius: 4px; border-bottom-color: transparent; } .blm-hours-today .blm-hours-day, .blm-hours-today .blm-hours-time { color: var(--idst-brand-accent, #d63638); } .blm-hours-today .blm-hours-time { font-weight: 600; } /* Closed days */ .blm-hours-closed .blm-hours-day { color: #999; } .blm-hours-closed-text { color: #999; font-style: italic; } /* 24/7 message */ .blm-hours-247 { text-align: center; font-weight: 600; color: var(--idst-brand-accent, #46b450); padding: 15px 0; margin: 0; } /* No hours message */ .blm-hours-none { text-align: center; color: #999; font-style: italic; padding: 15px 0; margin: 0; } /* --------------------------------------------------------------- Layouts --------------------------------------------------------------- */ /* Compact: no row dividers, day and time pulled together instead of justified. Selectors chained on .blm-hours-display so they win against .widget overrides. */ .blm-hours-display.blm-hours-layout-compact .blm-hours-row { padding: 2px 0; font-size: 13px; border-bottom: none; justify-content: flex-start; gap: 10px; } .blm-hours-display.blm-hours-layout-compact .blm-hours-day { min-width: 4.5em; } /* In compact, day+time cluster at the left, so the highlight wraps the content instead of stretching across the full row width. */ .blm-hours-display.blm-hours-layout-compact .blm-hours-today { width: fit-content; padding-inline: 8px; margin-inline: -8px; } /* Card: boxed with shadow */ .blm-hours-layout-card { background: var(--idst-brand-bg, #fff); border: 1px solid #ddd; border-radius: 6px; padding: 15px 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } /* Inline: single line, all days separated by commas */ .blm-hours-layout-inline .blm-hours-inline { margin: 0; line-height: 1.6; } .blm-hours-layout-inline .blm-hours-inline-item { white-space: nowrap; } .blm-hours-layout-inline .blm-hours-inline-item .blm-hours-day { color: var(--idst-brand-text, #333); margin-right: 4px; } .blm-hours-layout-inline .blm-hours-inline-item .blm-hours-time { color: #666; color: color-mix(in srgb, var(--idst-brand-text, #333) 60%, transparent); } .blm-hours-layout-inline .blm-hours-inline-item.blm-hours-today .blm-hours-day, .blm-hours-layout-inline .blm-hours-inline-item.blm-hours-today .blm-hours-time { color: var(--idst-brand-accent, #d63638); font-weight: 600; } .blm-hours-layout-inline .blm-hours-inline-item.blm-hours-closed .blm-hours-time { color: #999; font-style: italic; } .blm-hours-layout-inline .blm-hours-sep { color: #999; margin: 0 2px; } /* Backward compat for opt-in class names from the pre-layout API. */ .blm-hours-compact .blm-hours-row { padding: 4px 0; font-size: 13px; } .blm-hours-card { background: var(--idst-brand-bg, #fff); border: 1px solid #ddd; border-radius: 6px; padding: 15px 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } /* Widget-specific adjustments */ .widget .blm-hours-display { font-size: 14px; } .widget .blm-hours-row { padding: 6px 0; }