/* ============================================================
Piercing's by E — shared design system
Loaded on every page before the page-specific stylesheet.
Fraunces/Outfit are loaded via and
unless explicitly reset — without this, any button/select not
already fully re-styled by a component class (.btn, .admin-select, a
page's own .whatever-btn, etc.) renders with the system's default blue
text on iPhone, invisible in desktop Chrome since it never applies that
default. This is a base fallback so nothing can slip through un-themed;
more specific component classes defined elsewhere still win via normal
cascade/specificity — this only fills in properties they don't set. */
button, select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
font-family: inherit;
font-size: 15px;
color: var(--ink);
background-color: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
}
select {
padding: 12px 34px 12px 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236d1f2c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px;
}
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 4px;
}
::selection { background: var(--brand); color: #fff; }
/* ---------- Layout helpers ---------- */
.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
.section { padding: 72px 0; }
.text-muted { color: var(--muted); }
.section-title {
font-size: clamp(26px, 3.4vw, 38px);
font-weight: 600;
color: var(--brand);
margin: 0 0 14px;
display: flex;
align-items: center;
gap: 14px;
}
/* signature: a small gold "stud" beside every section title */
.section-title::before {
content: "";
width: 11px; height: 11px;
border-radius: 50%;
flex-shrink: 0;
background: radial-gradient(circle at 32% 28%, #f4e5bd, var(--gold) 55%, #937230);
box-shadow: 0 1px 3px rgba(36,17,20,.35);
}
.section-title--center { justify-content: center; text-align: center; }
.section-eyebrow {
font-size: 12px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 10px;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 12px 28px;
border-radius: var(--radius-pill);
border: 1.5px solid transparent;
font-family: var(--font-text);
font-size: 15px;
font-weight: 600;
letter-spacing: .02em;
text-decoration: none;
cursor: pointer;
transition: transform .2s var(--ease), background .2s var(--ease),
color .2s var(--ease), border-color .2s var(--ease),
box-shadow .2s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-primary {
background: var(--brand);
color: #fff;
box-shadow: 0 8px 22px rgba(109, 31, 44, .30);
}
.btn-primary:hover { background: var(--brand-dark); transform: translateY(-2px); }
.btn-outline {
background: transparent;
color: var(--brand);
border-color: currentColor;
}
.btn-outline:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-gold {
background: linear-gradient(135deg, #dcbb6d, var(--gold) 60%, #a9863a);
color: #2a1216;
box-shadow: 0 8px 22px rgba(201, 162, 75, .35);
}
.btn-gold:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
/* ---------- Cards ---------- */
.card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
transition: transform .25s var(--ease), box-shadow .25s var(--ease),
border-color .25s var(--ease);
}
a.card:hover, .card.is-hoverable:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: var(--gold-soft);
}
/* ---------- Header ---------- */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
height: var(--nav-height);
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
transition: background .3s var(--ease), border-color .3s var(--ease),
box-shadow .3s var(--ease);
}
.nav-container {
width: min(var(--container), calc(100% - 40px));
margin-inline: auto;
height: 100%;
display: flex;
align-items: center;
gap: 22px;
}
.site-logo { flex-shrink: 0; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--brand); }
.logo-mark { width: 40px; height: 40px; flex-shrink: 0; }
.logo-word {
font-family: var(--font-display);
font-size: 21px;
font-weight: 600;
letter-spacing: .01em;
color: var(--ink);
white-space: nowrap;
line-height: 1;
}
.logo-word em { font-style: italic; color: var(--gold); }
/* subtle gold hairline across the very top — hidden while transparent over the hero */
.site-header::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
opacity: .8;
transition: opacity .3s var(--ease);
}
body[data-page="index"] .site-header:not(.scrolled)::before { opacity: 0; }
.site-nav { flex: 1; display: flex; justify-content: center; }
.site-nav ul {
display: flex;
gap: 6px;
list-style: none;
margin: 0;
padding: 0;
}
.site-nav a {
position: relative;
display: block;
padding: 10px 13px;
font-size: 14.5px;
font-weight: 500;
letter-spacing: .02em;
color: var(--ink);
text-decoration: none;
transition: color .2s var(--ease);
}
.site-nav a::after {
content: "";
position: absolute;
left: 13px; right: 13px; bottom: 4px;
height: 2px;
border-radius: 2px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform .25s var(--ease);
}
.site-nav a:hover { color: var(--brand); }
.site-nav a:hover::after, .site-nav a.active::after { transform: scaleX(1); }
.site-nav a.active { color: var(--brand); font-weight: 600; }
.header-icons { display: flex; align-items: center; gap: 8px; }
.header-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px; height: 38px;
border-radius: 50%;
color: var(--brand);
background: var(--surface-2);
transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.header-icons svg { width: 17px; height: 17px; fill: currentColor; }
.header-icons a:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }
/* Transparent header over the home hero */
body[data-page="index"] .site-header:not(.scrolled) {
background: linear-gradient(to bottom, rgba(20, 8, 10, .55), rgba(20, 8, 10, 0));
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom-color: transparent;
}
body[data-page="index"] .site-header:not(.scrolled) .site-nav a { color: rgba(255,255,255,.92); }
body[data-page="index"] .site-header:not(.scrolled) .site-logo { color: #fff; }
body[data-page="index"] .site-header:not(.scrolled) .logo-word { color: #fff; }
body[data-page="index"] .site-header:not(.scrolled) .logo-word em { color: var(--gold-soft); }
body[data-page="index"] .site-header:not(.scrolled) .site-nav a:hover,
body[data-page="index"] .site-header:not(.scrolled) .site-nav a.active { color: #fff; }
body[data-page="index"] .site-header:not(.scrolled) .header-icons a {
background: rgba(255,255,255,.14);
color: #fff;
}
body[data-page="index"] .site-header:not(.scrolled) .hamburger-menu .bar { background: #fff; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(36,17,20,.08); }
/* ---------- Hamburger ---------- */
.hamburger-menu {
display: none;
position: relative; /* without this, z-index below is a no-op and it can end up under other elements */
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px; height: 44px;
padding: 10px;
border: none;
background: none;
cursor: pointer;
z-index: 130;
pointer-events: auto;
}
.hamburger-menu .bar { pointer-events: none; }
.hamburger-menu .bar {
display: block;
width: 100%;
height: 2.5px;
border-radius: 2px;
background: var(--brand);
transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.hamburger-menu.open .bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger-menu.open .bar:nth-child(2) { opacity: 0; }
.hamburger-menu.open .bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
/* ---------- Mobile nav drawer (panel sliding in below the header) ----------
The drawer starts at var(--nav-height) instead of the top of the viewport,
so it never overlaps the header. That means the header never has to fake
transparency or fight the drawer over z-index — it just stays exactly as
it normally looks, and the two can never visually conflict. */
.mobile-nav {
position: fixed;
top: var(--nav-height);
left: 0;
right: 0;
bottom: 0;
z-index: 400;
display: flex;
flex-direction: column;
justify-content: center;
padding: 40px 34px;
background:
radial-gradient(120% 90% at 90% -10%, rgba(201,162,75,.16), transparent 55%),
linear-gradient(160deg, #33161c, var(--footer-bg) 70%);
box-shadow: 12px 0 40px rgba(0,0,0,.35);
transform: translateX(-104%);
visibility: hidden;
transition: transform .45s var(--ease), visibility 0s .45s;
will-change: transform;
}
body.nav-open .mobile-nav {
transform: translateX(0);
visibility: visible;
transition: transform .45s var(--ease);
}
body.nav-open { overflow: hidden; }
.mobile-nav a {
font-family: var(--font-display);
font-size: clamp(26px, 7.5vw, 34px);
font-weight: 600;
color: #fff;
text-decoration: none;
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,.10);
opacity: 0;
transform: translateY(14px);
transition: opacity .4s var(--ease), transform .4s var(--ease), color .2s;
}
.mobile-nav a:hover, .mobile-nav a.active { color: var(--gold-soft); }
body.nav-open .mobile-nav a { opacity: 1; transform: translateY(0); }
body.nav-open .mobile-nav a:nth-child(1) { transition-delay: .06s; }
body.nav-open .mobile-nav a:nth-child(2) { transition-delay: .10s; }
body.nav-open .mobile-nav a:nth-child(3) { transition-delay: .14s; }
body.nav-open .mobile-nav a:nth-child(4) { transition-delay: .18s; }
body.nav-open .mobile-nav a:nth-child(5) { transition-delay: .22s; }
body.nav-open .mobile-nav a:nth-child(6) { transition-delay: .26s; }
body.nav-open .mobile-nav a:nth-child(7) { transition-delay: .30s; }
.mobile-nav .header-icons {
margin-top: 28px;
gap: 12px;
opacity: 0;
transition: opacity .4s var(--ease) .36s;
}
body.nav-open .mobile-nav .header-icons { opacity: 1; }
.mobile-nav .header-icons a {
width: 46px; height: 46px;
background: rgba(255,255,255,.10);
color: var(--gold-soft);
border-bottom: none;
opacity: 1;
transform: none;
}
.mobile-nav .header-icons a:hover { background: var(--gold); color: #2a1216; }
/* ---------- Footer ---------- */
.site-footer {
background:
radial-gradient(110% 100% at 100% 0%, rgba(201,162,75,.10), transparent 50%),
var(--footer-bg);
color: rgba(255,255,255,.82);
margin-top: 90px;
}
body[data-page="index"] .site-footer { margin-top: 0; }
.footer-inner {
width: min(var(--container), calc(100% - 40px));
margin-inline: auto;
padding: 64px 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 44px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(255,255,255,.10);
}
.footer-logo {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--gold-soft); /* ring color */
margin-bottom: 14px;
}
.footer-logo .logo-mark { width: 42px; height: 42px; }
.footer-logo .logo-word { color: #fff; font-size: 22px; }
.footer-logo .logo-word em { color: var(--gold-soft); }
.footer-tagline {
margin: 0 0 12px;
font-family: var(--font-display);
font-style: italic;
font-size: 15px;
color: var(--gold-soft);
}
.footer-brand p {
margin: 0;
max-width: 300px;
font-size: 14.5px;
line-height: 1.7;
color: rgba(255,255,255,.65);
}
.footer-cta { margin-top: 20px; min-height: 44px; padding: 10px 24px; font-size: 14px; }
.footer-heading {
font-family: var(--font-text);
font-size: 12px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 18px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
color: rgba(255,255,255,.78);
text-decoration: none;
font-size: 14.5px;
width: fit-content;
transition: color .2s var(--ease), transform .2s var(--ease);
}
.footer-links a:hover { color: var(--gold-soft); transform: translateX(3px); }
.footer-contact { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; }
.footer-contact a { color: rgba(255,255,255,.78); text-decoration: none; }
.footer-contact a:hover { color: var(--gold-soft); }
.footer-social { display: flex; gap: 10px; margin-top: 6px; }
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.18);
color: var(--gold-soft);
transition: background .2s var(--ease), color .2s var(--ease),
border-color .2s var(--ease), transform .2s var(--ease);
}
.footer-social svg { width: 17px; height: 17px; fill: currentColor; }
.footer-social a:hover {
background: var(--gold);
border-color: var(--gold);
color: #2a1216;
transform: translateY(-3px);
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
padding: 22px 0 26px;
font-size: 13px;
color: rgba(255,255,255,.45);
}
.footer-bottom a { color: rgba(255,255,255,.6); text-decoration: none; }
.footer-bottom a:hover { color: var(--gold-soft); }
/* ---------- Modal shell (used by admin & booking) ---------- */
.modal {
display: none;
position: fixed;
inset: 0;
z-index: 200;
background: rgba(24, 10, 13, .55);
backdrop-filter: blur(4px);
align-items: center;
justify-content: center;
padding: 20px;
}
.modal.open, .modal[style*="block"] { display: flex; }
.modal-content {
background: #fff;
border-radius: var(--radius-md);
padding: 30px 28px;
margin: 6vh auto; /* keeps it centered even if JS sets display:block */
width: min(560px, 100%);
max-height: 86vh;
overflow-y: auto;
position: relative;
box-shadow: var(--shadow-md);
animation: fadeIn .3s var(--ease) both;
}
.modal-content .close, .modal-content .close-confirm,
.modal-content .close-product, .modal-content .close-cart, .modal-content .close-services {
position: absolute;
top: 14px; right: 18px;
font-size: 26px;
line-height: 1;
color: var(--muted);
cursor: pointer;
}
.modal-content .close:hover, .modal-content .close-confirm:hover,
.modal-content .close-product:hover, .modal-content .close-cart:hover, .modal-content .close-services:hover {
color: var(--brand);
}
/* ---------- Animation ---------- */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn .8s var(--ease) both; }
.fade-in:nth-child(2) { animation-delay: .12s; }
.fade-in:nth-child(3) { animation-delay: .24s; }
.fade-in:nth-child(4) { animation-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ---------- Responsive ---------- */
@media (max-width: 940px) {
:root { --nav-height: 66px; }
.site-nav { display: none; }
.site-header .header-icons { display: none; }
.hamburger-menu { display: flex; order: 1; }
.nav-container { justify-content: space-between; }
.site-logo { order: 2; margin-inline: auto; }
.site-logo img { height: 40px; }
/* Invisible spacer balancing the hamburger so the logo sits centered.
Must match .hamburger-menu's actual rendered width (44px) exactly —
any mismatch and the auto margins on .site-logo push it off-center. */
.nav-container::after { content: ""; order: 3; width: 44px; flex-shrink: 0; }
.section { padding: 54px 0; }
.logo-word { font-size: 18px; }
.logo-mark { width: 34px; height: 34px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
.footer-grid > .footer-brand { grid-column: 1 / -1; }
.footer-inner { padding-top: 48px; }
}
@media (max-width: 560px) {
.footer-grid { grid-template-columns: 1fr; gap: 34px; }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (max-width: 380px) {
.logo-word { font-size: 16px; }
}
/* ---- Flatpickr calendar — brand palette instead of the stock theme.
Shared here (not page-specific CSS) since both book-now and admin use it. ---- */
.flatpickr-calendar {
font-family: var(--font-text);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
border: 1px solid var(--border);
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after { display: none; }
.flatpickr-months .flatpickr-month {
background: var(--brand);
border-radius: var(--radius-md) var(--radius-md) 0 0;
color: #fff;
height: 42px;
}
.flatpickr-current-month { font-family: var(--font-display); font-size: 15px; padding-top: 6px; }
.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year { color: #fff; font-weight: 600; }
.flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: rgba(255,255,255,.7); }
.flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: rgba(255,255,255,.7); }
.flatpickr-prev-month, .flatpickr-next-month { color: #fff !important; fill: #fff !important; top: 8px !important; }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: var(--gold-soft) !important; }
.flatpickr-weekdays { background: var(--surface-2); }
span.flatpickr-weekday { color: var(--brand); font-weight: 600; background: var(--surface-2); }
.flatpickr-day { border-radius: var(--radius-sm); }
.flatpickr-day.today { border-color: var(--gold); }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--surface-2); border-color: var(--surface-2); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
color: var(--muted);
opacity: .45;
text-decoration: line-through;
cursor: not-allowed;
background: transparent;
}
/* Fullscreen calendar on small screens — a floating popover is easy to
mis-tap and cramped on a phone, so it becomes a centered, dimmed-backdrop
overlay instead, same "modal" treatment as the services picker. */
@media (max-width: 600px) {
body:has(.flatpickr-calendar.open)::after {
content: "";
position: fixed;
inset: 0;
background: rgba(36, 17, 20, .55);
z-index: 399;
}
.flatpickr-calendar {
position: fixed !important;
top: 50% !important;
left: 50% !important;
right: auto !important;
transform: translate(-50%, -50%) !important;
width: 92vw !important;
max-width: 360px;
z-index: 400;
box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.35));
}
.flatpickr-calendar .flatpickr-days,
.flatpickr-calendar .dayContainer {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
}
.flatpickr-calendar .flatpickr-day {
height: 42px;
line-height: 42px;
font-size: 15px;
}
}