/* ========================================================================== HD Showcase: reservations (reservations.hokedesigns.com). Loaded with Amelia. ========================================================================== */ /* ---------- Amelia booking forms, in the brand ---------- Amelia writes its palette as inline custom properties, on #amelia-container and again on individual buttons, calendar grids, drop-downs and pop-ups (some of which it moves to the end of ). A stylesheet !important outranks an inline declaration, so every element carrying --am-c-* vars is re-pointed at the page accent. --hds-am is set on per sample business (inc/booking.php) and falls back to Hoke blue; --hds-am-dk is the deeper shade Amelia uses for text and the selected day. */ body { --hds-am: #136fa5; --hds-am-dk: color-mix(in srgb, var(--hds-am) 76%, #001b44); } #amelia-container, .amelia-v2-booking [style*="--am-"], .el-popper[style*="--am-"], .el-popper [style*="--am-"], [class*="am-"][style*="--am-"] { --am-c-primary: var(--hds-am) !important; --am-c-primary-op10: color-mix(in srgb, var(--hds-am) 10%, transparent) !important; --am-c-btn-prim: var(--hds-am) !important; --am-c-btn-sec: #001b44 !important; --am-c-btn-first: var(--hds-am) !important; --am-c-btn-first-op20: color-mix(in srgb, var(--hds-am) 12%, transparent) !important; --am-c-btn-first-op30: color-mix(in srgb, var(--hds-am) 30%, transparent) !important; --am-c-btn-first-op80: color-mix(in srgb, var(--hds-am) 82%, #001b44) !important; --am-c-cal-init: var(--hds-am) !important; --am-c-cal-init-op10: color-mix(in srgb, var(--hds-am) 10%, transparent) !important; --am-c-cal-init-op20: color-mix(in srgb, var(--hds-am) 20%, transparent) !important; --am-c-cal-init-op30: color-mix(in srgb, var(--hds-am) 30%, transparent) !important; --am-c-cal-init-op60: color-mix(in srgb, var(--hds-am) 60%, transparent) !important; --am-c-cal-init-text: var(--hds-am-dk) !important; --am-c-cal-low: var(--hds-am) !important; --am-c-cal-low-op10: color-mix(in srgb, var(--hds-am) 10%, transparent) !important; --am-c-cal-low-op20: color-mix(in srgb, var(--hds-am) 20%, transparent) !important; --am-c-cal-low-op30: color-mix(in srgb, var(--hds-am) 30%, transparent) !important; --am-c-cal-low-op60: color-mix(in srgb, var(--hds-am) 60%, transparent) !important; --am-c-cal-low-op80: color-mix(in srgb, var(--hds-am) 80%, transparent) !important; --am-c-cal-low-text: var(--hds-am-dk) !important; --am-c-cal-high: var(--hds-am) !important; --am-c-cal-high-op10: color-mix(in srgb, var(--hds-am) 10%, transparent) !important; --am-c-cal-high-op20: color-mix(in srgb, var(--hds-am) 20%, transparent) !important; --am-c-cal-high-op30: color-mix(in srgb, var(--hds-am) 30%, transparent) !important; --am-c-cal-high-op60: color-mix(in srgb, var(--hds-am) 60%, transparent) !important; --am-c-cal-high-op80: color-mix(in srgb, var(--hds-am) 80%, transparent) !important; --am-c-cal-high-text: var(--hds-am-dk) !important; --am-c-cal-selected: var(--hds-am-dk) !important; --am-c-cal-selected-op80: color-mix(in srgb, var(--hds-am-dk) 80%, transparent) !important; --am-c-cal-selected-text: #ffffff !important; --am-c-extras-price: var(--hds-am-dk) !important; --am-c-extras-price-op10: color-mix(in srgb, var(--hds-am) 10%, transparent) !important; --am-c-option-selected: var(--hds-am-dk) !important; --am-c-option-selected-op10: color-mix(in srgb, var(--hds-am) 10%, transparent) !important; --am-c-option-img-bgr: var(--hds-am) !important; --am-c-ps-primary: var(--hds-am-dk) !important; --am-c-ps-primary-op10: color-mix(in srgb, var(--hds-am) 10%, transparent) !important; --am-c-sb-bgr: #001b44 !important; --am-c-sb-text: #ffffff !important; --am-c-main-heading-text: #001b44 !important; --am-c-main-text: #323643 !important; --am-c-inp-border: #dfe5ea !important; --am-c-inp-text: #323643 !important; --am-c-success: #127f86 !important; --am-c-success-op10: rgba(18, 127, 134, .1) !important; --am-c-success-op20: rgba(18, 127, 134, .2) !important; --am-c-error: #e14b2a !important; --am-font-family: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } #amelia-container { --am-brad-main: 0 22px 22px 0 !important; font-family: var(--hds-font); } #amelia-container.am-fs__wrapper { border-radius: 22px; box-shadow: 0 0 0 1px var(--hd-line), 0 30px 60px -36px rgba(0, 27, 68, .5); } .amelia-v2-booking { font-family: var(--hds-font); } .hds-bookwrap .amelia-v2-booking #amelia-container, .hds-bookwrap .amelia-v2-booking #amelia-container.am-fs__wrapper { margin: 0; max-width: 100%; } /* ---------- Sample business cards ---------- */ .hds-democards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(18px, 2.4vw, 26px); margin: 0; padding: 0; list-style: none; } .hds-democard { display: flex; flex-direction: column; height: 100%; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--hd-line); color: inherit; text-decoration: none; overflow: hidden; transition: transform .35s var(--hds-ease), box-shadow .35s var(--hds-ease); } .hds-democard:hover, .hds-democard:focus-visible { transform: translateY(-5px); box-shadow: 0 0 0 2px var(--c), 0 26px 50px -26px var(--c); outline: none; } .hds-democard__art { display: block; aspect-ratio: 4 / 3; background: var(--c-soft); overflow: hidden; } .hds-democard__art .hds-art__svg { display: block; width: 100%; height: 100%; transition: transform .9s var(--hds-ease); } .hds-democard:hover .hds-democard__art .hds-art__svg { transform: scale(1.05); } .hds-democard__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 18px 20px 20px; } .hds-democard__kicker { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--c); } .hds-democard__body strong { font-size: 20px; font-weight: 500; line-height: 1.2; color: var(--hd-navy); } .hds-democard__line { font-size: 15px; line-height: 1.5; } .hds-democard__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; } .hds-democard__chips span { padding: 3px 10px; border-radius: 999px; background: var(--c-soft); color: var(--c); font-size: 12.5px; font-weight: 500; } .hds-democard__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; color: var(--c); font-size: 15px; font-weight: 500; } .hds-democard__go .hds-ico { width: 18px; height: 18px; transition: transform .3s var(--hds-ease); } .hds-democard:hover .hds-democard__go .hds-ico { transform: translateX(4px); } /* ---------- Landing hero card ---------- */ .hds-bkhero { position: relative; } .hds-bkhero__card { border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); transform: rotate(1.2deg); } .hds-bkhero__card .hds-art__svg { display: block; width: 100%; aspect-ratio: 4 / 3; } .hds-bkhero__chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; background: #fff; color: var(--hd-navy); font-size: 14px; font-weight: 500; white-space: nowrap; box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .6); } .hds-bkhero__chip svg { width: 22px; height: 22px; padding: 3px; border-radius: 7px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .hds-bkhero__chip--a { left: -18px; bottom: 18%; } .hds-bkhero__chip--a svg { background: var(--hd-teal); } .hds-bkhero__chip--b { right: -14px; top: 10%; } .hds-bkhero__chip--b svg { background: var(--hd-coral); } @media (prefers-reduced-motion: no-preference) { .hds-bkhero__chip--a { animation: hdsChipIn .8s var(--hds-ease) both .6s, hdsFloat 6s ease-in-out infinite 1.4s; } .hds-bkhero__chip--b { animation: hdsChipIn .8s var(--hds-ease) both 1.1s, hdsFloat 7s ease-in-out infinite 2s; } } @keyframes hdsChipIn { from { opacity: 0; transform: translateY(14px) scale(.96); } } @keyframes hdsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (max-width: 700px) { .hds-bkhero__chip--a { left: 6px; } .hds-bkhero__chip--b { right: 6px; } } /* ---------- Sample business pages ---------- */ .hds-demo { position: relative; padding: clamp(28px, 4vw, 56px) 0 clamp(32px, 4vw, 56px); background: linear-gradient(180deg, var(--c-soft), #fff); } .hds-demo__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; } .hds-demo__back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; color: var(--hd-slate); font-size: 15px; text-decoration: none; } .hds-demo__back:hover { color: var(--c); } .hds-demo__back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .hds-demo .hds-kicker { color: var(--c); } .hds-demo h1 { margin: 10px 0 .25em; font: 600 clamp(2.2rem, 4.2vw, 3.5rem)/1.05 var(--hds-font); letter-spacing: -.028em; color: var(--hd-navy); } .hds-demo .hds-lede { margin: 0 0 18px; } .hds-demo__chips { display: flex; flex-wrap: wrap; gap: 8px; } .hds-demo__chips span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--hd-line); color: var(--hd-ink); font-size: 14px; } .hds-demo__chips span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); } .hds-demo__art { border-radius: 26px; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(0, 27, 68, .5); } .hds-demo__art .hds-art__svg { display: block; width: 100%; aspect-ratio: 4 / 3; } .hds-demo__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; } .hds-demo__shows { position: sticky; top: calc(var(--hds-header) + 20px); padding: 22px 24px; border-radius: 22px; background: var(--hd-mist); } .hds-demo__shows h2 { margin: 0 0 14px; font: 600 20px/1.25 var(--hds-font); color: var(--hd-navy); } .hds-demo__shows ol { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: s; } .hds-demo__shows li { position: relative; padding-left: 40px; font-size: 15px; line-height: 1.5; counter-increment: s; } .hds-demo__shows li::before { content: counter(s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: #fff; font-size: 13px; font-weight: 600; } .hds-demo__shows li b { display: block; font-weight: 500; color: var(--hd-navy); } .hds-demonote { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 12px 16px; border-radius: 14px; background: #fff6ef; color: #7a3413; font-size: 14.5px; line-height: 1.5; } .hds-demonote .hds-ico { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--hd-coral); } .hds-demonote strong { font-weight: 500; } @media (max-width: 900px) { .hds-demo__head, .hds-demo__grid { grid-template-columns: 1fr; } .hds-demo__shows { position: static; } } /* ---------- Booking scene motion ---------- */ @media (prefers-reduced-motion: no-preference) { .hds-art .a-selbox { animation: hdsSelBox 2.6s linear infinite; opacity: 0; } .hds-art .a-slot { animation: hdsSlot 2.4s ease-in-out infinite alternate; } .hds-art .a-choose { animation: hdsChoose 4.5s var(--hds-ease) infinite; transform-origin: 50% 50%; opacity: 0; } .hds-art .a-typed { animation: hdsTypeIn 4.5s steps(18) infinite both; } .hds-art .a-count1 { animation: hdsCountA 4.5s steps(1) infinite; } .hds-art .a-count2 { animation: hdsCountB 4.5s steps(1) infinite; opacity: 0; } .hds-art .a-tickbox { animation: hdsTick 4.5s var(--hds-ease) infinite; transform-origin: 50% 50%; } .hds-art .a-check--late { animation: hdsCheck 4.5s ease-out infinite; } .hds-art .a-drop { animation: hdsDrop 4.5s var(--hds-ease) infinite; } .hds-art .a-bubble { animation: hdsBubble 5s var(--hds-ease) infinite; opacity: 0; } .hds-art .a-bubble--2 { animation-delay: .9s; } .hds-art .a-ring { animation: hdsRing 2.4s ease-in-out infinite; transform-origin: 50% 0; } .hds-art .a-wave { animation: hdsWave 3.2s linear infinite; } .hds-art .a-paddle { animation: hdsPaddle 1.8s ease-in-out infinite alternate; transform-origin: 50% 50%; } .hds-art .a-snip1 { animation: hdsSnipA .9s ease-in-out infinite alternate; transform-origin: 27% 50%; } .hds-art .a-snip2 { animation: hdsSnipB .9s ease-in-out infinite alternate; transform-origin: 27% 50%; } .hds-art .a-fall { animation: hdsFall 2.1s linear infinite; } .hds-art .a-flicker { animation: hdsFlicker .8s ease-in-out infinite alternate; transform-origin: 50% 100%; } } @media (prefers-reduced-motion: reduce) { .hds-art .a-count2, .hds-art .a-fall { display: none; } .hds-art .a-choose, .hds-art .a-bubble, .hds-art .a-selbox { opacity: 1; } } @keyframes hdsSelBox { 0%, 36% { opacity: 0; } 42%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } } @keyframes hdsSlot { from { opacity: .72; } to { opacity: 1; } } @keyframes hdsChoose { 0%, 34% { opacity: 0; transform: scale(.6); } 44% { opacity: 1; transform: scale(1.12); } 50%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } } @keyframes hdsTypeIn { 0%, 6% { clip-path: inset(0 100% 0 0); } 40%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } } @keyframes hdsCountA { 0% { opacity: 1; } 50% { opacity: 0; } } @keyframes hdsCountB { 0% { opacity: 0; } 50% { opacity: 1; } } @keyframes hdsTick { 0%, 40% { transform: scale(0); } 48% { transform: scale(1.2); } 54%, 94% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes hdsDrop { 0%, 30% { opacity: 0; transform: translateY(-80px); } 44% { opacity: 1; transform: translateY(5px); } 50%, 90% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } } @keyframes hdsBubble { 0% { opacity: 0; transform: translateY(18px); } 12%, 84% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } } @keyframes hdsRing { 0%, 50%, 100% { transform: rotate(0); } 8% { transform: rotate(14deg); } 16% { transform: rotate(-12deg); } 24% { transform: rotate(9deg); } 32% { transform: rotate(-6deg); } 40% { transform: rotate(3deg); } } @keyframes hdsWave { from { transform: translateX(0); } to { transform: translateX(-40px); } } @keyframes hdsPaddle { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } } @keyframes hdsSnipA { from { transform: rotate(0); } to { transform: rotate(-11deg); } } @keyframes hdsSnipB { from { transform: rotate(0); } to { transform: rotate(11deg); } } @keyframes hdsFall { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(96px) rotate(40deg); } } @keyframes hdsFlicker { from { transform: scale(1, 1); } to { transform: scale(.88, 1.14); } } /* Events pointer under the uses list */ .hds-evnote { display: flex; align-items: flex-start; gap: 12px; max-width: 760px; margin: 28px 0 0; padding: 14px 18px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--hd-line); font-size: 15.5px; } .hds-evnote .hds-ico, .hds-evnote svg { flex: none; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--hd-coral); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .hds-evnote a { color: var(--hd-blue); }