/* * Dermacy Booking Pro 5.37 · Gift vouchers page and the voucher payment / thank-you pages. * Same design language as the booking page (booking-v7.css): warm pearl ground, warm ink, * Dermacy Display headings, Dermacy Text body. Everything is scoped to #dbp-vouchers. */ @font-face{font-family:"Dermacy Display";src:url(../fonts/dermacy-display-opsz.woff2) format("woff2-variations"),url(../fonts/dermacy-display-opsz.woff2) format("woff2");font-weight:200 800;font-display:swap} @font-face{font-family:"Dermacy Text";src:url(../fonts/dermacy-text-400.woff2) format("woff2");font-weight:400;font-display:swap} @font-face{font-family:"Dermacy Text";src:url(../fonts/dermacy-text-500.woff2) format("woff2");font-weight:500;font-display:swap} @font-face{font-family:"Dermacy Text";src:url(../fonts/dermacy-text-600.woff2) format("woff2");font-weight:600 700;font-display:swap} @font-face{font-family:"Pinyon Script";src:url(../vouchers/fonts/pinyon.woff2) format("woff2");font-display:swap} @font-face{font-family:"Cormorant Garamond";src:url(../vouchers/fonts/cormorant-600.woff2) format("woff2");font-weight:600;font-display:swap} @font-face{font-family:"Cormorant Garamond";src:url(../vouchers/fonts/cormorant-500i.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap} @font-face{font-family:"Dermacy Mono";src:url(../fonts/dermacy-mono-500.woff2) format("woff2");font-display:swap} #dbp-vouchers.dbp-vc,body.dbp-voucher-checkout-page{ --v-bone:#F1E9E1;--v-paper:#FDFAF7;--v-nude:#E7DACD;--v-pearl:#F5EFE9; --v-ink:#1E1A18;--v-ink-h:#36302C;--v-ink2:#554C46;--v-soft:#8C7B6E;--v-acc:#9A7436;--v-on:#F6EEE6; --v-hair:rgba(30,26,24,.1);--v-hair2:rgba(30,26,24,.18);--v-bad:#A63A2C;--v-bad-soft:#F8E8E3; --v-display:"Dermacy Display","Bricolage Grotesque","Helvetica Neue",sans-serif; --v-body:"Dermacy Text",Geist,system-ui,-apple-system,"Segoe UI",sans-serif; --v-ease:cubic-bezier(.32,.72,0,1); } #dbp-vouchers.dbp-vc{position:relative;container-type:inline-size;background:var(--v-bone);color:var(--v-ink2);font:400 16px/1.6 var(--v-body);text-align:left;-webkit-font-smoothing:antialiased;padding:clamp(40px,6vw,88px) 0 clamp(56px,7vw,104px)} #dbp-vouchers.dbp-vc *,#dbp-vouchers.dbp-vc *::before,#dbp-vouchers.dbp-vc *::after{box-sizing:border-box} #dbp-vouchers.dbp-vc :where(h1,h2,h3,p,ul,ol,fieldset,legend,figure){margin:0;padding:0} #dbp-vouchers.dbp-vc :where(ul,ol){list-style:none} #dbp-vouchers.dbp-vc :where(h1,h2,h3){font-family:var(--v-display);font-weight:500;color:var(--v-ink);letter-spacing:-.03em;line-height:1.05;text-transform:none} #dbp-vouchers.dbp-vc :where(button){appearance:none;margin:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:none;text-align:inherit;padding:0;min-height:0;cursor:pointer;box-shadow:none} #dbp-vouchers.dbp-vc :where(input,textarea,select){font:inherit;color:var(--v-ink);letter-spacing:normal} #dbp-vouchers.dbp-vc [hidden]{display:none!important} #dbp-vouchers.dbp-vc :focus-visible{outline:2px solid var(--v-ink);outline-offset:3px} #dbp-vouchers .vc-wrap{max-width:1360px;margin:0 auto;padding:0 clamp(16px,4vw,56px)} /* head */ #dbp-vouchers .vc-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(32px,4vw,52px)} #dbp-vouchers .vc-head h1{font-size:clamp(44px,6.4vw,92px);font-weight:450} #dbp-vouchers .vc-head p{max-width:46ch;font-size:17px;line-height:1.6;color:var(--v-ink2)} /* layout */ #dbp-vouchers .vc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:clamp(28px,4vw,64px);align-items:start} #dbp-vouchers .vc-steps{display:grid;gap:clamp(20px,2.4vw,28px);min-width:0} #dbp-vouchers .vc-step{padding:clamp(20px,2.6vw,32px);border-radius:28px;background:var(--v-paper);box-shadow:0 0 0 1px var(--v-hair)} #dbp-vouchers .vc-step>h2{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;font-size:clamp(24px,2.4vw,30px)} #dbp-vouchers .vc-step>h2 span{font:500 13px/1 var(--v-body);color:var(--v-soft);letter-spacing:0} #dbp-vouchers .vc-hint{margin:-8px 0 16px;font-size:14.5px;color:var(--v-soft)} /* segmented switch */ #dbp-vouchers .vc-seg{display:inline-flex;gap:4px;padding:4px;margin-bottom:18px;border-radius:999px;background:var(--v-pearl);box-shadow:inset 0 0 0 1px var(--v-hair)} #dbp-vouchers .vc-seg button{min-height:42px;padding:0 18px;border-radius:999px;font:500 15px/1 var(--v-body);color:var(--v-ink2);transition:background-color .35s var(--v-ease),color .35s var(--v-ease)} #dbp-vouchers .vc-seg button[aria-pressed="true"]{background:var(--v-ink);color:var(--v-on)} /* amount chips */ #dbp-vouchers .vc-amounts{display:flex;flex-wrap:wrap;gap:10px} #dbp-vouchers .vc-chip{min-width:96px;min-height:56px;padding:0 20px;border-radius:18px;background:var(--v-paper);box-shadow:inset 0 0 0 1px var(--v-hair2);font:500 22px/1 var(--v-display);letter-spacing:-.02em;color:var(--v-ink);transition:box-shadow .3s var(--v-ease),background-color .3s var(--v-ease)} #dbp-vouchers .vc-chip:hover{box-shadow:inset 0 0 0 1px rgba(30,26,24,.4)} #dbp-vouchers .vc-chip[aria-pressed="true"]{background:var(--v-ink);color:var(--v-on);box-shadow:none} #dbp-vouchers .vc-custom{display:flex;align-items:center;gap:10px;margin-top:14px} #dbp-vouchers .vc-custom label{font-size:15px;color:var(--v-ink2)} #dbp-vouchers .vc-money{position:relative;width:150px} #dbp-vouchers .vc-money::before{content:"£";position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:17px;color:var(--v-soft)} #dbp-vouchers .vc-money input{padding-left:32px} /* treatments */ #dbp-vouchers .vc-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px} #dbp-vouchers .vc-item{display:grid;gap:6px;align-content:start;min-width:0;min-height:112px;padding:16px 18px;white-space:normal;overflow-wrap:anywhere;height:auto;border-radius:20px;background:var(--v-paper);box-shadow:inset 0 0 0 1px var(--v-hair2);text-align:left;transition:box-shadow .3s var(--v-ease),background-color .3s var(--v-ease)} #dbp-vouchers .vc-item:hover{box-shadow:inset 0 0 0 1px rgba(30,26,24,.4)} #dbp-vouchers .vc-item strong{font:500 18px/1.2 var(--v-display);letter-spacing:-.015em;color:var(--v-ink)} #dbp-vouchers .vc-item small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:13.5px;line-height:1.45;color:var(--v-soft);white-space:normal} #dbp-vouchers .vc-item b{margin-top:auto;font:500 17px/1 var(--v-display);color:var(--v-ink)} #dbp-vouchers .vc-item[aria-pressed="true"]{background:var(--v-ink);box-shadow:none} #dbp-vouchers .vc-item[aria-pressed="true"] :is(strong,b){color:var(--v-on)} #dbp-vouchers .vc-item[aria-pressed="true"] small{color:#C9BBAE} /* designs */ #dbp-vouchers .vc-designs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} #dbp-vouchers .vc-design{display:grid;gap:8px;text-align:left} #dbp-vouchers .vc-design img{display:block;width:100%;height:auto!important;aspect-ratio:3/2;object-fit:cover;border-radius:14px;box-shadow:0 0 0 1px var(--v-hair);transition:box-shadow .3s var(--v-ease)} #dbp-vouchers .vc-design span{font-size:14px;font-weight:500;color:var(--v-ink2)} #dbp-vouchers .vc-design[aria-pressed="true"] img{box-shadow:0 0 0 3px var(--v-ink)} #dbp-vouchers .vc-design[aria-pressed="true"] span{color:var(--v-ink)} /* headline chips */ #dbp-vouchers .vc-heads{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px} #dbp-vouchers .vc-pill{min-height:40px;padding:0 16px;border-radius:999px;background:var(--v-paper);box-shadow:inset 0 0 0 1px var(--v-hair2);font:500 14.5px/1 var(--v-body);color:var(--v-ink2)} #dbp-vouchers .vc-pill[aria-pressed="true"]{background:var(--v-ink);color:var(--v-on);box-shadow:none} /* fields */ #dbp-vouchers .vc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px} #dbp-vouchers .vc-field{display:grid;gap:6px;min-width:0} #dbp-vouchers .vc-field.is-wide{grid-column:1/-1} #dbp-vouchers .vc-field label{font-size:14.5px;font-weight:500;color:var(--v-ink)} #dbp-vouchers .vc-field label small{font-weight:400;color:var(--v-soft)} #dbp-vouchers .vc-field :is(input,textarea){width:100%;min-height:50px;padding:12px 16px;border:0;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--v-hair2);font-size:16px;line-height:1.4;transition:box-shadow .3s var(--v-ease)} #dbp-vouchers .vc-field textarea{min-height:104px;resize:vertical} #dbp-vouchers .vc-field :is(input,textarea):focus{outline:0;box-shadow:inset 0 0 0 2px var(--v-ink)} #dbp-vouchers .vc-field .vc-count{justify-self:end;font-size:12.5px;color:var(--v-soft)} #dbp-vouchers .vc-field.is-error :is(input,textarea){box-shadow:inset 0 0 0 2px var(--v-bad)} #dbp-vouchers .vc-err{font-size:14px;line-height:1.4;color:var(--v-bad)} #dbp-vouchers .vc-radios{display:grid;gap:10px;margin-bottom:16px} #dbp-vouchers .vc-radio{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--v-hair2);cursor:pointer} #dbp-vouchers .vc-radio input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--v-ink)} #dbp-vouchers .vc-radio span{display:grid;gap:2px;font-size:15.5px;font-weight:500;color:var(--v-ink)} #dbp-vouchers .vc-radio small{font-weight:400;font-size:14px;color:var(--v-soft)} #dbp-vouchers .vc-radio:has(input:checked){box-shadow:inset 0 0 0 2px var(--v-ink)} /* preview */ #dbp-vouchers .vc-side{position:sticky;top:24px;display:grid;gap:18px} #dbp-vouchers .vc-card{border-radius:22px;overflow:hidden;background:#2a211d;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 40px 80px -40px rgba(30,26,24,.55),0 0 0 1px rgba(30,26,24,.06)} #dbp-vouchers .vc-card svg{display:block;width:100%;height:auto} #dbp-vouchers .vc-sum{display:grid;gap:14px;padding:22px 24px;border-radius:24px;background:var(--v-paper);box-shadow:0 0 0 1px var(--v-hair)} #dbp-vouchers .vc-sum dl{display:grid;gap:8px;margin:0} #dbp-vouchers .vc-sum dl div{display:flex;justify-content:space-between;gap:16px;font-size:15px} #dbp-vouchers .vc-sum dt{color:var(--v-soft)} #dbp-vouchers .vc-sum dd{margin:0;color:var(--v-ink);text-align:right} #dbp-vouchers .vc-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:1px solid var(--v-hair)} #dbp-vouchers .vc-total span{font-size:15px;color:var(--v-ink2)} #dbp-vouchers .vc-total strong{font:500 30px/1 var(--v-display);letter-spacing:-.02em;color:var(--v-ink)} #dbp-vouchers .vc-pay{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:0 24px;border-radius:999px;background:var(--v-ink);color:var(--v-on);font:500 16px/1 var(--v-body);transition:background-color .4s var(--v-ease),transform .3s var(--v-ease)} #dbp-vouchers .vc-pay:hover{background:var(--v-ink-h)} #dbp-vouchers .vc-pay:active{transform:scale(.985)} #dbp-vouchers .vc-pay:disabled{opacity:.5;cursor:not-allowed} #dbp-vouchers .vc-note{font-size:13.5px;line-height:1.5;color:var(--v-soft);text-align:center} #dbp-vouchers .vc-alert{padding:12px 16px;border-radius:14px;background:var(--v-bad-soft);color:var(--v-bad);font-size:14.5px} #dbp-vouchers .vc-terms{margin-top:clamp(24px,3vw,40px)} #dbp-vouchers .vc-terms summary{cursor:pointer;font:500 16px/1.4 var(--v-body);color:var(--v-ink)} #dbp-vouchers .vc-terms ul{display:grid;gap:6px;margin-top:12px;max-width:72ch;font-size:14.5px;color:var(--v-ink2)} #dbp-vouchers .vc-terms li{padding-left:16px;position:relative} #dbp-vouchers .vc-terms li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:1px;background:var(--v-soft)} #dbp-vouchers .vc-spin{display:inline-block;width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:vc-spin .8s linear infinite} @keyframes vc-spin{to{transform:rotate(360deg)}} #dbp-vouchers.dbp-vc--off{padding:40px 20px;text-align:center} @container (max-width:1020px){ #dbp-vouchers .vc-head,#dbp-vouchers .vc-grid{grid-template-columns:1fr} #dbp-vouchers .vc-side{position:static;order:-1} #dbp-vouchers .vc-side .vc-sum{display:none} #dbp-vouchers .vc-mobile-sum{display:grid!important} } @container (max-width:600px){ #dbp-vouchers .vc-fields{grid-template-columns:1fr} #dbp-vouchers .vc-step{border-radius:22px} #dbp-vouchers .vc-chip{flex:1 1 calc(50% - 10px);min-width:0} #dbp-vouchers .vc-items{grid-template-columns:1fr} #dbp-vouchers .vc-designs{grid-template-columns:repeat(2,minmax(0,1fr))} } #dbp-vouchers .vc-mobile-sum{display:none} @media (prefers-reduced-motion:reduce){#dbp-vouchers *{transition:none!important;animation:none!important}} /* WooCommerce payment and thank-you pages for a voucher order */ body.dbp-voucher-checkout-page .dbp-vc-intro{max-width:760px;margin:0 auto 28px;padding:28px 30px;border-radius:26px;background:#F1E9E1;color:#554C46;font:400 16px/1.6 "Dermacy Text",system-ui,sans-serif} body.dbp-voucher-checkout-page .dbp-vc-intro__tag{margin:0 0 8px;font:500 13px/1 "Dermacy Text",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8C7B6E} body.dbp-voucher-checkout-page .dbp-vc-intro h1{margin:0 0 8px;font:500 clamp(28px,3.4vw,40px)/1.08 "Dermacy Display","Helvetica Neue",sans-serif;letter-spacing:-.03em;color:#1E1A18} body.dbp-voucher-checkout-page .dbp-vc-intro p{margin:0} body.dbp-voucher-checkout-page .dbp-vc-intro img{display:block;width:100%;max-width:560px;height:auto;margin:18px 0 6px;border-radius:18px;box-shadow:0 30px 60px -36px rgba(30,26,24,.55)} body.dbp-voucher-checkout-page .dbp-vc-intro__code strong{font-family:"Dermacy Mono",ui-monospace,monospace;color:#1E1A18;letter-spacing:.06em} body.dbp-voucher-checkout-page .dbp-vc-intro__pdf{display:inline-flex;align-items:center;min-height:46px;margin-top:10px;padding:0 22px;border-radius:999px;background:#1E1A18;color:#F6EEE6!important;text-decoration:none!important;font-weight:500}