shortcode, meaning artspot-calendar.css is NOT enqueued on those pages) ─────── */ /* Brand icons */ .asc-svc-icon { width: 22px; height: 22px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .asc-svc-apple { background: #1c1c1e; color: #fff; } .asc-svc-google { background: #fff; border: 1.5px solid #dadce0; } .asc-svc-outlook { background: #0078d4; } .asc-atc-wrap { position: relative; } .asc-atc-toggle { display: inline-flex !important; align-items: center !important; gap: 7px !important; padding: 7px 14px !important; background: #faf6f2 !important; border: 1.5px solid #ddd0c5 !important; border-radius: 20px !important; color: #4a3a30 !important; font-size: .78rem !important; font-weight: 700 !important; font-family: inherit !important; cursor: pointer !important; white-space: nowrap !important; transition: background .15s, border-color .15s, color .15s !important; text-transform: none !important; letter-spacing: normal !important; line-height: 1.4 !important; text-decoration: none !important; box-shadow: none !important; } .asc-atc-toggle:hover, .asc-atc-toggle.is-open { background: #D4724A !important; border-color: #344D67 !important; color: #fff !important; } .asc-atc-toggle:hover svg, .asc-atc-toggle.is-open svg { stroke: #fff; } .asc-atc-caret { font-size: .6rem; transition: transform .2s; opacity: .7; } .asc-atc-toggle.is-open .asc-atc-caret { transform: rotate(180deg); } /* Prevent themes that override [hidden]{display:block} from showing the dropdown */ .asc-atc-dropdown[hidden] { display: none !important; } .asc-atc-dropdown { position: absolute; bottom: calc(100% + 8px); left: 0; background: #fff; border: 1.5px solid #e8d9cc; border-radius: 14px; box-shadow: 0 12px 36px rgba(52,77,103,.16), 0 2px 8px rgba(52,77,103,.08); z-index: 9999; min-width: 210px; overflow: hidden; animation: ascAtcIn .14s ease both; } @keyframes ascAtcIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .asc-atc-option { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; padding: 10px 16px !important; background: transparent !important; border: none !important; border-radius: 0 !important; text-align: left !important; font-size: .82rem !important; font-family: inherit !important; color: #2a1f16 !important; cursor: pointer !important; text-decoration: none !important; transition: background .12s !important; white-space: nowrap !important; font-weight: 600 !important; letter-spacing: normal !important; text-transform: none !important; line-height: 1.4 !important; box-shadow: none !important; } .asc-atc-option:hover { background: #faf6f2 !important; color: #2a1f16 !important; box-shadow: none !important; } .asc-atc-option + .asc-atc-option { border-top: 1px solid #f2ebe4 !important; } /* ── Modal footer layout ─────────────────────────────────── */ .ascu-modal-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; } /* In the modal footer the dropdown opens downward (more space below) */ .ascu-modal-foot .asc-atc-wrap { position: relative; } .ascu-modal-foot .asc-atc-dropdown { bottom: auto; top: calc(100% + 6px); } /* ── Showcase layout ─────────────────────────────────────── */ .ascu-showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 900px) { .ascu-showcase { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .ascu-showcase { grid-template-columns: 1fr; } } .ascu-sc-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 2px solid #1a1f2e; border-radius: 14px; padding: 20px 22px 18px; cursor: pointer; transition: transform .18s, box-shadow .18s; } .ascu-sc-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(26,31,46,.13); } /* Category accent bar */ .ascu-sc-accent { width: 44px; height: 5px; border-radius: 3px; background: var(--ascu-cat, #D4724A); margin-bottom: 14px; flex-shrink: 0; } /* Date + price row */ .ascu-sc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; } .ascu-sc-date { font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: #5a5048; text-transform: uppercase; } .ascu-sc-price { font-size: .88rem; font-weight: 700; color: #1a1f2e; white-space: nowrap; flex-shrink: 0; } /* Badge */ .ascu-sc-badge { display: inline-block; font-size: .65rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; border-radius: 50px; padding: 4px 10px; margin-bottom: 10px; align-self: flex-start; white-space: nowrap; } .ascu-sc-badge--urgent { background: #D4724A; color: #fff; } .ascu-sc-badge--info { background: #1a1f2e; color: #fff; } /* Title */ .ascu-sc-title { font-size: .92rem; font-weight: 700; line-height: 1.25; color: #1a1f2e; margin: 0 0 10px; } /* Description */ .ascu-sc-desc { font-size: .82rem; line-height: 1.55; color: #5a5048; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } /* Footer */ .ascu-sc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 12px; border-top: 1px solid #f0ebe4; gap: 8px; } .ascu-sc-age { font-size: .72rem; color: #7A91A8; font-weight: 500; } .ascu-sc-book { font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #1a1f2e; text-decoration: none; transition: color .15s; white-space: nowrap; flex-shrink: 0; } /* Reset theme overrides so ENROLL looks like a text link */ button.ascu-sc-book { appearance: none !important; -webkit-appearance: none !important; background: none !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; cursor: pointer !important; font-family: inherit !important; font-size: .72rem !important; font-weight: 800 !important; letter-spacing: .07em !important; text-transform: uppercase !important; line-height: inherit !important; min-height: unset !important; height: auto !important; display: inline-flex !important; align-items: center !important; color: #1a1f2e !important; width: auto !important; } .ascu-sc-book:hover { color: #344D67; } /* CTA colour by booking type */ button.ascu-sc-book--course, .ascu-sc-book--course { color: #8A5C3E !important; } button.ascu-sc-book--course:hover, .ascu-sc-book--course:hover { color: #6b4530 !important; } button.ascu-sc-book--dropin, .ascu-sc-book--dropin { color: #2E6E8E !important; } button.ascu-sc-book--dropin:hover, .ascu-sc-book--dropin:hover { color: #1d5570 !important; } /* Course badge variant */ .ascu-sc-badge--course { background: #EFF4F8; color: #2E6E8E; } /* Already-started badge */ .ascu-sc-badge--started { background: #F5EDE8; color: #8A5C3E; } /* Already-started CTA */ button.ascu-sc-book--started, .ascu-sc-book--started { color: #8A5C3E !important; } button.ascu-sc-book--started:hover, .ascu-sc-book--started:hover { color: #6b4530 !important; } /* ── Contact modal (already-started courses) ── */ .asc-contact-overlay { position: fixed; inset: 0; z-index: 2000000000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(52,77,103,.52); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .asc-contact-overlay[hidden] { display: none !important; } .asc-contact-modal { position: relative; background: #fff; border-radius: 14px; padding: 28px 28px 24px; max-width: 420px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 40px rgba(0,0,0,.28); } button.asc-contact-close { appearance: none !important; -webkit-appearance: none !important; background: none !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; min-height: unset !important; width: auto !important; height: auto !important; } .asc-contact-close { position: absolute; top: 12px; right: 14px; font-size: 1.5rem !important; line-height: 1 !important; color: #5a5048 !important; cursor: pointer !important; padding: 4px 8px !important; } button.asc-contact-submit { appearance: none !important; -webkit-appearance: none !important; background: none !important; background-color: #1a1f2e !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 12px !important; width: 100% !important; font-size: .84rem !important; font-weight: 700 !important; letter-spacing: .03em !important; cursor: pointer !important; min-height: unset !important; box-shadow: none !important; } button.asc-contact-submit:hover { background-color: #344D67 !important; } .asc-contact-submit { background-color: #1a1f2e !important; color: #fff !important; } .asc-contact-heading { font-size: 1rem; font-weight: 800; color: #1a1f2e; margin: 0 0 4px; font-family: 'Rubik', sans-serif; } .asc-contact-sub { font-size: .78rem; color: #8A5C3E; font-weight: 600; margin: 0 0 18px; } .asc-contact-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; } .asc-contact-field label { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #5a5048; } .asc-contact-field input, .asc-contact-field textarea { border: 1.5px solid #ddd4ca; border-radius: 8px; padding: 9px 12px; font-size: .84rem; color: #1a1f2e; font-family: inherit; outline: none; transition: border-color .15s; } .asc-contact-field input:focus, .asc-contact-field textarea:focus { border-color: #8A5C3E; } .asc-contact-field textarea { resize: vertical; min-height: 72px; } .asc-contact-submit { width: 100%; padding: 12px; background: #1a1f2e; color: #fff; border: none; border-radius: 8px; font-size: .84rem; font-weight: 700; cursor: pointer; transition: background .15s; margin-top: 4px; } .asc-contact-submit:hover { background: #344D67; } .asc-contact-submit:disabled { background: #999; cursor: not-allowed; } .asc-contact-success { text-align: center; color: #3B7A8C; font-size: .84rem; font-weight: 600; margin-top: 12px; } /* Course session date list */ .ascu-sc-sessions { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 3px; } .ascu-sc-sessions li { font-size: .72rem; color: #5a5048; padding-left: 12px; position: relative; } .ascu-sc-sessions li::before { content: '·'; position: absolute; left: 0; color: #c09b77; font-weight: 700; } /* Course card subtle accent tint */ .ascu-sc-card--course { border-left: 3px solid #c09b77; } /* Sold out / cancelled state */ .ascu-sc-card.ascu-status-sold_out, .ascu-sc-card.ascu-status-cancelled { opacity: .6; pointer-events: none; } /* ── Showcase filter-pill overrides (outline style with category dot) ── */ .ascu-layout-showcase .ascu-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 32px; } .ascu-layout-showcase .ascu-filter-pill { background: #fff; color: #1a1f2e; border: 1.5px solid #d0ccc8; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 7px 16px; border-radius: 50px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; display: inline-flex; align-items: center; gap: 6px; } .ascu-layout-showcase .ascu-filter-pill:not([data-cat=""])::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--ascu-pill, #D4724A); flex-shrink: 0; } .ascu-layout-showcase .ascu-filter-pill:hover { border-color: #1a1f2e; background: #fff; color: #1a1f2e; } .ascu-layout-showcase .ascu-filter-pill.ascu-filter-active { background: #1a1f2e; color: #fff; border-color: #1a1f2e; } /* ============================================================ NEUBRUTALIST MODAL OVERRIDES — event detail popup ============================================================ */ .ascu-modal { border: 3px solid #1a2b3c !important; border-radius: 20px !important; box-shadow: 6px 6px 0px #1a2b3c !important; } .ascu-modal-close { border: 3px solid #1a2b3c !important; border-radius: 10px !important; background: #fff !important; color: #1a2b3c !important; box-shadow: 3px 3px 0px #1a2b3c !important; transition: transform 0.1s ease, box-shadow 0.1s ease !important; } .ascu-modal-close:hover { transform: translate(1px, 1px) !important; box-shadow: 2px 2px 0px #1a2b3c !important; } .ascu-modal-title { font-family: 'Epilogue', sans-serif !important; font-weight: 900 !important; color: #1a2b3c !important; font-size: 1.2rem !important; } .ascu-modal-time { font-family: 'Epilogue', sans-serif !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: #5d6d7e !important; } .ascu-modal-desc { font-family: 'Nunito', sans-serif !important; font-weight: 600 !important; color: #5d6d7e !important; line-height: 1.6 !important; } .ascu-modal-book { background: #F7C8C2 !important; color: #1a2b3c !important; border: 3px solid #1a2b3c !important; border-radius: 14px !important; font-family: 'Epilogue', sans-serif !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; box-shadow: 5px 5px 0px #1a2b3c !important; transition: transform 0.1s ease, box-shadow 0.1s ease !important; } .ascu-modal-book:hover { transform: translate(2px, 2px) !important; box-shadow: 3px 3px 0px #1a2b3c !important; } .ascu-cat-pill.ascu-modal-cat { font-family: 'Epilogue', sans-serif !important; font-weight: 800 !important; text-transform: uppercase !important; border-radius: 100px !important; padding: 4px 10px !important; } .ascu-modal-overlay .asc-modal-book-btn { background: #F7C8C2 !important; color: #1a2b3c !important; border: 3px solid #1a2b3c !important; border-radius: 14px !important; font-family: Epilogue, sans-serif !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; box-shadow: 5px 5px 0px #1a2b3c !important; transition: transform 0.1s ease, box-shadow 0.1s ease !important; } .ascu-modal-overlay .asc-modal-book-btn:hover { transform: translate(2px, 2px) !important; box-shadow: 3px 3px 0px #1a2b3c !important; } .asc-modal-overlay .asc-modal-book-btn { background: #F7C8C2 !important; color: #1a2b3c !important; border: 3px solid #1a2b3c !important; border-radius: 14px !important; font-family: Epilogue, sans-serif !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; box-shadow: 5px 5px 0px #1a2b3c !important; transition: transform 0.1s ease, box-shadow 0.1s ease !important; } .asc-modal-overlay .asc-modal-book-btn:hover { transform: translate(2px, 2px) !important; box-shadow: 3px 3px 0px #1a2b3c !important; }

Upcoming Events

All Events Adult Classes Art Explorers Art Innovators Art Innovators Sketching Art Lab Camps Kids Classes Open Studio PA Days Pottery Workshops