.booking-page{background:#F7F8FA}.booking-nav{display:flex}.booking-hero{padding:160px 0 70px;background:#0B0F14;color:#fff}.booking-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:end}.booking-hero h1{font-size:clamp(3rem,6vw,5.8rem);line-height:.96;letter-spacing:-.055em;margin:0;max-width:850px}.booking-hero-copy{color:#B7BEC8;font-size:1.08rem}.approval-note{margin-top:26px;padding:16px 18px;border:1px solid rgba(255,255,255,.12);border-radius:14px;display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.04)}.approval-note span{width:10px;height:10px;border-radius:50%;background:#C8102E;box-shadow:0 0 0 5px rgba(200,16,46,.14);margin-top:7px;flex:0 0 auto}.booking-confirmation{padding:34px 0 0}.confirmation-card{background:#fff;border:1px solid #DDE1E7;border-radius:22px;padding:28px;display:flex;gap:20px;align-items:flex-start;box-shadow:0 18px 50px rgba(11,15,20,.08)}.confirmation-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#EAF7EF;color:#176337;font-weight:900;font-size:1.25rem;flex:0 0 auto}.confirmation-card h2{margin:0 0 8px;font-size:2rem}.confirmation-card p{margin:4px 0;color:#5C6572}.confirmation-small{font-size:.9rem;max-width:780px}.calendar-section{padding:70px 0 45px}.calendar-shell{background:#fff;border:1px solid #DDE1E7;border-radius:28px;overflow:hidden;box-shadow:0 20px 60px rgba(11,15,20,.07)}.calendar-toolbar{padding:30px 32px 24px;display:flex;align-items:end;justify-content:space-between;gap:24px;border-bottom:1px solid #E4E7EB}.calendar-toolbar h2{margin:0;font-size:clamp(2rem,3vw,3rem);letter-spacing:-.035em}.calendar-actions{display:flex;gap:8px;align-items:center}.calendar-nav,.calendar-today{height:44px;border:1px solid #D4D8DF;background:#fff;border-radius:12px;color:#0B0F14;font-weight:800;cursor:pointer}.calendar-nav{width:44px;font-size:1.2rem}.calendar-today{padding:0 16px}.calendar-nav:hover,.calendar-today:hover{border-color:#C8102E}.calendar-legend{display:flex;gap:24px;align-items:center;padding:18px 32px;color:#636C79;font-size:.84rem;border-bottom:1px solid #E8EAEE}.calendar-legend span{display:flex;align-items:center;gap:8px}.calendar-legend .timezone{margin-left:auto}.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.legend-dot.available{background:#C8102E}.legend-dot.unavailable{background:#C7CCD4}.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#F2F4F6;border-bottom:1px solid #E0E3E8}.calendar-weekdays span{padding:14px 16px;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;font-weight:850;color:#697280;text-align:left;border-right:1px solid #E0E3E8}.calendar-weekdays span:last-child{border-right:0}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);background:#DDE1E7;gap:1px}.calendar-day{min-height:136px;background:#fff;border:0;padding:17px 16px;text-align:left;color:#0B0F14;position:relative;cursor:default}.calendar-day.is-outside{background:#F7F8FA;color:#B4BBC5}.calendar-day.is-past{background:#F7F8FA;color:#A8B0BA}.calendar-day.is-available{cursor:pointer;background:#fff}.calendar-day.is-available:hover{background:#FFF8F9}.calendar-day.is-selected{background:#0B0F14;color:#fff;box-shadow:inset 0 0 0 3px #C8102E}.calendar-day .date-num{font-size:2rem;line-height:1;font-weight:760;letter-spacing:-.04em}.calendar-day .date-meta{position:absolute;left:16px;bottom:15px;display:flex;align-items:center;gap:7px;font-size:.76rem;font-weight:800}.calendar-day .date-meta i{width:7px;height:7px;border-radius:50%;background:#C8102E}.calendar-day:not(.is-available) .date-meta{color:#9BA3AE;font-weight:650}.calendar-day:not(.is-available) .date-meta i{background:#C7CCD4}.calendar-day.is-selected .date-meta{color:#fff}.slot-section{padding:20px 0 56px}.slot-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:60px;align-items:start}.slot-heading h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.02;letter-spacing:-.04em;margin:0 0 12px}.slot-heading>p:last-child{color:#656E7B}.slot-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.slot-button{border:1px solid #D7DBE2;border-radius:16px;background:#fff;padding:18px;text-align:left;cursor:pointer;transition:.18s;color:#0B0F14}.slot-button:hover{border-color:#C8102E;transform:translateY(-1px)}.slot-button.is-selected{background:#0B0F14;color:#fff;border-color:#0B0F14;box-shadow:0 0 0 3px rgba(200,16,46,.18)}.slot-button strong{display:block;font-size:1.08rem}.slot-button span{display:block;color:#6B7280;font-size:.82rem;margin-top:4px}.slot-button.is-selected span{color:#B7BEC8}.slot-empty{grid-column:1/-1;border:1px dashed #C8CDD5;border-radius:16px;padding:26px;color:#6B7280}.booking-form-section{padding:70px 0 110px;background:#fff;border-top:1px solid #E1E4E8}.booking-form-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:55px;align-items:start}.booking-summary-panel{position:sticky;top:120px}.selected-window{margin:18px 0 30px;padding:22px;background:#0B0F14;color:#fff;border-radius:18px;display:grid;gap:5px}.selected-window strong{font-size:1.18rem}.selected-window span{color:#AEB6C1;font-size:.9rem}.booking-steps{display:grid;gap:14px}.booking-steps>div{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}.booking-steps>div>span{width:30px;height:30px;border-radius:50%;background:#F1F3F5;color:#0B0F14;display:grid;place-items:center;font-size:.75rem;font-weight:850}.booking-steps p{display:grid;margin:0;color:#6B7280;font-size:.87rem}.booking-steps strong{color:#0B0F14;font-size:.95rem}.booking-form-card{background:#F7F8FA;border:1px solid #DDE1E7;border-radius:24px;padding:30px}.booking-form{display:grid;gap:18px}.booking-form label{display:grid;gap:7px;font-size:.76rem;font-weight:800;letter-spacing:.05em;color:#4F5865}.booking-form input,.booking-form select,.booking-form textarea{width:100%;border:1px solid #CED4DC;border-radius:12px;background:#fff;padding:13px 14px;color:#0B0F14;outline:none}.booking-form input:focus,.booking-form select:focus,.booking-form textarea:focus{border-color:#C8102E;box-shadow:0 0 0 3px rgba(200,16,46,.1)}.booking-consent{border-left:3px solid #C8102E;padding:10px 14px;background:#fff;color:#646D79;font-size:.86rem}.booking-consent strong{color:#0B0F14}.booking-submit[disabled]{opacity:.48;cursor:not-allowed}.booking-submit:not([disabled]){box-shadow:0 10px 26px rgba(200,16,46,.18)} @media(max-width:920px){.booking-hero-grid,.slot-layout,.booking-form-grid{grid-template-columns:1fr}.booking-hero-grid{gap:28px}.booking-summary-panel{position:static}.booking-nav{display:none}.calendar-day{min-height:108px;padding:13px 11px}.calendar-day .date-num{font-size:1.55rem}.calendar-day .date-meta{left:11px;bottom:11px}.calendar-legend{flex-wrap:wrap}.calendar-legend .timezone{margin-left:0}.slot-list{grid-template-columns:1fr 1fr}} @media(max-width:640px){.booking-hero{padding:120px 0 56px}.booking-hero h1{font-size:3.15rem}.calendar-toolbar{padding:22px 18px 18px;align-items:flex-start;flex-direction:column}.calendar-legend{padding:14px 18px;gap:14px}.calendar-weekdays span{padding:10px 4px;text-align:center;font-size:.58rem}.calendar-day{min-height:88px;padding:9px 7px}.calendar-day .date-num{font-size:1.25rem}.calendar-day .date-meta{position:static;margin-top:18px;font-size:0}.calendar-day .date-meta i{width:8px;height:8px}.slot-list{grid-template-columns:1fr}.booking-form-card{padding:20px}.booking-form-section{padding:55px 0 80px}} .form-intro{padding:16px 18px;border:1px solid #DDE1E7;border-radius:14px;background:#fff;display:grid;gap:4px}.form-intro strong{font-size:.96rem;color:#0B0F14}.form-intro span{font-size:.84rem;line-height:1.55;color:#6B7280}.optional-label{font-weight:650;color:#8B94A1;letter-spacing:0;text-transform:none;margin-left:5px}.booking-form select{cursor:pointer}.booking-form select:invalid{color:#77808C}.booking-submit[disabled]{background:#D9DEE5!important;color:#707987!important;opacity:1;box-shadow:none;cursor:not-allowed}.booking-submit:not([disabled]){background:#C8102E;color:#fff} /* SJK LIVE v0.2.4 BOOKING NUMERIC SYSTEM START */ /* * Large calendar dates. * Same type language as production numbers and phone. */ .calendar-day .date-num{ font-family:var(--numeric); font-size:clamp(2.4rem,3vw,3.15rem); font-weight:800; line-height:.85; letter-spacing:.01em; font-variant-numeric:tabular-nums; } /* More confident calendar month heading */ .calendar-toolbar h2{ font-family:var(--display); font-weight:800; letter-spacing:-.05em; } /* Weekday labels: more control-room / schedule character */ .calendar-weekdays span{ font-family:var(--numeric); font-size:.82rem; font-weight:700; letter-spacing:.14em; } /* Availability information under each date */ .calendar-day .date-meta{ font-size:.80rem; font-weight:750; } /* Released production time windows */ .slot-button strong{ font-family:var(--numeric); font-size:1.45rem; font-weight:700; line-height:1; letter-spacing:.015em; font-variant-numeric:tabular-nums; } /* Selected booking window */ .selected-window strong{ font-family:var(--numeric); font-size:1.55rem; font-weight:700; font-variant-numeric:tabular-nums; } /* Calendar navigation numbers / operational controls */ .calendar-nav, .calendar-today{ font-family:var(--numeric); font-weight:700; } /* Preserve readable proportions on mobile */ @media(max-width:640px){ .calendar-day{ min-height:106px; padding:13px 11px; } .calendar-day .date-num{ font-size:2.2rem; } .calendar-day .date-meta{ left:11px; bottom:11px; font-size:.70rem; } .slot-button strong{ font-size:1.3rem; } } /* SJK LIVE v0.2.4 BOOKING NUMERIC SYSTEM END */ /* SJK LIVE v0.2.6 BOOKING TYPE START */ /* * BOOKING TYPOGRAPHY POLICY * * Inter Tight: * titles, headings, strong CTA text * * Inter: * labels, form controls, descriptions, * user-entered information * * Barlow Condensed: * dates, times and operational numeric data only */ /* --------------------------------------------------------- FORM CONTAINER --------------------------------------------------------- */ .booking-form, .booking-form-panel, .request-form{ font-family:"Inter",system-ui,-apple-system, BlinkMacSystemFont,"Segoe UI",sans-serif; color:#0B0F14; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* --------------------------------------------------------- FORM LABELS --------------------------------------------------------- */ .booking-form label, .booking-form-panel label, .request-form label{ font-family:"Inter",system-ui,-apple-system, BlinkMacSystemFont,"Segoe UI",sans-serif; display:block; margin-bottom:8px; font-size:.875rem; font-weight:650; line-height:1.25; letter-spacing:0; color:#283241; } /* --------------------------------------------------------- INPUTS / SELECTS / TEXTAREA --------------------------------------------------------- */ .booking-form input, .booking-form select, .booking-form textarea, .booking-form-panel input, .booking-form-panel select, .booking-form-panel textarea, .request-form input, .request-form select, .request-form textarea{ font-family:"Inter",system-ui,-apple-system, BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:1rem; font-weight:500; line-height:1.45; letter-spacing:0; color:#0B0F14; background:#FFFFFF; border:1px solid #C9D1DB; border-radius:12px; min-height:50px; padding:13px 15px; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; } /* Textarea needs more breathing room */ .booking-form textarea, .booking-form-panel textarea, .request-form textarea{ min-height:125px; resize:vertical; line-height:1.55; } /* --------------------------------------------------------- PLACEHOLDER --------------------------------------------------------- */ .booking-form input::placeholder, .booking-form textarea::placeholder, .booking-form-panel input::placeholder, .booking-form-panel textarea::placeholder, .request-form input::placeholder, .request-form textarea::placeholder{ color:#778292; opacity:1; font-family:"Inter",system-ui,-apple-system, BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.96rem; font-weight:450; letter-spacing:0; } /* --------------------------------------------------------- SELECT CONTROLS --------------------------------------------------------- */ .booking-form select, .booking-form-panel select, .request-form select{ font-weight:550; color:#253040; cursor:pointer; } /* --------------------------------------------------------- FOCUS STATE --------------------------------------------------------- */ .booking-form input:focus, .booking-form select:focus, .booking-form textarea:focus, .booking-form-panel input:focus, .booking-form-panel select:focus, .booking-form-panel textarea:focus, .request-form input:focus, .request-form select:focus, .request-form textarea:focus{ outline:none; border-color:#6B7280; box-shadow: 0 0 0 3px rgba(107,114,128,.12); background:#FFFFFF; } /* --------------------------------------------------------- FORM SECTION INTRO "Tell us what you are planning." --------------------------------------------------------- */ .booking-form .form-intro h3, .booking-form-panel .form-intro h3, .request-form .form-intro h3, .booking-form .form-section-title, .booking-form-panel .form-section-title{ font-family:"Inter Tight","Inter",sans-serif; font-size:1.15rem; font-weight:750; line-height:1.15; letter-spacing:-.025em; color:#0B0F14; } .booking-form .form-intro p, .booking-form-panel .form-intro p, .request-form .form-intro p, .booking-form .helper-text, .booking-form-panel .helper-text{ font-family:"Inter",sans-serif; font-size:.92rem; font-weight:450; line-height:1.55; letter-spacing:0; color:#5D6878; } /* --------------------------------------------------------- OPTIONAL / SECONDARY LABELS --------------------------------------------------------- */ .booking-form .optional, .booking-form-panel .optional, .request-form .optional{ display:block; margin-top:3px; font-family:"Inter",sans-serif; font-size:.78rem; font-weight:500; line-height:1.3; color:#7A8492; } /* --------------------------------------------------------- APPROVAL NOTICE --------------------------------------------------------- */ .booking-form .approval-note, .booking-form-panel .approval-note, .request-form .approval-note, .booking-notice{ font-family:"Inter",sans-serif; font-size:.91rem; font-weight:450; line-height:1.5; letter-spacing:0; color:#465261; } .booking-form .approval-note strong, .booking-form-panel .approval-note strong, .request-form .approval-note strong, .booking-notice strong{ font-family:"Inter",sans-serif; font-weight:700; color:#0B0F14; } /* --------------------------------------------------------- SUBMIT BUTTON --------------------------------------------------------- */ .booking-form button[type="submit"], .booking-form-panel button[type="submit"], .request-form button[type="submit"], .booking-submit{ font-family:"Inter Tight","Inter",sans-serif; font-size:1rem; font-weight:750; line-height:1; letter-spacing:-.01em; min-height:52px; border-radius:999px; } /* Disabled state must remain readable */ .booking-form button[type="submit"]:disabled, .booking-form-panel button[type="submit"]:disabled, .request-form button[type="submit"]:disabled, .booking-submit:disabled{ color:#657180; font-weight:650; } /* --------------------------------------------------------- SELECTED WINDOW --------------------------------------------------------- */ .selected-window{ font-family:"Inter",sans-serif; } .selected-window .selected-date, .selected-window .selected-time, .selected-window strong{ font-family:"Barlow Condensed", "Arial Narrow", sans-serif; font-weight:700; font-variant-numeric:tabular-nums; } /* --------------------------------------------------------- CALENDAR — KEEP OPERATIONAL NUMERIC FONT --------------------------------------------------------- */ .calendar-day .date-num{ font-family:"Barlow Condensed", "Arial Narrow", sans-serif; font-size:clamp(2.35rem,3vw,3.15rem); font-weight:800; line-height:.85; letter-spacing:0; font-variant-numeric:tabular-nums; } .slot-button strong{ font-family:"Barlow Condensed", "Arial Narrow", sans-serif; font-size:1.5rem; font-weight:700; letter-spacing:0; font-variant-numeric:tabular-nums; } /* Calendar text labels stay highly readable */ .calendar-toolbar, .calendar-weekdays, .calendar-day .date-meta, .slot-button span{ font-family:"Inter",sans-serif; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media(max-width:700px){ .booking-form label, .booking-form-panel label, .request-form label{ font-size:.84rem; } .booking-form input, .booking-form select, .booking-form textarea, .booking-form-panel input, .booking-form-panel select, .booking-form-panel textarea, .request-form input, .request-form select, .request-form textarea{ /* * Keep >= 16px to prevent mobile Safari * from zooming into form fields. */ font-size:16px; min-height:50px; } .booking-form textarea, .booking-form-panel textarea, .request-form textarea{ min-height:120px; } .booking-form .form-intro h3, .booking-form-panel .form-intro h3, .request-form .form-intro h3{ font-size:1.08rem; } } /* SJK LIVE v0.2.6 BOOKING TYPE END */ /* SJK LIVE v0.4.3 PROFESSIONAL CALENDAR START */ /* ========================================================= BOOKING APP INTRO ========================================================= */ .sjk-book-app-intro{ display:none; } @media(max-width:900px){ .sjk-book-app-intro{ display:block; padding: 18px 16px 16px; background:#F7F8FA; } .sjk-book-back{ display:inline-flex; margin-bottom:18px; color:#596372; font-family: "Inter", sans-serif; font-size:.83rem; font-weight:650; text-decoration:none; } .sjk-book-kicker{ display:block; margin-bottom:8px; color:#C8102E; font-family: "Inter Tight", sans-serif; font-size:.72rem; font-weight:800; letter-spacing:.05em; } .sjk-book-app-intro h1{ max-width:470px; margin:0; color:#0B0F14; font-family: "Inter Tight", "Inter", sans-serif; font-size: clamp( 2.35rem, 10vw, 3.7rem ); font-weight:800; line-height:.92; letter-spacing:-.055em; } .sjk-book-app-intro p{ max-width:520px; margin: 16px 0 0; color:#596372; font-family: "Inter", sans-serif; font-size:.91rem; line-height:1.55; } } /* ========================================================= CALENDAR CONTAINER ========================================================= */ .calendar-shell, .booking-calendar, .calendar-card{ border: 1px solid #DDE2E8; border-radius:18px; background:#fff; box-shadow: 0 14px 40px rgba(11,15,20,.06); overflow:hidden; } /* ========================================================= CALENDAR TOOLBAR ========================================================= */ .calendar-toolbar{ min-height:82px; padding: 18px 20px; display:grid; grid-template-columns: 48px minmax(0,1fr) 48px; align-items:center; gap:12px; border-bottom: 1px solid #E5E8EC; background:#fff; } .calendar-toolbar h2{ margin:0; text-align:center; color:#0B0F14; font-family: "Inter Tight", "Inter", sans-serif; font-size: clamp( 1.4rem, 4vw, 2rem ); font-weight:800; line-height:1; letter-spacing:-.04em; } .calendar-nav{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; border: 1px solid #D7DCE2; border-radius:50%; background:#fff; color:#202833; font-family: "Inter", sans-serif; font-size:1.5rem; cursor:pointer; } /* ========================================================= WEEKDAY HEADER ========================================================= */ .calendar-weekdays{ display:grid; grid-template-columns: repeat(7,1fr); border-bottom: 1px solid #E7EAEF; background:#F5F6F8; } .calendar-weekdays span{ min-height:42px; display:flex; align-items:center; justify-content:center; color:#6B7280; font-family: "Inter", sans-serif; font-size:.70rem; font-weight:700; line-height:1; letter-spacing:.03em; text-transform:uppercase; } /* ========================================================= MONTH GRID ========================================================= */ .calendar-grid{ display:grid; grid-template-columns: repeat(7,1fr); background:#E5E8ED; gap:1px; } /* * Large, readable production dates. */ .calendar-day{ position:relative; min-height:112px; padding: 14px 13px; border:0 !important; border-radius:0 !important; background:#fff; color:#0B0F14; text-align:left; transition: background .15s ease, color .15s ease, box-shadow .15s ease; cursor:default; } .calendar-day .date-num{ display:block; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: clamp( 2.25rem, 4vw, 3.1rem ); font-weight:700; line-height:.82; letter-spacing:0; font-variant-numeric: tabular-nums; color:#151B23; } /* * Outside current month. */ .calendar-day.is-muted, .calendar-day.outside-month, .calendar-day[disabled]{ background:#FAFAFB; color:#B7BDC6; } .calendar-day.is-muted .date-num, .calendar-day.outside-month .date-num, .calendar-day[disabled] .date-num{ color:#C3C8CF; } /* ========================================================= AVAILABLE DATES ========================================================= */ .calendar-day.has-availability, .calendar-day.available{ cursor:pointer; background:#fff; } .calendar-day.has-availability::after, .calendar-day.available::after{ content:""; position:absolute; top:14px; right:13px; width:9px; height:9px; border-radius:50%; background:#C8102E; box-shadow: 0 0 0 4px rgba(200,16,46,.10); } .calendar-day.has-availability:hover, .calendar-day.available:hover{ background:#F9F2F3; } /* * Availability count should be easy to understand, * but subordinate to the date. */ .calendar-day .date-meta{ position:absolute; left:13px; bottom:13px; margin:0; color:#6B7280; font-family: "Inter", sans-serif; font-size:.73rem; font-weight:600; line-height:1.25; } .calendar-day.has-availability .date-meta, .calendar-day.available .date-meta{ color:#9F1730; } /* ========================================================= SELECTED DATE ========================================================= */ .calendar-day.is-selected, .calendar-day.selected, .calendar-day[aria-selected="true"]{ position:relative; z-index:2; background:#0B0F14 !important; box-shadow: inset 0 0 0 2px #0B0F14; } .calendar-day.is-selected .date-num, .calendar-day.selected .date-num, .calendar-day[aria-selected="true"] .date-num{ color:#fff; } .calendar-day.is-selected .date-meta, .calendar-day.selected .date-meta, .calendar-day[aria-selected="true"] .date-meta{ color:#D1D6DD; } .calendar-day.is-selected::after, .calendar-day.selected::after, .calendar-day[aria-selected="true"]::after{ background:#C8102E; } /* ========================================================= TODAY ========================================================= */ .calendar-day.is-today .date-num{ text-decoration: underline; text-decoration-color: #C8102E; text-decoration-thickness: 3px; text-underline-offset: 5px; } /* ========================================================= SLOT SELECTION ========================================================= */ .slot-list, .available-slots{ display:grid; gap:10px; } .slot-button{ width:100%; min-height:68px; padding: 12px 15px; display:flex; align-items:center; justify-content:space-between; gap:15px; border: 1px solid #DCE1E7; border-radius:12px; background:#fff; color:#0B0F14; cursor:pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .slot-button strong{ font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size:1.55rem; font-weight:700; font-variant-numeric: tabular-nums; } .slot-button span{ color:#6B7280; font-family: "Inter", sans-serif; font-size:.78rem; font-weight:550; } .slot-button:hover{ border-color:#AEB6C1; background:#FAFAFB; } .slot-button.is-selected, .slot-button.selected, .slot-button[aria-pressed="true"]{ border-color:#C8102E; background:#FFF8F9; box-shadow: 0 0 0 3px rgba(200,16,46,.08); } /* ========================================================= SELECTED WINDOW SUMMARY ========================================================= */ .selected-window{ margin-top:14px; padding: 14px 16px; border-left: 4px solid #C8102E; border-radius: 0 10px 10px 0; background:#F7F8FA; color:#313A47; font-family: "Inter", sans-serif; } .selected-window strong{ color:#0B0F14; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size:1.45rem; font-weight:700; } /* ========================================================= MOBILE BOOKING EXPERIENCE ========================================================= */ @media(max-width:700px){ /* * Calendar almost reaches device edges, * like a native booking application. */ .calendar-shell, .booking-calendar, .calendar-card{ margin-left: -4px; margin-right: -4px; border-radius:14px; } .calendar-toolbar{ position:sticky; top: calc( env(safe-area-inset-top) + 0px ); z-index:25; min-height:70px; padding: 12px 10px; background: rgba( 255, 255, 255, .96 ); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .calendar-nav{ width:42px; height:42px; } .calendar-weekdays span{ min-height:38px; font-size:.64rem; } /* * Professional large dates but still fit * seven columns on phone. */ .calendar-day{ min-height:88px; padding: 10px 8px; } .calendar-day .date-num{ font-size:2rem; } .calendar-day .date-meta{ left:8px; right:5px; bottom:8px; font-size:.57rem; line-height:1.15; } .calendar-day.has-availability::after, .calendar-day.available::after{ top:9px; right:8px; width:7px; height:7px; box-shadow: 0 0 0 3px rgba(200,16,46,.10); } .slot-button{ min-height:64px; } } /* * Very narrow iPhones. */ @media(max-width:390px){ .calendar-day{ min-height:80px; padding: 9px 6px; } .calendar-day .date-num{ font-size:1.78rem; } .calendar-day .date-meta{ left:6px; font-size:.53rem; } } /* SJK LIVE v0.4.3 PROFESSIONAL CALENDAR END */ /* ========================================================== SJK LIVE v0.4.4 — DIRECT CALENDAR ENTRY ========================================================== */ #calendar{ scroll-margin-top:12px; } @media(max-width:900px){ /* * Calendar remains the primary visual destination when * entered from the mobile Book tab. */ #calendar{ scroll-margin-top: max( 10px, env(safe-area-inset-top) ); margin-bottom: calc( 20px + env(safe-area-inset-bottom) ); } /* * Do not add unnecessary whitespace above an operational * calendar once the Book tab takes the user directly there. */ #calendar.calendar-shell, #calendar.booking-calendar, #calendar.calendar-card{ box-shadow: 0 16px 44px rgba(11,15,20,.08); } }