@import url("https://fonts.googleapis.com/css2?family=Karma:wght@300;400;500;600&display=swap");
/* ==========================================================
NINE3 DESIGNS — PETROL · SIGNATURE THEME
----------------------------------------------------------
New brand palette:
Petrol #174B50 feature panels, buttons, headings, brand details
Porcelain #F5F1E8 main canvas, sections, portfolio, carousels
Graphite #272B2B body copy, fine details, secondary backgrounds
Mist #DCE9E5 small panels, dividers, shapes, supporting details
HOW IT WORKS
Load this file LAST on nine3 pages (after nine3-enquiry.css):
It re-points the design tokens, then re-skins every rule in
variables / base / layout / components / animations /
responsive / portfolio / portfolio-balkan / nine3-enquiry
that still carries the old olive-gold palette.
The weddings section never loads this file, so /weddings
keeps its existing olive-gold look untouched.
========================================================== */
/* ==========================================================
1. DESIGN TOKENS
========================================================== */
:root {
/* --- Petrol (was olive green) --- */
--primary: #174B50;
--primary-dark: #0F3A3E;
--primary-light: #1F5D64;
/* --- Mist (was gold) --- */
--accent: #DCE9E5;
--accent-light: #ECF3F0;
--accent-deep: #123E42; /* tiny uppercase labels on light grounds */
/* --- Canvas --- */
--white: #FFFFFF;
--off-white: #F5F1E8; /* porcelain — main canvas */
--cream: #EFECE5; /* deeper porcelain — alternate bands */
--light-grey: #DCE9E5; /* mist — dividers / small panels */
/* --- Ink --- */
--dark: #272B2B;
--text: #272B2B; /* graphite body copy */
--text-light: #4E5A5A; /* softened graphite */
/* --- Legacy names still referenced by older rules --- */
--green: #174B50;
--green-dark: #0F3A3E;
--green-light: #1F5D64;
--gold: #DCE9E5;
--gold-light: #ECF3F0;
--ivory: #F5F1E8;
/* --- Signature ink --- */
--sig-ink: #174B50;
/* --- Enquiry stylesheet tokens --- */
--n3-olive: #174B50;
--n3-gold: #DCE9E5;
--n3-ivory: #F5F1E8;
--n3-ink: #272B2B;
--n3-border: #9FB4AE;
}
/* ==========================================================
2. BASE SKIN — canvas, type, buttons
========================================================== */
::selection {
background: #174B50;
color: #F5F1E8;
}
body {
background: #F5F1E8 !important;
color: #272B2B !important;
}
h1, h2, h3, h4, h5, h6 {
color: #174B50;
}
p {
color: #4E5A5A;
}
/* Small caps labels: petrol on light grounds (mist unreadable) */
.section-label,
.section-title span {
color: #174B50 !important;
}
/* Alternating white panels on the porcelain canvas */
section:nth-of-type(even) {
background: #FFFFFF;
}
section:nth-of-type(even) h2,
section:nth-of-type(even) h3,
section:nth-of-type(even) h4 {
color: #174B50;
}
section:nth-of-type(even) p {
color: #4E5A5A;
}
/* Buttons: petrol fill by default */
.btn-primary {
background: #174B50;
color: #F5F1E8;
}
.btn-primary:hover {
background: #0F3A3E;
color: #F5F1E8;
}
.btn-outline {
border-color: #174B50;
color: #174B50;
}
.btn-outline:hover {
background: #174B50;
color: #F5F1E8;
}
/* Back to top */
.back-to-top {
background: #174B50 !important;
color: #F5F1E8 !important;
}
/* ==========================================================
3. HEADER + NAVIGATION
========================================================== */
.site-header {
background: #174B50 !important;
border-bottom: 1px solid rgba(220, 233, 229, .14) !important;
}
.main-nav a {
color: #F5F1E8;
}
.main-nav a:hover,
.main-nav a.active {
color: #DCE9E5;
}
.main-nav a::after {
background: #DCE9E5;
}
.main-nav a.active::after {
background: #DCE9E5;
}
/* Nine3 Weddings pill in the header (mist chip, petrol text) */
.header-container > .btn {
background: #DCE9E5 !important;
color: #174B50 !important;
}
.header-container > .btn:hover {
background: #ECF3F0 !important;
color: #174B50 !important;
}
/* Mobile toggle + slide-down nav */
.mobile-toggle span {
background: #F5F1E8 !important;
}
.main-nav {
background: #174B50 !important;
border-top: 1px solid rgba(220, 233, 229, .16) !important;
}
.main-nav li {
border-bottom: 1px solid rgba(220, 233, 229, .16) !important;
}
.main-nav li > a {
color: #F5F1E8 !important;
}
.main-nav li > a:hover,
.main-nav li > a:focus,
.main-nav li > a.active {
color: #DCE9E5 !important;
}
.main-nav .sister-site-mobile a {
background: #DCE9E5 !important;
border: 1px solid #DCE9E5 !important;
color: #174B50 !important;
}
.sister-site-mobile {
border-top: 1px solid rgba(220, 233, 229, .35) !important;
}
.main-nav .sister-site-mobile a:hover {
background: #ECF3F0 !important;
}
/* About dropdown menu */
.site-header .main-nav .nav-dropdown-menu {
background: #FFFFFF !important;
border: 1px solid rgba(23, 75, 80, .12) !important;
}
.site-header .main-nav .nav-dropdown-menu a {
color: #272B2B;
}
.site-header .main-nav .nav-dropdown-menu a:hover,
.site-header .main-nav .nav-dropdown-menu a:focus {
background: rgba(220, 233, 229, .55);
color: #174B50;
}
.site-header .main-nav .nav-dropdown-menu a.active {
color: #123E42;
}
/* ==========================================================
4. HERO + STATS / MARQUEE
========================================================== */
.hero {
background:
radial-gradient(
circle at top right,
rgba(220, 233, 229, .12),
transparent 40%
),
linear-gradient(
180deg,
#174B50,
#0F3A3E
) !important;
}
.hero h1,
.hero h2 {
color: #F5F1E8 !important;
}
.hero-text p {
color: rgba(245, 241, 232, .85) !important;
}
.hero-tag {
background: rgba(220, 233, 229, .12);
color: #DCE9E5;
}
.hero-image::before {
background:
radial-gradient(
circle,
rgba(220, 233, 229, .12),
transparent 70%
);
}
/* Hero buttons: mist CTA + porcelain outline on the petrol panel */
.hero .btn-primary,
.hero-buttons .btn-primary {
background: #DCE9E5 !important;
color: #174B50 !important;
}
.hero .btn-primary:hover,
.hero-buttons .btn-primary:hover {
background: #ECF3F0 !important;
color: #174B50 !important;
}
.hero .btn-secondary {
border-color: rgba(220, 233, 229, .45);
color: #F5F1E8;
}
.hero .btn-secondary:hover {
background: rgba(220, 233, 229, .12);
}
/* Trust banner under the hero */
.stats {
background: #F5F1E8 !important;
}
.stat-item {
color: #272B2B !important;
}
.stat-item i {
color: #174B50 !important;
}
.stat-item:not(:last-child) {
border-right: 1px solid rgba(23, 75, 80, .18) !important;
}
/* Marquee strip */
.n3-marquee {
background: #F5F1E8 !important;
border-top: 1px solid rgba(23, 75, 80, .16) !important;
border-bottom: 1px solid rgba(23, 75, 80, .16) !important;
}
.n3-marquee-group em {
color: rgba(23, 75, 80, .55);
}
.mobile-stats-ticker {
border-top: 1px solid rgba(23, 75, 80, .15) !important;
border-bottom: 1px solid rgba(23, 75, 80, .15) !important;
}
/* Scroll progress bar */
.scroll-progress,
#scroll-progress {
background: linear-gradient(90deg, #DCE9E5, #FFFFFF) !important;
}
/* ==========================================================
5. FOOTER (both versions)
========================================================== */
.site-footer {
background: #174B50 !important;
color: #F5F1E8 !important;
}
.site-footer h4 {
color: #DCE9E5 !important;
}
.site-footer p {
color: rgba(245, 241, 232, .78) !important;
}
.site-footer a {
color: #F5F1E8 !important;
}
.site-footer a:hover {
color: #DCE9E5 !important;
}
.footer-email {
color: #F5F1E8 !important;
}
.footer-email:hover {
color: #DCE9E5 !important;
}
.footer-brand p {
color: rgba(245, 241, 232, .78) !important;
}
/* Social circles */
.footer-social a,
.footer-socials a {
background: rgba(220, 233, 229, .08);
border: 1px solid rgba(220, 233, 229, .5) !important;
color: #F5F1E8 !important;
}
.footer-social a:hover,
.footer-socials a:hover {
background: #DCE9E5 !important;
border-color: #DCE9E5 !important;
color: #174B50 !important;
}
/* Footer CTA button sits on petrol — flip to mist */
.footer-brand .btn {
background: #DCE9E5 !important;
border-color: #DCE9E5 !important;
color: #174B50 !important;
}
.footer-brand .btn:hover {
background: #ECF3F0 !important;
color: #174B50 !important;
}
/* Bottom bar */
.footer-bottom {
border-top: 1px solid rgba(220, 233, 229, .18) !important;
}
.footer-bottom p {
color: rgba(245, 241, 232, .72) !important;
}
.footer-legal a {
color: rgba(245, 241, 232, .7) !important;
}
.footer-legal a:hover {
color: #DCE9E5 !important;
}
.footer-legal span {
color: rgba(245, 241, 232, .35) !important;
}
.footer-credit {
color: rgba(245, 241, 232, .6) !important;
}
.footer-credit span {
color: #DCE9E5 !important;
}
/* Footer v2 (weddings-style footer used on some pages) */
.site-footer.footer-v2 {
background: #123F44 !important;
}
.site-footer.footer-v2 h4,
.site-footer.footer-v2 .fv-col strong {
color: #DCE9E5 !important;
}
.site-footer.footer-v2 .fv-col > a {
color: #F5F1E8 !important;
}
.site-footer.footer-v2 .fv-col > a:hover {
color: #DCE9E5 !important;
}
.site-footer.footer-v2 .fv-email {
color: #F5F1E8 !important;
}
.site-footer.footer-v2 .fv-email:hover {
color: #DCE9E5 !important;
}
.site-footer.footer-v2 .fv-social a {
border: 1px solid rgba(220, 233, 229, .5) !important;
color: #DCE9E5 !important;
}
.site-footer.footer-v2 .fv-social a:hover {
background: #DCE9E5 !important;
border-color: #DCE9E5 !important;
color: #174B50 !important;
}
.site-footer.footer-v2 .fv-legal a {
color: #DCE9E5 !important;
}
/* ==========================================================
6. CARDS · SERVICES · PORTFOLIO · PRICING · FAQ
========================================================== */
/* Glass cards → solid white cards on porcelain */
.service-card,
.portfolio-card,
.contact-card {
background: #FFFFFF !important;
border: 1px solid rgba(23, 75, 80, .12) !important;
}
.service-card:hover,
.portfolio-card:hover,
.contact-card:hover {
border-color: rgba(23, 75, 80, .35) !important;
}
.service-icon {
background: #174B50 !important;
color: #DCE9E5 !important;
}
.service-card:hover .service-icon {
background: #DCE9E5 !important;
color: #174B50 !important;
}
.portfolio-content {
background: #FFFFFF !important;
}
.portfolio-content p {
color: #4E5A5A !important;
}
/* Case studies */
.case-study {
background: #F5F1E8 !important;
}
.case-study.alt {
background: var(--cream) !important;
}
.case-content p {
color: #4E5A5A !important;
}
.case-content h2::after {
background: #174B50;
}
.case-category {
color: #123E42 !important;
}
.project-services span {
background: #174B50 !important;
color: #F5F1E8 !important;
}
.project-services span:hover {
background: #1F5D64 !important;
color: #F5F1E8 !important;
}
/* Clients */
.clients {
background: #F5F1E8 !important;
}
/* FAQ band */
.faq-section {
background: #174B50 !important;
}
.faq-section h2 {
color: #F5F1E8 !important;
}
.faq-section .section-title p {
color: rgba(245, 241, 232, .85) !important;
}
.faq-list details {
background: #FFFFFF !important;
}
.faq-list summary {
color: #174B50 !important;
}
.faq-list summary::after {
color: #174B50 !important;
}
.faq-list details[open] {
border-top: 4px solid #174B50 !important;
}
.faq-list p {
color: #4E5A5A !important;
}
/* Why choose us (dark petrol panel) */
.why-us,
.why-contact,
.why-section,
.why-nine3 {
background: #174B50 !important;
}
.why-us h3,
.why-section .section-title h2,
.why-nine3-grid h2,
.why-nine3-item h3 {
color: #F5F1E8 !important;
}
.why-section .section-title span {
color: #DCE9E5 !important;
}
.why-us .service-card,
.why-section .service-card,
.process .service-card {
background: #FFFFFF !important;
}
.why-us h3,
.why-section .service-card h3,
.process h3,
.process h4 {
color: #174B50 !important;
}
.why-section .service-card p,
.process p {
color: #4E5A5A !important;
}
.closing-message {
border-top: 1px solid rgba(220, 233, 229, .25) !important;
color: #F5F1E8 !important;
}
/* Why Nine3 interactive list */
.why-nine3-grid p {
color: rgba(245, 241, 232, .8) !important;
}
.why-nine3-list,
.why-nine3-item,
.why-nine3-item:nth-child(3n + 2),
.why-nine3-item:nth-child(3n + 3),
.why-nine3-item:nth-child(even) {
border-color: rgba(220, 233, 229, .2) !important;
}
.why-nine3-item span {
color: #DCE9E5 !important;
border: 1px solid rgba(220, 233, 229, .45) !important;
}
.why-nine3-item:hover {
background: rgba(220, 233, 229, .07) !important;
}
.why-nine3-item:hover span {
background: #DCE9E5 !important;
color: #174B50 !important;
}
.nine3-credentials span {
color: rgba(245, 241, 232, .65) !important;
}
.nine3-credentials span::before {
color: #DCE9E5 !important;
}
/* Services feature panel */
.service-feature {
background: #FFFFFF !important;
border-color: rgba(23, 75, 80, .15) !important;
}
.service-feature-heading {
border-color: rgba(23, 75, 80, .14) !important;
}
.service-feature-heading::before {
background: #174B50 !important;
}
.service-feature-heading .section-label {
color: #174B50 !important;
}
.service-feature-content::after {
color: rgba(23, 75, 80, .08) !important;
}
.service-feature:hover {
border-color: rgba(23, 75, 80, .35) !important;
}
.collection-link {
color: #174B50 !important;
}
.collection-link::after {
background: #174B50 !important;
}
.collection-link span {
color: #174B50 !important;
}
/* Print & marketing list */
.service-list-grid,
.service-list-item,
.service-list-item:nth-child(even) {
border-color: rgba(23, 75, 80, .16) !important;
}
.service-list-item::before {
background: #174B50 !important;
}
.service-list-item > span {
color: #174B50 !important;
}
.service-list-item h3 {
color: #174B50 !important;
}
.service-list-item p {
color: #5E6D6B !important;
}
.service-list-item:hover {
background: rgba(23, 75, 80, .05) !important;
}
.service-list-item:hover p {
color: #123E42 !important;
}
/* Extras */
.extras-section {
background: var(--cream) !important;
}
.extras-heading h2 {
color: #174B50 !important;
}
.extras-table,
.extra-row {
border-color: rgba(23, 75, 80, .18) !important;
}
.extra-row span {
color: #4E5A5A !important;
}
.extra-row strong {
color: #174B50 !important;
}
.extra-row:hover {
background: rgba(23, 75, 80, .06) !important;
}
/* Pricing */
.pricing-card {
background: #FFFFFF !important;
border-color: rgba(23, 75, 80, .14) !important;
}
.pricing-card:hover {
border-color: rgba(23, 75, 80, .4) !important;
}
.pricing-card.featured {
border-color: #174B50 !important;
}
.pricing-card.featured::before {
background: #174B50 !important;
}
.pricing-card.featured::after {
background: #DCE9E5 !important;
color: #174B50 !important;
}
.pricing-eyebrow,
.pricing-eyebrow i {
color: #123E42 !important;
}
.pricing-description {
color: #4E5A5A !important;
}
.pricing-divider {
background: rgba(23, 75, 80, .14) !important;
}
.pricing-footer .price {
color: #174B50 !important;
}
.pricing-footer .price span {
color: #5E6D6B !important;
}
.pricing-card li {
color: #4E5A5A !important;
}
.pricing-card li::before {
color: #174B50 !important;
}
.pricing-card .btn-outline {
border: 1px solid #174B50 !important;
color: #174B50 !important;
}
.pricing-card .btn-outline:hover {
background: #174B50 !important;
color: #F5F1E8 !important;
}
.pricing-card.featured .btn-primary {
background: #174B50 !important;
border: 1px solid #174B50 !important;
color: #F5F1E8 !important;
}
.pricing-card.featured .btn-primary:hover {
background: transparent !important;
border-color: #174B50 !important;
color: #174B50 !important;
}
/* CTA band */
.cta,
.services-page .cta {
background: #F5F1E8 !important;
}
.cta .section-label {
color: #174B50 !important;
}
.cta h2 {
color: #174B50 !important;
}
.cta p {
color: #4E5A5A !important;
}
.cta .btn {
background: #174B50 !important;
border-color: #174B50 !important;
color: #F5F1E8 !important;
}
.cta .btn:hover {
background: transparent !important;
border-color: #123E42 !important;
color: #123E42 !important;
}
/* View full portfolio button */
.portfolio .section-button .btn {
background: #174B50 !important;
border: 1px solid #174B50 !important;
color: #F5F1E8 !important;
}
.portfolio .section-button .btn:hover {
background: transparent !important;
border-color: #123E42 !important;
color: #123E42 !important;
}
/* Homepage recent projects */
.portfolio {
background: var(--cream) !important;
}
.portfolio .section-title span {
color: #174B50 !important;
}
.portfolio .section-title h2 {
color: #174B50 !important;
}
.portfolio .section-title p {
color: #4E5A5A !important;
}
.portfolio-card::after {
background: #174B50 !important;
}
.portfolio-content .case-category {
color: #123E42 !important;
}
.portfolio-content h3 {
color: #174B50 !important;
}
.portfolio-content p {
color: #4E5A5A !important;
}
/* ==========================================================
7. INNER PAGES — HEROES, ABOUT, CONTACT, WORK, LEGAL
========================================================== */
.page-hero {
background: #F5F1E8 !important;
color: #272B2B !important;
}
.page-hero .section-label {
color: #174B50 !important;
}
.page-hero h1,
.page-hero h2 {
color: #174B50 !important;
}
.page-hero p {
color: #4E5A5A !important;
}
/* About */
.about-hero {
background: #F5F1E8 !important;
color: #272B2B !important;
}
.about-hero .section-label {
color: #174B50 !important;
}
.about-hero h1 {
color: #174B50 !important;
}
.about-hero p {
color: #4E5A5A !important;
}
.about-story {
background: #F5F1E8 !important;
}
.about-story-content h2,
.about-story-content p {
color: #4E5A5A !important;
}
.about-story-content .section-label {
color: #174B50 !important;
}
.about-page .about-story {
background: #174B50 !important;
}
.about-page .about-story h2 {
color: #F5F1E8 !important;
}
.about-page .about-story p {
color: rgba(245, 241, 232, .88) !important;
}
.about-story .about-grid {
color: #F5F1E8 !important;
}
.about-story h2 {
color: #F5F1E8 !important;
}
.about-story p {
color: rgba(245, 241, 232, .85) !important;
}
.about-story img {
box-shadow: 0 30px 60px rgba(15, 58, 62, .45) !important;
}
/* About nine3 — why panel + mist overlap card */
section.about-nine3,
body section.about-nine3,
.about-nine3.about-nine3 {
background: #F5F1E8 !important;
background-color: #F5F1E8 !important;
color: #272B2B !important;
}
.about-nine3 .section-label,
.about-nine3-content .section-label,
body section.about-nine3 .about-nine3-content .section-label,
body section.about-nine3 .feature-list li span,
.about-nine3 .feature-list li span {
color: #174B50 !important;
}
.about-nine3 .about-nine3-content h2,
.about-nine3-content h2,
body section.about-nine3 .about-nine3-content h2 {
color: #174B50 !important;
}
.about-nine3 .about-nine3-content p,
.about-nine3-content p,
body section.about-nine3 .about-nine3-content p,
.about-nine3 .feature-list li,
body section.about-nine3 .feature-list li {
color: #4E5A5A !important;
}
.about-nine3 .feature-list,
.about-nine3 .about-nine3-image {
border-color: rgba(23, 75, 80, .16) !important;
}
/* The overlapping card becomes a Mist panel */
.about-nine3 .about-nine3-card-content,
body section.about-nine3 .about-nine3-card-content {
background: #DCE9E5 !important;
border: 1px solid rgba(23, 75, 80, .16) !important;
color: #272B2B !important;
}
.about-nine3 .about-nine3-card-content::before {
background: #174B50 !important;
}
.about-nine3 .about-nine3-card-content .section-label {
color: #174B50 !important;
}
.about-nine3 .about-nine3-card-content h2 {
color: #174B50 !important;
}
.about-nine3 .about-nine3-card-content p {
color: #272B2B !important;
}
.about-nine3 .about-nine3-card-content .btn-primary {
background: #174B50 !important;
border: 1px solid #174B50 !important;
color: #F5F1E8 !important;
}
.about-nine3 .about-nine3-card-content .btn-primary:hover {
background: transparent !important;
border-color: #174B50 !important;
color: #174B50 !important;
}
/* Contact */
.contact-page {
background: #F5F1E8 !important;
}
.contact-page h1,
.contact-page h2,
.contact-page h3 {
color: #174B50 !important;
}
.contact-page .contact-hero {
background: #F5F1E8 !important;
}
.contact-page .contact-hero h1 {
color: #174B50 !important;
}
.contact-page .contact-hero p,
.contact-page .page-hero p,
.contact-page .contact-content p {
color: #4E5A5A !important;
}
.contact-page .contact-section {
background: var(--cream) !important;
}
.contact-page .contact-content h2 {
color: #174B50 !important;
}
.contact-page .contact-details a {
color: #174B50 !important;
}
.contact-page .contact-details i {
color: #174B50 !important;
}
.contact-page .contact-form {
background: #FFFFFF !important;
border: 1px solid rgba(23, 75, 80, .14) !important;
}
.contact-page .contact-form label {
color: #174B50 !important;
}
.contact-page .contact-form input,
.contact-page .contact-form select,
.contact-page .contact-form textarea {
background: #F5F1E8 !important;
border: 1px solid rgba(23, 75, 80, .18) !important;
color: #272B2B !important;
}
.contact-page .contact-form input:focus,
.contact-page .contact-form select:focus,
.contact-page .contact-form textarea:focus {
border-color: #174B50 !important;
box-shadow: 0 0 0 3px rgba(23, 75, 80, .12) !important;
}
/* Our work */
.work-page .featured-work-content p {
color: rgba(245, 241, 232, .85) !important;
}
.work-page .case-content *,
.work-page .case-study .case-content p,
.work-page .case-study .case-content .case-description,
.work-page .case-study .case-content p:first-of-type,
.work-page .case-study .case-content p:last-of-type,
.work-page .case-content p,
.work-page .case-content li {
color: #272B2B !important;
}
.work-page .case-content h2,
.work-page .featured-work-content p {
color: #174B50 !important;
}
.work-page .case-content .case-category {
color: #123E42 !important;
}
/* Legal pages */
.legal-page {
background: #F5F1E8 !important;
}
.legal-header .section-label {
color: #174B50 !important;
}
.legal-header h1 {
color: #174B50 !important;
}
.legal-header p {
color: #4E5A5A !important;
}
.legal-updated {
color: #5E6D6B !important;
}
.legal-content {
border: 1px solid rgba(23, 75, 80, .12) !important;
}
.legal-content section {
border-bottom: 1px solid rgba(23, 75, 80, .1) !important;
}
.legal-content h2 {
color: #174B50 !important;
}
.legal-content h2::before {
background: #174B50 !important;
}
.legal-content p,
.legal-content li {
color: #4E5A5A !important;
}
.legal-content li::marker {
color: #174B50 !important;
}
.legal-content a {
color: #174B50 !important;
text-decoration-color: rgba(23, 75, 80, .4) !important;
}
.legal-content a:hover {
color: #123E42 !important;
}
.legal-contact {
background: var(--cream) !important;
border-left: 3px solid #174B50 !important;
}
.legal-contact strong {
color: #174B50 !important;
}
/* ==========================================================
8. PORTFOLIO PAGE + BALKAN GALLERY
========================================================== */
.portfolio-hero {
background: linear-gradient(165deg, #0F3A3E 0%, #174B50 100%) !important;
}
.portfolio-hero::before,
.portfolio-hero::after {
border-color: rgba(220, 233, 229, .12) !important;
}
.hero-top {
border-bottom: 1px solid rgba(220, 233, 229, .18) !important;
}
.portfolio-hero .section-label {
color: rgba(245, 241, 232, .65) !important;
}
.hero-number {
color: rgba(245, 241, 232, .5) !important;
}
.hero-content h1 span {
color: #DCE9E5 !important;
}
.hero-description p {
color: rgba(245, 241, 232, .7) !important;
}
.portfolio-intro,
.portfolio-work,
.portfolio-cta {
background: var(--cream) !important;
}
.intro-line {
background: #174B50 !important;
}
.portfolio-project,
.portfolio-project:last-child {
border-color: #DCE9E5 !important;
}
.project-number,
.project-category {
color: #123E42 !important;
}
.project-heading h2 span {
color: #123E42 !important;
}
.project-image::after {
background: rgba(15, 58, 62, .92) !important;
color: #F5F1E8 !important;
}
.testimonial-mark {
color: #174B50 !important;
}
/* Big mist CTA panel */
.portfolio-cta-inner {
background: #DCE9E5 !important;
}
.portfolio-cta-inner::after {
color: rgba(23, 75, 80, .07) !important;
}
.portfolio-cta .section-label {
color: rgba(23, 75, 80, .65) !important;
}
.portfolio-cta h2 {
color: #0F3A3E !important;
}
.portfolio-cta p {
color: rgba(23, 75, 80, .8) !important;
}
.portfolio-cta .btn {
background: #174B50 !important;
color: #F5F1E8 !important;
}
/* Trusted-by band */
main section.trusted {
background: #0F3A3E !important;
}
main section.trusted .section-label {
color: rgba(245, 241, 232, .55) !important;
}
main section.trusted .trusted-heading h2 {
color: #DCE9E5 !important;
}
main section.trusted .trusted-copy p {
color: rgba(245, 241, 232, .68) !important;
}
.client-logos,
.client-logo {
border-color: rgba(220, 233, 229, .18) !important;
}
/* Balkan gallery */
main section.gallery .row ul li a:hover::after {
background: rgba(15, 58, 62, .55) !important;
}
.port-number {
color: #123E42 !important;
}
.port-inner h2 span {
color: #123E42 !important;
}
.port-link {
border-bottom: 2px solid #174B50 !important;
}
.port-link:hover {
color: #123E42 !important;
}
/* ==========================================================
9. JOURNAL / BLOG + SIGNATURE + LIGHTBOX
========================================================== */
.blog-hero {
background: var(--cream) !important;
}
.blog-hero .section-label {
color: #174B50 !important;
opacity: 1 !important;
}
.blog-hero h1 {
color: #174B50 !important;
}
.blog-hero h1 span {
color: #272B2B !important;
}
.blog-hero p {
color: #4E5A5A !important;
}
.blog-posts {
background: var(--cream) !important;
}
.blog-posts .section-title span {
color: #174B50 !important;
opacity: 1 !important;
}
.blog-posts .section-title h2 {
color: #174B50 !important;
}
.blog-card {
background: #FFFFFF !important;
}
.blog-card-body .blog-cat {
color: #123E42 !important;
}
.blog-card-body h3 {
color: #174B50 !important;
}
.blog-card-body p {
color: #4E5A5A !important;
}
.blog-card-meta,
.blog-card .blog-meta {
color: #5E6D6B !important;
}
.blog-link {
color: #174B50 !important;
}
.blog-link span {
color: rgba(23, 75, 80, .55) !important;
}
.blog-link:hover {
color: #123E42 !important;
}
.blog-coming {
background: #174B50 !important;
}
.blog-coming .section-title span {
color: #DCE9E5 !important;
}
.blog-coming .section-title h2 {
color: #F5F1E8 !important;
}
.blog-placeholder,
.jt-image {
background: linear-gradient(135deg, #0F3A3E, #174B50) !important;
}
/* Journal teasers on the homepage */
.journal-teaser-list .jt-title {
color: #174B50 !important;
}
.journal-teaser-list a:hover .jt-title,
.journal-teaser-list a:focus-visible .jt-title {
text-decoration-color: rgba(23, 75, 80, .5) !important;
}
.journal-teaser-list .jt-label {
color: #123E42 !important;
}
/* Journal article body */
.journal-body,
.journal-body p {
color: #272B2B !important;
}
.journal-body h2,
.journal-body h3,
.journal-body strong {
color: #174B50 !important;
}
.journal-body li::marker {
color: #174B50 !important;
}
.journal-body blockquote {
border-left: 3px solid #174B50 !important;
background: rgba(220, 233, 229, .35) !important;
color: #174B50 !important;
}
.journal-back,
.journal-nextprev a {
color: #174B50 !important;
}
.journal-back:hover,
.journal-back:focus-visible,
.journal-nextprev a:hover,
.journal-nextprev a:focus-visible {
color: #123E42 !important;
}
/* Cost table + budget cards (journal articles) */
.cost-table th {
background: #174B50 !important;
color: #F5F1E8 !important;
}
.cost-table td:first-child {
color: #174B50 !important;
}
.budget-card .bp {
color: #174B50 !important;
}
.budget-card .bn {
color: #123E42 !important;
}
.budget-card p {
color: #4E5A5A !important;
}
.budget-card.featured {
background: #174B50 !important;
border-color: #174B50 !important;
}
.budget-card.featured .bp {
color: #F5F1E8 !important;
}
.budget-card.featured .bn {
color: #DCE9E5 !important;
}
.cost-cta {
background: #174B50 !important;
}
.journal-article .cost-cta h2 {
color: #F5F1E8 !important;
}
.journal-article .cost-cta-note {
color: rgba(245, 241, 232, .7) !important;
}
.journal-article .cost-cta-note em {
color: #DCE9E5 !important;
}
/* Signature (traced ink) */
.signature-svg .sig-name tspan,
.signature-svg .sig-flourish,
.signature-svg .sig-role {
color: #174B50;
}
.signature-block .sig-role {
fill: #174B50;
}
/* Lightbox chrome */
.image-lightbox {
background: rgba(15, 26, 27, .92) !important;
}
.n3-lightbox-badge,
.image-lightbox .n3-count {
background: rgba(15, 58, 62, .92) !important;
color: #F5F1E8 !important;
}
/* ==========================================================
10. ENQUIRY EXTRAS (n3- components)
========================================================== */
.n3-hero-local {
color: rgba(245, 241, 232, .8) !important;
}
.n3-hero-local b {
color: #DCE9E5 !important;
}
.n3-proof {
background: #F5F1E8 !important;
}
.n3-quote-stars {
color: #174B50 !important;
}
.n3-quote-card figcaption {
color: #5E6D6B !important;
}
.n3-proof-badge {
color: #272B2B !important;
border-color: #9FB4AE !important;
}
.n3-proof-badge .n3-star {
color: #174B50 !important;
}
.n3-closing {
background: #174B50 !important;
color: #F5F1E8 !important;
}
.n3-closing .n3-label {
color: #DCE9E5 !important;
}
.n3-closing h2 {
color: #F5F1E8 !important;
}
.n3-closing p,
.n3-closing .n3-local {
color: rgba(245, 241, 232, .82) !important;
}
.n3-closing .n3-actions .btn {
background: #DCE9E5 !important;
color: #174B50 !important;
}
.n3-closing .n3-actions .btn:hover {
background: #ECF3F0 !important;
}
.n3-form-quote {
background: rgba(23, 75, 80, .06) !important;
border-left: 3px solid #174B50 !important;
}
.n3-form-quote span {
color: #5E6D6B !important;
}
.n3-package-chip b {
color: #DCE9E5 !important;
}
.n3-mobile-cta {
background: rgba(15, 42, 45, .95) !important;
}
.n3-call-line a {
color: #DCE9E5 !important;
}
.n3-call-line a:hover {
border-bottom-color: #DCE9E5 !important;
}
/* ==========================================================
11. FORM FOCUS STATES (global)
========================================================== */
input:focus,
textarea:focus,
select:focus,
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
border-color: #174B50 !important;
box-shadow: 0 0 0 4px rgba(23, 75, 80, .12) !important;
}
input,
textarea,
select {
color: #272B2B;
}
label {
color: #174B50;
}
.contact-form {
background: #FFFFFF !important;
color: #272B2B !important;
}
.contact-form h2 {
color: #174B50 !important;
}
.contact-about {
background: #FFFFFF !important;
color: #272B2B !important;
}
.contact-about h2,
.contact-about p {
color: #174B50 !important;
}
.contact-about p {
color: #4E5A5A !important;
}
.contact-about strong,
.contact-about a {
color: #174B50 !important;
}
.contact-about a:hover {
color: #0F3A3E !important;
}
.contact-details {
border-top: 1px solid rgba(23, 75, 80, .14) !important;
}
.detail h5 {
color: #174B50 !important;
}
.detail a {
color: #272B2B !important;
}
.signature {
border-top: 1px solid rgba(23, 75, 80, .14) !important;
color: #272B2B !important;
}
.signature span {
color: #174B50 !important;
}
/* ==========================================================
12. LEGACY RULES THAT STILL POINT AT OLD TOKENS
(kept harmless now that tokens are re-pointed)
========================================================== */
.about-nine3-card-content {
background: #DCE9E5;
}
.about-nine3 .about-nine3-card-content {
background: #DCE9E5 !important;
}
/* ==========================================================
13. HIGH-SPECIFICITY RESETS
(matches the source files' own force-block specificity,
e.g. body section.about-nine3 ... which would otherwise
beat the flat overrides above)
========================================================== */
/* --- About Nine3 split section (homepage) --- */
body section.about-nine3 .about-nine3-content .section-label {
color: #174B50 !important;
}
body section.about-nine3 .about-nine3-content h2 {
color: #174B50 !important;
}
body section.about-nine3 .about-nine3-content p {
color: #4E5A5A !important;
}
body section.about-nine3 .feature-list {
border-top: 1px solid rgba(23, 75, 80, .14) !important;
}
body section.about-nine3 .feature-list li {
color: #272B2B !important;
}
body section.about-nine3 .feature-list li span {
color: #174B50 !important;
}
body section.about-nine3 .about-nine3-card-content {
background: #DCE9E5 !important;
color: #272B2B !important;
}
body section.about-nine3 .about-nine3-card-content .section-label {
color: #174B50 !important;
}
body section.about-nine3 .about-nine3-card-content h2 {
color: #174B50 !important;
}
body section.about-nine3 .about-nine3-card-content p {
color: #272B2B !important;
}
body section.about-nine3 .about-nine3-card-content .btn-primary {
background: #174B50 !important;
border-color: #174B50 !important;
color: #F5F1E8 !important;
}
body section.about-nine3 .about-nine3-card-content .btn-primary:hover {
background: transparent !important;
border-color: #174B50 !important;
color: #174B50 !important;
}
/* --- Journal teaser list (inside the Mist card) --- */
.journal-teaser-list li + li {
border-top: 1px solid rgba(23, 75, 80, .25);
}
.journal-teaser-list .jt-date {
color: rgba(23, 75, 80, .6);
}
.journal-teaser-list a:hover .jt-title,
.journal-teaser-list a:focus-visible .jt-title {
text-decoration-color: rgba(23, 75, 80, .5);
}
/* --- Hero collage badge --- */
.collage-badge {
background: rgba(15, 58, 62, .85) !important;
border: 1px solid rgba(220, 233, 229, .5) !important;
color: #F5F1E8 !important;
}
/* --- Why-section cards (mobile force block) --- */
body .why-section .service-card h3 {
color: #174B50 !important;
}
body .why-section .service-card p {
color: #272B2B !important;
}
/* --- Process band (hard-coded olive in base.css) --- */
.process {
background: #174B50 !important;
}
/* --- Footer v2 column headings (span.fv-heading, hard-coded gold) --- */
.site-footer.footer-v2 .fv-heading {
color: #DCE9E5 !important;
}
/* --- Case-variant token used by an inline style on /contact --- */
:root {
--IVORY: #F5F1E8;
}
/* --- Section icon glyphs (the circle-question chip etc.) --- */
.section-icon i {
color: #174B50 !important;
}
.faq-section .section-icon i,
.why-contact .section-icon i,
.why-section .section-icon i {
color: #DCE9E5 !important;
}
/* =====================================================
14) SERVICES PAGE (assets/css/services.css)
Local tokens declared inside services.css + its
hard-coded rgba(254,249,243)/rgba(51,60,48) values.
===================================================== */
:root {
--bg-color: #174B50;
--text-gold: #DCE9E5;
--text-muted: rgba(245, 241, 232, .72);
--border-line: rgba(220, 233, 229, .16);
}
main section.services-hero .section-label {
color: rgba(245, 241, 232, .62) !important;
}
main section.services-hero .hero-copy {
color: rgba(245, 241, 232, .66) !important;
}
.hero-tag {
border: 1px solid rgba(245, 241, 232, .2) !important;
color: rgba(245, 241, 232, .75) !important;
}
main section.services-hero::before {
border: 1px solid rgba(245, 241, 232, .09);
}
main section.services-hero::after {
border: 1px solid rgba(245, 241, 232, .05);
}
main section.process .section-label {
color: rgba(245, 241, 232, .5) !important;
}
.process-head > p {
color: rgba(245, 241, 232, .62) !important;
}
.services-cta-inner::after {
color: rgba(39, 43, 43, .07) !important;
}
.services-cta .section-label {
color: #123E42 !important;
}
.services-cta p {
color: rgba(39, 43, 43, .75) !important;
}
/* Light-panel h2 accents in services.css resolve to mist via
--accent; deepen to petrol-dark for legibility on light. */
.services-intro-grid h2 span,
.pricing-head h2 span,
.oneoffs .oneoffs-price {
color: #123E42 !important;
}
/* =====================================================
15) PORTFOLIO PAGE (assets/css/portfolio.css)
Gold accents → petrol on light strip, mist on cards.
===================================================== */
.filter-btn:hover {
border-color: #174B50 !important;
}
.filter-btn.is-active {
background: #174B50 !important;
border-color: #174B50 !important;
color: #F5F1E8 !important;
}
.filter-btn:focus-visible {
outline: 2px solid #174B50 !important;
}
.gallery li.is-filtered-out {
background: rgba(23, 75, 80, .1) !important;
}
.promise-icon {
background: rgba(220, 233, 229, .14) !important;
color: #DCE9E5 !important;
}
.promise-card:hover {
background-color: #123E42 !important;
}
/* ==========================================================
16. ROUND-2 LEAK FIXES — hardcoded olive/gold !important
rules in shared css that section 1–15 didn't already cover.
========================================================== */
/* Services intro heading (components.css forces #404A3B !important) */
.services-intro-grid h2 {
color: #174B50 !important;
}
.services-intro-grid h2 span {
color: #123E42 !important;
}
/* Journal + blog chips (gold text / mist-on-white = illegible) */
.blog-tag {
color: #123E42 !important;
border-color: rgba(18, 62, 66, .32) !important;
}
.journal-tag {
color: #123E42 !important;
border-color: rgba(18, 62, 66, .32) !important;
}
/* Portfolio filter pills — inactive state was white-on-porcelain */
.filter-btn {
color: #272B2B !important;
background: #FFFFFF !important;
border: 1px solid rgba(18, 62, 66, .30) !important;
}
.filter-btn:hover {
color: #174B50 !important;
border-color: #174B50 !important;
}
.filter-btn:focus-visible {
outline-color: #174B50 !important;
}
/* Journal article hero (generic .page-hero stays warm #FEF9F3) */
.journal-hero {
background: #F5F1E8 !important;
}
.journal-hero .section-label {
color: #123E42 !important;
}
.journal-hero h1 {
color: #174B50 !important;
}
.journal-hero h1 span {
color: #123E42 !important;
}
.journal-hero p {
color: #4E5A5A !important;
}
/* Services pricing card leftovers (olive headings, gold outline btn) */
.pricing-card h3,
.pricing-card h4,
.pricing-footer .price {
color: #174B50 !important;
}
.pricing-card .btn-outline {
color: #123E42 !important;
border-color: rgba(18, 62, 66, .35) !important;
}
.pricing-card .btn-outline:hover {
background: #174B50 !important;
border-color: #174B50 !important;
color: #F5F1E8 !important;
}
/* Misc olive !important headings in components.css */
.collection-link {
color: #174B50 !important;
}
.service-heading h2 {
color: #174B50 !important;
}
body section.about-nine3 .about-nine3-content h2,
body section.about-nine3 .about-nine3-card-content h2,
.about-nine3-content h2,
.about-nine3-card-content h2 {
color: #174B50 !important;
}
/* Service icon accents (gold glyph / gold hover tile) */
.service-icon {
color: #174B50 !important;
}
.service-card:hover .service-icon {
background: #174B50 !important;
}
/* Footer gold accents on dark petrol → mist */
.footer-socials a:hover {
background: #DCE9E5 !important;
border-color: #DCE9E5 !important;
}
.footer-email:hover,
.footer-legal a:hover {
color: #DCE9E5 !important;
}
.footer-credit span {
color: rgba(245, 241, 232, .55) !important;
}
/* ==========================================================
SECTION 17 — CONTACT PAGE · WEDDINGS-STYLE LAYOUT
Porcelain intro → full-bleed deep petrol panel (details + form)
→ split numbered FAQ. Scoped to .contact-page only.
========================================================== */
.contact-page .contact-section{
background: #F5F1E8 !important;
padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(3.25rem, 6vw, 5rem) !important;
}
.contact-page .contact-intro{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 1rem;
margin: 0 auto clamp(2.75rem, 5vw, 4.25rem) !important;
max-width: 46rem;
}
.contact-page .contact-intro .section-label{
color: var(--accent-deep) !important;
}
.contact-page .contact-intro-title{
font-family: 'Karma', serif !important;
font-weight: 500 !important;
font-size: clamp(2.7rem, 5.4vw, 4rem) !important;
line-height: 1.06 !important;
letter-spacing: -.015em;
color: #272B2B !important;
margin: 0 !important;
}
.contact-page .contact-intro-copy{
font-size: 1.04rem !important;
line-height: 1.75 !important;
color: rgba(39,43,43,.78) !important;
max-width: 56ch;
margin: 0 !important;
}
.contact-page .contact-panel{
background: var(--accent-deep) !important;
margin-inline: calc(50% - 50vw);
padding: clamp(3rem, 6vw, 5.5rem) max(1.25rem, calc(50vw - 660px)) !important;
}
.contact-page .contact-panel .contact-grid{
display: grid !important;
grid-template-columns: .9fr 1.1fr !important;
gap: clamp(2.5rem, 5vw, 5rem) !important;
align-items: start;
}
.contact-page .contact-panel-title{
font-family: 'Karma', serif !important;
font-weight: 500 !important;
font-size: clamp(1.9rem, 3vw, 2.5rem) !important;
color: #F5F1E8 !important;
margin: 0 0 1.5rem !important;
}
.contact-page .mini-label{
display: block;
font-size: .72rem !important;
font-weight: 600;
letter-spacing: .24em !important;
text-transform: uppercase;
color: rgba(245,241,232,.6) !important;
margin: 1.5rem 0 .5rem !important;
}
.contact-page .contact-panel-email{
font-family: 'Karma', serif;
font-size: 1.12rem;
color: #F5F1E8 !important;
text-decoration: none;
border-bottom: 1px solid rgba(245,241,232,.35);
padding-bottom: 2px;
transition: border-color .25s ease;
}
.contact-page .contact-panel-email:hover{ border-color: #F5F1E8; }
.contact-page .contact-details{
display: flex !important;
flex-wrap: wrap;
gap: .75rem;
margin: 1.5rem 0 0 !important;
border-top: 0 !important;
padding-top: 0 !important;
}
.contact-page .contact-details a{
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .74rem 1.4rem !important;
border: 1px solid rgba(245,241,232,.45) !important;
border-radius: 999px;
background: transparent !important;
color: #F5F1E8 !important;
font-size: .76rem !important;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
text-decoration: none;
transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.contact-page .contact-details a i{
color: rgba(245,241,232,.85) !important;
font-size: .92rem;
}
.contact-page .contact-details a:hover{
background: #F5F1E8 !important;
color: var(--accent-deep) !important;
border-color: #F5F1E8 !important;
}
.contact-page .contact-details a:hover i{ color: var(--accent-deep) !important; }
.contact-page .contact-response-copy{
font-size: .92rem !important;
line-height: 1.7 !important;
color: rgba(245,241,232,.72) !important;
margin: .3rem 0 0 !important;
max-width: 42ch;
}
.contact-page .contact-response-copy strong{ color: #F5F1E8 !important; }
.contact-page .contact-form{
background: transparent !important;
border: 0 !important;
border-radius: 0;
box-shadow: none !important;
padding: 0 !important;
color: #F5F1E8;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.15rem 1.25rem;
margin: 0 !important;
}
.contact-page .contact-form .form-group{ margin: 0; display: flex; flex-direction: column; }
.contact-page .contact-form .form-group:nth-child(5),
.contact-page .contact-form .form-group:nth-child(6){ grid-column: 1 / -1; }
.contact-page .contact-form label{
color: rgba(245,241,232,.72) !important;
font-size: .72rem !important;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
margin-bottom: .55rem;
}
.contact-page .contact-form input,
.contact-page .contact-form select,
.contact-page .contact-form textarea{
background: rgba(245,241,232,.055) !important;
border: 1px solid rgba(245,241,232,.26) !important;
border-radius: 4px;
color: #F5F1E8 !important;
font-family: inherit;
font-size: .95rem;
padding: .85rem 1rem;
transition: border-color .25s ease, background .25s ease;
box-shadow: none !important;
}
.contact-page .contact-form ::placeholder{ color: rgba(245,241,232,.42); opacity: 1; }
.contact-page .contact-form input:focus,
.contact-page .contact-form select:focus,
.contact-page .contact-form textarea:focus{
border-color: rgba(245,241,232,.65) !important;
background: rgba(245,241,232,.09) !important;
box-shadow: none !important;
outline: none;
}
.contact-page .contact-form select option{ color: #272B2B; background: #F5F1E8; }
.contact-page .contact-form textarea{ min-height: 150px; resize: vertical; }
.contact-page .contact-form .btn.btn-primary{
grid-column: 1 / -1;
justify-self: start;
background: #DCE9E5 !important;
border: 1px solid #DCE9E5 !important;
color: var(--accent-deep) !important;
border-radius: 999px !important;
padding: .95rem 2.3rem !important;
font-size: .78rem !important;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
transition: background .25s ease, border-color .25s ease;
}
.contact-page .contact-form .btn.btn-primary:hover{
background: #F5F1E8 !important;
border-color: #F5F1E8 !important;
color: var(--accent-deep) !important;
}
.contact-page .faq-section{
background: #F5F1E8 !important;
padding: clamp(4rem, 7vw, 6.5rem) 0 !important;
}
.contact-page .faq-section .container{
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: clamp(2.5rem, 6vw, 5.5rem);
align-items: start;
}
.contact-page .faq-section .section-title{
text-align: left;
margin: 0;
max-width: none;
}
.contact-page .faq-section .section-icon{ display: none !important; }
.contact-page .faq-section .section-label{ color: var(--accent-deep) !important; }
.contact-page .faq-section .section-title h2{
font-family: 'Karma', serif !important;
font-weight: 500 !important;
font-size: clamp(2.1rem, 3.6vw, 2.9rem) !important;
line-height: 1.16 !important;
color: #272B2B !important;
margin: .35rem 0 .8rem !important;
}
.contact-page .faq-section .section-title p{
color: rgba(39,43,43,.75) !important;
margin: 0 !important;
}
.contact-page .faq-wonder{
font-family: 'Karma', serif;
font-style: italic;
font-weight: 500;
font-size: 1.45rem;
color: var(--accent-deep) !important;
margin: 2.2rem 0 .45rem !important;
}
.contact-page .faq-wonder-link{
color: #272B2B !important;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-color: rgba(39,43,43,.4);
font-size: .98rem;
}
.contact-page .faq-wonder-link:hover{ text-decoration-color: var(--accent-deep); }
.contact-page .faq-list{
display: block !important;
margin: 0 !important;
counter-reset: faq;
}
.contact-page .faq-list details{
counter-increment: faq;
position: relative;
background: transparent !important;
border: 0 !important;
border-top: 1px solid rgba(39,43,43,.22) !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
padding: 1.3rem 2.75rem 1.3rem 3.1rem !important;
margin: 0 !important;
}
.contact-page .faq-list details:last-child{
border-bottom: 1px solid rgba(39,43,43,.22) !important;
}
.contact-page .faq-list details::before{
content: "0" counter(faq);
position: absolute;
left: 0;
top: 1.55rem;
font-size: .72rem;
font-weight: 600;
letter-spacing: .12em;
color: rgba(39,43,43,.5);
}
.contact-page .faq-list summary{
display: block !important;
padding: 0 !important;
list-style: none;
cursor: pointer;
font-family: 'Karma', serif !important;
font-size: 1.16rem !important;
font-weight: 500 !important;
color: #272B2B !important;
}
.contact-page .faq-list summary::-webkit-details-marker{ display: none; }
.contact-page .faq-list summary::after{
content: "";
position: absolute;
right: .4rem;
top: 1.8rem;
width: 8px;
height: 8px;
border-right: 1.5px solid rgba(39,43,43,.55);
border-bottom: 1.5px solid rgba(39,43,43,.55);
transform: rotate(45deg);
transition: transform .3s ease;
}
.contact-page .faq-list details[open] summary::after{
transform: rotate(-135deg);
top: 2.05rem;
}
.contact-page .faq-list details p{
margin: .8rem 0 0 !important;
color: rgba(39,43,43,.75) !important;
line-height: 1.7;
font-size: .95rem;
}
@media (max-width: 64rem){
.contact-page .contact-panel .contact-grid{ grid-template-columns: 1fr !important; }
.contact-page .faq-section .container{ grid-template-columns: 1fr; }
.contact-page .faq-section .section-title{ margin-bottom: .5rem; }
}
@media (max-width: 40rem){
.contact-page .contact-form{ grid-template-columns: 1fr; }
.contact-page .contact-form .form-group:nth-child(5),
.contact-page .contact-form .form-group:nth-child(6){ grid-column: auto; }
.contact-page .faq-list details{ padding-left: 2.5rem !important; }
.contact-page .contact-details a{ padding: .68rem 1.15rem !important; letter-spacing: .14em; }
}
/* --- 17b — contact polish: button width · response copy · contact-page footer --- */
.contact-page .contact-form .btn.btn-primary{
width: auto !important;
display: inline-flex !important;
}
.contact-page .contact-panel .contact-response-copy{
color: rgba(245,241,232,.75) !important;
}
.contact-page .site-footer .fv-email{
color: #F5F1E8 !important;
}
.contact-page .site-footer .fv-location{
color: rgba(220,233,229,.75) !important;
}
/* --- 17c — mobile: natural panel stacking (responsive.css mobile reorder targeted the old structure) --- */
@media (max-width: 64rem){
.contact-page .contact-panel .contact-grid{
display: grid !important;
grid-template-columns: 1fr !important;
gap: clamp(2.25rem, 6vw, 3.5rem) !important;
}
.contact-page .contact-content{ display: block !important; }
.contact-page .contact-form{ order: 0 !important; }
.contact-page .contact-content > .section-label,
.contact-page .contact-content > h2,
.contact-page .contact-content > .contact-intro-copy,
.contact-page .contact-content > .contact-response-copy,
.contact-page .contact-content > .contact-details{ order: 0 !important; }
}
/* ==========================================================
18. SCROLL-STATE FIXES (round 3)
Fixes the leftover Old Gold / Old Olive bits that only show
once you SCROLL down (desktop + mobile, all core pages):
(1) The thin GOLD line filling across the top as you scroll —
it lives on body::before (gold gradient from animations.css);
the theme had recoloured the wrong selectors. Now matched.
(2) The header turning OLIVE GLASS while scrolled —
.site-header.is-scrolled (animations.css) beat the petrol
theme on specificity. Re-asserted at its own specificity.
(3) The mobile slide-down menu opening in OLIVE with the
Weddings link nearly invisible (dark text on olive).
Now a deep petrol drawer with a mist Weddings pill.
(4) Nav hover restore — a stray paste-in block outside its
media query froze desktop links to ivory on hover.
Hover is visible mist again; mobile tap-jump re-asserted.
========================================================== */
/* (1) Scroll progress line — gold -> porcelain/mist (fills top of page) */
body::before {
background: linear-gradient(90deg, #DCE9E5, #F5F1E8) !important;
box-shadow: 0 1px 10px rgba(15, 42, 45, .25) !important;
}
/* the theme's original progress override kept for safety */
.scroll-progress,
#scroll-progress {
background: linear-gradient(90deg, #DCE9E5, #F5F1E8) !important;
}
/* (2) Scrolled header — olive glass -> deep petrol glass.
Matches animations.css .site-header.is-scrolled specificity */
.site-header.is-scrolled {
background: rgba(18, 62, 66, .94) !important;
box-shadow: 0 12px 35px rgba(11, 48, 52, .30) !important;
backdrop-filter: blur(14px) saturate(120%) !important;
}
/* (3) Mobile slide-down menu — olive -> deep petrol */
@media (max-width: 768px) {
.main-nav {
background: #123E42 !important;
border-top: 1px solid rgba(220, 233, 229, .14) !important;
box-shadow: 0 18px 40px rgba(11, 48, 52, .28) !important;
}
.main-nav .sister-site-mobile {
margin-top: 14px !important;
padding-top: 14px !important;
border-top: 1px solid rgba(220, 233, 229, .22) !important;
border-bottom: 0 !important;
}
/* Weddings link: was dark-olive text on olive -> now a mist pill */
.main-nav .sister-site-mobile a {
color: #174B50 !important;
background: #DCE9E5 !important;
border-radius: 999px !important;
min-height: 50px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: 700 !important;
letter-spacing: 1.3px !important;
}
/* re-assert the dropped "no tap-jump" rule (stray token killed it) */
.main-nav a:hover,
.main-nav a:focus,
.main-nav a:active {
transform: none !important;
}
}
/* (4) Nav hover — visible mist again, desktop + mobile
(fixes the ivory-only block pasted outside its media query) */
.main-nav li>a:hover,
.main-nav li>a:focus,
.main-nav li>a.active {
color: #DCE9E5 !important;
}
/* (4b) Mobile Weddings pill text — animations.css sets gold text at
.site-header .main-nav .sister-site-mobile a (beats the theme's
petrol). Match + beat that specificity: petrol on mist. */
.site-header .main-nav li.sister-site-mobile a {
color: #174B50 !important;
background: #DCE9E5 !important;
border: 1px solid #DCE9E5 !important;
}
.site-header .main-nav li.sister-site-mobile a:hover,
.site-header .main-nav li.sister-site-mobile a:focus {
background: #ECF3F0 !important;
color: #174B50 !important;
}
/* ==========================================================
SECTION 19 — GOLD PURGE + TOKEN RETUNE + LAYOUT FIXES
Root cause: variables.css still ships the OLD olive/gold
tokens (--accent:#C8A96A etc). Every var(--accent) user
(services.css prices, tabs, icons, focus rings, marquee,
blog tags) renders GOLD. Retune the tokens here — theme
loads last, so :root wins.
========================================================== */
:root {
--accent: #174B50; /* was gold #C8A96A */
--accent-light: #3E6E74; /* was pale gold #D8BC84 */
--primary: #174B50; /* was olive #404A3B */
--primary-dark: #123E42; /* was #333C30 */
--primary-light: #2A6A70; /* was #566150 */
--cream: #EFECE5; /* keep the v2 retune */
}
/* ---- 19.1 Header/nav hairlines (her shot: lines under nav) ----
Theme's mobile li border was leaking onto desktop. Kill it on
desktop, restore it inside the mobile breakpoint only. */
.site-header .main-nav li,
.site-header .main-nav ul li { border-bottom: 0 !important; }
@media (max-width: 64rem) {
.site-header .main-nav li { border-bottom: 1px solid rgba(220,233,229,.16) !important; }
}
/* ---- 19.2 Icon tiles: glyph must show (petrol chip + mist glyph).
Later theme block at ~1735 was repainting glyphs petrol-on-petrol. */
.service-icon svg,
.service-icon i,
.section-icon i,
.stat-item i {
color: #DCE9E5 !important;
}
.service-card:hover .service-icon svg,
.service-card:hover .service-icon i {
color: #174B50 !important;
}
.stat-item i { color: #3E6E74 !important; }
/* ---- 19.3 The gold "lines": hairline borders & gradients ---- */
.n3-marquee { border-top: 1px solid rgba(220,233,229,.4) !important; border-bottom: 1px solid rgba(220,233,229,.4) !important; }
.journal-teaser-list li + li { border-top: 1px solid rgba(23,75,80,.14) !important; }
.cost-table td { border-bottom: 1px solid rgba(23,75,80,.14) !important; }
.cost-table tr:nth-child(even) td { background: rgba(23,75,80,.045) !important; }
.cost-table td:first-child { color: #174B50 !important; }
.budget-card { border: 1px solid rgba(23,75,80,.28) !important; box-shadow: 0 24px 60px rgba(18,62,66,.10) !important; }
.journal-hero-media { border: 1px solid rgba(220,233,229,.3) !important; }
.journal-body blockquote { border-left: 3px solid #3E6E74 !important; background: rgba(23,75,80,.05) !important; }
.journal-endnav { border-top: 1px solid rgba(23,75,80,.14) !important; }
.blog-tag { border: 1px solid rgba(23,75,80,.35) !important; color: #174B50 !important; background: rgba(23,75,80,.06) !important; }
.footer-socials a { border: 1px solid rgba(220,233,229,.35) !important; }
.print-partner { border: 1px solid rgba(23,75,80,.28) !important; background: rgba(23,75,80,.05) !important; }
.range-column { border: 1px solid rgba(23,75,80,.28) !important; }
.n3-form-quote { background: rgba(23,75,80,.06) !important; border: 1px solid rgba(23,75,80,.18) !important; }
/* Featured pricing ribbon (was solid gold) */
.pricing-card.featured::after,
.layout .pricing-card.featured::after {
background: #174B50 !important;
color: #F5F1E8 !important;
}
/* Legal page gold bits */
.legal-content li::marker { color: #174B50 !important; }
.legal-content a { text-decoration-color: rgba(23,75,80,.5) !important; }
.legal-content a:hover { color: #174B50 !important; }
.legal-content blockquote,
.legal-content .legal-note { border-left: 3px solid #174B50 !important; background: #F5F1E8 !important; }
.legal-content h2::before { background: #174B50 !important; }
/* Old hardcoded gold TEXT rules in layout/responsive (labels, icons) */
.page-hero .section-label,
.contact-page .contact-hero .section-label,
.about-story-content .section-label,
.why-section .service-card h3,
.why-section .service-card p,
.work-page .case-content .case-category,
.about-nine3 .section-label,
body .why-section .service-card h3 {
color: #174B50 !important;
}
.why-section .service-card p { color: #272B2B !important; }
.contact-page .contact-details i { color: #174B50 !important; }
/* Portfolio/blog section-title span + filter pills */
.portfolio .section-title span { color: #174B50 !important; }
.portfolio-content .case-category { color: #3E6E74 !important; }
.portfolio .section-button .btn:hover { background: #123E42 !important; border-color: #123E42 !important; }
.filter-btn { border: 1px solid rgba(23,75,80,.4) !important; }
/* Hover tints that were gold washes */
.portfolio-card:hover { border-color: rgba(23,75,80,.45) !important; }
.pricing-card:hover { border-color: rgba(23,75,80,.45) !important; }
.service-list-item:hover { background: rgba(23,75,80,.04) !important; }
.extra-row:hover { background: rgba(23,75,80,.05) !important; }
.service-feature:hover { border-color: rgba(23,75,80,.4) !important; }
.collection-link:hover::after { background: #174B50 !important; }
.collection-link span { color: #174B50 !important; }
/* Gold glow keyframes user + focus glows */
.motion-ready .pricing-card.featured { box-shadow: 0 24px 60px rgba(18,62,66,.16) !important; }
input:focus-visible,
textarea:focus-visible,
select:focus-visible { border-color: #174B50 !important; box-shadow: 0 0 0 3px rgba(23,75,80,.12) !important; }
.contact-page .contact-form input:focus,
.contact-page .contact-form select:focus,
.contact-page .contact-form textarea:focus { border-color: #174B50 !important; box-shadow: 0 0 0 3px rgba(23,75,80,.10) !important; }
/* Hero background gold radial tints (layout.css hardcodes them) */
.hero,
.page-hero {
background:
radial-gradient(circle at top right, rgba(220,233,229,.12), transparent 40%),
linear-gradient(180deg, #174B50, #123E42) !important;
}
.contact-circle,
.footer-orb { background: radial-gradient(circle, rgba(220,233,229,.10), transparent 70%) !important; }
/* Services page: pricing + process gold accents */
.services-hero h1 span { color: #DCE9E5 !important; }
.svc-top i { color: #174B50 !important; }
.pricing-tab:hover { border-color: #174B50 !important; color: #174B50 !important; }
.price-card.popular { border-color: #174B50 !important; }
.bespoke-arrow { color: #174B50 !important; }
.oneoffs .oneoffs-price { color: #174B50 !important; }
main section.process h2 span { color: #DCE9E5 !important; }
.process .section-label { color: rgba(220,233,229,.75) !important; }
.step-number { color: #DCE9E5 !important; }
.process .step-line { background-color: rgba(220,233,229,.35) !important; }
/* ---- 19.4 Services mobile: stop the centre-scramble ----
(cards were rendering with 01/icon row + centred copy) */
@media (max-width: 800px) {
.svc-card,
.svc-card h3,
.svc-card p { text-align: left !important; }
.svc-card h3 { margin: 18px 0 10px !important; }
.svc-card p { margin: 0 !important; }
.svc-top { margin-bottom: 0 !important; }
.services-grid { margin-top: 40px !important; }
main section.services-intro { padding: 64px 0 !important; }
main section.pricing { padding: 64px 0 !important; }
.services-intro-grid { gap: 34px !important; }
.pricing-head { gap: 34px !important; }
}
/* ---- 19.5 Contact page: kill the stray-bullet dot + calm it ----
Her HTML has a stray
before the details column —
the browser renders it as a lone bullet. Hide it here. */
.contact-page .contact-content > li,
.contact-page .contact-panel li:first-child,
.contact-page li:only-child {
display: none !important;
list-style: none !important;
}
/* =====================================================
20) CONTACT PAGE — calm the colours (her note: "too
much colour"). Keep the dark form panel; lighten the
big "Creative Design With A Personal Touch" band to
porcelain with petrol text.
NOTE: her h1 carries inline color:var(--IVORY)!important.
--IVORY does not exist as a token, so the browser
resolves that inline style to the INHERITED colour —
meaning .why-contact's own colour drives the heading.
Setting the section colour to petrol also fixes the
heading with zero HTML changes.
===================================================== */
.why-contact {
background: #F5F1E8 !important;
color: #174B50 !important;
}
.why-contact .section-title span {
color: #3E6E74 !important;
}
.why-contact .service-card {
background: #FFFFFF !important;
border: 1px solid rgba(23, 75, 80, .14) !important;
box-shadow: 0 14px 40px rgba(18, 62, 66, .07) !important;
}
.why-contact .service-card p {
color: #272B2B !important;
}
.why-contact .section-icon i {
color: #174B50 !important;
}
.closing-message {
border-top: 1px solid rgba(23, 75, 80, .18) !important;
color: #272B2B !important;
}
/* =====================================================
21) ROUND 5 — page heroes back to porcelain, contact
heading token retune, footer gold hairline swap
(fixes: blog hero dark-on-dark, about hero petrol-on-
petrol, missing contact h1, gold seam line)
===================================================== */
/* 21.0) Her /contact h1 carries inline color:var(--IVORY)!important.
13) defined --IVORY as porcelain #F5F1E8 — correct on the old dark
panel, but invisible now the band is porcelain (20). Retune the
token so the inline style reads petrol on porcelain. */
:root {
--IVORY: #174B50;
}
/* 21.1) 19's ".hero,.page-hero" dark gradient was homepage-only
intent but it painted EVERY inner page hero dark while section 7's
petrol h1 text stayed put — petrol on petrol, dark on dark.
Restore porcelain heroes with petrol/graphite text. */
.page-hero,
.about-hero,
.blog-hero,
.journal-hero {
background: #F5F1E8 !important;
color: #272B2B !important;
}
.contact-page .page-hero {
background: #F5F1E8 !important;
color: #272B2B !important;
}
.page-hero .section-label,
.journal-hero .section-label {
color: #174B50 !important;
}
.page-hero h1,
.page-hero h2,
.page-hero h1 span,
.blog-hero h1 span,
.journal-hero h1 span {
color: #174B50 !important;
}
.page-hero p,
.journal-hero p {
color: #4E5A5A !important;
}
/* 21.2) Footer gold gradient hairline (animations.css .site-footer
border-image) — gold seam between the dark page bottom and the
dark footer. Swap to a quiet mist hairline. */
.site-footer {
border-top: 1px solid rgba(220, 233, 229, .22) !important;
border-image: none !important;
}
/* 21.3) Card hover glow line was gold — retune to mist. */
.service-card:hover::before,
.blog-card:hover::before {
background: linear-gradient(90deg, transparent, rgba(220, 233, 229, .55), transparent) !important;
}
/* ---------- 22. Mobile drawer + dropdown final fixes (2026-10-19) ---------- */
@media (max-width: 768px) {
/* 22.1 Drawer body — matches animations.css (0,2,0) that was beating the petrol */
.site-header .main-nav {
background: #123E42 !important;
border-top: 1px solid rgba(220, 233, 229, .14) !important;
box-shadow: 0 18px 40px rgba(11, 48, 52, .28) !important;
}
.site-header .main-nav li {
border-bottom: 1px solid rgba(220, 233, 229, .12) !important;
}
.site-header .main-nav li:last-child {
border-bottom: 0 !important;
}
/* 22.2 Gold email -> mist */
.site-header .main-nav .nav-panel-email {
color: #DCE9E5 !important;
}
/* 22.3 Gold social circles -> mist */
.site-header .main-nav .nav-panel-social a {
border: 1px solid rgba(220, 233, 229, .5) !important;
color: #DCE9E5 !important;
}
/* 22.4 Gold active-page link -> mist */
.site-header .main-nav a.active {
color: #DCE9E5 !important;
}
/* 22.5 About/Journal dropdown — in-flow, petrol, centred on mobile.
Kills the cream desktop box that was escaping onto mobile. */
.site-header .main-nav .nav-dropdown-menu {
position: static !important;
top: auto !important;
left: auto !important;
width: 100% !important;
margin: 0 !important;
padding: 2px 0 8px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: none !important;
display: none !important;
z-index: auto !important;
}
.site-header .main-nav .nav-item-dropdown.force-open .nav-dropdown-menu,
.site-header .main-nav .nav-item-dropdown.submenu-open .nav-dropdown-menu,
.site-header .main-nav .nav-item-dropdown:hover .nav-dropdown-menu,
.site-header .main-nav .nav-item-dropdown:focus-within .nav-dropdown-menu {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
}
.site-header .main-nav .nav-dropdown-menu a {
color: #F5F1E8 !important;
background: rgba(220, 233, 229, .05) !important;
text-align: center !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 1.3px !important;
text-transform: uppercase !important;
padding: 11px 8px !important;
margin: 0 0 3px !important;
border-radius: 0 !important;
transition: none !important;
}
.site-header .main-nav .nav-dropdown-menu a:hover,
.site-header .main-nav .nav-dropdown-menu a:focus {
background: rgba(220, 233, 229, .12) !important;
color: #DCE9E5 !important;
padding-left: 8px !important;
}
.site-header .main-nav .nav-dropdown-menu a.active {
color: #DCE9E5 !important;
}
}
/* ---------- 23. Desktop nav: kill the stray hairline (2026-10-19) ---------- */
/* The unscoped .main-nav border-top (meant for the mobile drawer) draws a
line above the desktop menu text. Kill it on desktop only — the mobile
drawer keeps its border via section 22. */
@media (min-width: 769px) {
.site-header .main-nav {
border-top: 0 !important;
border-bottom: 0 !important;
}
.site-header .main-nav li,
.site-header .main-nav ul li {
border-top: 0 !important;
border-bottom: 0 !important;
}
/* keep the animated hover underline working clean (no stray strokes) */
.site-header .main-nav a::after {
bottom: -6px;
}
}
/* =====================================================================
SECTION 24 — Services "Most popular" / "Best value" chips
services.css sets colour:var(--primary-dark) on var(--accent) bg;
since section 19 retuned tokens that = petrol-on-petrol (invisible).
===================================================================== */
.popular-chip {
color: #F5F1E8 !important;
}
/* =====================================================================
SECTION 25 — Footer restyled to match the weddings footer
(same structure & rhythm, kept in petrol colours):
- dash-prefixed column headings (— EXPLORE)
- small icon before every link row
- socials as text rows with external arrow (no round buttons)
- bottom bar: © · PRIVACY / COOKIES · back to top, uppercase spaced
===================================================================== */
.site-footer.footer-v2 .fv-heading {
color: #DCE9E5 !important;
}
.site-footer.footer-v2 .fv-heading::before {
content: "";
display: inline-block;
width: 16px;
height: 1px;
background: rgba(220, 233, 229, .55);
margin-right: 10px;
vertical-align: middle;
}
/* --- link rows get a small line icon (weddings-style) --- */
.site-footer.footer-v2 .fv-col > a {
display: flex;
align-items: center;
gap: 9px;
}
.site-footer.footer-v2 .fv-col > a::before {
content: "";
width: 15px;
height: 15px;
flex: 0 0 15px;
background: center / contain no-repeat;
opacity: .8;
}
/* Explore column (grid child 2): Home, Our Work, Services, About, Journal, Contact */
.site-footer.footer-v2 .fv-grid > div:nth-child(2) > a:nth-of-type(1)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCE9E5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E");
}
.site-footer.footer-v2 .fv-grid > div:nth-child(2) > a:nth-of-type(2)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCE9E5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
}
.site-footer.footer-v2 .fv-grid > div:nth-child(2) > a:nth-of-type(3)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCE9E5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M9 9v12'/%3E%3C/svg%3E");
}
.site-footer.footer-v2 .fv-grid > div:nth-child(2) > a:nth-of-type(4)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCE9E5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-3.9 3.6-6 8-6s8 2.1 8 6'/%3E%3C/svg%3E");
}
.site-footer.footer-v2 .fv-grid > div:nth-child(2) > a:nth-of-type(5)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCE9E5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h6a4 4 0 0 1 4 4v13a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 4h-6a4 4 0 0 0-4 4v13a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
}
.site-footer.footer-v2 .fv-grid > div:nth-child(2) > a:nth-of-type(6)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCE9E5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.5 2.1L8 10a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
}
/* Services column (grid child 3): Website, Branding, Logo, Print, Social, Marketing */
.site-footer.footer-v2 .fv-grid > div:nth-child(3) > a:nth-of-type(1)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCE9E5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18'/%3E%3C/svg%3E");
}
.site-footer.footer-v2 .fv-grid > div:nth-child(3) > a:nth-of-type(2)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCE9E5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18h1a2 2 0 0 0 0-4h-1a2 2 0 0 1 0-4h5a4 4 0 0 0 4-4 8 8 0 0 0-9-6z'/%3E%3Ccircle cx='7.5' cy='10.5' r='1' fill='%23DCE9E5' stroke='none'/%3E%3Ccircle cx='9.5' cy='7.5' r='1' fill='%23DCE9E5' stroke='none'/%3E%3C/svg%3E");
}
.site-footer.footer-v2 .fv-grid > div:nth-child(3) > a:nth-of-type(3)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCE9E5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19l7-7 3 3-7 7-3-3z'/%3E%3Cpath d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'/%3E%3Cpath d='M2 2l7.6 7.6'/%3E%3Ccircle cx='11' cy='11' r='2'/%3E%3C/svg%3E");
}
.site-footer.footer-v2 .fv-grid > div:nth-child(3) > a:nth-of-type(4)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCE9E5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Crect x='3' y='9' width='18' height='8' rx='2'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E");
}
.site-footer.footer-v2 .fv-grid > div:nth-child(3) > a:nth-of-type(5)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCE9E5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 13.5l6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E");
}
.site-footer.footer-v2 .fv-grid > div:nth-child(3) > a:nth-of-type(6)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCE9E5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 13v-2z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E");
}
/* Contact column (grid child 4): email gets the mail icon, location gets the pin */
.site-footer.footer-v2 .fv-grid > div:nth-child(4) > a:nth-of-type(1)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCE9E5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}
.site-footer.footer-v2 .fv-grid > div:nth-child(4) .fv-location::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
margin-right: 8px;
vertical-align: -2px;
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCE9E5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.4 7-11a7 7 0 1 0-14 0c0 5.6 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
opacity: .8;
}
/* --- socials: round buttons -> weddings-style text rows --- */
.site-footer.footer-v2 .fv-social {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.site-footer.footer-v2 .fv-social a {
width: auto;
height: auto;
display: inline-flex;
align-items: center;
gap: 9px;
border: 0;
border-radius: 0;
background: transparent;
color: #FEF9F3;
font-size: 13.5px;
transition: color .25s ease;
}
.site-footer.footer-v2 .fv-social a::after {
content: "";
font-size: 13.5px;
}
.site-footer.footer-v2 .fv-social a[aria-label*="Facebook"]::after {
content: "Facebook \2197";
}
.site-footer.footer-v2 .fv-social a[aria-label*="Instagram"]::after {
content: "Instagram \2197";
}
.site-footer.footer-v2 .fv-social a[aria-label*="TikTok"]::after {
content: "TikTok \2197";
}
.site-footer.footer-v2 .fv-social svg {
width: 16px;
height: 16px;
color: #DCE9E5;
}
.site-footer.footer-v2 .fv-social a:hover {
background: transparent;
border-color: transparent;
color: #DCE9E5;
transform: none;
}
.site-footer.footer-v2 .fv-social a:hover svg {
color: #FEF9F3;
}
/* --- bottom bar: © | PRIVACY / COOKIES | credit | back to top --- */
.site-footer.footer-v2 .fv-bottom-inner {
flex-wrap: wrap;
}
.site-footer.footer-v2 .fv-copy {
order: 1;
text-transform: uppercase;
letter-spacing: .2em;
font-size: 11px;
}
.site-footer.footer-v2 .fv-legal {
order: 2;
gap: 0;
}
.site-footer.footer-v2 .fv-legal span {
display: none;
}
.site-footer.footer-v2 .fv-legal a {
color: rgba(254, 249, 243, .75);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .2em;
opacity: 1;
transition: color .25s ease;
}
.site-footer.footer-v2 .fv-legal a::after {
content: "/";
margin: 0 14px;
color: rgba(220, 233, 229, .45);
}
.site-footer.footer-v2 .fv-legal a:last-child::after {
content: "";
}
.site-footer.footer-v2 .fv-legal a:hover {
color: #DCE9E5;
opacity: 1;
}
.site-footer.footer-v2 .fv-credit {
order: 3;
text-transform: uppercase;
letter-spacing: .2em;
font-size: 11px;
}
.site-footer.footer-v2 .fv-top {
order: 4;
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(254, 249, 243, .65);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .2em;
text-decoration: none;
transition: color .25s ease;
}
.site-footer.footer-v2 .fv-top:hover {
color: #DCE9E5;
}
.site-footer.footer-v2 .fv-top svg {
width: 12px;
height: 12px;
display: block;
}
@media (max-width: 900px) {
.site-footer.footer-v2 .fv-bottom-inner {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.site-footer.footer-v2 .fv-legal {
flex-wrap: wrap;
}
}
/* ============================================================
SECTION 26 — Contact pills (weddings-style WhatsApp/Book a Call)
+ nav bar scroll band fix + footer social outline removal
(2026-10-20)
============================================================ */
/* ---- 26.1 Contact Details pills: weddings-style outline pills ----
Stacked full-width pills, mist outline on deep petrol, mist arrow-free
layout matching /weddings contact. Overrides the 2-up row layout. */
.contact-page .contact-details {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: .8rem !important;
margin-top: 1.6rem !important;
}
.contact-page .contact-details a {
display: inline-flex !important;
align-items: center;
justify-content: flex-start;
gap: .6rem !important;
padding: .72rem 1.35rem !important;
border: 1px solid rgba(220, 233, 229, .45) !important;
border-radius: 999px !important;
background: transparent !important;
color: #DCE9E5 !important;
font-size: .74rem !important;
font-weight: 600 !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
text-decoration: none !important;
transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.contact-page .contact-details a i {
color: #DCE9E5 !important;
font-size: .9rem !important;
}
.contact-page .contact-details a:hover {
background: #DCE9E5 !important;
border-color: #DCE9E5 !important;
color: #123E42 !important;
}
.contact-page .contact-details a:hover i {
color: #123E42 !important;
}
/* ---- 26.2 Nav bar: kill the colour-change box around nav text ----
On scroll the header gets .is-scrolled; some rules paint a band /
per-link backgrounds behind the nav labels. Force flat petrol on
the header, the nav, its list items and the links themselves. */
.site-header.is-scrolled,
.site-header.is-scrolled .container,
.site-header.is-scrolled nav,
.site-header.is-scrolled .main-nav,
.site-header.is-scrolled .main-nav ul,
.site-header.is-scrolled .main-nav li,
.site-header.is-scrolled .main-nav li a,
.site-header .main-nav li,
.site-header .main-nav li a {
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
.site-header.is-scrolled {
background: #123E42 !important;
}
/* keep the header petrol at any scroll depth, no per-link tinting */
.site-header .main-nav li a:hover,
.site-header.is-scrolled .main-nav li a:hover {
background: transparent !important;
background-image: none !important;
color: #DCE9E5 !important;
}
/* ---- 26.3 Footer socials: remove the box outlines ----
Whatever wraps the social links must not draw borders or fills. */
.site-footer .footer-socials a,
.site-footer .footer-social a,
.site-footer.footer-v2 .fv-social a,
.site-footer .social-links a,
.site-footer .socials a {
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
border-radius: 0 !important;
}
.site-footer .footer-socials a:hover,
.site-footer .footer-social a:hover,
.site-footer.footer-v2 .fv-social a:hover,
.site-footer .social-links a:hover,
.site-footer .socials a:hover {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}