/* ── HISS custom calendar widget — 2026-09-18 ──────────────────────────── Replaces the Elfsight embed inside the EXISTING #block-1 hero (the thread- spool photo section, class u-image u-section-2). Reuses that section's own markup/classes and calendar.css's sizing rules as-is — the "Calendar" h1 and the .u-custom-html-1 wrapper keep the site's original widths/margins per breakpoint (909px desktop, down to 340px on phones), so the widget sits at the same size/position the Elfsight embed used to. --hiss-blue #0936b4 (u-palette-1-base) --hiss-red #b31812 (u-palette-2-base) --hiss-yellow #ffcd45 (u-palette-3-base) --hiss-dark #262626 (u-palette-3-base text) Font is Raleway (already loaded site-wide via calendar-fonts.css); root font-size is 20px on this page (set inline on ), same as the rest of the site, so rem units below line up with the rest of the page. */ #block-1 { --hiss-blue: #0936b4; --hiss-red: #b31812; --hiss-yellow: #ffcd45; --hiss-dark: #262626; font-family: 'Raleway', sans-serif; } /* The "Calendar" title sits directly on the thread-spool photo at every breakpoint (checked 500px-1600px on 2026-09-18) — never over the white window in the middle of that image — so per Tish's rule it stays white with a soft shadow for legibility, instead of the site-default red. At ≥1500px Tish wants it blue instead (still !important to beat nicepage.css's .u-text-palette-2-base, which sets color !important). */ #block-1 .u-text-1 { color: #ffffff !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); } @media (min-width: 1500px) { #block-1 .u-text-1 { color: var(--hiss-blue) !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } } /* White card holding the calendar, floating on the photo — same slot/width the Elfsight widget used to occupy (.u-custom-html-1 from calendar.css). */ #block-1 .u-custom-html-1 { background: #ffffff; border-radius: 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22); padding: 26px 26px 30px; box-sizing: border-box; } @media (max-width: 575px) { #block-1 .u-custom-html-1 { padding: 18px 14px 22px; } } .hiss-cal-preview-note { text-align: center; font-size: 0.8rem; font-style: italic; color: #767676; margin: 0 0 20px; } /* ── month navigator ───────────────────────────────────────────────────── */ .hiss-cal-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 24px; } .hiss-cal-nav-btn { width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--hiss-blue); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; flex: 0 0 auto; } .hiss-cal-nav-btn:hover { background: var(--hiss-red); } .hiss-cal-month-label { font-size: 1.5rem; font-weight: 700; color: var(--hiss-blue); text-transform: uppercase; letter-spacing: 1px; min-width: 260px; text-align: center; } /* ── month grid ───────────────────────────────────────────────────────── */ .hiss-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 10px; } .hiss-cal-dow { text-align: center; font-weight: 700; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; color: var(--hiss-red); padding-bottom: 8px; } .hiss-cal-day { min-height: 118px; background: #fff; border: 1px solid #e4e4e4; border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 3px; } .hiss-cal-day.is-otm { background: #fafafa; border-color: #f0f0f0; } .hiss-cal-day.is-otm .hiss-cal-daynum { color: #c7c7c7; } .hiss-cal-day.is-today { box-shadow: inset 0 0 0 2px var(--hiss-yellow); } .hiss-cal-daynum { font-weight: 700; font-size: 0.9rem; color: var(--hiss-dark); margin-bottom: 2px; } .hiss-cal-chip { background: var(--hiss-blue); color: #fff; font-size: 0.68rem; line-height: 1.3; font-weight: 600; padding: 3px 6px; border-radius: 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: none; text-align: left; width: 100%; transition: background 0.15s ease; } .hiss-cal-chip:hover, .hiss-cal-chip.is-open { background: var(--hiss-red); } .hiss-cal-chip-more { font-size: 0.65rem; font-weight: 700; color: var(--hiss-red); cursor: pointer; padding: 2px 6px; background: none; border: none; text-align: left; } .hiss-cal-chip-more:hover { text-decoration: underline; } /* the little dropdown that appears when a calendar chip is clicked */ .hiss-cal-popover { position: relative; background: #fff8e6; border: 1px solid var(--hiss-yellow); border-radius: 6px; padding: 8px 10px; margin-top: 2px; font-size: 0.6rem; line-height: 1.4; color: var(--hiss-dark); } .hiss-cal-popover p { margin: 0 0 8px; } .hiss-cal-popover a { display: inline-block; background: var(--hiss-blue); color: #fff; font-weight: 700; font-size: 0.7rem; padding: 5px 10px; border-radius: 5px; text-decoration: none; } .hiss-cal-popover a:hover { background: var(--hiss-red); color: #fff; } /* ── tablet-vertical & smaller: swap chips for a simple highlight dot ───── */ @media (max-width: 991px) { .hiss-cal-grid { gap: 4px; } .hiss-cal-day { min-height: 52px; align-items: center; justify-content: center; padding: 4px; } .hiss-cal-day.has-class { background: #fff2d6; border-color: var(--hiss-yellow); } .hiss-cal-daynum { margin-bottom: 0; } .hiss-cal-chip, .hiss-cal-chip-more, .hiss-cal-popover { display: none !important; } .hiss-cal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hiss-red); } .hiss-cal-dow { font-size: 0.68rem; } .hiss-cal-month-label { font-size: 1.2rem; min-width: 0; } } @media (max-width: 575px) { .hiss-cal-wrap { padding: 0 16px; } .hiss-cal-day { min-height: 42px; } .hiss-cal-daynum { font-size: 0.75rem; } } /* ── list of classes below the grid, grouped by day ──────────────────────*/ .hiss-cal-list-title { font-size: 1.4rem; font-weight: 700; color: var(--hiss-red); margin: 50px 0 22px; text-align: center; } .hiss-cal-day-group { margin-bottom: 28px; } .hiss-cal-day-group h3 { font-size: 1.1rem; font-weight: 700; color: var(--hiss-blue); border-bottom: 2px solid var(--hiss-yellow); padding-bottom: 8px; margin: 0 0 12px; } .hiss-cal-list-item { border: 1px solid #e4e4e4; border-radius: 8px; margin-bottom: 10px; overflow: hidden; background: #fff; } .hiss-cal-list-item-head { display: flex; align-items: center; gap: 16px; padding: 14px 18px; cursor: pointer; background: none; border: none; width: 100%; text-align: left; font-family: inherit; } .hiss-cal-list-time { font-weight: 700; color: var(--hiss-red); font-size: 0.85rem; min-width: 108px; flex: 0 0 auto; } .hiss-cal-list-name { flex: 1 1 auto; font-weight: 600; color: var(--hiss-dark); font-size: 0.95rem; } .hiss-cal-list-chevron { flex: 0 0 auto; color: var(--hiss-blue); transition: transform 0.2s ease; font-size: 0.9rem; } .hiss-cal-list-item.is-open .hiss-cal-list-chevron { transform: rotate(180deg); } .hiss-cal-list-body { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; padding: 0 18px; } .hiss-cal-list-item.is-open .hiss-cal-list-body { max-height: 600px; padding-bottom: 18px; } .hiss-cal-list-desc { color: #4a4a4a; font-size: 12px; line-height: 1.55; margin: 0 0 14px; } .hiss-cal-register-btn { display: inline-block; background: var(--hiss-blue); color: #fff; font-weight: 700; font-size: 0.85rem; padding: 10px 24px; border-radius: 6px; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .hiss-cal-register-btn:hover { background: var(--hiss-red); color: #fff; } @media (max-width: 575px) { .hiss-cal-list-item-head { flex-wrap: wrap; gap: 6px; } .hiss-cal-list-time { min-width: 0; } }