/* ==========================================================================
Sarah's Sweet Paws & Whiskers — Site Stylesheet
Reference this file to build pages that match final_site_preview.html
Usage:
...
========================================================================== */
/* --- Design tokens --- */
:root {
--spw-color-burgundy: #8B1A2F;
--spw-color-burgundy-dark: #7a1228;
--spw-color-burgundy-darker: #6a1222;
--spw-color-burgundy-deeper: #4a0a18;
--spw-color-burgundy-hover: #A8203A;
--spw-color-cream: #F5F0E8;
--spw-color-cream-dark: #F0EAD8;
--spw-color-cream-muted: #E8E0D0;
--spw-color-nav-border: #d9cfc0;
--spw-color-gold: #B8926A;
--spw-color-white: #FFFFFF;
--spw-max-width: 1400px;
--spw-max-width-narrow: 800px;
--spw-max-width-services: 900px;
--spw-max-width-service-text: 700px;
--spw-max-width-intro: 600px;
--spw-font-display: 'Playfair Display', Georgia, serif;
--spw-font-script: 'Playlist Script', cursive;
--spw-font-body: 'Lato', sans-serif;
--spw-font-ui: 'Montserrat', sans-serif;
--spw-font-hero-serif: Georgia, 'Times New Roman', serif;
--spw-font-hero-sans: Arial, Helvetica, sans-serif;
}
html {
scroll-behavior: smooth;
max-width: 100%;
width: 100%;
scroll-padding-top: 72px;
}
#hero,
#about,
#services,
#gallery,
#book {
scroll-margin-top: 72px;
}
body {
margin: 0;
max-width: 100%;
width: 100%;
overflow-x: clip;
}
.site-preview-root {
display: block;
width: 100%;
max-width: 100%;
}
/* Keep hero/nav appearance stable even if sections toggle page theme/color-scheme. */
.wf-assembled-hero-shell,
.wf-assembled-hero-shell * {
color-scheme: normal !important;
}
/* Hide common model-added fixed “Press D / light–dark” hint UI; document-level key handlers still run */
.site-preview-root [aria-label*="Press D" i],
.site-preview-root [aria-label*="press d" i],
.site-preview-root [title*="Press D" i],
.site-preview-root [title*="light/dark" i],
.site-preview-root [title*="light / dark" i],
.site-preview-root [data-theme-toggle],
.site-preview-root [data-wf-theme-hint],
.site-preview-root .wf-theme-toggle-chip {
display: none !important;
}
/* === section scroll animations === */
@keyframes wf-section-in {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
/*
* wf-anim-js is added to by a blocking script before body renders.
* Without it (no JS), nothing is hidden.
*
* Structure per section:
* [data-wf-section] ← outer shell, background, never animated
* .wf-section-body ← passthrough
* model root ← owns background colour, never animated
* > children ← hidden until in-view, then fade+lift
*/
html.wf-anim-js .site-preview-root [data-wf-section]:not(.wf-section--in) .wf-section-body > * > * {
opacity: 0;
}
.site-preview-root [data-wf-section].wf-section--in .wf-section-body > * > * {
animation: wf-section-in 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@media (prefers-reduced-motion: reduce) {
html.wf-anim-js .site-preview-root [data-wf-section]:not(.wf-section--in) .wf-section-body > * > * {
opacity: 1;
}
.site-preview-root [data-wf-section].wf-section--in .wf-section-body > * > * {
animation: none;
}
}
/* === Hero === */
.wf-hero {
font-family: var(--spw-font-hero-serif);
display: flex;
flex-direction: column;
width: 100%;
max-width: 100%;
min-height: 100vh;
min-height: 100dvh;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wf-hero *,
.wf-hero *::before,
.wf-hero *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.wf-hero__nav {
background-color: var(--spw-color-cream);
width: 100%;
padding: 14px 40px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 24px;
border-bottom: 1px solid var(--spw-color-nav-border);
position: relative;
z-index: 2;
}
.wf-hero__nav-brand {
display: flex;
align-items: center;
flex-shrink: 0;
text-decoration: none;
line-height: 0;
}
.wf-hero__nav-logo {
display: block;
height: 52px;
width: auto;
max-width: 148px;
object-fit: contain;
}
.wf-hero__nav-list {
list-style: none;
display: flex;
align-items: center;
gap: 0;
flex: 1;
flex-wrap: wrap;
justify-content: center;
}
.wf-hero__nav-list li {
display: flex;
align-items: center;
}
.wf-hero__nav-link {
text-decoration: none;
color: var(--spw-color-burgundy-dark);
font-family: var(--spw-font-hero-sans);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
padding: 0 18px;
white-space: nowrap;
transition: color 0.2s;
}
.wf-hero__nav-link:hover {
color: var(--spw-color-burgundy-deeper);
}
.wf-hero__nav-phone {
font-weight: 700;
}
.wf-hero__nav-sep {
color: var(--spw-color-burgundy);
font-weight: 300;
font-size: 1rem;
padding: 0;
}
/* Mobile hamburger navigation */
.wf-hero__nav-toggle {
display: none;
position: relative;
z-index: 10002;
width: 44px;
height: 44px;
margin: 0 0 0 auto;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
align-items: center;
justify-content: center;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
.wf-hero__nav-toggle-box {
display: block;
width: 24px;
height: 18px;
position: relative;
}
.wf-hero__nav-toggle-line {
display: block;
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: var(--spw-color-burgundy);
border-radius: 2px;
transition:
transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
top 0.38s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.22s ease;
}
.wf-hero__nav-toggle-line:nth-child(1) {
top: 0;
}
.wf-hero__nav-toggle-line:nth-child(2) {
top: 8px;
}
.wf-hero__nav-toggle-line:nth-child(3) {
top: 16px;
}
.wf-hero__nav-toggle.is-open .wf-hero__nav-toggle-line:nth-child(1) {
top: 8px;
transform: rotate(45deg);
}
.wf-hero__nav-toggle.is-open .wf-hero__nav-toggle-line:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.wf-hero__nav-toggle.is-open .wf-hero__nav-toggle-line:nth-child(3) {
top: 8px;
transform: rotate(-45deg);
}
.wf-hero__mobile-menu {
position: fixed;
inset: 0;
z-index: 10001;
pointer-events: none;
visibility: hidden;
transition: visibility 0s linear 0.4s;
}
.wf-hero__mobile-menu.is-open {
pointer-events: auto;
visibility: visible;
transition-delay: 0s;
}
.wf-hero__mobile-menu-backdrop {
position: absolute;
inset: 0;
background: rgba(74, 10, 24, 0.42);
opacity: 0;
transition: opacity 0.38s ease;
}
.wf-hero__mobile-menu.is-open .wf-hero__mobile-menu-backdrop {
opacity: 1;
}
.wf-hero__mobile-menu-panel {
position: absolute;
top: 0;
right: 0;
width: min(320px, 88vw);
height: 100%;
background: var(--spw-color-cream);
box-shadow: -10px 0 40px rgba(0, 0, 0, 0.18);
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
padding: calc(56px + env(safe-area-inset-top, 0px)) 28px calc(32px + env(safe-area-inset-bottom, 0px));
overflow-y: auto;
}
.wf-hero__mobile-menu.is-open .wf-hero__mobile-menu-panel {
transform: translateX(0);
}
.wf-hero__mobile-menu-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.wf-hero__mobile-menu-link {
display: block;
padding: 14px 0;
text-decoration: none;
color: var(--spw-color-burgundy-dark);
font-family: var(--spw-font-hero-sans);
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
border-bottom: 1px solid rgba(139, 26, 47, 0.12);
opacity: 0;
transform: translateX(18px);
transition:
opacity 0.32s ease,
transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
color 0.2s ease;
}
.wf-hero__mobile-menu-link:hover,
.wf-hero__mobile-menu-link:focus-visible {
color: var(--spw-color-burgundy-deeper);
}
.wf-hero__mobile-menu-link--phone {
margin-top: 12px;
border-bottom: none;
color: var(--spw-color-burgundy);
}
.wf-hero__mobile-menu.is-open .wf-hero__mobile-menu-link {
opacity: 1;
transform: translateX(0);
}
.wf-hero__mobile-menu.is-open .wf-hero__mobile-menu-list li:nth-child(1) .wf-hero__mobile-menu-link { transition-delay: 0.08s; }
.wf-hero__mobile-menu.is-open .wf-hero__mobile-menu-list li:nth-child(2) .wf-hero__mobile-menu-link { transition-delay: 0.12s; }
.wf-hero__mobile-menu.is-open .wf-hero__mobile-menu-list li:nth-child(3) .wf-hero__mobile-menu-link { transition-delay: 0.16s; }
.wf-hero__mobile-menu.is-open .wf-hero__mobile-menu-list li:nth-child(4) .wf-hero__mobile-menu-link { transition-delay: 0.2s; }
.wf-hero__mobile-menu.is-open .wf-hero__mobile-menu-list li:nth-child(5) .wf-hero__mobile-menu-link { transition-delay: 0.24s; }
.wf-hero__mobile-menu.is-open .wf-hero__mobile-menu-list li:nth-child(6) .wf-hero__mobile-menu-link { transition-delay: 0.28s; }
body.wf-nav-open {
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
.wf-hero__nav-toggle-line,
.wf-hero__mobile-menu,
.wf-hero__mobile-menu-backdrop,
.wf-hero__mobile-menu-panel,
.wf-hero__mobile-menu-link {
transition: none;
}
.wf-hero__mobile-menu-link {
opacity: 1;
transform: none;
}
}
.wf-hero__body {
position: relative;
flex: 1;
width: 100%;
min-height: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.wf-hero__bg-image {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.wf-hero__bg-image picture,
.wf-hero__bg-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
@media (max-width: 540px) {
.wf-hero__bg-image img {
object-position: center top;
}
}
.wf-hero__overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0.08) 100%);
}
.wf-hero__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px 20px 40px;
padding-bottom: 80px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.wf-hero__logo-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 28px;
overflow: visible;
max-width: 100%;
padding: 56px clamp(12px, 4vw, 80px) 0;
z-index: 1;
}
.wf-hero__logo-fade {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(160%, calc(100vw - 24px));
height: min(160%, calc(100vw - 24px));
min-width: 0;
min-height: 0;
max-width: calc(100vw - 24px);
max-height: calc(100vw - 24px);
background: radial-gradient(
ellipse at center,
rgba(255, 255, 255, 0.98) 0%,
rgba(255, 255, 255, 0.88) 22%,
rgba(255, 255, 255, 0.55) 42%,
rgba(255, 255, 255, 0.18) 58%,
transparent 76%
);
pointer-events: none;
z-index: 0;
}
.wf-hero__logo {
position: relative;
z-index: 1;
display: block;
width: min(460px, 76vw);
height: auto;
}
.wf-hero__cta {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1;
background-color: var(--spw-color-burgundy);
color: var(--spw-color-white);
font-family: var(--spw-font-hero-sans);
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
padding: 18px calc(44px + 0.12em) 18px 44px;
border-radius: 50px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
transition: background-color 0.2s, transform 0.1s;
}
.wf-hero__cta:hover {
background-color: var(--spw-color-burgundy-darker);
transform: translateY(-2px);
}
@media (max-width: 600px) {
html {
scroll-padding-top: 56px;
}
#hero,
#about,
#services,
#gallery,
#book {
scroll-margin-top: 56px;
}
.wf-hero__nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10000;
justify-content: space-between;
gap: 12px;
padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px 12px;
box-shadow: 0 1px 0 rgba(139, 26, 47, 0.08);
}
.wf-hero__nav-logo {
height: 40px;
max-width: 112px;
}
.wf-hero__nav-list {
display: none;
}
.wf-hero__nav-toggle {
display: inline-flex;
}
.wf-hero__body {
min-height: 100dvh;
padding-top: 56px;
box-sizing: border-box;
}
.wf-hero__logo-wrap {
padding: 36px clamp(8px, 3vw, 48px) 0;
}
.wf-hero__logo-fade {
width: calc(100vw - 8px);
height: min(92vh, 820px);
max-width: calc(100vw - 8px);
max-height: min(92vh, 820px);
background: radial-gradient(
ellipse at center,
rgba(255, 255, 255, 0.98) 0%,
rgba(255, 255, 255, 0.92) 16%,
rgba(255, 255, 255, 0.72) 34%,
rgba(255, 255, 255, 0.38) 52%,
rgba(255, 255, 255, 0.14) 68%,
transparent 86%
);
}
.wf-hero__logo {
width: min(300px, 80vw);
}
}
/* === assembled preview layer (hero bg, sections, rhythm, responsive non-hero) === */
/* ========== Assembled preview: coordinated rest-of-site (variant CSS owns section backgrounds) ========== */
.site-preview-root {
min-height: auto;
background: #fff;
width: 100%;
max-width: 100%;
}
.wf-assembled-hero-shell {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
.site-section-wf {
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
border-top: none;
background: transparent;
color: inherit;
}
@media (max-width: 900px) {
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) {
padding-left: max(0rem, env(safe-area-inset-left, 0px));
padding-right: max(0rem, env(safe-area-inset-right, 0px));
}
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) img,
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) video,
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) svg {
max-width: 100%;
height: auto;
}
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) table {
display: block;
width: 100% !important;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 768px) {
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) {
min-width: 0;
}
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) [style*="display:grid"],
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) [style*="display: grid"] {
grid-template-columns: 1fr !important;
}
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) [style*="flex-direction:row"],
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) [style*="flex-direction: row"] {
flex-direction: column !important;
}
}
@media (max-width: 480px) {
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) button,
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) .button,
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) a[class*="btn"],
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) a[class*="cta"] {
max-width: 100%;
box-sizing: border-box;
word-break: break-word;
}
}
/* === about_v1.css === */
.about-section-v1 {
background: #F5F0E8;
padding: 80px 48px;
}
.about-section-v1 .about-container {
max-width: 1400px;
margin: 0 auto;
}
.about-section-v1 .about-content {
display: grid;
grid-template-columns: 1fr 400px;
gap: 64px;
align-items: center;
}
.about-section-v1 h2 {
font-family: 'Playfair Display', serif;
font-size: 52px;
font-weight: 400;
color: #8B1A2F;
margin: 0 0 24px 0;
line-height: 1.2;
}
.about-section-v1 .about-lead {
font-family: 'Lato', sans-serif;
font-size: 20px;
color: #8B1A2F;
margin: 0 0 24px 0;
line-height: 1.6;
font-weight: 500;
}
.about-section-v1 p {
font-family: 'Lato', sans-serif;
font-size: 16px;
color: #8B1A2F;
margin: 0 0 20px 0;
line-height: 1.6;
}
.about-section-v1 .about-credentials {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 32px;
}
.about-section-v1 .credential {
background: rgba(139, 26, 47, 0.1);
padding: 8px 16px;
border-radius: 4px;
border-left: 3px solid #8B1A2F;
}
.about-section-v1 .credential-label {
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 700;
color: #8B1A2F;
text-transform: uppercase;
letter-spacing: 0.15em;
}
.about-section-v1 .about-image {
position: relative;
}
.about-section-v1 .about-image img {
width: 100%;
height: 500px;
object-fit: cover;
border-radius: 16px;
box-shadow: 0 8px 40px rgba(139, 26, 47, 0.18);
}
@media (max-width: 1024px) {
.about-section-v1 .about-content {
grid-template-columns: 1fr;
gap: 40px;
}
.about-section-v1 .about-image {
order: -1;
}
.about-section-v1 .about-image img {
height: 300px;
}
}
@media (max-width: 768px) {
.about-section-v1 {
padding: 64px 24px;
}
.about-section-v1 h2 {
font-size: 36px;
}
.about-section-v1 .about-lead {
font-size: 18px;
}
}
/* === services_v1.css === */
.services-section-v1 {
background: #FFFFFF;
padding: 80px 48px;
}
.services-section-v1 .services-container {
max-width: 1400px;
margin: 0 auto;
}
.services-section-v1 .services-header {
text-align: center;
margin-bottom: 64px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.services-section-v1 h2 {
font-family: 'Playfair Display', serif;
font-size: 48px;
font-weight: 400;
color: #8B1A2F;
margin: 0 0 24px 0;
line-height: 1.2;
}
.services-section-v1 .services-intro {
font-family: 'Lato', sans-serif;
font-size: 18px;
color: #8B1A2F;
line-height: 1.6;
margin: 0;
}
.services-section-v1 .services-list {
max-width: 900px;
margin: 0 auto;
}
.services-section-v1 .service-band {
padding: 40px 0;
border-bottom: 1px solid rgba(139, 26, 47, 0.1);
}
.services-section-v1 .service-band:last-child {
border-bottom: none;
}
.services-section-v1 .service-band.primary {
background: linear-gradient(90deg, rgba(139, 26, 47, 0.03) 0%, transparent 50%, rgba(139, 26, 47, 0.03) 100%);
}
.services-section-v1 .service-band.secondary {
background: linear-gradient(90deg, transparent 0%, rgba(245, 240, 232, 0.5) 50%, transparent 100%);
}
.services-section-v1 .service-content {
max-width: 700px;
margin: 0 auto;
text-align: center;
}
.services-section-v1 h3 {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 700;
color: #8B1A2F;
margin: 0 0 16px 0;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.services-section-v1 .service-content p {
font-family: 'Lato', sans-serif;
font-size: 16px;
color: #8B1A2F;
line-height: 1.6;
margin: 0;
}
@media (max-width: 768px) {
.services-section-v1 {
padding: 64px 24px;
}
.services-section-v1 h2 {
font-size: 36px;
}
.services-section-v1 .services-intro {
font-size: 16px;
}
.services-section-v1 .service-band {
padding: 32px 0;
}
.services-section-v1 h3 {
font-size: 18px;
}
}
/* === gallery_v1.css === */
.gallery-section-v1 {
background: #F5F0E8;
padding: 80px 48px;
}
.gallery-section-v1 .gallery-container {
max-width: 1400px;
margin: 0 auto;
}
.gallery-section-v1 .gallery-header {
text-align: center;
margin-bottom: 64px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.gallery-section-v1 h2 {
font-family: 'Playlist Script', cursive;
font-size: 52px;
font-weight: 400;
color: #8B1A2F;
margin: 0 0 24px 0;
line-height: 1.1;
}
.gallery-section-v1 .gallery-intro {
font-family: 'Lato', sans-serif;
font-size: 16px;
color: #8B1A2F;
line-height: 1.6;
margin: 0;
}
.gallery-section-v1 .gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 280px);
gap: 24px;
}
.gallery-section-v1 .gallery-item {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 24px rgba(139, 26, 47, 0.15);
background: #FFFFFF;
}
.gallery-section-v1 .gallery-item.large {
grid-column: span 2;
grid-row: span 2;
}
.gallery-section-v1 .gallery-item.wide {
grid-column: span 2;
}
.gallery-section-v1 .gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.gallery-section-v1 .gallery-item:hover img {
transform: scale(1.05);
}
.gallery-section-v1 .gallery-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(139, 26, 47, 0.8));
color: #F5F0E8;
padding: 32px 20px 20px 20px;
font-family: 'Lato', sans-serif;
font-size: 14px;
line-height: 1.4;
opacity: 0;
transition: opacity 0.3s ease;
}
.gallery-section-v1 .gallery-item:hover .gallery-caption {
opacity: 1;
}
@media (max-width: 1024px) {
.gallery-section-v1 .gallery-grid {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 250px);
}
.gallery-section-v1 .gallery-item.large {
grid-column: span 2;
grid-row: span 2;
}
.gallery-section-v1 .gallery-item.wide {
grid-column: span 3;
grid-row: span 1;
}
}
@media (max-width: 768px) {
.gallery-section-v1 {
padding: 64px 24px;
}
.gallery-section-v1 h2 {
font-size: 40px;
}
.gallery-section-v1 .gallery-grid {
grid-template-columns: 1fr;
grid-template-rows: repeat(5, 300px);
gap: 20px;
}
.gallery-section-v1 .gallery-item.large,
.gallery-section-v1 .gallery-item.wide {
grid-column: span 1;
grid-row: span 1;
}
.gallery-section-v1 .gallery-caption {
opacity: 1;
background: linear-gradient(transparent, rgba(139, 26, 47, 0.9));
}
}
/* === cta_v1.css === */
.cta-section-v1 {
background: #8B1A2F;
padding: 80px 48px;
}
.cta-section-v1 .cta-container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.cta-section-v1 h2 {
font-family: 'Playfair Display', serif;
font-size: 48px;
font-weight: 600;
color: #F5F0E8;
margin: 0 0 24px 0;
line-height: 1.2;
}
.cta-section-v1 .cta-description {
font-family: 'Lato', sans-serif;
font-size: 18px;
color: #F5F0E8;
line-height: 1.6;
margin: 0 0 40px 0;
max-width: 600px;
margin-left: auto;
margin-right: auto;
opacity: 0.9;
}
.cta-section-v1 .cta-actions {
display: flex;
gap: 24px;
justify-content: center;
margin-bottom: 48px;
flex-wrap: wrap;
}
.cta-section-v1 .cta-primary {
background: #F5F0E8;
color: #8B1A2F;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
border: none;
border-radius: 40px;
padding: 18px 48px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
transition: all 0.25s ease;
display: inline-block;
}
.cta-section-v1 .cta-primary:hover {
background: #E8E0D0;
transform: translateY(-2px);
box-shadow: 0 6px 28px rgba(0, 0, 0, 0.3);
}
.cta-section-v1 .cta-secondary {
background: transparent;
color: #F5F0E8;
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid #F5F0E8;
border-radius: 40px;
padding: 14px calc(36px + 0.12em) 14px 36px;
transition: all 0.25s ease;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1;
}
.cta-section-v1 .cta-secondary:hover {
background: rgba(245, 240, 232, 0.15);
}
.cta-section-v1 .cta-trust {
border-top: 1px solid rgba(245, 240, 232, 0.3);
padding-top: 32px;
}
.cta-section-v1 .trust-points {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
max-width: 600px;
margin: 0 auto;
}
.cta-section-v1 .trust-point {
display: flex;
align-items: center;
gap: 12px;
font-family: 'Lato', sans-serif;
font-size: 14px;
color: #F5F0E8;
text-align: left;
}
.cta-section-v1 .trust-icon {
color: #F5F0E8;
font-weight: bold;
font-size: 16px;
flex-shrink: 0;
}
@media (max-width: 768px) {
.cta-section-v1 {
padding: 64px 24px;
}
.cta-section-v1 h2 {
font-size: 36px;
}
.cta-section-v1 .cta-description {
font-size: 16px;
}
.cta-section-v1 .cta-actions {
flex-direction: column;
align-items: center;
}
.cta-section-v1 .trust-points {
grid-template-columns: 1fr;
gap: 12px;
}
.cta-section-v1 .trust-point {
justify-content: center;
text-align: center;
}
}
/* === footer_v1.css === */
.footer-section-v1 {
background: #F0EAD8;
padding: 64px 48px 32px 48px;
border-top: 1px solid rgba(139, 26, 47, 0.1);
}
.footer-section-v1 .footer-container {
max-width: 1400px;
margin: 0 auto;
}
.footer-section-v1 .footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 48px;
}
.footer-section-v1 .footer-brand h3 {
font-family: 'Playlist Script', cursive;
font-size: 28px;
font-weight: 400;
color: #8B1A2F;
margin: 0 0 16px 0;
line-height: 1.2;
}
.footer-section-v1 .footer-tagline {
font-family: 'Lato', sans-serif;
font-size: 14px;
color: #8B1A2F;
line-height: 1.6;
margin: 0;
opacity: 0.8;
}
.footer-section-v1 h4 {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 700;
color: #8B1A2F;
text-transform: uppercase;
letter-spacing: 0.12em;
margin: 0 0 20px 0;
}
.footer-section-v1 .contact-info {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-section-v1 .contact-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.footer-section-v1 .contact-label {
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 700;
color: #B8926A;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.footer-section-v1 .contact-link {
font-family: 'Lato', sans-serif;
font-size: 14px;
color: #8B1A2F;
text-decoration: none;
font-weight: 600;
}
.footer-section-v1 .contact-link:hover {
color: #A8203A;
}
.footer-section-v1 .contact-text {
font-family: 'Lato', sans-serif;
font-size: 14px;
color: #8B1A2F;
}
.footer-section-v1 .service-links,
.footer-section-v1 .info-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-section-v1 .service-links a,
.footer-section-v1 .info-links a {
font-family: 'Lato', sans-serif;
font-size: 14px;
color: #8B1A2F;
text-decoration: none;
transition: color 0.2s ease;
}
.footer-section-v1 .service-links a:hover,
.footer-section-v1 .info-links a:hover {
color: #A8203A;
}
.footer-section-v1 .footer-bottom {
border-top: 1px solid rgba(139, 26, 47, 0.2);
padding-top: 24px;
}
.footer-section-v1 .footer-legal {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.footer-section-v1 .footer-legal p {
font-family: 'Lato', sans-serif;
font-size: 12px;
color: #B8926A;
margin: 0;
}
.footer-section-v1 .footer-separator {
color: #B8926A;
font-size: 12px;
}
@media (max-width: 1024px) {
.footer-section-v1 .footer-content {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
}
@media (max-width: 768px) {
.footer-section-v1 {
padding: 48px 24px 24px 24px;
}
.footer-section-v1 .footer-content {
grid-template-columns: 1fr;
gap: 32px;
}
.footer-section-v1 .footer-legal {
flex-direction: column;
gap: 8px;
text-align: center;
}
.footer-section-v1 .footer-separator {
display: none;
}
}