/* * Hunt Room theme skin for the Hydrogen Calendar Embeds plugin. * Re-maps FullCalendar's CSS custom properties (and the handful of * states it doesn't expose as variables) to the site's palette: * hunter green #004D43, cream #EDE4DB, tan/khaki #A08D7B, near-black #0F0B00. * * `.hycal-container` and `.fc` are the same root element, so every * selector below is written as `.hycal-container.fc ...` to out-specificity * FullCalendar's own `.fc ...` rules (which it injects into at * runtime) without resorting to !important. */ .hycal-container { /* Grid lines: translucent cream instead of flat #ddd, so they read against the dark hunter-green section instead of nearly vanishing. */ --fc-border-color: rgba(237, 228, 219,1); padding-bottom:6rem; /* Neutral washes (list day headers, week numbers) */ --fc-neutral-bg-color: rgba(160, 141, 123, 0.16); --fc-neutral-text-color: #EDE4DB; /* Used by FullCalendar for sticky/opaque surfaces (list-view day headers, popovers) — must be solid or sticky headers turn see-through and the row scrolling underneath bleeds through the header text. Matches the dark hunter-green section the calendar is always embedded in. */ --fc-page-bg-color: #004D43; /* Today / selection highlight: warm tan instead of stock yellow/blue */ --fc-today-bg-color: rgba(160, 141, 123, 0.28); --fc-highlight-color: rgba(160, 141, 123, 0.25); --fc-now-indicator-color: #A08D7B; --fc-non-business-color: rgba(15, 11, 0, 0.08); /* Events: tan chip with near-black text (~8.9:1 contrast) instead of the default FullCalendar blue, which clashed with the green/tan brand. */ --fc-event-bg-color: #A08D7B; --fc-event-border-color: #8B7358; --fc-event-text-color: white; --fc-event-selected-overlay-color: rgba(15, 11, 0, 0.25); --fc-more-link-bg-color: rgba(160, 141, 123, 0.3); --fc-more-link-text-color: #0F0B00; --fc-list-event-hover-bg-color: rgba(160, 141, 123, 0.14); /* Toolbar buttons (prev/next, today, month/list): outlined tan chips that match the cream-on-green contrast used across the rest of the site. */ --fc-button-bg-color: transparent; --fc-button-border-color: #A08D7B; --fc-button-text-color: #EDE4DB; --fc-button-hover-bg-color: rgba(160, 141, 123, 0.35); --fc-button-hover-border-color: #A08D7B; --fc-button-active-bg-color: #A08D7B; --fc-button-active-border-color: #A08D7B; } /* Scale the whole calendar down. FullCalendar's own stylesheet builds nearly all of its spacing — toolbar margins, button padding, event chip padding/margins, day-cell min-heights — in `em` units off this root element, so dropping the base font-size shrinks the whole widget proportionally instead of just the text. (18px inherited from the page down to 13px, matching the theme's 10px rem base.) */ .hycal-container.fc { font-size: 16px; max-width: 1000px; margin-left: auto; margin-right: auto; } .hycal-container.fc .fc-toolbar-title { font-size: 3rem; margin-right:3rem; } .hycal-container.fc .fc-daygrid-day-number { padding: 2px 4px; } /* FullCalendar has no variable for button *text* color per-state, so the hover/active fills above would otherwise leave low-contrast cream text on a tan chip. `.hycal-container.fc` (two classes on the same root element) beats FullCalendar's own `.fc ...` rules on specificity. */ .hycal-container.fc .fc-button-primary:hover, .hycal-container.fc .fc-button-primary:not(:disabled).fc-button-active, .hycal-container.fc .fc-button-primary:not(:disabled):active { color: white; } .hycal-container.fc .fc-button-primary { border-radius: 0; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75em; } .hycal-container.fc .fc-toolbar-title { color: #EDE4DB; } /* Past events: replace the plugin's flat 50% opacity (tuned for the old blue theme, which also dims the text past a comfortable contrast) with a fixed muted tan so past listings stay legible. */ .hycal-container.fc .fc-event-past { opacity: 1 !important; background-color: rgba(160, 141, 123, 0.45); border-color: rgba(139, 115, 88, 0.4); color: white; } .hycal-container.fc .fc-daygrid-event:hover, .hycal-container.fc .fc-list-event:hover .fc-list-event-title a { text-decoration: underline; } .hycal-container.fc .fc-daygrid-day-number:hover, .hycal-container.fc .fc-col-header-cell-cushion:hover { color: #A08D7B; }