/* ============================================================
giftcardmodern.css
Modern restyle overlay for the Gift Card purchase flow (gc/).
Loaded LAST — after giftcardmain.css, the per-gcType override
(giftcardpop.css / giftcardslide.css), and mdb.min.css — so it
wins the cascade on ordinary specificity/order without needing
to fight legacy !important rules. Mirrors the pattern used for
bn/css/booknowmodern.css; the competing height/!important rules
this file would otherwise have to beat were pruned directly out
of giftcardmain.css / giftcardpop.css / giftcardslide.css /
giftcardcomplete.css instead.
Everything is scoped under #GiftCardSlide (the ).
Brand color still comes entirely from the existing --theme-*
custom properties set in index.cfm's :root block — this file
only adds a fixed neutral/system layer (--gcm-*) on top of that.
============================================================ */
#GiftCardSlide {
--gcm-page-bg: #f6f7fb;
--gcm-card-bg: #ffffff;
--gcm-border: #e7e9ee;
--gcm-divider: #f1f5f9;
--gcm-text-h: #1a2130;
--gcm-text-body: #374151;
--gcm-text-muted: #5b6474;
--gcm-text-faint: #93a0b1;
--gcm-shadow-card: 0 1px 2px rgba(16, 24, 40, .05);
--gcm-shadow-hover: 0 10px 24px -8px rgba(20, 38, 64, .16);
--gcm-shadow-float: 0 1px 2px rgba(16, 24, 40, .05), 0 24px 48px -24px rgba(20, 38, 64, .18);
--gcm-shadow-modal: 0 24px 60px -20px rgba(20, 38, 64, .4);
--gcm-indigo: #6366f1; --gcm-indigo-soft: #eef0fd;
--gcm-blue: #3b82f6; --gcm-blue-soft: #eaf2fe;
--gcm-green: #16a34a; --gcm-green-soft: #e7f5f2;
--gcm-red: #ef4444; --gcm-red-soft: #fdeceb;
--gcm-amber: #d97706; --gcm-amber-soft: #fdf1de;
--gcm-rose: #db2777; --gcm-rose-soft: #f7e9ef;
--gcm-focus-ring: 0 0 0 3px color-mix(in srgb, var(--theme-secondary-color) 22%, transparent);
}
/* ---------- 1. Base / page --------------------------------------- */
/* giftcardmain.css forces `body{font-family:'Roboto' !important}` — has to
be beaten with !important here, same as the mdb.min.css focus-ring fight
in section 7 below. */
#GiftCardSlide,
#GiftCardSlide input,
#GiftCardSlide select,
#GiftCardSlide textarea,
#GiftCardSlide button,
#GiftCardSlide p,
#GiftCardSlide a,
#GiftCardSlide span,
#GiftCardSlide li,
#GiftCardSlide div,
#GiftCardSlide label,
#GiftCardSlide h1, #GiftCardSlide h2, #GiftCardSlide h3,
#GiftCardSlide h4, #GiftCardSlide h5, #GiftCardSlide h6 {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
#GiftCardSlide { color: var(--gcm-text-body); }
/* Per-location rich-text (Introduction / Confirmation) is pasted from a WYSIWYG
editor and often carries its own inline font-family — force it back to the
modern face regardless (inline styles only lose to a same-element !important
rule, which is what this is). */
#GiftCardSlide .overlayIntro, #GiftCardSlide .overlayIntro *,
#GiftCardSlide .fun-message, #GiftCardSlide .fun-message * {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
/* ---------- 2. Card shell ------------------------------------------ */
#GiftCardSlide .appointmentBox {
width: 100%;
max-width: 700px;
margin: 0 auto;
height: auto !important;
box-sizing: border-box;
}
#GiftCardSlide .giftCardCardWrapper {
font-size: 14px;
}
#GiftCardSlide .appointmentBox .giftCardC {
background: var(--gcm-card-bg);
border-radius: 20px;
box-shadow: var(--gcm-shadow-float);
display: flex;
flex-direction: column;
/* Legacy giftcardmain.css still forces height:100%, which stretches the
standalone card below the actual step content and leaves a dead white
band under the scrollable form. Embedded popup/slideout shells re-apply
their own explicit viewport height lower in this file. */
height: auto !important;
box-sizing: border-box;
}
#GiftCardSlide #loadfirstpage { display: flex; flex-direction: column; min-height: 0; }
#GiftCardSlide #loadingwrapper { flex: 1; min-height: 0; height: auto !important; }
#GiftCardSlide #giftcardInfoDivWrapper { height: auto !important; position: relative; }
#GiftCardSlide .giftcardInfo.showscroll,
#GiftCardSlide #giftcardDiv.giftcardInfo,
#GiftCardSlide #giftcardInfoDivAll.giftcardInfo {
height: auto !important;
max-height: min(70vh, 620px);
overflow-y: auto;
overflow-x: hidden;
margin-top: 0;
padding: 4px 26px 6px;
box-sizing: border-box;
}
@media (min-width: 768px) {
/* Desktop standalone keeps the taller shell treatment. Mobile resets below
to natural document flow so the keyboard cannot keep re-solving nested
viewport-height math. */
#GiftCardSlide .appointmentBox:not(.gcm-embedded-shell) .giftCardC:not(.gcm-embedded-shell) {
min-height: calc((var(--vh, 1vh) * 100) - 40px);
}
#GiftCardSlide .appointmentBox:not(.gcm-embedded-shell) .giftcardInfo.showscroll,
#GiftCardSlide .appointmentBox:not(.gcm-embedded-shell) #giftcardDiv.giftcardInfo,
#GiftCardSlide .appointmentBox:not(.gcm-embedded-shell) #giftcardInfoDivAll.giftcardInfo {
max-height: calc((var(--vh, 1vh) * 100) - 266px);
}
}
#GiftCardSlide .showscroll::-webkit-scrollbar,
#GiftCardSlide .giftcardInfo::-webkit-scrollbar { width: 6px; }
#GiftCardSlide .showscroll::-webkit-scrollbar-thumb,
#GiftCardSlide .giftcardInfo::-webkit-scrollbar-thumb {
background: var(--gcm-border); border-radius: 999px;
}
#GiftCardSlide .showscroll::-webkit-scrollbar-thumb:hover,
#GiftCardSlide .giftcardInfo::-webkit-scrollbar-thumb:hover { background: var(--gcm-text-faint); }
#GiftCardSlide .showscroll { scrollbar-width: thin; scrollbar-color: var(--gcm-border) transparent; }
@media (max-width: 767px) {
html,
body#GiftCardSlide,
#GiftCardSlide {
width: 100%;
max-width: 100%;
height: auto !important;
min-height: 0;
overflow-x: hidden !important;
}
#GiftCardSlide .appointmentBox { margin: 5px; max-width: calc(100vw - 10px); }
#GiftCardSlide .appointmentBox .giftCardC { border-radius: 16px; }
#GiftCardSlide .form-control,
#GiftCardSlide input[type="text"],
#GiftCardSlide input[type="email"],
#GiftCardSlide input[type="tel"],
#GiftCardSlide input[type="number"],
#GiftCardSlide select,
#GiftCardSlide textarea {
font-size: 16px !important;
}
/* Standalone mobile should not keep stacking viewport-based heights on the
body, card shell, and inner pane at the same time; let the standalone
mobile page flow naturally again so the form can move with the page. */
#GiftCardSlide #loadfirstpage,
#GiftCardSlide #loadingwrapper,
#GiftCardSlide #giftcardInfoDivWrapper {
width: 100%;
max-width: 100%;
height: auto !important;
min-height: 0;
overflow: visible !important;
box-sizing: border-box;
background: var(--gcm-card-bg);
}
#GiftCardSlide .appointmentBox:not(.gcm-embedded-shell) {
overflow: visible !important;
overflow-y: visible !important;
width: auto;
box-sizing: border-box;
}
#GiftCardSlide .appointmentBox:not(.gcm-embedded-shell) .giftCardC:not(.gcm-embedded-shell) {
width: 100%;
max-width: 100%;
min-height: auto !important;
height: auto !important;
padding: 0 0 20px 0 !important;
overflow: visible !important;
background: var(--gcm-card-bg) !important;
border-radius: 16px;
}
#GiftCardSlide .appointmentBox:not(.gcm-embedded-shell) .giftcardInfo.showscroll,
#GiftCardSlide .appointmentBox:not(.gcm-embedded-shell) #giftcardDiv.giftcardInfo,
#GiftCardSlide .appointmentBox:not(.gcm-embedded-shell) #giftcardInfoDivAll.giftcardInfo,
#GiftCardSlide .appointmentBox:not(.gcm-embedded-shell) .giftcardInfo .SummaryPage,
#GiftCardSlide .appointmentBox:not(.gcm-embedded-shell) .giftCardC #giftcardDiv .showscroll {
width: 100%;
max-width: 100%;
height: auto !important;
max-height: none !important;
overflow-y: visible !important;
padding-right: 20px;
padding-left: 20px;
background: var(--gcm-card-bg);
}
#GiftCardSlide .appointmentBox:not(.gcm-embedded-shell) #giftcardDiv.giftcardInfo,
#GiftCardSlide .appointmentBox:not(.gcm-embedded-shell) #giftcardInfoDivAll.giftcardInfo {
border-radius: 0 0 16px 16px;
padding-bottom: 20px;
}
}
/* Modern loading visual -- replaces the old full-viewport white-flash + GIF
spinner (gc/css/loading.css's .overlayerspinnerrel/-full, shared
boilerplate copied across every app on this platform, including bn/) with
the same gray diagonal shimmer-sweep skeleton bn/css/booknowmodern.css
uses. gc/js/loading.js is byte-identical to bn/js/loading.js, so the same
actionloadingtarget() calls already toggling giftcard.js already add
these classes here too -- only the CSS was still the old look.
!important only on position/top/height/width -- giftcardmain.css's own
#GiftCardSlide #spinnerrel rule sets top/height with !important already,
and loads before this file regardless of source order. background/
background-size/animation deliberately do NOT carry !important: a CSS
animation cannot override a property that's !important anywhere in the
cascade (including a shorthand's implied sub-properties), which would
freeze background-position at its static start value instead of letting
the keyframes animate it. */
#GiftCardSlide #loadingwrapper #spinnerrel.overlayerspinnerrel,
#GiftCardSlide #loadingwrapper #spinnerrel.overlayerspinnerrelfull {
position: absolute !important;
inset: 0 !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 5;
border-radius: 12px;
background: linear-gradient(100deg, var(--gcm-page-bg) 30%, var(--gcm-border) 45%, var(--gcm-page-bg) 60%);
background-size: 200% 100%;
animation: gcm-step-shimmer .9s ease-in-out infinite;
}
@keyframes gcm-step-shimmer {
0% { background-position: 60% 0; }
100% { background-position: -40% 0; }
}
@media (prefers-reduced-motion: reduce) {
#GiftCardSlide #loadingwrapper #spinnerrel.overlayerspinnerrel,
#GiftCardSlide #loadingwrapper #spinnerrel.overlayerspinnerrelfull {
animation: none;
background: var(--gcm-page-bg);
}
}
/* .gcm-embedded-shell (index.cfm, added when gcType != 0) — gcType 1 (popup)
and 2 (slideout) already load inside the host page's own modal/panel
chrome, which draws its own card/shadow around this whole widget. Rendering
our own card look on top of that nests a card inside a card, so this
variant goes full-bleed white instead. gcType 0 (standalone full page) is
the only one that keeps the floating card above. */
/* height:100% would need every ancestor (html/body) to carry an explicit
height too, which they don't on desktop -- it silently collapses to auto
and never actually fills the popup/slideout iframe. This page runs inside
an iframe (see parent.jQuery('#iframeGiftCardTest') in giftcard.js), so
the viewport-height custom property already used elsewhere in this
codebase (--vh, kept in sync with the real visual viewport via JS) is
what reliably fills it instead. */
#GiftCardSlide .appointmentBox.gcm-embedded-shell {
max-width: 100%; width: 100%;
height: calc(var(--vh, 1vh) * 100);
margin: 0;
}
#GiftCardSlide .appointmentBox .giftCardC.gcm-embedded-shell {
width: 100%;
height: calc(var(--vh, 1vh) * 100);
background: var(--gcm-card-bg);
border-radius: 0;
box-shadow: none;
}
@media (max-width: 767px) {
#GiftCardSlide .appointmentBox.gcm-embedded-shell { margin: 0; }
#GiftCardSlide .appointmentBox .giftCardC.gcm-embedded-shell { border-radius: 0; }
}
/* ---------- 3. Header ------------------------------------------------ */
#GiftCardSlide .header-container {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 22px 26px 4px;
}
/* Same structural change just made to bn's header logo
(bn/css/booknowmodern.css's .header-logo/.header-logo-btn): give the logo
its own sized container instead of just constraining the ![]()
directly,
so the header row keeps a consistent height regardless of how small/thin
a particular location's uploaded logo is. */
#GiftCardSlide .header-logo {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 80px;
}
#GiftCardSlide .header-logo-btn {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 80px;
}
#GiftCardSlide .header-logo img { height: 75px; width: auto; }
#GiftCardSlide .header-content .header-title-group {
display: flex; align-items: center; gap: 10px; justify-content: flex-end;
}
#GiftCardSlide .header-content .header-title-icon {
width: 34px; height: 34px; border-radius: 10px; flex: none;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--theme-secondary-color) 14%, var(--gcm-card-bg));
color: var(--theme-secondary-color);
}
#GiftCardSlide .header-content .header-title-icon svg { width: 18px; height: 18px; }
#GiftCardSlide .header-content .header-title {
font-size: 19px; font-weight: 700; color: var(--gcm-text-h); letter-spacing: -.2px;
}
#GiftCardSlide .header-content { text-align: right; }
#GiftCardSlide .header-content .header-company {
font-size: 12.5px; font-weight: 700; color: var(--gcm-text-muted); margin-top: 4px;
}
#GiftCardSlide .header-content .header-address {
font-size: 11.5px; color: var(--gcm-text-faint); margin-top: 1px; line-height: 1.4;
}
/* ---------- 4. Breadcrumb / stepper ---------------------------------- */
#GiftCardSlide .breadcrumb {
counter-reset: gcstep;
display: flex; gap: 4px; align-items: center;
margin: 10px 22px 6px;
padding: 8px; border-radius: 14px;
background: color-mix(in srgb, var(--theme-main-color) 25%, var(--gcm-card-bg));
overflow-x: auto; scrollbar-width: none;
/* Containing block for .breadcrumb-slider below -- its left/top are set in
content-area pixels (giftcard.js's positionBreadcrumbSlider()) that only
line up with each breaditem's own offsetLeft/offsetTop when both share
this element as their offsetParent. */
position: relative;
}
#GiftCardSlide .breadcrumb::-webkit-scrollbar { display: none; }
/* The moving white pill behind the current step -- bn's exact mechanism
(booknowmodern.css's .breadcrumb-slider / booknow.js's
positionBreadcrumbSlider()): a single element whose transform/width
giftcard.js tweens to match whichever breaditem just gained .current,
instead of the background simply popping in on the new step and out on
the old one. Sized/positioned entirely from JS since every step's label
is a different width. */
#GiftCardSlide .breadcrumb-slider {
position: absolute; top: 0; left: 0; width: 0;
border-radius: 999px;
background: var(--gcm-card-bg);
box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
transition: transform .28s cubic-bezier(.4, 0, .2, 1), width .28s cubic-bezier(.4, 0, .2, 1);
pointer-events: none;
z-index: 0;
}
#GiftCardSlide .breadcrumb .breaditem {
counter-increment: gcstep;
/* giftcard.js toggles inline display:none/block on .clientinfocaret /
.summarycaret at each step transition (steps only reveal progressively);
!important keeps every step visible from the start instead, matching the
"always show all steps" stepper look -- clickability (not visibility) is
what should gate on reaching a step, handled by pointer-events below. */
display: flex !important;
flex: 1 0 auto; align-items: center; justify-content: center; gap: 7px;
font-size: 13px; font-weight: 700; color: var(--gcm-text-faint) !important;
padding: 8px 14px; border-radius: 999px !important;
white-space: nowrap;
/* Stacks above .breadcrumb-slider (z-index:0), which renders behind every
breaditem's own text/number instead of on top of it. */
position: relative; z-index: 1;
}
/* Steps after the current one are visible but not yet reachable. Steps
before it stay clickable so existing back-navigation (#serCaret/#clientCaret's
onclick="scrollToPreviousBreadcrumb(...)") keeps working. */
#GiftCardSlide .breadcrumb .breaditem.current ~ .breaditem {
pointer-events: none;
cursor: default;
}
#GiftCardSlide .breadcrumb .breaditem::before {
content: counter(gcstep);
width: 19px; height: 19px; border-radius: 50%; flex: none;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700;
background: var(--gcm-border); color: var(--gcm-text-faint);
}
#GiftCardSlide .breadcrumb .breaditem.current {
/* No background/box-shadow here -- .breadcrumb-slider (above) renders the
actual pill and slides between steps; this class now only carries the
text/number color change. */
color: var(--gcm-text-h) !important;
transition: color .2s ease;
}
#GiftCardSlide .breadcrumb .breaditem.current::before {
background: var(--theme-secondary-color); color: var(--theme-buttonfontP-color);
}
/* Checkmark for steps already passed -- exactly bn's rule (booknowmodern.css):
giftcard.js reveals a step by flipping its inline style from display:none
to display:block as the visitor reaches it, same mechanism bn's own
booknow.js uses. A step still carrying its original inline display:none
hasn't been reached yet, so it keeps a plain number instead of a checkmark
even though section 4 above force-shows it. */
#GiftCardSlide .breadcrumb .breaditem:not(.current):not([style*="display:none"]):not([style*="display: none"])::before {
content: "\2713";
background: var(--theme-secondary-color); color: var(--theme-buttonfontP-color);
font-size: 10.5px;
}
#GiftCardSlide .breadcrumb .separator,
#GiftCardSlide .breadcrumb i.separator { display: none !important; }
/* ---------- 5. Buttons ------------------------------------------------- */
#GiftCardSlide .themeButtonFill {
box-sizing: border-box;
background-color: var(--theme-secondary-color) !important;
color: var(--theme-buttonfontP-color) !important;
border: none !important; border-radius: 999px !important;
font-weight: 700; font-size: 14.5px;
min-height: 44px;
width: auto; max-width: 250px;
padding: 12px 20px !important;
margin: 0 !important;
box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--theme-secondary-color) 60%, transparent);
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
transition: filter .15s, transform .05s;
}
#GiftCardSlide .themeButtonFill:hover { filter: brightness(1.07); }
#GiftCardSlide .themeButtonFill:active { transform: translateY(1px); }
#GiftCardSlide .themeButtonEmpty {
background: var(--gcm-card-bg) !important;
color: var(--theme-secondary-color) !important;
border: 1.5px solid var(--theme-secondary-color) !important;
border-radius: 999px !important;
}
/* Real inline