/* * KumoBook front‑end and admin styling. * * Provides glassmorphic visuals and premium accents to match the Kumo brand. Version 1.1 introduces * new colour tokens for a cohesive, elegant experience. */ /* Colour tokens */ :root { --kumo-primary: #472d48; --kumo-accent: #e9b46e; --kumo-glass-bg: rgba(20, 20, 28, 0.65); --kumo-glass-border: rgba(255, 255, 255, 0.12); --kumo-text-light: #ffffff; --kumo-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); --kumo-radius: 12px; --kumo-font: "Inter","Open Sans",sans-serif; } /* Import common web fonts if available on the site. Inherit typography from theme. */ /* * Restrict the base typography and colour rules to the plugin wrappers only. * Previously this rule targeted the element, causing all subsequent * text on the page (including agent bios and email links) to inherit a white colour. * Removing `body` from the selector prevents the plugin from overriding the site's * default text colour while still applying the intended font and colour inside * the plugin. The Avada theme and other plugins will now retain their own colours. */ .kumobook-wrapper, .kumobook-admin-wrapper { font-family: var(--kumo-font), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; /* Maintain light text within the plugin modal/wrapper while leaving the global body colour untouched */ color: var(--kumo-text-light); } /* Unified button system */ /* Unified button system for v1.4 */ .kumo-btn, .kumobook-cta, .kumobook-btn, .kumobook-save-button { display: inline-block; padding: 0.75rem 1.75rem; font-size: 1rem; font-weight: 600; text-transform: none; color: var(--kumo-text-light); background: var(--kumo-primary); border: none; border-radius: var(--kumo-radius); box-shadow: var(--kumo-shadow); cursor: pointer; transition: all 0.25s ease; transform: none; } .kumo-btn:hover, .kumo-btn:active, .kumobook-cta:hover, .kumobook-cta:active, .kumobook-btn:hover, .kumobook-btn:active, .kumobook-save-button:hover, .kumobook-save-button:active { background: var(--kumo-accent); color: #1a1a1a; transform: scale(1.03); box-shadow: 0 0 12px var(--kumo-accent); } .kumo-btn:focus, .kumobook-cta:focus, .kumobook-btn:focus, .kumobook-save-button:focus { outline: none; box-shadow: 0 0 0 3px var(--kumo-accent); } .kumo-btn[disabled], .kumobook-cta[disabled], .kumobook-btn[disabled], .kumobook-save-button[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: var(--kumo-shadow); } /* Modal wrapper */ .kumobook-modal { display: none; position: fixed; inset: 0; /* Elevate modal above all site content */ z-index: 2147483647 !important; /* Ensure modal overlays all content with blur and semi‑opaque background */ background: rgba(20, 20, 28, 0.85); backdrop-filter: blur(18px); pointer-events: none; } .kumobook-modal[aria-hidden="false"] { display: block; pointer-events: auto; } /* Overlay with soft vignette */ .kumobook-modal-overlay { position: absolute; inset: 0; /* Overlay is transparent because modal container now applies blur and background */ background: transparent; backdrop-filter: none; opacity: 0; transition: opacity 0.35s ease; } .kumobook-modal[aria-hidden="false"] .kumobook-modal-overlay { opacity: 1; } /* Modal content */ .kumobook-modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); width: calc(100% - 24px); max-width: 980px; background: var(--kumo-glass-bg); border: 1px solid var(--kumo-glass-border); border-radius: var(--kumo-radius); padding: 2rem; box-shadow: var(--kumo-shadow); backdrop-filter: blur(18px) saturate(150%); color: var(--kumo-text-light); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; /* Force the modal content to sit on top of any other stacking contexts */ z-index: 2147483648; overflow: hidden; } .kumobook-modal[aria-hidden="false"] .kumobook-modal-content { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* Container for schedule and form views */ .kumobook-view { display: none; width: 100%; } .kumobook-view.active { display: block; } /* Schedule layout container overwritten for v1.4. We use a dedicated row container instead. */ .kumobook-schedule { display: block; } /* New schedule row layout for v1.4: left (calendar + times) and right (brand card) */ .kumobook-schedule-row { display: flex; /* Allow wrapping by default; overridden on larger screens */ flex-wrap: wrap; gap: 1.5rem; align-items: center; } .kumobook-schedule-left { display: flex; flex-direction: column; gap: 1rem; flex: 1 1 60%; } .kumobook-schedule-right { flex: 1 1 40%; display: flex; justify-content: center; align-items: center; padding: 0 2rem; } @media (max-width: 767px) { .kumobook-schedule-left, .kumobook-schedule-right { flex: 0 0 100%; } /* Brand card takes up 70% width on mobile */ .kumobook-brand-card { width: 70%; margin-left: auto; margin-right: auto; } /* Adjust padding for right column on mobile */ .kumobook-schedule-right { padding: 1rem 1rem; } /* Calendar and times occupy full width on mobile */ .kumobook-schedule-left .kumobook-calendar, .kumobook-schedule-left .kumobook-times { width: 100%; flex: 1 1 100%; } } @media (min-width: 768px) { /* Prevent wrapping on desktop to keep left and right columns side by side */ .kumobook-schedule-row { flex-wrap: nowrap; } .kumobook-brand-card { width: 100%; } /* Fixed width for calendar within the left column and flexible time slots */ .kumobook-schedule-left .kumobook-calendar { flex: 0 0 340px; max-width: 360px; } .kumobook-schedule-left .kumobook-times { flex: 1 1 auto; } } /* Calendar header */ .kumobook-calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .kumobook-calendar-header button { background: none; border: none; color: var(--kumo-accent); font-size: 1.25rem; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: var(--kumo-radius); transition: background-color 0.2s ease; } .kumobook-calendar-header button:hover, .kumobook-calendar-header button:focus { background-color: rgba(233, 180, 110, 0.15); outline: none; } .kumobook-calendar-month { font-weight: 600; } /* Calendar grid */ .kumobook-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .kumobook-calendar-day { min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--kumo-radius); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .kumobook-calendar-day.disabled { opacity: 0.3; pointer-events: none; } .kumobook-calendar-day.today { border: 1px solid var(--kumo-accent); } .kumobook-calendar-day:hover, .kumobook-calendar-day:focus { background-color: rgba(233, 180, 110, 0.15); outline: none; } .kumobook-calendar-day.selected { background: var(--kumo-accent); color: #1a1a1a; font-weight: 600; border: 2px solid var(--kumo-accent); box-shadow: inset 0 0 6px rgba(233, 180, 110, 0.5); } /* Time slots */ .kumobook-times { min-height: 200px; } .kumobook-times .placeholder { opacity: 0.7; font-style: italic; margin-top: 1rem; } .kumobook-times-grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); margin-top: 0.5rem; } .kumobook-time-slot { padding: 0.5rem 0.75rem; border-radius: var(--kumo-radius); background: var(--kumo-primary); color: var(--kumo-text-light); text-align: center; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; user-select: none; } .kumobook-time-slot:hover, .kumobook-time-slot:focus { background: linear-gradient(135deg, var(--kumo-primary) 0%, var(--kumo-accent) 100%); color: #1a1a1a; } .kumobook-time-slot.selected { background: linear-gradient(135deg, var(--kumo-accent) 0%, var(--kumo-primary) 100%); color: #1a1a1a; font-weight: 600; } /* Navigation buttons and form buttons */ .kumobook-btn { padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; color: #ffffff; background: var(--kumo-primary); border: 1px solid var(--kumo-glass-border); border-radius: var(--kumo-radius); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .kumobook-btn[disabled] { opacity: 0.5; cursor: not-allowed; } .kumobook-btn:hover, .kumobook-btn:active { background: var(--kumo-accent); color: #1a1a1a; box-shadow: 0 0 0 4px rgba(233, 180, 110, 0.3); } .kumobook-btn:focus { outline: none; box-shadow: 0 0 0 3px var(--kumo-accent); } /* Form container */ .kumobook-form-field { position: relative; margin-bottom: 1.25rem; } .kumobook-form-field input { width: 100%; padding: 0.75rem 0.75rem 0.75rem 0.75rem; border: 1px solid var(--kumo-glass-border); border-radius: var(--kumo-radius); background: rgba(255,255,255,0.1); color: #ffffff; outline: none; transition: border-color 0.2s ease, background-color 0.2s ease; } .kumobook-form-field label { position: absolute; top: 50%; left: 0.75rem; transform: translateY(-50%); color: rgba(255,255,255,0.7); pointer-events: none; transition: all 0.2s ease; } .kumobook-form-field input:focus + label, .kumobook-form-field input:not(:placeholder-shown) + label { top: -0.5rem; font-size: 0.75rem; color: var(--kumo-accent); background: var(--kumo-glass-bg); padding: 0 0.25rem; } .kumobook-form-field input:focus { border-color: var(--kumo-accent); background: rgba(255,255,255,0.15); } .kumobook-form-error { color: #ff7b7b; font-size: 0.8rem; margin-top: -0.75rem; margin-bottom: 0.5rem; } /* Success message */ .kumobook-success { text-align: center; font-size: 1.3rem; color: #d4fdd4; } /* Branding card for logo and tagline */ .kumobook-brand-card { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--kumo-glass-bg); border: 1px solid var(--kumo-glass-border); border-radius: var(--kumo-radius); padding: 1rem; text-align: center; color: var(--kumo-text-light); box-shadow: var(--kumo-shadow); overflow: hidden; animation: fadeInBrand 0.6s ease forwards; } .kumobook-brand-card img { display: block; width: 100%; max-width: 250px; height: auto; margin-bottom: 0.75rem; margin-left: auto; margin-right: auto; } .kumobook-brand-card p { margin: 0.5rem 0; font-size: 1rem; font-weight: 500; line-height: 1.5; text-align: left; } @media (max-width: 991px) { .kumobook-brand-card img { max-width: 200px; } } @media (max-width: 767px) { .kumobook-brand-card img { max-width: 160px; } .kumobook-brand-card p { font-size: 0.875rem; text-align: center; } } @keyframes fadeInBrand { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Form inputs */ .kumobook-modal-content input, .kumobook-modal-content select, .kumobook-modal-content textarea { width: 100%; padding: 0.6rem 0.8rem; border: none; border-radius: var(--kumo-radius); background: rgba(255, 255, 255, 0.12); color: var(--kumo-text-light); outline: none; box-shadow: inset 0 0 5px rgba(0,0,0,0.15); } .kumobook-modal-content input::placeholder, .kumobook-modal-content textarea::placeholder { color: rgba(255,255,255,0.6); } /* Error text */ .kumobook-error { color: #ff7b7b; font-size: 0.875rem; display: none; } /* Success message */ .kumobook-success { text-align: center; font-size: 1.2rem; color: var(--kumo-text-light); } /* Form heading colour override: ensure the form title uses the accent colour for better contrast */ .kumobook-form h2 { color: var(--kumo-accent); } /* Success checkmark animation */ .kumobook-checkmark-wrapper { position: relative; display: inline-block; margin-bottom: 1rem; } .kumobook-checkmark path { stroke: var(--kumo-accent); stroke-dasharray: 56; stroke-dashoffset: 56; animation: drawCheck 0.8s ease forwards; } @keyframes drawCheck { to { stroke-dashoffset: 0; } } .kumobook-sparkle { position: absolute; top: 4px; right: -10px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, var(--kumo-accent) 0%, rgba(233, 180, 110, 0) 70%); animation: sparkle 1.2s ease-out forwards; pointer-events: none; } @keyframes sparkle { 0% { transform: scale(0); opacity: 1; } 70% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.4); opacity: 0; } } /* Admin styles */ .kumobook-admin-wrapper { max-width: 960px; margin: 0 auto; padding: 2rem 1rem; } .kumobook-admin-header { text-align: center; padding: 1.5rem; border-radius: var(--kumo-radius); margin-bottom: 2rem; color: #ffffff; background: var(--kumo-primary); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); } .kumobook-admin-title { margin: 0; font-size: 2rem; font-weight: 700; } .kumobook-admin-subtitle { margin: 0.25rem 0 0; font-size: 1rem; opacity: 0.85; } .kumobook-admin-content { background: var(--kumo-glass-bg); border-radius: var(--kumo-radius); padding: 1.5rem; box-shadow: 0 4px 15px rgba(0,0,0,0.2); backdrop-filter: blur(10px); border: 1px solid var(--kumo-glass-border); } .kumobook-admin-form table.form-table { width: 100%; border-collapse: separate; border-spacing: 0 1rem; } .kumobook-admin-form th { text-align: left; padding-right: 1rem; } .kumobook-admin-form input[type="time"], .kumobook-admin-form input[type="email"], .kumobook-admin-form input[type="number"], .kumobook-admin-form input[type="text"], .kumobook-admin-form select { width: 100%; max-width: 200px; padding: 0.4rem 0.6rem; border-radius: 8px; border: none; background: rgba(255,255,255,0.2); color: #333; } .kumobook-save-button { margin-top: 1rem; padding: 0.8rem 1.6rem; font-size: 1rem; font-weight: 600; color: var(--kumo-text-light); background: var(--kumo-primary); border: none; border-radius: var(--kumo-radius); box-shadow: var(--kumo-shadow); cursor: pointer; transition: all 0.25s ease; } .kumobook-save-button:hover, .kumobook-save-button:active { background: var(--kumo-accent); color: #1a1a1a; transform: scale(1.03); box-shadow: 0 0 12px var(--kumo-accent); } .kumobook-save-button:focus { outline: none; box-shadow: 0 0 0 3px var(--kumo-accent); } /* --- KumoBook v1.9: Mobile Scroll Fix --- */ @media (max-width: 767px) { .kumobook-modal[aria-hidden="false"] .kumobook-modal-content { max-height: 90vh !important; overflow-y: scroll !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 2rem !important; } }