/* Paradyn Wedding Directory – premium wedding layer on top of Bootstrap 5.3
Load AFTER bootstrap.min.css
Fonts (add in ):
*/
:root{
/* ===== Color system (calm / romantic / premium) ===== */
--pw-ink: #1f1b1d;
--pw-muted: rgba(31, 27, 29, 0.72);
--pw-bg: #fbf7f3; /* warm ivory */
--pw-surface: #ffffff; /* cards / navbar */
--pw-surface-tint: rgba(255,255,255,0.86);
/* Rose */
--pw-accent: #b2556f;
--pw-accent-hover: #9f4760;
--pw-accent-soft: rgba(178, 85, 111, 0.12);
/* Champagne / gold */
--pw-gold: #b89a5b;
--pw-gold-hover: #a6884d;
--pw-gold-soft: rgba(184, 154, 91, 0.14);
/* Borders & rings */
--pw-border: rgba(31, 27, 29, 0.12);
--pw-border-strong: rgba(31, 27, 29, 0.18);
--pw-focus: rgba(184, 154, 91, 0.28);
/* ===== Typography ===== */
--pw-font-serif: "Libre Baskerville", Baskerville, "Times New Roman", Times, serif;
--pw-font-sans: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans";
/* ===== Layout tokens ===== */
--pw-radius-sm: .75rem;
--pw-radius-md: 1.05rem;
--pw-radius-lg: 1.25rem;
--pw-pill: 999px;
/* Spacing rhythm */
--pw-space-1: .25rem;
--pw-space-2: .5rem;
--pw-space-3: .75rem;
--pw-space-4: 1rem;
--pw-space-5: 1.5rem;
--pw-space-6: 2rem;
--pw-space-7: 3rem;
/* Shadows (subtle, premium) */
--pw-shadow-1: 0 8px 22px rgba(31, 27, 29, 0.10);
--pw-shadow-2: 0 14px 34px rgba(31, 27, 29, 0.12);
/* Motion */
--pw-ease: cubic-bezier(.2,.8,.2,1);
--pw-fast: 140ms;
--pw-med: 180ms;
/* Sticky stack tuning */
--pw-nav-h: 72px; /* tweak if needed */
--pw-crumb-h: 44px; /* approx */
--pw-sticky-offset: calc(var(--pw-nav-h) + var(--pw-crumb-h) + 12px);
--pw-sticky-stack: calc(var(--pw-nav-h) + var(--pw-crumb-h));
}
@media (max-width: 575.98px){
:root{
--pw-nav-h: 64px;
--pw-crumb-h: 42px;
}
}
html, body{ height: 100%; }
html{ scroll-behavior: smooth; }
/* IMPORTANT: navbar is fixed, so offset the document */
body{
padding-top: var(--pw-nav-h);
font-family: var(--pw-font-sans);
color: var(--pw-ink);
background:
radial-gradient(1100px 520px at 12% -10%, rgba(178, 85, 111, 0.13), transparent 62%),
radial-gradient(900px 460px at 90% 0%, rgba(184, 154, 91, 0.11), transparent 58%),
radial-gradient(820px 520px at 50% 110%, rgba(31, 27, 29, 0.06), transparent 60%),
var(--pw-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ===== Accessibility: focus visibility ===== */
:where(a, button, .btn, .nav-link, .form-control, .form-select, [role="button"]):focus-visible{
outline: none;
box-shadow: 0 0 0 .25rem var(--pw-focus);
border-radius: max(.5rem, 6px);
}
/* ===== Typography ===== */
h1, h2, h3, h4, .display-1, .display-2, .display-3{
font-family: var(--pw-font-serif);
letter-spacing: -0.02em;
}
h1, .display-1{ line-height: 1.05; }
h2, .display-2{ line-height: 1.10; }
h3, .display-3{ line-height: 1.15; }
.lead{ color: var(--pw-muted); }
.small, .text-muted{
color: rgba(31, 27, 29, 0.62) !important;
}
/* Subtle “foil” heading cue for hero/primary headings */
h1, .display-1, .display-2{
background: linear-gradient(
180deg,
color-mix(in srgb, var(--pw-gold) 70%, white),
color-mix(in srgb, var(--pw-accent) 28%, white)
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
@supports not (-webkit-background-clip: text){
h1, .display-1, .display-2{ color: var(--pw-accent); }
}
/* ===== Navbar (GUARANTEED STICKY: fixed) ===== */
.navbar{
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1030;
background: color-mix(in srgb, var(--pw-surface) 88%, transparent);
border-bottom: 1px solid rgba(31, 27, 29, 0.08);
}
@supports (backdrop-filter: blur(10px)){
.navbar{
backdrop-filter: saturate(170%) blur(10px);
background: color-mix(in srgb, var(--pw-surface) 86%, transparent);
}
}
.navbar .navbar-brand{
font-family: var(--pw-font-serif);
font-weight: 400;
letter-spacing: -0.04em;
text-transform: none;
}
.navbar .nav-link{
color: rgba(31, 27, 29, 0.82);
font-weight: 500;
transition: color var(--pw-fast) var(--pw-ease);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{
color: rgba(31, 27, 29, 0.95);
}
.navbar .nav-link.active{
color: color-mix(in srgb, var(--pw-accent) 75%, black);
}
.navbar,
.navbar .container,
.navbar .container-fluid{
border-radius: 0 !important;
}
/* ===== Breadcrumbs (STICKY under navbar) ===== */
main nav[aria-label="Breadcrumb"],
main nav[aria-label="breadcrumb"]{
position: sticky;
top: var(--pw-nav-h);
z-index: 1020;
background: color-mix(in srgb, var(--pw-surface) 92%, transparent);
border-bottom: 1px solid rgba(31, 27, 29, 0.08);
margin-bottom: 1rem !important;
padding: .5rem 0;
}
@supports (backdrop-filter: blur(10px)){
main nav[aria-label="Breadcrumb"],
main nav[aria-label="breadcrumb"]{
backdrop-filter: saturate(160%) blur(10px);
background: color-mix(in srgb, var(--pw-surface) 86%, transparent);
}
}
main nav[aria-label="Breadcrumb"] .breadcrumb,
main nav[aria-label="breadcrumb"] .breadcrumb{
margin-bottom: 0;
}
.breadcrumb a{ color: rgba(31, 27, 29, 0.70); }
.breadcrumb a:hover{ color: rgba(178, 85, 111, 0.95); }
/* Remove the gap between fixed navbar and sticky breadcrumbs */
main.container.py-4{ padding-top: 0 !important; }
/* Full-width breadcrumb bar + aligned text */
main.container nav[aria-label="Breadcrumb"],
main.container nav[aria-label="breadcrumb"]{
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* Inner alignment: support either a dedicated inner wrapper or the first direct child */
main.container nav[aria-label="Breadcrumb"] > .pw-crumbbar-inner,
main.container nav[aria-label="breadcrumb"] > .pw-crumbbar-inner,
main.container nav[aria-label="Breadcrumb"] > :first-child,
main.container nav[aria-label="breadcrumb"] > :first-child{
max-width: var(--pw-container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--bs-gutter-x, 1.5rem);
padding-right: var(--bs-gutter-x, 1.5rem);
}
/* Let flex items actually shrink (critical for responsive behavior) */
main nav[aria-label="Breadcrumb"] .pw-crumbbar-inner,
main nav[aria-label="breadcrumb"] .pw-crumbbar-inner{
min-width: 0;
}
/* Breadcrumb + search share the row on wide screens */
main nav[aria-label="Breadcrumb"] .breadcrumb,
main nav[aria-label="breadcrumb"] .breadcrumb{
flex: 1 1 auto;
min-width: 0; /* allow shrinking instead of forcing overflow */
}
/* Search: flexible, can shrink, but has a preferred width */
main nav[aria-label="Breadcrumb"] .site-search,
main nav[aria-label="breadcrumb"] .site-search{
flex: 0 1 26rem; /* preferred width */
min-width: 14rem; /* not too small on wide screens */
max-width: 100%;
}
main nav[aria-label="Breadcrumb"] .site-search .input-group,
main nav[aria-label="breadcrumb"] .site-search .input-group{
width: 100%;
}
/* Avoid input-group causing overflow */
main nav[aria-label="Breadcrumb"] .site-search .form-control,
main nav[aria-label="breadcrumb"] .site-search .form-control{
min-width: 0;
}
main nav[aria-label="Breadcrumb"] .site-search .form-control{
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
main nav[aria-label="Breadcrumb"] .site-search .btn{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding-top: .45rem;
padding-bottom: .45rem;
}
/* Stacked layout on narrow screens */
@media (max-width: 767.98px){
main nav[aria-label="Breadcrumb"] .breadcrumb,
main nav[aria-label="breadcrumb"] .breadcrumb{
flex: 1 1 100%;
}
main nav[aria-label="Breadcrumb"] .site-search,
main nav[aria-label="breadcrumb"] .site-search{
flex: 1 1 100%;
min-width: 0;
margin-left: 0 !important; /* overrides ms-auto when stacked */
}
}
/* Keep breadcrumb + search on one line when possible */
main nav[aria-label="Breadcrumb"] .breadcrumb,
main nav[aria-label="breadcrumb"] .breadcrumb{
flex: 1 1 auto;
min-width: 12rem;
}
/* Site search inside breadcrumb bar */
main nav[aria-label="Breadcrumb"] .site-search,
main nav[aria-label="breadcrumb"] .site-search{
flex: 0 1 22rem;
min-width: 16rem;
}
main nav[aria-label="Breadcrumb"] .site-search .input-group,
main nav[aria-label="breadcrumb"] .site-search .input-group{
width: 100%;
}
main nav[aria-label="Breadcrumb"] .site-search .form-control,
main nav[aria-label="breadcrumb"] .site-search .form-control{
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
main nav[aria-label="Breadcrumb"] .site-search .btn,
main nav[aria-label="breadcrumb"] .site-search .btn{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding-top: .45rem;
padding-bottom: .45rem;
}
/* On small screens, let search take full width under breadcrumbs */
@media (max-width: 575.98px){
main nav[aria-label="Breadcrumb"] .site-search,
main nav[aria-label="breadcrumb"] .site-search{
flex: 1 1 100%;
min-width: 100%;
}
}
:root{ --pw-container-max: 1320px; }
@media (max-width: 1399.98px){ :root{ --pw-container-max: 1140px; } }
@media (max-width: 1199.98px){ :root{ --pw-container-max: 960px; } }
@media (max-width: 991.98px){ :root{ --pw-container-max: 720px; } }
@media (max-width: 767.98px){ :root{ --pw-container-max: 540px; } }
@media (max-width: 575.98px){ :root{ --pw-container-max: 100%; } }
/* ===== Business detail sidebar sticky offset ===== */
.col-12.col-lg-4.d-none.d-lg-block .position-sticky{
top: calc(var(--pw-sticky-stack) + 1rem) !important;
}
/* ===== Links ===== */
a{
color: color-mix(in srgb, var(--pw-gold) 82%, black);
text-decoration-color: color-mix(in srgb, var(--pw-gold) 48%, transparent);
text-underline-offset: 0.16em;
transition: color var(--pw-fast) var(--pw-ease), text-decoration-color var(--pw-fast) var(--pw-ease);
}
a:hover{
color: color-mix(in srgb, var(--pw-gold-hover) 78%, black);
text-decoration-thickness: 2px;
text-decoration-color: color-mix(in srgb, var(--pw-gold-hover) 60%, transparent);
}
/* ===== Card links on index + location pages ===== */
a.card-link > .border{
border-color: var(--pw-border) !important;
border-radius: var(--pw-radius-lg) !important;
background: color-mix(in srgb, var(--pw-surface) 94%, var(--pw-gold-soft));
transition:
transform var(--pw-fast) var(--pw-ease),
box-shadow var(--pw-fast) var(--pw-ease),
border-color var(--pw-fast) var(--pw-ease);
}
a.card-link:hover > .border{
transform: translateY(-2px);
box-shadow: var(--pw-shadow-2);
border-color: rgba(178, 85, 111, 0.30) !important;
}
/* ===== Cards ===== */
.card{
border-radius: var(--pw-radius-lg);
border-color: var(--pw-border);
background: var(--pw-surface);
}
.card.shadow-sm{ box-shadow: var(--pw-shadow-1); }
.card .card-title{
font-family: var(--pw-font-serif);
letter-spacing: -0.006em;
}
.card .badge{
background: color-mix(in srgb, var(--pw-accent-soft) 85%, white);
color: color-mix(in srgb, var(--pw-accent) 70%, black);
border: 1px solid rgba(178, 85, 111, 0.18);
font-weight: 600;
}
/* ===== Hero-ish panels (Bootstrap bg-body-tertiary) ===== */
.bg-body-tertiary{
background:
linear-gradient(180deg, rgba(255,255,255,0.93), rgba(255,255,255,0.80)),
radial-gradient(900px 320px at 18% 0%, rgba(178, 85, 111, 0.11), transparent 62%),
radial-gradient(820px 340px at 88% 0%, rgba(184, 154, 91, 0.10), transparent 60%),
#ffffff !important;
border: 1px solid rgba(31, 27, 29, 0.10);
border-radius: var(--pw-radius-lg);
box-shadow: 0 10px 26px rgba(31, 27, 29, 0.08);
}
/* ===== Buttons ===== */
.btn{
border-radius: var(--pw-pill);
font-weight: 600;
letter-spacing: 0.01em;
padding: .62rem 1.05rem;
transition:
transform var(--pw-fast) var(--pw-ease),
box-shadow var(--pw-fast) var(--pw-ease),
background-color var(--pw-fast) var(--pw-ease),
border-color var(--pw-fast) var(--pw-ease),
color var(--pw-fast) var(--pw-ease);
}
.btn:active{ transform: translateY(0); }
.btn:hover{ transform: translateY(-1px); }
.btn-primary{
background-color: var(--pw-accent);
border-color: var(--pw-accent);
box-shadow: 0 10px 20px rgba(178, 85, 111, 0.18);
}
.btn-primary:hover,
.btn-primary:focus{
background-color: var(--pw-accent-hover);
border-color: var(--pw-accent-hover);
box-shadow: 0 12px 24px rgba(178, 85, 111, 0.22);
}
.btn-outline-primary{
--bs-btn-color: color-mix(in srgb, var(--pw-accent) 80%, black);
--bs-btn-border-color: rgba(178, 85, 111, 0.45);
--bs-btn-hover-bg: var(--pw-accent);
--bs-btn-hover-border-color: var(--pw-accent);
--bs-btn-hover-color: #fff;
}
.btn-outline-primary:hover{
box-shadow: 0 12px 24px rgba(178, 85, 111, 0.16);
}
/* ===== Forms ===== */
.form-control, .form-select{
border-radius: var(--pw-pill);
border-color: rgba(31, 27, 29, 0.14);
background-color: #fff;
transition: box-shadow var(--pw-fast) var(--pw-ease), border-color var(--pw-fast) var(--pw-ease);
}
.form-control::placeholder{ color: rgba(31, 27, 29, 0.45); }
.form-control:focus, .form-select:focus{
border-color: rgba(184, 154, 91, 0.60);
box-shadow: 0 0 0 .25rem rgba(184, 154, 91, 0.16);
}
/* ===== Footer ===== */
footer{
border-top: 1px solid rgba(31, 27, 29, 0.10);
background: color-mix(in srgb, var(--pw-surface) 88%, rgba(178, 85, 111, 0.08));
}
/* ===== Section navigation (segmented links) ===== */
.pw-section-nav-wrap{
padding-bottom: .75rem;
border-bottom: 1px solid rgba(31,27,29,0.08);
}
.pw-section-nav-label{
font-size: .8rem;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(31,27,29,0.55);
margin-bottom: .35rem;
}
.pw-section-nav{
font-family: var(--pw-font-sans);
font-size: .95rem;
line-height: 1.7;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .25rem .5rem;
}
.pw-section-link{
color: rgba(31,27,29,0.72);
text-decoration: none;
font-weight: 600;
padding: .15rem 0;
}
.pw-section-link:hover{
color: var(--pw-accent);
text-decoration: underline;
text-underline-offset: .18em;
}
.pw-section-sep{
color: rgba(31,27,29,0.35);
user-select: none;
}
/* ===== Carousel images ===== */
.pw-carousel-img{
width: 100%;
height: auto;
max-height: 700px;
object-fit: cover;
border-radius: var(--pw-radius-lg);
}
.carousel-item{ background: #fff; }
/* Anchor offset so headings aren’t hidden by fixed navbar + sticky breadcrumbs */
#about, #gallery, #location, #similar, [id^="section-"]{
scroll-margin-top: var(--pw-sticky-offset);
}
/* ===== Back-to-top button ===== */
#pw-backtotop{
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
width: 42px;
height: 42px;
border-radius: var(--pw-pill);
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.90);
border: 1px solid rgba(31,27,29,0.15);
color: var(--pw-accent);
text-decoration: none;
font-weight: 700;
box-shadow: var(--pw-shadow-1);
opacity: 0;
transform: translateY(10px);
transition:
opacity var(--pw-med) var(--pw-ease),
transform var(--pw-med) var(--pw-ease),
background-color var(--pw-fast) var(--pw-ease);
z-index: 1050;
}
#pw-backtotop:hover{ background: #fff; }
#pw-backtotop.show{
opacity: 1;
transform: translateY(0);
}
/* ===== Reduce motion ===== */
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior: auto; }
.btn, a, .navbar .nav-link, #pw-backtotop{ transition: none !important; }
.btn:hover{ transform: none; }
}
/* ===== Pills nav (On this page) ===== */
.pw-section-pills{ margin: 0; padding: 0; }
.pw-section-pills .nav-link{
border-radius: var(--pw-pill);
padding: .48rem .90rem;
font-weight: 600;
font-size: .95rem;
line-height: 1.1;
color: rgba(31,27,29,0.78);
background: rgba(255,255,255,0.72);
border: 1px solid rgba(31,27,29,0.12);
transition:
background-color var(--pw-fast) var(--pw-ease),
border-color var(--pw-fast) var(--pw-ease),
color var(--pw-fast) var(--pw-ease),
box-shadow var(--pw-fast) var(--pw-ease);
}
.pw-section-pills .nav-link:hover{
border-color: rgba(178, 85, 111, 0.22);
box-shadow: 0 10px 20px rgba(31, 27, 29, 0.08);
}
.pw-section-pills .nav-link.active{
color: #fff;
background: var(--pw-accent);
border-color: var(--pw-accent);
box-shadow: 0 12px 24px rgba(178, 85, 111, 0.18);
}
/* ===== Home hero: avoid text clipping on small screens ===== */
.pw-hero{
aspect-ratio: auto;
min-height: 520px;
/* FIX: remove the “halo/outline” from the Bootstrap .border class on the hero */
border: 0 !important;
box-shadow: var(--pw-shadow-2);
border-radius: var(--pw-radius-lg);
overflow: hidden; /* ensure perfect corner clipping */
background: transparent;
}
@media (min-width: 992px){
.pw-hero{
aspect-ratio: 16 / 9;
min-height: 0;
}
}
.pw-hero picture,
.pw-hero picture img{
display: block;
}
/* Desktop: keep more of the bottom of the hero image visible */
.pw-hero picture img{
object-position: 50% 70%;
/* parent owns rounding; avoids anti-aliased corner seams */
border-radius: 0;
outline: none;
box-shadow: none;
border: 0;
transform: translateZ(0);
}
@media (max-width: 991.98px){
.pw-hero picture img{
object-position: 50% 50%;
}
}
.fw-semibold {
font-weight: 500 !important;
}
/* ===== Locations accordion enhancements ===== */
.pw-locations-accordion .accordion-item{
border: 1px solid var(--pw-border);
border-radius: var(--pw-radius-lg);
overflow: hidden; /* keeps rounded corners clean */
box-shadow: var(--pw-shadow-1);
background: color-mix(in srgb, var(--pw-surface) 94%, var(--pw-gold-soft));
}
/* nicer separation without double borders */
.pw-locations-accordion .accordion-item + .accordion-item{
margin-top: .75rem;
}
.pw-locations-accordion .accordion-header{ margin: 0; }
.pw-locations-accordion .accordion-button{
background: transparent;
color: var(--pw-ink);
font-weight: 600;
padding: 1rem 1.1rem;
border: 0;
box-shadow: none; /* avoid bootstrap inset shadow */
}
.pw-locations-accordion .accordion-button:not(.collapsed){
background: color-mix(in srgb, var(--pw-accent-soft) 60%, white);
}
.pw-locations-accordion .accordion-button:focus{
box-shadow: 0 0 0 .25rem var(--pw-focus);
}
/* replace default chevron with a softer look */
.pw-locations-accordion .accordion-button::after{
opacity: .75;
transform: rotate(-90deg);
transition: transform var(--pw-med) var(--pw-ease), opacity var(--pw-fast) var(--pw-ease);
}
.pw-locations-accordion .accordion-button:not(.collapsed)::after{
transform: rotate(0deg);
opacity: 1;
}
/* collapse panel */
.pw-locations-accordion .accordion-collapse{
border-top: 1px solid rgba(31,27,29,0.10);
}
.pw-locations-accordion .accordion-body{
padding: 1rem 1.1rem 1.1rem;
background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.98));
}
/* make the city cards feel consistent */
.pw-locations-accordion .accordion-body a.border{
border-color: var(--pw-border) !important;
border-radius: var(--pw-radius-md) !important;
background: #fff;
transition: transform var(--pw-fast) var(--pw-ease), box-shadow var(--pw-fast) var(--pw-ease), border-color var(--pw-fast) var(--pw-ease);
}
.pw-locations-accordion .accordion-body a.border:hover{
transform: translateY(-1px);
box-shadow: var(--pw-shadow-2);
border-color: rgba(178, 85, 111, 0.28) !important;
}
/* optional: reduce motion */
@media (prefers-reduced-motion: reduce){
.pw-locations-accordion .accordion-button::after,
.pw-locations-accordion .accordion-body a.border{
transition: none !important;
}
}