kadence

/* ============================================================
HEIDI LYNNE PHOTOGRAPHY — DARK THEME
Matching original Manus site design
Colors: Background #0D1B28, Accent #4FAF9F, Text #F0F0F1
Fonts: Playfair Display (headings), Inter (body)
============================================================ */

/* === GOOGLE FONTS IMPORT === */
@import url(‘https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,700&family=Inter:wght@300;400;500;600;700&display=swap’);

/* === CSS VARIABLES === */
:root {
–hlp-bg-primary: #0D1B28;
–hlp-bg-deep: #070e16;
–hlp-bg-card: #1a2d3d;
–hlp-bg-secondary: #0B141F;
–hlp-text-primary: #F0F0F1;
–hlp-text-secondary: #8aa5b8;
–hlp-text-muted: #c5d8e8;
–hlp-accent: #4FAF9F;
–hlp-accent-dark: #3a8f87;
–hlp-gold: #FFB81C;
–hlp-border: #1a2d3d;
–hlp-border-light: #4a6070;
}

/* === GLOBAL DARK BACKGROUND === */
html, body,
.site,
.site-content,
#page,
.content-area,
.wp-site-blocks {
background-color: var(–hlp-bg-primary) !important;
color: var(–hlp-text-primary) !important;
}

/* === TYPOGRAPHY — BODY === */
body,
p,
li,
td,
.entry-content p,
.wp-block-paragraph {
font-family: ‘Inter’, -apple-system, BlinkMacSystemFont, sans-serif !important;
color: var(–hlp-text-primary) !important;
font-size: 1rem;
line-height: 1.7;
}

/* === TYPOGRAPHY — HEADINGS === */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.entry-title,
.page-title {
font-family: ‘Playfair Display’, Georgia, serif !important;
color: var(–hlp-text-primary) !important;
line-height: 1.2;
font-weight: 700;
}

h1, .wp-block-heading.wp-block-heading:is(h1) {
font-size: clamp(2.5rem, 7vw, 5rem) !important;
letter-spacing: 0.02em;
}

h2, .wp-block-heading.wp-block-heading:is(h2) {
font-size: clamp(2rem, 5vw, 3.5rem) !important;
letter-spacing: 0.01em;
}

h3, .wp-block-heading.wp-block-heading:is(h3) {
font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
}

h4, .wp-block-heading.wp-block-heading:is(h4) {
font-size: 1.25rem !important;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(–hlp-accent) !important;
font-family: ‘Inter’, sans-serif !important;
font-weight: 600;
}

/* === HEADER / NAVIGATION === */
.site-header,
#masthead,
.wp-block-template-part[class*=”header”],
header.site-header,
.kadence-header,
#kadence-sticky-header,
.header-wrap {
background-color: rgba(7, 14, 22, 0.95) !important;
backdrop-filter: blur(10px);
border-bottom: 1px solid var(–hlp-border) !important;
position: sticky;
top: 0;
z-index: 1000;
}

/* Site title / logo text */
.site-title,
.site-title a,
.kadence-logo-title,
.header-logo-title {
font-family: ‘Playfair Display’, serif !important;
color: var(–hlp-text-primary) !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
letter-spacing: 0.05em;
text-decoration: none !important;
}

/* Navigation links */
.main-navigation a,
.nav-menu a,
.kadence-navigation a,
#site-navigation a,
.primary-menu a,
header nav a,
.wp-block-navigation a {
font-family: ‘Inter’, sans-serif !important;
color: var(–hlp-text-secondary) !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none !important;
transition: color 0.2s ease !important;
padding: 0.5rem 1rem !important;
}

.main-navigation a:hover,
.nav-menu a:hover,
.kadence-navigation a:hover,
#site-navigation a:hover,
.primary-menu a:hover,
header nav a:hover,
.wp-block-navigation a:hover {
color: var(–hlp-accent) !important;
}

/* === MAIN CONTENT AREA === */
.site-main,
main,
#main,
.content-area,
.entry-content,
.page-content,
article.page,
article.post {
background-color: var(–hlp-bg-primary) !important;
}

/* === BLOCKS — GROUPS AND COVERS === */
.wp-block-group,
.wp-block-cover,
.wp-block-columns {
background-color: transparent;
}

/* === CARDS / SERVICE SECTIONS === */
.wp-block-column,
.wp-block-group.is-style-card,
.service-card,
.pricing-card {
background-color: var(–hlp-bg-card) !important;
border: 1px solid var(–hlp-border) !important;
border-radius: 8px;
padding: 2rem !important;
transition: border-color 0.3s ease, transform 0.3s ease;
}

.wp-block-column:hover,
.service-card:hover {
border-color: var(–hlp-accent) !important;
transform: translateY(-2px);
}

/* === SEPARATORS / DIVIDERS === */
hr,
.wp-block-separator {
border-color: var(–hlp-border) !important;
opacity: 0.5;
}

/* === LINKS === */
a {
color: var(–hlp-accent) !important;
text-decoration: none;
transition: color 0.2s ease;
}

a:hover {
color: var(–hlp-text-primary) !important;
}

/* === BUTTONS === */
.wp-block-button__link,
.wp-block-button .wp-block-button__link,
button[type=”submit”],
input[type=”submit”],
.btn,
.button {
background-color: var(–hlp-accent) !important;
color: #0D1B28 !important;
border: none !important;
border-radius: 4px !important;
font-family: ‘Inter’, sans-serif !important;
font-weight: 600 !important;
font-size: 0.875rem !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
padding: 0.875rem 1.75rem !important;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease !important;
text-decoration: none !important;
}

.wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:hover,
button[type=”submit”]:hover,
input[type=”submit”]:hover {
background-color: var(–hlp-accent-dark) !important;
color: #fff !important;
transform: translateY(-1px);
}

/* Outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
background-color: transparent !important;
color: var(–hlp-accent) !important;
border: 2px solid var(–hlp-accent) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
background-color: var(–hlp-accent) !important;
color: #0D1B28 !important;
}

/* === IMAGES === */
.wp-block-image img,
.wp-post-image,
.attachment-post-thumbnail,
img.wp-image {
border-radius: 8px;
display: block;
width: 100%;
height: auto;
}

/* === GALLERY === */
.wp-block-gallery {
gap: 0.5rem !important;
}

.wp-block-gallery .wp-block-image img {
border-radius: 4px;
transition: transform 0.3s ease, filter 0.3s ease;
filter: brightness(0.9) contrast(1.05);
}

.wp-block-gallery .wp-block-image img:hover {
transform: scale(1.02);
filter: brightness(1) contrast(1.1);
}

/* === LISTS === */
.wp-block-list,
ul, ol {
color: var(–hlp-text-secondary) !important;
}

.wp-block-list li,
ul li, ol li {
color: var(–hlp-text-secondary) !important;
margin-bottom: 0.5rem;
}

/* === TABLES === */
table,
.wp-block-table table {
background-color: var(–hlp-bg-card) !important;
color: var(–hlp-text-primary) !important;
border-color: var(–hlp-border) !important;
}

th {
background-color: var(–hlp-bg-secondary) !important;
color: var(–hlp-accent) !important;
font-family: ‘Inter’, sans-serif !important;
font-weight: 600 !important;
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 0.85rem !important;
}

td {
border-color: var(–hlp-border) !important;
color: var(–hlp-text-secondary) !important;
}

/* === FORMS (Contact Form 7) === */
.wpcf7 input[type=”text”],
.wpcf7 input[type=”email”],
.wpcf7 input[type=”tel”],
.wpcf7 select,
.wpcf7 textarea,
input[type=”text”],
input[type=”email”],
input[type=”tel”],
select,
textarea {
background-color: var(–hlp-bg-card) !important;
color: var(–hlp-text-primary) !important;
border: 1px solid var(–hlp-border-light) !important;
border-radius: 4px !important;
padding: 0.75rem 1rem !important;
font-family: ‘Inter’, sans-serif !important;
font-size: 0.95rem !important;
width: 100% !important;
transition: border-color 0.2s ease !important;
box-sizing: border-box;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus,
input:focus,
select:focus,
textarea:focus {
border-color: var(–hlp-accent) !important;
outline: none !important;
box-shadow: 0 0 0 2px rgba(79, 175, 159, 0.15) !important;
}

.wpcf7 label {
color: var(–hlp-text-secondary) !important;
font-family: ‘Inter’, sans-serif !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
letter-spacing: 0.05em;
display: block;
margin-bottom: 0.5rem;
}

.wpcf7 .wpcf7-submit {
background-color: var(–hlp-accent) !important;
color: #0D1B28 !important;
border: none !important;
border-radius: 4px !important;
font-family: ‘Inter’, sans-serif !important;
font-weight: 700 !important;
font-size: 0.875rem !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
padding: 0.875rem 2rem !important;
cursor: pointer !important;
transition: background-color 0.2s ease !important;
width: auto !important;
}

.wpcf7 .wpcf7-submit:hover {
background-color: var(–hlp-accent-dark) !important;
color: #fff !important;
}

/* === FOOTER === */
.site-footer,
#colophon,
footer.site-footer,
.footer-wrap {
background-color: var(–hlp-bg-deep) !important;
color: var(–hlp-text-secondary) !important;
border-top: 1px solid var(–hlp-border) !important;
padding: 3rem 0 !important;
font-family: ‘Inter’, sans-serif !important;
}

.site-footer a,
#colophon a {
color: var(–hlp-text-muted) !important;
}

.site-footer a:hover,
#colophon a:hover {
color: var(–hlp-accent) !important;
}

/* === SIDEBAR / WIDGETS === */
.widget-area,
.widget,
aside {
background-color: var(–hlp-bg-card) !important;
color: var(–hlp-text-secondary) !important;
}

/* === BREADCRUMBS === */
.breadcrumb,
.rank-math-breadcrumb {
color: var(–hlp-text-muted) !important;
font-size: 0.85rem !important;
}

.breadcrumb a,
.rank-math-breadcrumb a {
color: var(–hlp-text-secondary) !important;
}

/* === ACCENT TEXT HIGHLIGHTS === */
strong, b {
color: var(–hlp-text-primary) !important;
font-weight: 700;
}

em, i {
color: var(–hlp-text-muted) !important;
}

/* Teal accent for stat numbers and key callouts */
.wp-block-heading + p strong,
.stats-number {
color: var(–hlp-accent) !important;
}

/* === SECTION BACKGROUNDS — ALTERNATING === */
.wp-block-group:nth-child(even) {
background-color: var(–hlp-bg-secondary) !important;
}

/* === FEATURED IMAGE HERO TREATMENT === */
.post-thumbnail,
.wp-post-image-wrap,
.featured-image-wrap {
position: relative;
overflow: hidden;
}

.post-thumbnail::after,
.wp-post-image-wrap::after {
content: ”;
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 40%, rgba(11, 20, 31, 0.85) 100%);
pointer-events: none;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
width: 6px;
background-color: var(–hlp-bg-deep);
}

::-webkit-scrollbar-thumb {
background-color: var(–hlp-border-light);
border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
background-color: var(–hlp-accent);
}

/* === SELECTION === */
::selection {
background-color: rgba(79, 175, 159, 0.3);
color: var(–hlp-text-primary);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
h1, .wp-block-heading.wp-block-heading:is(h1) {
font-size: clamp(2rem, 8vw, 3rem) !important;
}
h2, .wp-block-heading.wp-block-heading:is(h2) {
font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
}
.wp-block-column {
padding: 1.5rem !important;
}
}

/* === HERO BAR FIX === */
.entry-hero-container-inner {
background: transparent !important;
}