/* =====================================================================
EU PUBLISHING HOUSE — DESIGN SYSTEM
Apple-inspired · Glassmorphism · Premium publishing aesthetic
===================================================================== */
/* ---------- 1. TOKENS ------------------------------------------------- */
:root {
/* Brand greens (logo-derived, also injected from PHP) */
--c-primary: #1B5340;
--c-primary-2: #0F3E2E;
--c-leaf: #6CB04C;
--c-leaf-2: #4F932F;
--c-gold: #C9A84C;
/* Light surfaces */
--c-ivory: #FBFAF6;
--c-ivory-2: #F4F2EA;
--c-mint: #EEF6EE;
--c-mint-2: #E2EFE3;
--c-paper: #FFFFFF;
/* Text */
--c-ink: #0F2A22;
--c-text: #243831;
--c-muted: #6A7872;
--c-soft: #98A39C;
/* Glass */
--glass-bg: rgba(255, 255, 255, 0.55);
--glass-bg-2: rgba(255, 255, 255, 0.72);
--glass-border: rgba(27, 83, 64, 0.10);
--glass-shadow: 0 12px 40px -12px rgba(15, 62, 46, 0.18);
--glass-shadow-lg: 0 30px 60px -20px rgba(15, 62, 46, 0.22);
/* Radius */
--r-sm: 10px;
--r-md: 16px;
--r-lg: 22px;
--r-xl: 28px;
--r-pill: 999px;
/* Motion */
--ease: cubic-bezier(.22, .61, .36, 1);
--t-fast: .25s;
--t-mid: .45s;
--t-slow: .8s;
/* Container */
--container: 1240px;
}
/* ---------- 2. RESETS ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* `overflow-x: clip` prevents horizontal scroll without creating a scroll
container, so descendant `position: sticky` still works correctly.
Fallback to `hidden` for browsers that don't support `clip` yet. */
html, body { overflow-x: hidden; overflow-x: clip; }
body {
margin: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--c-text);
background: var(--c-ivory);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'ss01', 'cv02', 'cv11';
}
body::before {
content: '';
position: fixed; inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(60% 50% at 10% 0%, rgba(108, 176, 76, .12), transparent 60%),
radial-gradient(50% 40% at 90% 10%, rgba(27, 83, 64, .08), transparent 60%),
radial-gradient(80% 60% at 50% 100%, rgba(238, 246, 238, .9), transparent 70%),
linear-gradient(180deg, #FBFAF6 0%, #F6F8F2 100%);
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--c-primary); }
p { margin: 0 0 1em; color: var(--c-text); }
.lead, .lead p { font-size: 1.05rem; color: var(--c-muted); line-height: 1.75; }
::selection { background: rgba(108, 176, 76, .22); color: var(--c-primary-2); }
/* ---------- 3. TYPOGRAPHY -------------------------------------------- */
h1, h2, h3, h4, h5 {
font-family: 'Inter', -apple-system, 'SF Pro Display', sans-serif;
color: var(--c-ink);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.12;
margin: 0 0 .6em;
}
h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); letter-spacing: -0.035em; font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
h4 { font-size: 1.1rem; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: .6rem;
padding: .42rem .85rem .42rem .55rem;
border-radius: var(--r-pill);
background: linear-gradient(135deg, rgba(108, 176, 76, .14), rgba(27, 83, 64, .06));
color: var(--c-primary-2);
font-size: .7rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
border: 1px solid rgba(108, 176, 76, .22);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
margin-bottom: 1.1rem;
box-shadow: 0 6px 14px -8px rgba(27, 83, 64, .25), inset 0 1px 0 rgba(255, 255, 255, .55);
transition: all var(--t-fast) var(--ease);
}
.eyebrow::before {
content: '';
width: 14px; height: 14px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #ffffff 0%, var(--c-leaf) 55%, var(--c-leaf-2) 100%);
box-shadow: 0 0 0 4px rgba(108, 176, 76, .15);
flex-shrink: 0;
}
.eyebrow--light {
background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04));
color: #fff;
border-color: rgba(255, 255, 255, .28);
box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.eyebrow--light::before { box-shadow: 0 0 0 4px rgba(108, 176, 76, .25); }
.serif-italic, .gold-italic {
font-family: 'Instrument Serif', 'New York', Georgia, serif;
font-style: italic;
font-weight: 400;
color: var(--c-leaf-2);
letter-spacing: -0.01em;
}
.section-title { margin-bottom: .9rem; margin-top: .35rem; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 3.5rem; }
.section-head p { color: var(--c-muted); font-size: 1.05rem; margin-top: .8rem; }
.section-head .eyebrow { margin-bottom: 1.1rem; }
.section-head + .container, .section-head + * { margin-top: 1rem; }
/* ---------- 4. LAYOUT HELPERS --------------------------------------- */
.container, .container-lg, .container-xl {
max-width: var(--container);
width: 100%;
margin-inline: auto;
padding-inline: clamp(1rem, 3vw, 1.75rem);
}
section { padding-block: clamp(4.5rem, 8vw, 7.5rem); position: relative; }
/* Subtle paper-grain texture on every section — barely there, premium feel */
section::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: .35;
background-image:
radial-gradient(circle at 20% 30%, rgba(27, 83, 64, .025) 1px, transparent 1.2px),
radial-gradient(circle at 80% 70%, rgba(108, 176, 76, .025) 1px, transparent 1.2px);
background-size: 28px 28px, 36px 36px;
background-position: 0 0, 14px 18px;
mix-blend-mode: multiply;
}
section > .container, section > * { position: relative; z-index: 1; }
.hero-section::before, .final-cta-section::before, .site-footer::before { display: none; }
.section-soft { background: linear-gradient(180deg, var(--c-paper) 0%, var(--c-ivory) 100%); }
.section-mint { background: linear-gradient(180deg, var(--c-mint) 0%, var(--c-ivory) 100%); }
.section-paper { background: var(--c-paper); }
/* Dark publishing-house variant (used by inner service pages) */
.section--dark {
background:
radial-gradient(40% 40% at 90% 0%, rgba(108, 176, 76, .22), transparent 70%),
radial-gradient(40% 50% at 10% 100%, rgba(201, 168, 76, .08), transparent 70%),
linear-gradient(180deg, #143E31 0%, #0B2E22 100%);
color: rgba(255, 255, 255, .85);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark .section-title, .section--dark .text-light { color: #141414; }
.section--dark p { color: rgba(255, 255, 255, .78); }
.section--dark .service-card {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .12);
color: rgba(255, 255, 255, .85);
}
.section--dark .service-card .service-title { color: #fff; }
.section--dark .service-card .service-desc { color: rgba(255, 255, 255, .72); }
.section--dark .service-card .service-icon {
background: rgba(108, 176, 76, .2);
color: var(--c-leaf);
}
.section--dark .service-card:hover {
background: rgba(255, 255, 255, .1);
border-color: rgba(108, 176, 76, .45);
}
.section--dark .service-link { color: var(--c-leaf); }
.section--dark .dist-list-card,
.section--dark .dist-card {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .12);
}
.section--dark .dist-list li { color: rgba(255, 255, 255, .85); border-bottom-color: rgba(255, 255, 255, .08); }
.section--dark .dist-footnote { color: rgba(255, 255, 255, .65); }
.text-light { color: #fff !important; }
/* ---------- 5. BUTTONS ---------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .85rem 1.6rem;
font-family: inherit;
font-size: .95rem;
font-weight: 600;
letter-spacing: -0.005em;
border-radius: var(--r-pill);
border: 1px solid transparent;
cursor: pointer;
transition: transform var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease),
background var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
text-decoration: none;
will-change: transform;
line-height: 1;
}
.btn i, .btn .arr { transition: transform var(--t-fast) var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover i, .btn:hover .arr { transform: translateX(3px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 1.05rem 2rem; font-size: 1rem; }
.btn-sm { padding: .55rem 1.1rem; font-size: .85rem; }
.btn-cta, .btn-primary {
background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-leaf-2) 100%);
color: #fff;
box-shadow:
0 12px 30px -12px rgba(27, 83, 64, .55),
inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-cta:hover, .btn-primary:hover {
color: #fff;
box-shadow:
0 18px 38px -10px rgba(27, 83, 64, .55),
0 0 0 4px rgba(108, 176, 76, .18),
inset 0 1px 0 rgba(255, 255, 255, .3);
}
.btn-leaf {
background: linear-gradient(135deg, var(--c-leaf) 0%, var(--c-leaf-2) 100%);
color: #fff;
box-shadow: 0 12px 30px -12px rgba(108, 176, 76, .55);
}
.btn-leaf:hover { color: #fff; }
.btn-glass, .btn-ghost {
background: var(--glass-bg-2);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
color: var(--c-primary);
border: 1px solid var(--glass-border);
box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 20px -10px rgba(15, 62, 46, .15);
}
.btn-glass:hover, .btn-ghost:hover {
background: #fff;
color: var(--c-primary-2);
border-color: rgba(27, 83, 64, .2);
}
.btn-outline-light, .btn-outline-dark {
background: transparent;
color: var(--c-primary);
border: 1px solid rgba(27, 83, 64, .25);
}
.btn-outline-light { color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn-outline-light:hover {
background: rgba(255, 255, 255, .12);
color: #fff;
border-color: rgba(255,255,255,.55);
}
.btn-outline-dark:hover { background: var(--c-primary); color: #fff; }
.btn-gold {
background: linear-gradient(135deg, #E5C46B 0%, var(--c-gold) 100%);
color: var(--c-primary-2);
box-shadow: 0 14px 30px -10px rgba(201, 168, 76, .5);
}
.btn-gold:hover { color: var(--c-primary-2); }
/* ---------- 6. GLASS CARD --------------------------------------------- */
.glass {
background: var(--glass-bg);
backdrop-filter: blur(28px) saturate(160%);
-webkit-backdrop-filter: blur(28px) saturate(160%);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
box-shadow: var(--glass-shadow);
}
.glass--strong {
background: var(--glass-bg-2);
box-shadow: var(--glass-shadow-lg);
}
/* ---------- 7. PAGE PRELOADER ---------------------------------------- */
.page-loader {
position: fixed; inset: 0; z-index: 9999;
background: var(--c-ivory);
display: flex; align-items: center; justify-content: center;
transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.page-loader.is-hidden { opacity: 0; visibility: hidden; }
.loader-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.loader-mark {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 2.6rem; color: var(--c-primary);
letter-spacing: -0.02em;
}
.loader-line {
width: 64px; height: 2px;
background: linear-gradient(90deg, transparent, var(--c-leaf), transparent);
background-size: 200% 100%;
animation: loadSlide 1.2s linear infinite;
}
@keyframes loadSlide { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* =====================================================================
8. NAVBAR — glassmorphism floating pill
===================================================================== */
nav.top {
position: fixed;
top: 14px;
left: 50%;
transform: translateX(-50%);
width: min(96%, 1320px);
z-index: 100;
transition: top var(--t-mid) var(--ease);
}
nav.top .wrap {
display: flex;
align-items: center;
gap: 1.5rem;
background: rgba(255, 255, 255, .68);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(255, 255, 255, .55);
border-radius: var(--r-pill);
padding: .55rem .55rem .55rem 1.25rem;
box-shadow:
0 12px 40px -10px rgba(15, 62, 46, .15),
inset 0 1px 0 rgba(255, 255, 255, .9);
transition: all var(--t-mid) var(--ease);
}
nav.top.is-scrolled .wrap {
background: rgba(255, 255, 255, .85);
box-shadow:
0 14px 50px -10px rgba(15, 62, 46, .2),
inset 0 1px 0 rgba(255, 255, 255, .95);
}
nav.top .brand {
display: flex;
align-items: center;
flex-shrink: 0;
}
nav.top .brand img {
height: 45px;
width: auto;
transition: transform var(--t-fast) var(--ease);
}
nav.top .brand:hover img { transform: scale(1.03); }
nav.top .navlinks {
display: flex;
align-items: center;
gap: .15rem;
flex: 1;
justify-content: center;
}
nav.top .navlinks > a,
nav.top .navlinks .nav-item > a {
position: relative;
padding: .55rem .95rem;
color: var(--c-text);
font-size: .92rem;
font-weight: 500;
border-radius: var(--r-pill);
display: inline-flex;
align-items: center;
gap: .35rem;
transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
nav.top .navlinks > a:hover,
nav.top .navlinks .nav-item > a:hover {
color: var(--c-primary);
background: rgba(108, 176, 76, .1);
}
nav.top .navlinks > a.is-active,
nav.top .navlinks .nav-item.is-active > a {
color: var(--c-primary);
background: rgba(108, 176, 76, .14);
}
.nav-caret {
font-size: .65rem;
margin-left: .15rem;
transition: transform var(--t-fast) var(--ease);
opacity: .6;
}
.nav-item.is-open .nav-caret { transform: rotate(180deg); }
.nav-item.has-dd { position: relative; }
/* Invisible bridge — keeps dropdown open as the cursor crosses the gap */
.nav-item.has-dd::after {
content: '';
position: absolute;
left: 0; right: 0;
top: 100%;
height: 22px;
pointer-events: none;
}
.nav-item.has-dd:hover::after { pointer-events: auto; }
.nav-dd {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%) translateY(8px);
background: rgba(255, 255, 255);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
padding: .8rem;
min-width: 270px;
list-style: none;
margin: 0;
box-shadow: 0 24px 60px -20px rgba(15, 62, 46, .25);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear .25s;
}
.nav-item.has-dd:hover .nav-dd,
.nav-item.is-open .nav-dd {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateX(-50%) translateY(0);
transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s;
}
.nav-dd--wide {
min-width: 620px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: .3rem;
padding: .9rem;
}
.nav-dd li { list-style: none; }
.nav-dd li a {
display: flex;
align-items: flex-start;
gap: .8rem;
padding: .75rem .9rem;
border-radius: var(--r-md);
color: var(--c-text);
transition: all var(--t-fast) var(--ease);
}
.nav-dd li a:hover {
background: rgba(108, 176, 76, .1);
color: var(--c-primary);
transform: translateX(2px);
}
.nav-dd li a i {
font-size: .95rem;
color: var(--c-leaf);
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 9px;
background: rgba(108, 176, 76, .14);
flex-shrink: 0;
}
.nav-dd li a b { display: block; font-weight: 600; font-size: .92rem; color: var(--c-ink); margin-bottom: 2px; }
.nav-dd li a span { font-size: .8rem; color: var(--c-muted); line-height: 1.45; }
nav.top .navactions {
display: flex;
align-items: center;
gap: .5rem;
flex-shrink: 0;
}
.nav-phone-btn {
width: 42px; height: 42px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(108, 176, 76, .14);
color: var(--c-primary);
transition: all var(--t-fast) var(--ease);
}
.nav-phone-btn:hover {
background: var(--c-primary);
color: #fff;
transform: rotate(-8deg) scale(1.05);
}
.nav-cta {
padding: .65rem 1.25rem !important;
font-size: .88rem !important;
}
.nav-cta .lbl--short { display: none; }
.navtoggle {
display: none;
width: 42px; height: 42px;
border: 1px solid var(--glass-border);
background: rgba(255, 255, 255, .5);
border-radius: 50%;
flex-direction: column;
gap: 4px;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.navtoggle span {
width: 18px; height: 2px;
background: var(--c-primary);
border-radius: 2px;
transition: all var(--t-fast) var(--ease);
}
.navtoggle.is-open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.navtoggle.is-open span:nth-child(2) { opacity: 0; }
.navtoggle.is-open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }
/* Mobile drawer */
.mobile-overlay {
position: fixed; inset: 0; z-index: 110;
background: rgba(15, 62, 46, .35);
backdrop-filter: blur(6px);
opacity: 0; visibility: hidden;
transition: opacity var(--t-mid) var(--ease), visibility var(--t-mid) var(--ease);
}
.mobile-overlay.is-open { opacity: 1; visibility: visible; }
.mobile-menu {
position: fixed; top: 0; right: 0; height: 100vh; width: min(86vw, 380px);
background: rgba(255, 255, 255, .96);
backdrop-filter: blur(30px) saturate(180%);
-webkit-backdrop-filter: blur(30px) saturate(180%);
z-index: 120;
transform: translateX(105%);
transition: transform .55s var(--ease);
display: flex;
flex-direction: column;
padding: 1.5rem;
overflow-y: auto;
box-shadow: -20px 0 60px -20px rgba(15, 62, 46, .25);
}
.mobile-menu.is-open { transform: translateX(0); }
.mm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.mm-head .brand img { height: 36px; }
.mm-close {
width: 40px; height: 40px;
background: rgba(108, 176, 76, .12);
border: none; border-radius: 50%;
color: var(--c-primary);
cursor: pointer;
}
.mm-links { display: flex; flex-direction: column; gap: .25rem; }
.mm-links > a, .mm-trigger {
display: flex; align-items: center; justify-content: space-between;
padding: .85rem 1rem;
border-radius: var(--r-md);
color: var(--c-ink);
font-size: 1rem; font-weight: 500;
background: transparent;
border: none; text-align: left;
width: 100%; cursor: pointer;
transition: background var(--t-fast) var(--ease);
}
.mm-links > a:hover, .mm-trigger:hover { background: rgba(108, 176, 76, .1); color: var(--c-primary); }
.mm-links > a.is-active, .mm-group.is-active > .mm-trigger { color: var(--c-primary); }
.mm-trigger i { font-size: .7rem; transition: transform var(--t-fast) var(--ease); }
.mm-group.is-open .mm-trigger i { transform: rotate(180deg); }
.mm-sub {
max-height: 0; overflow: hidden;
transition: max-height .4s var(--ease);
padding-left: .5rem;
}
.mm-group.is-open .mm-sub { max-height: 600px; }
.mm-sub a {
display: block;
padding: .65rem 1rem;
color: var(--c-muted);
font-size: .92rem;
border-radius: var(--r-md);
}
.mm-sub a:hover { color: var(--c-primary); background: rgba(108, 176, 76, .08); }
.mm-cta { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .6rem; }
.mm-foot { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid rgba(27, 83, 64, .08); display: flex; flex-direction: column; gap: .55rem; font-size: .9rem; }
.mm-foot a { color: var(--c-muted); display: flex; align-items: center; gap: .6rem; }
.mm-foot a i { color: var(--c-leaf); }
@media (max-width: 1100px) {
nav.top .navlinks { display: none; }
nav.top .wrap { justify-content: space-between; }
/* Hide phone & Submit button — keep only logo (left) + hamburger (right) */
nav.top .nav-phone-btn { display: none; }
nav.top .nav-cta { display: none; }
.navtoggle { display: inline-flex; }
}
@media (max-width: 575px) {
nav.top { top: 8px; }
nav.top .wrap { padding: .45rem .45rem .45rem 1rem; gap: .6rem; }
nav.top .brand img { height: 52px; }
}
/* =====================================================================
9. MAIN OFFSET (navbar floats over hero)
===================================================================== */
.site-main { padding-top: 0; }
/* =====================================================================
10. HERO SECTION — light premium with 3D book showcase
===================================================================== */
.hero-section {
position: relative;
padding: 9rem 0 5rem;
min-height: 90vh;
overflow: hidden;
background:
radial-gradient(60% 40% at 80% 0%, rgba(108, 176, 76, .14), transparent 70%),
radial-gradient(50% 40% at 0% 30%, rgba(27, 83, 64, .08), transparent 70%),
linear-gradient(180deg, #FBFAF6 0%, #F2F7EF 100%);
display: flex;
align-items: center;
}
.hero-section > .container { position: relative; z-index: 2; width: 100%; }
.hero-bg {
position: absolute; inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.hero-bg .blob {
position: absolute;
border-radius: 50%;
filter: blur(90px);
opacity: .55;
animation: floatY 14s ease-in-out infinite;
}
.hero-bg .blob-1 { width: 420px; height: 420px; top: -120px; right: -80px; background: rgba(108, 176, 76, .35); }
.hero-bg .blob-2 { width: 320px; height: 320px; bottom: -120px; left: -100px; background: rgba(27, 83, 64, .2); animation-delay: -4s; }
.hero-bg .blob-3 { width: 220px; height: 220px; top: 30%; left: 45%; background: rgba(201, 168, 76, .14); animation-delay: -8s; }
/* Animated grid lines — subtle premium texture */
.hero-bg .lines {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(27, 83, 64, .05) 1px, transparent 1px),
linear-gradient(90deg, rgba(27, 83, 64, .05) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 80%);
-webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 80%);
opacity: .7;
animation: gridDrift 28s linear infinite;
}
@keyframes gridDrift {
from { background-position: 0 0, 0 0; }
to { background-position: 80px 80px, 80px 80px; }
}
/* Floating leaf SVG accents */
.hero-bg .leaf {
position: absolute;
width: 240px; height: auto;
opacity: .07;
pointer-events: none;
animation: leafSway 10s ease-in-out infinite;
}
.hero-bg .leaf-1 { top: 8%; left: -50px; transform: rotate(-20deg); }
.hero-bg .leaf-2 { bottom: 10%; right: -40px; transform: rotate(160deg); width: 220px; animation-delay: -5s; }
@keyframes leafSway {
0%, 100% { transform: rotate(-20deg) translateY(0); }
50% { transform: rotate(-15deg) translateY(-14px); }
}
/* Faint flowing lines (premium accent) */
.hero-bg .stream {
position: absolute;
width: 1px;
background: linear-gradient(180deg, transparent, rgba(108, 176, 76, .5), transparent);
animation: streamFall 6s ease-in-out infinite;
}
.hero-bg .stream--1 { left: 12%; top: -100px; height: 280px; animation-delay: 0s; }
.hero-bg .stream--2 { left: 28%; top: -100px; height: 200px; animation-delay: -2.5s; opacity: .6; }
.hero-bg .stream--3 { right: 22%; top: -100px; height: 320px; animation-delay: -1.5s; }
.hero-bg .stream--4 { right: 8%; top: -100px; height: 240px; animation-delay: -4s; opacity: .5; }
@keyframes streamFall {
0% { transform: translateY(-100px); opacity: 0; }
25% { opacity: 1; }
100% { transform: translateY(110vh); opacity: 0; }
}
@keyframes floatY {
0%, 100% { transform: translateY(0) translateX(0); }
50% { transform: translateY(-30px) translateX(20px); }
}
.hero-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 4rem;
align-items: center;
}
.hero-grid > * { min-width: 0; }
.hero-copy { max-width: 100%; }
.hero-title {
font-size: clamp(2.2rem, 3.8vw, 3.4rem);
letter-spacing: -0.035em;
line-height: 1.1;
color: var(--c-ink);
margin-bottom: 1.25rem;
font-weight: 600;
}
.hero-title .serif-italic, .hero-title .gold-italic { display: inline; }
.hero-sub {
font-size: .98rem;
color: var(--c-muted);
line-height: 1.7;
margin: 0 0 1rem;
max-width: 600px;
}
.hero-sub:last-of-type { margin-bottom: 0; }
.hero-cta-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
}
/* =====================================================================
HERO STACK SLIDER — fanned 5-book showcase, center prominent
===================================================================== */
.hero-stack-wrap {
position: relative;
width: 100%;
min-width: 0;
}
#heroStack {
position: relative;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
-webkit-perspective: 1000px;
perspective: 1000px;
width: 100%;
user-select: none;
cursor: grab;
}
#heroStack.is-grabbing { cursor: grabbing; }
.stack-slide {
position: absolute;
width: 200px;
height: 300px;
left: 50%;
margin-left: -100px;
border-radius: 6px;
overflow: hidden;
cursor: pointer;
-webkit-transition: -webkit-transform .55s cubic-bezier(.25, .46, .45, .94), opacity .55s ease;
transition: transform .55s cubic-bezier(.25, .46, .45, .94), opacity .55s ease;
-webkit-transform: translateX(0) scale(1);
transform: translateX(0) scale(1);
box-shadow:
0 22px 50px -16px rgba(15, 62, 46, .45),
0 8px 18px -8px rgba(15, 62, 46, .3);
will-change: transform, opacity;
}
.stack-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
.stack-slide::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(90deg, rgba(0, 0, 0, .25), transparent 8%, transparent 92%, rgba(0, 0, 0, .15));
pointer-events: none;
z-index: 1;
}
.stack-slide.s-center {
-webkit-transform: translateX(0) scale(1);
transform: translateX(0) scale(1);
z-index: 5;
opacity: 1;
}
.stack-slide.s-center {
box-shadow:
0 30px 60px -20px rgba(15, 62, 46, .55),
0 12px 26px -10px rgba(15, 62, 46, .35);
}
.stack-slide.s-left1 {
-webkit-transform: translateX(-120px) scale(.82) rotateY(15deg);
transform: translateX(-120px) scale(.82) rotateY(15deg);
z-index: 4;
opacity: .92;
}
.stack-slide.s-left2 {
-webkit-transform: translateX(-220px) scale(.66) rotateY(25deg);
transform: translateX(-220px) scale(.66) rotateY(25deg);
z-index: 3;
opacity: .7;
}
.stack-slide.s-right1 {
-webkit-transform: translateX(120px) scale(.82) rotateY(-15deg);
transform: translateX(120px) scale(.82) rotateY(-15deg);
z-index: 4;
opacity: .92;
}
.stack-slide.s-right2 {
-webkit-transform: translateX(220px) scale(.66) rotateY(-25deg);
transform: translateX(220px) scale(.66) rotateY(-25deg);
z-index: 3;
opacity: .7;
}
.stack-slide.s-hidden {
-webkit-transform: translateX(0) scale(.5);
transform: translateX(0) scale(.5);
opacity: 0;
pointer-events: none;
z-index: 1;
}
/* Centered glass rating chip below the stack */
.hero-stage-chip {
position: relative;
margin: 1.25rem auto 0;
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .6rem 1.2rem;
background: var(--glass-bg-2);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, .65);
border-radius: var(--r-pill);
box-shadow: 0 14px 30px -12px rgba(15, 62, 46, .3);
font-size: .85rem;
font-weight: 600;
color: var(--c-primary-2);
z-index: 6;
white-space: nowrap;
}
.hero-stage-chip .stars { color: var(--c-gold); display: inline-flex; gap: 1px; font-size: .8rem; }
.hero-stage-chip small { color: var(--c-muted); font-weight: 400; }
.hero-chip-wrap { display: flex; justify-content: center; }
/* Tablet */
@media (max-width: 991px) {
.hero-section { padding: 7.5rem 0 4rem; min-height: 0; }
.hero-grid { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
.hero-copy { max-width: 720px; margin: 0 auto; }
.hero-sub { margin-left: auto; margin-right: auto; }
.hero-cta-row { justify-content: center; }
#heroStack {
height: 340px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.stack-slide { width: 170px; height: 255px; margin-left: -85px; }
.stack-slide.s-left1 { transform: translateX(-140px) scale(.82) rotateY(15deg); }
.stack-slide.s-left2 { transform: translateX(-250px) scale(.66) rotateY(25deg); }
.stack-slide.s-right1 { transform: translateX(140px) scale(.82) rotateY(-15deg); }
.stack-slide.s-right2 { transform: translateX(250px) scale(.66) rotateY(-25deg); }
}
/* Mobile */
@media (max-width: 767px) {
#heroStack { height: 300px; transform-style: preserve-3d; }
.stack-slide { width: 150px; height: 225px; margin-left: -75px; }
.stack-slide.s-left1 { transform: translateX(-60px) scale(.82) rotateY(15deg); }
.stack-slide.s-left2 { transform: translateX(-110px) scale(.66) rotateY(25deg); }
.stack-slide.s-right1 { transform: translateX(60px) scale(.82) rotateY(-15deg); }
.stack-slide.s-right2 { transform: translateX(110px) scale(.66) rotateY(-25deg); }
}
/* =====================================================================
11. DISTRIBUTORS / LOGO STRIP
===================================================================== */
.distributors {
padding: 3.5rem 0;
background: var(--c-paper);
border-top: 1px solid rgba(27, 83, 64, .06);
border-bottom: 1px solid rgba(27, 83, 64, .06);
position: relative;
overflow: hidden;
}
.distributors__title {
text-align: center;
color: var(--c-muted);
font-size: .82rem;
letter-spacing: .18em;
text-transform: uppercase;
margin-bottom: 2rem;
font-weight: 500;
}
.brand-slider-track {
display: flex;
gap: 4rem;
align-items: center;
animation: scrollX 32s linear infinite;
width: max-content;
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.brand-slide { flex-shrink: 0; }
.brand-slide img {
height: 38px;
width: auto;
object-fit: contain;
opacity: .65;
filter: grayscale(100%);
transition: all var(--t-mid) var(--ease);
}
.brand-slide:hover img { opacity: 1; filter: grayscale(0); transform: scale(1.05); }
@keyframes scrollX {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* =====================================================================
12. ABOUT SECTION
===================================================================== */
.about-section { padding-block: clamp(5rem, 8vw, 8rem); }
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.about-image {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: 0 30px 70px -20px rgba(15, 62, 46, .3);
aspect-ratio: 4/5;
}
.about-image img { width: 100%; height: 100%; object-fit: cover; }
.about-image::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(15, 62, 46, .25) 100%);
}
.about-image-chip {
position: absolute;
bottom: 1.5rem; left: 1.5rem; right: 1.5rem;
background: var(--glass-bg-2);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, .6);
border-radius: var(--r-md);
padding: 1rem 1.25rem;
display: flex;
align-items: center;
gap: 1rem;
}
.about-image-chip .num {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 2.2rem;
color: var(--c-primary);
line-height: 1;
}
.about-image-chip .lbl { font-size: .85rem; color: var(--c-muted); line-height: 1.4; }
.about-copy h2 { margin-bottom: 1.25rem; }
.about-copy p { color: var(--c-muted); font-size: 1rem; }
.about-copy .btn { margin-top: 1.5rem; }
.about-bullets {
list-style: none;
margin: 1.75rem 0 1.5rem;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: .65rem 1.25rem;
}
.about-bullets li {
display: flex; align-items: flex-start; gap: .55rem;
color: var(--c-ink);
font-weight: 500;
font-size: .92rem;
}
.about-bullets li i {
width: 22px; height: 22px;
border-radius: 50%;
background: rgba(108, 176, 76, .18);
color: var(--c-leaf-2);
display: inline-flex; align-items: center; justify-content: center;
font-size: .65rem;
flex-shrink: 0;
margin-top: 2px;
}
@media (max-width: 991px) {
.about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.about-bullets { grid-template-columns: 1fr; }
}
/* =====================================================================
13. SERVICES SECTION — glass cards
===================================================================== */
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.service-card {
position: relative;
padding: 2rem 1.75rem;
background: var(--glass-bg-2);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
box-shadow: 0 10px 30px -15px rgba(15, 62, 46, .15);
transition: all var(--t-mid) var(--ease);
overflow: hidden;
}
.service-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 50px -20px rgba(27, 83, 64, .3);
border-color: rgba(108, 176, 76, .4);
}
.service-card::after {
content: '';
position: absolute;
width: 180px; height: 180px;
top: -90px; right: -90px;
border-radius: 50%;
background: radial-gradient(circle, rgba(108, 176, 76, .25), transparent 70%);
opacity: 0;
transition: opacity var(--t-mid) var(--ease);
pointer-events: none;
}
.service-card:hover::after { opacity: 1; }
.service-icon {
width: 54px; height: 54px;
border-radius: var(--r-md);
background: linear-gradient(135deg, rgba(108, 176, 76, .18), rgba(27, 83, 64, .12));
color: var(--c-primary);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.4rem;
margin-bottom: 1.25rem;
transition: all var(--t-mid) var(--ease);
position: relative; z-index: 1;
}
.service-card:hover .service-icon {
background: linear-gradient(135deg, var(--c-leaf), var(--c-primary));
color: #fff;
transform: rotate(-6deg) scale(1.05);
}
.service-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--c-ink);
margin-bottom: .55rem;
position: relative; z-index: 1;
}
.service-desc {
color: var(--c-muted);
font-size: .92rem;
line-height: 1.65;
margin-bottom: 1rem;
position: relative; z-index: 1;
}
.service-link {
display: inline-flex;
align-items: center;
gap: .4rem;
color: var(--c-primary);
font-weight: 600;
font-size: .9rem;
transition: gap var(--t-fast) var(--ease);
position: relative; z-index: 1;
}
.service-link:hover { gap: .7rem; color: var(--c-primary-2); }
@media (max-width: 991px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .services-grid { grid-template-columns: 1fr; } }
/* =====================================================================
14. BOOKS SHOWCASE — premium owl carousel
===================================================================== */
.books-section { position: relative; overflow: hidden; }
.books-carousel {
position: relative;
padding: 2rem 0 1rem;
mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.books-carousel .owl-stage { display: flex; align-items: flex-end; padding: 1.5rem 0; }
.books-carousel .owl-item { transition: transform var(--t-mid) var(--ease); }
.book-card {
display: block;
border-radius: 8px;
overflow: hidden;
aspect-ratio: 2/3;
background: var(--c-mint);
box-shadow: 0 18px 34px -14px rgba(15, 62, 46, .35);
transition: all var(--t-mid) var(--ease);
position: relative;
transform-origin: bottom center;
}
.book-card::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 6%;
background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent);
z-index: 2;
pointer-events: none;
}
.book-card img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .6s var(--ease);
}
.book-card:hover {
transform: translateY(-12px) rotate(-2deg) scale(1.04);
box-shadow: 0 30px 60px -10px rgba(15, 62, 46, .45);
z-index: 5;
}
.book-card:hover img { transform: scale(1.08); }
.book-card::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
transform: translateX(-100%);
transition: transform .8s var(--ease);
pointer-events: none;
z-index: 1;
}
.book-card:hover::after { transform: translateX(100%); }
.book-card-meta {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: .85rem .9rem .7rem;
background: linear-gradient(180deg, transparent, rgba(15, 62, 46, .85));
color: #fff;
opacity: 0;
transform: translateY(8px);
transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
z-index: 3;
}
.book-card:hover .book-card-meta { opacity: 1; transform: translateY(0); }
.book-card-meta b {
display: block;
font-size: .82rem;
font-weight: 600;
line-height: 1.3;
margin-bottom: 2px;
}
.book-card-meta span {
font-size: .72rem;
opacity: .85;
}
.books-carousel .owl-dots { margin-top: 1.5rem !important; text-align: center; }
.books-carousel .owl-dot span {
width: 8px; height: 8px;
background: rgba(27, 83, 64, .2) !important;
border-radius: 50%;
display: inline-block;
margin: 4px;
transition: all var(--t-fast) var(--ease);
}
.books-carousel .owl-dot.active span {
width: 24px;
border-radius: 4px;
background: var(--c-primary) !important;
}
/* Books intro — centered compact variant for sub-pages */
.books-intro { margin-bottom: 1rem; }
.books-intro--center { text-align: center; }
.books-intro--center .books-intro__copy {
max-width: 820px;
margin-inline: auto;
}
.books-intro__copy .eyebrow { margin-bottom: .9rem; }
.books-intro__copy .section-title { margin-bottom: 1.1rem; }
.books-intro__lead {
font-size: 1.05rem;
line-height: 1.75;
color: var(--c-muted);
margin: 0 auto 1.6rem;
max-width: 64ch;
}
.books-genre-chips {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.books-intro--center .books-genre-chips {
justify-content: center;
}
.books-genre-chip {
display: inline-flex;
align-items: center;
padding: .42rem .85rem;
font-size: .78rem;
font-weight: 500;
letter-spacing: .02em;
color: var(--c-primary-2);
background: var(--glass-bg-2);
border: 1px solid var(--glass-border);
border-radius: var(--r-pill);
backdrop-filter: blur(10px) saturate(160%);
transition: all var(--t-fast) var(--ease);
}
.books-genre-chip:hover {
background: var(--c-primary);
color: #fff;
transform: translateY(-2px);
border-color: var(--c-primary);
}
/* =====================================================================
15. CATEGORIES
===================================================================== */
.categories-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1rem;
}
.category-card {
text-align: center;
padding: 1.75rem 1rem;
background: rgba(255, 255, 255, .7);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
transition: all var(--t-mid) var(--ease);
cursor: default;
}
.category-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px -14px rgba(27, 83, 64, .22);
border-color: rgba(108, 176, 76, .35);
background: #fff;
}
.category-card .ic {
width: 52px; height: 52px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(108, 176, 76, .16), rgba(27, 83, 64, .12));
color: var(--c-primary);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.4rem;
margin: 0 auto .85rem;
transition: all var(--t-mid) var(--ease);
}
.category-card:hover .ic {
background: linear-gradient(135deg, var(--c-leaf), var(--c-primary));
color: #fff;
}
.category-card h3 {
font-size: .92rem;
font-weight: 600;
color: var(--c-ink);
margin: 0;
letter-spacing: -.01em;
line-height: 1.35;
}
@media (max-width: 991px) { .categories-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .categories-grid { grid-template-columns: repeat(2, 1fr); } }
/* =====================================================================
16. PUBLISHING COST
===================================================================== */
.cost-grid {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 4rem;
align-items: center;
}
.cost-visual {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
aspect-ratio: 5/4;
box-shadow: 0 30px 60px -20px rgba(15, 62, 46, .3);
}
.cost-visual img { width: 100%; height: 100%; object-fit: cover; }
.cost-visual::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(15, 62, 46, .35));
}
.cost-chip {
position: absolute;
bottom: 1.4rem; left: 1.4rem;
background: var(--glass-bg-2);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, .6);
border-radius: var(--r-pill);
padding: .55rem 1.1rem;
font-size: .85rem;
font-weight: 600;
color: var(--c-primary);
display: inline-flex; align-items: center; gap: .5rem;
z-index: 1;
}
.cost-chip i { color: var(--c-leaf-2); }
@media (max-width: 991px) { .cost-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
/* =====================================================================
17. PROCESS — clean numbered cards (number only, no icon)
===================================================================== */
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}
.process-card {
position: relative;
padding: 2.25rem 1.75rem 2rem;
background: rgba(255, 255, 255, .72);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
transition: all var(--t-mid) var(--ease);
overflow: hidden;
}
.process-card::after {
content: '';
position: absolute;
left: 0; right: 0; top: 0;
height: 3px;
background: linear-gradient(90deg, var(--c-leaf), var(--c-primary));
transform: scaleX(0);
transform-origin: left;
transition: transform var(--t-mid) var(--ease);
}
.process-card:hover {
transform: translateY(-6px);
box-shadow: 0 22px 50px -18px rgba(15, 62, 46, .22);
background: #fff;
border-color: rgba(108, 176, 76, .35);
}
.process-card:hover::after { transform: scaleX(1); }
.process-n {
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
font-size: 2.6rem;
color: var(--c-leaf-2);
line-height: 1;
display: inline-block;
margin-bottom: 1.25rem;
opacity: .9;
background: linear-gradient(135deg, var(--c-leaf), var(--c-primary));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Hide icons in process cards — use number only */
.process-icon { display: none; }
.process-title { font-size: 1.1rem; margin-bottom: .55rem; color: var(--c-ink); }
.process-desc {
color: var(--c-muted);
font-size: .92rem;
line-height: 1.7;
margin: 0;
max-height: 160px;
overflow-y: auto;
padding-right: .5rem;
/* Soft fade at the bottom to hint that content scrolls */
mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
scrollbar-width: thin;
scrollbar-color: rgba(108, 176, 76, .4) transparent;
}
.process-desc::-webkit-scrollbar { width: 4px; }
.process-desc::-webkit-scrollbar-track { background: transparent; }
.process-desc::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--c-leaf), var(--c-leaf-2));
border-radius: 4px;
}
.process-card:hover .process-desc { mask-image: none; -webkit-mask-image: none; }
@media (max-width: 991px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .process-grid { grid-template-columns: 1fr; } }
/* =====================================================================
18. WHY CHOOSE US
===================================================================== */
.why-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 4rem;
align-items: center;
}
.why-visual {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
aspect-ratio: 5/6;
box-shadow: 0 30px 60px -20px rgba(15, 62, 46, .3);
}
.why-visual img { width: 100%; height: 100%; object-fit: cover; }
.why-visual::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(15, 62, 46, .3) 100%);
}
.why-stats {
position: absolute;
bottom: 1.25rem; left: 1.25rem; right: 1.25rem;
background: var(--glass-bg-2);
backdrop-filter: blur(22px) saturate(180%);
-webkit-backdrop-filter: blur(22px) saturate(180%);
border: 1px solid rgba(255, 255, 255, .6);
border-radius: var(--r-md);
padding: 1rem 1.25rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .75rem 1rem;
z-index: 1;
}
.why-stats .stat .n {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 1.6rem; color: var(--c-primary);
line-height: 1;
}
.why-stats .stat .l {
font-size: .78rem; color: var(--c-muted); margin-top: 2px;
}
.why-features {
list-style: none; padding: 0; margin: 1.5rem 0 1.75rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem 1.25rem;
}
.why-features li {
display: flex; align-items: flex-start; gap: .7rem;
font-size: .92rem;
}
.why-features li i {
flex-shrink: 0;
width: 26px; height: 26px;
border-radius: 8px;
background: linear-gradient(135deg, var(--c-leaf), var(--c-leaf-2));
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: .7rem;
margin-top: 1px;
}
.why-features li b { display: block; font-weight: 600; color: var(--c-ink); margin-bottom: 2px; font-size: .95rem; }
.why-features li span { color: var(--c-muted); font-size: .85rem; line-height: 1.55; }
@media (max-width: 991px) {
.why-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.why-features { grid-template-columns: 1fr; }
}
/* =====================================================================
19. GLOBAL DISTRIBUTION
===================================================================== */
.distribution-section { position: relative; overflow: hidden; }
.distribution-section::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(40% 40% at 70% 30%, rgba(108, 176, 76, .15), transparent 70%),
radial-gradient(50% 50% at 20% 80%, rgba(27, 83, 64, .1), transparent 70%);
pointer-events: none;
}
.dist-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 1.5rem;
position: relative;
}
.dist-card {
padding: 2rem;
background: rgba(255, 255, 255, .7);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
box-shadow: 0 18px 50px -22px rgba(15, 62, 46, .2);
}
.dist-card-title {
display: flex; align-items: center; gap: .65rem;
font-size: 1.05rem;
margin-bottom: 1.25rem;
color: var(--c-ink);
}
.dist-card-title i {
width: 38px; height: 38px;
border-radius: 10px;
background: linear-gradient(135deg, var(--c-leaf), var(--c-primary));
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: .95rem;
}
.dist-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.dist-list li {
display: flex; align-items: flex-start; gap: .65rem;
font-size: .92rem; color: var(--c-text);
padding: .55rem 0;
border-bottom: 1px dashed rgba(27, 83, 64, .08);
}
.dist-list li:last-child { border-bottom: none; }
.dist-list li i {
color: var(--c-leaf-2);
margin-top: 4px;
flex-shrink: 0;
}
.dist-footnote {
text-align: center;
margin-top: 2rem;
color: var(--c-muted);
font-size: .95rem;
}
@media (max-width: 991px) { .dist-grid { grid-template-columns: 1fr; } }
/* =====================================================================
20. TESTIMONIALS — full-width two-row marquee (opposite directions)
===================================================================== */
.testimonials-section {
position: relative;
overflow: hidden;
}
.testimonials-section .section-head { margin-bottom: 3rem; }
.testimonial-marquee {
position: relative;
padding: 1rem 0;
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.testimonial-row {
display: flex;
gap: 1.5rem;
width: max-content;
padding: 1.25rem 0;
}
.testimonial-row--top { animation: marqueeRight 38s linear infinite; }
.testimonial-row--bottom { animation: marqueeLeft 44s linear infinite; }
.testimonial-marquee:hover .testimonial-row { animation-play-state: paused; }
/* The homepage marquee uses fixed-width cards so the row scrolls smoothly.
The standalone testimonial.php uses a Bootstrap grid where cards are fluid. */
.testimonial-marquee .testimonial-card {
flex-shrink: 0;
width: 400px;
}
/* When testimonials sit in a Bootstrap grid (testimonial.php), let the
column control width and ensure full card height alignment. */
.row > [class*="col-"] > .testimonial-card { height: 100%; }
@keyframes marqueeRight {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
@keyframes marqueeLeft {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.testimonial-card {
padding: 2.25rem 2rem 1.75rem;
background:
radial-gradient(70% 60% at 100% 0%, rgba(108, 176, 76, .12), transparent 70%),
linear-gradient(160deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .68) 100%);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(255, 255, 255, .8);
border-radius: var(--r-lg);
box-shadow:
0 18px 50px -22px rgba(15, 62, 46, .25),
inset 0 1px 0 rgba(255, 255, 255, .85);
transition: transform var(--t-mid) var(--ease),
box-shadow var(--t-mid) var(--ease),
border-color var(--t-mid) var(--ease);
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Oversized decorative quote mark in the top-right corner */
.testimonial-card::before {
content: '\201C';
position: absolute;
top: -.85rem; right: 1rem;
font-family: 'Instrument Serif', Georgia, serif;
font-size: 7rem;
line-height: 1;
color: var(--c-leaf);
opacity: .18;
transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
z-index: 0;
pointer-events: none;
}
/* Subtle bottom-left gradient swoosh */
.testimonial-card::after {
content: '';
position: absolute;
bottom: -50px; left: -50px;
width: 180px; height: 180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(108, 176, 76, .15), transparent 70%);
z-index: 0;
pointer-events: none;
transition: opacity var(--t-mid) var(--ease);
}
.testimonial-card > * { position: relative; z-index: 1; }
.testimonial-card:hover {
transform: scale(1.04) translateY(-6px);
box-shadow:
0 32px 70px -22px rgba(27, 83, 64, .38),
0 0 0 1px rgba(108, 176, 76, .35),
inset 0 1px 0 rgba(255, 255, 255, .95);
border-color: rgba(108, 176, 76, .4);
z-index: 2;
}
.testimonial-card:hover::before {
opacity: .35;
transform: scale(1.08) rotate(-4deg);
}
/* Rating pill — stars in a glass chip at top */
.testimonial-rating {
display: inline-flex;
align-items: center;
gap: 3px;
padding: .35rem .7rem;
background: rgba(201, 168, 76, .14);
border: 1px solid rgba(201, 168, 76, .25);
border-radius: var(--r-pill);
color: var(--c-gold);
font-size: .72rem;
margin-bottom: 1.25rem;
width: max-content;
}
.testimonial-rating::after {
content: '5.0';
color: var(--c-primary-2);
font-weight: 700;
font-size: .72rem;
margin-left: .35rem;
padding-left: .5rem;
border-left: 1px solid rgba(201, 168, 76, .3);
}
.testimonial-text {
font-family: 'Instrument Serif', 'New York', Georgia, serif;
font-size: 1.18rem;
line-height: 1.5;
color: var(--c-ink);
font-weight: 400;
letter-spacing: -.005em;
margin-bottom: 1.5rem;
flex: 1;
position: relative;
/* Subtle indent + first-letter accent */
}
.testimonial-text::before {
content: '';
position: absolute;
left: 0; top: .35rem;
width: 3px; height: 1.6rem;
background: linear-gradient(180deg, var(--c-leaf), var(--c-primary));
border-radius: 3px;
margin-right: .75rem;
}
.testimonial-text {
padding-left: 1rem;
}
/* Author block with decorative divider */
.testimonial-author {
display: flex;
align-items: center;
gap: .9rem;
padding-top: 1.25rem;
position: relative;
}
.testimonial-author::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(108, 176, 76, .35) 20%,
rgba(108, 176, 76, .35) 80%,
transparent);
}
.testimonial-mark {
width: 48px; height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-leaf), var(--c-primary));
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Instrument Serif', Georgia, serif;
font-size: 1.35rem;
font-weight: 400;
flex-shrink: 0;
box-shadow:
0 8px 20px -8px rgba(27, 83, 64, .55),
inset 0 1px 0 rgba(255, 255, 255, .35);
position: relative;
}
/* Tiny "verified author" leaf badge on the avatar */
.testimonial-mark::after {
content: '\f06c'; /* fa-leaf */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
bottom: -3px; right: -3px;
width: 18px; height: 18px;
background: #fff;
color: var(--c-leaf-2);
border-radius: 50%;
font-size: .55rem;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(15, 62, 46, .25);
border: 2px solid #fff;
}
.testimonial-author > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.testimonial-author strong {
font-weight: 600;
color: var(--c-ink);
font-size: .98rem;
letter-spacing: -.005em;
line-height: 1.2;
}
.testimonial-role {
font-size: .8rem;
color: var(--c-muted);
font-style: italic;
}
@media (max-width: 575px) {
.testimonial-marquee .testimonial-card { width: 320px; }
.testimonial-card { padding: 1.75rem 1.5rem 1.35rem; }
.testimonial-text { font-size: 1.05rem; }
.testimonial-card::before { font-size: 5.5rem; top: -.6rem; right: .65rem; }
}
/* =====================================================================
21. FAQ — centered single column
===================================================================== */
.faq-section { position: relative; }
.faq-wrap {
max-width: 820px;
margin: 0 auto;
}
.faq-accordion { display: flex; flex-direction: column; gap: .75rem; }
.faq-item {
background: rgba(255, 255, 255, .65);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid var(--glass-border);
border-radius: var(--r-md);
overflow: hidden;
transition: all var(--t-mid) var(--ease);
}
.faq-item.is-open {
background: #fff;
border-color: rgba(108, 176, 76, .35);
box-shadow: 0 16px 40px -18px rgba(27, 83, 64, .25);
}
.faq-trigger {
width: 100%;
background: transparent;
border: none;
text-align: left;
padding: 1.2rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
font-family: inherit;
font-size: 1rem;
font-weight: 600;
color: var(--c-ink);
cursor: pointer;
line-height: 1.4;
}
.faq-trigger .faq-num {
font-family: 'Instrument Serif', Georgia, serif;
color: var(--c-leaf);
margin-right: .8rem;
font-weight: 400;
font-size: 1.1rem;
}
.faq-trigger .faq-icon {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(108, 176, 76, .15);
color: var(--c-primary);
display: inline-flex; align-items: center; justify-content: center;
font-size: .85rem;
transition: all var(--t-fast) var(--ease);
}
.faq-item.is-open .faq-trigger .faq-icon {
background: var(--c-primary);
color: #fff;
transform: rotate(45deg);
}
.faq-body {
max-height: 0;
overflow: hidden;
transition: max-height .5s var(--ease);
}
.faq-item.is-open .faq-body { max-height: 600px; }
.faq-body-inner {
padding: 0 1.5rem 1.4rem;
color: var(--c-muted);
font-size: .95rem;
line-height: 1.7;
}
/* =====================================================================
22. FINAL CTA — full-width, enhanced layout
===================================================================== */
.final-cta-section {
padding: 0;
background: transparent;
}
.final-cta-band {
position: relative;
padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4rem);
background:
radial-gradient(60% 90% at 100% 0%, rgba(108, 176, 76, .35), transparent 70%),
radial-gradient(60% 90% at 0% 100%, rgba(201, 168, 76, .12), transparent 70%),
linear-gradient(135deg, #0F3E2E 0%, #1B5340 60%, #0F3E2E 100%);
color: #fff;
overflow: hidden;
isolation: isolate;
}
.final-cta-band::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
-webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
pointer-events: none;
}
.final-cta-band .floating-leaf {
position: absolute;
font-size: 8rem;
opacity: .07;
color: #fff;
z-index: 0;
animation: floatY 14s ease-in-out infinite;
}
.final-cta-band .floating-leaf--1 { top: -2rem; right: 6%; transform: rotate(-25deg); }
.final-cta-band .floating-leaf--2 { bottom: -3rem; left: 4%; transform: rotate(150deg); font-size: 10rem; animation-delay: -5s; }
.final-cta-inner {
position: relative;
z-index: 1;
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 3rem;
align-items: center;
}
.final-cta-copy .eyebrow { margin-bottom: 1.25rem; }
.final-cta-title {
color: #fff;
font-size: clamp(2rem, 4vw, 3.4rem);
letter-spacing: -.03em;
margin: 0 0 1.25rem;
line-height: 1.05;
}
.final-cta-title .serif-italic, .final-cta-title .gold-italic { color: #E5C46B; }
.final-cta-sub {
color: rgba(255, 255, 255, .8);
margin: 0 0 2rem;
font-size: 1.05rem;
line-height: 1.65;
max-width: 560px;
}
.final-cta-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.final-cta-side {
display: flex;
flex-direction: column;
gap: 1rem;
}
.final-cta-perk {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 1.25rem;
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: var(--r-md);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transition: all var(--t-mid) var(--ease);
}
.final-cta-perk:hover {
transform: translateX(4px);
background: rgba(255, 255, 255, .12);
border-color: rgba(108, 176, 76, .35);
}
.final-cta-perk i {
width: 38px; height: 38px;
border-radius: 10px;
background: linear-gradient(135deg, var(--c-leaf), var(--c-leaf-2));
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: .95rem;
flex-shrink: 0;
}
.final-cta-perk strong { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; }
.final-cta-perk span { color: rgba(255, 255, 255, .72); font-size: .87rem; line-height: 1.5; }
@media (max-width: 991px) {
.final-cta-inner { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
.final-cta-row { justify-content: center; }
.final-cta-perk { text-align: left; }
.final-cta-sub { margin-left: auto; margin-right: auto; }
}
/* =====================================================================
23. FOOTER
===================================================================== */
.site-footer {
background: linear-gradient(180deg, #143E31 0%, #0B2E22 100%);
color: rgba(255, 255, 255, .8);
padding: 5rem 0 1.75rem;
position: relative;
overflow: hidden;
isolation: isolate;
}
.site-footer::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(40% 40% at 90% 0%, rgba(108, 176, 76, .25), transparent 70%),
radial-gradient(40% 50% at 10% 100%, rgba(201, 168, 76, .1), transparent 70%);
pointer-events: none;
z-index: -2;
}
/* Subtle topographic line texture */
.site-footer::after {
content: '';
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(135deg,
rgba(255, 255, 255, .025) 0,
rgba(255, 255, 255, .025) 1px,
transparent 1px,
transparent 18px),
radial-gradient(circle at 30% 40%, rgba(108, 176, 76, .08) 0, transparent 60%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, .04) 0, transparent 50%);
pointer-events: none;
z-index: -1;
opacity: .9;
}
.site-footer .container { position: relative; z-index: 1; }
/* Faint feather/quill artwork in the footer corner */
.site-footer .footer-feather {
position: absolute;
bottom: -3rem;
right: -2rem;
width: 280px;
opacity: .06;
transform: rotate(15deg);
pointer-events: none;
z-index: 0;
}
.footer-top {
display: grid;
grid-template-columns: 1.4fr .8fr .8fr 1.2fr;
gap: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer-brand img {
height: 50px;
margin-bottom: 1.25rem;
filter: brightness(0) invert(1);
}
.footer-about {
color: rgba(255, 255, 255, .72);
line-height: 1.7;
font-size: .92rem;
margin-bottom: 1.5rem;
}
.footer-social {
display: flex;
gap: .55rem;
list-style: none;
padding: 0;
margin: 0;
}
.footer-social a {
width: 38px; height: 38px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .15);
background: rgba(255, 255, 255, .04);
backdrop-filter: blur(10px);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
transition: all var(--t-fast) var(--ease);
}
.footer-social a:hover {
background: var(--c-leaf);
border-color: var(--c-leaf);
color: #fff;
transform: translateY(-3px);
}
.footer-title {
color: #fff;
font-size: 1rem;
margin-bottom: 1.2rem;
letter-spacing: -.01em;
}
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.footer-links a {
color: rgba(255, 255, 255, .7);
font-size: .92rem;
transition: all var(--t-fast) var(--ease);
}
.footer-links a:hover { color: var(--c-leaf); padding-left: 5px; }
.footer-contact { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: .65rem; }
.footer-contact li {
display: flex;
align-items: flex-start;
gap: .7rem;
color: rgba(255, 255, 255, .72);
font-size: .9rem;
line-height: 1.55;
}
.footer-contact i { color: var(--c-leaf); margin-top: 4px; flex-shrink: 0; }
.footer-contact a { color: inherit; }
.footer-contact a:hover { color: var(--c-leaf); }
.footer-newsletter label {
display: block;
color: rgba(255, 255, 255, .85);
font-size: .85rem;
margin-bottom: .55rem;
}
.nl-wrap {
display: flex;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: var(--r-pill);
padding: 4px;
backdrop-filter: blur(10px);
}
.nl-wrap input {
flex: 1;
background: transparent;
border: none;
color: #fff;
padding: .55rem 1rem;
font-family: inherit;
font-size: .9rem;
outline: none;
}
.nl-wrap input::placeholder { color: rgba(255, 255, 255, .45); }
.nl-wrap button {
width: 38px; height: 38px;
border-radius: 50%;
border: none;
background: linear-gradient(135deg, var(--c-leaf), var(--c-leaf-2));
color: #fff;
cursor: pointer;
transition: transform var(--t-fast) var(--ease);
}
.nl-wrap button:hover { transform: scale(1.07); }
.footer-bottom {
padding-top: 1.75rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
font-size: .85rem;
color: rgba(255, 255, 255, .5);
}
.footer-bottom p { margin: 0; color : #fff; font-weight: 500; }
.footer-legal { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-legal a { color: rgba(255, 255, 255, .65); transition: color var(--t-fast) var(--ease); }
.footer-legal a:hover { color: var(--c-leaf); }
@media (max-width: 991px) {
.footer-top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.footer-bottom { justify-content: center; text-align: center; }
}
@media (max-width: 575px) {
.footer-top { grid-template-columns: 1fr; }
}
/* =====================================================================
24. FLOATING BUTTONS — to-top + live chat
===================================================================== */
.to-top {
position: fixed;
/* Stacks above the .live-chat-btn on the right side */
bottom: 100px; right: 30px;
width: 48px; height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-primary), var(--c-leaf-2));
color: #fff;
border: none;
cursor: pointer;
box-shadow: 0 14px 30px -10px rgba(15, 62, 46, .5);
z-index: 50;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all var(--t-mid) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { transform: translateY(-5px); }
/* Glass live-chat button — bottom-right */
/* When the Tawk chat window is open, hide our floating buttons so they
don't overlap the chat panel. body.chat-open is toggled by the Tawk
lifecycle hooks in includes/footer.php. */
body.chat-open .live-chat-btn,
body.chat-open .whatsapp-btn,
body.chat-open .to-top {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(20px);
transition: all var(--t-fast) var(--ease);
}
.live-chat-btn {
position: fixed;
bottom: 30px; right: 30px;
z-index: 51;
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .8rem 1.1rem .8rem .85rem;
background: rgba(255, 255, 255, .65);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, .7);
border-radius: var(--r-pill);
color: var(--c-primary-2);
font-family: inherit;
font-size: .9rem;
font-weight: 600;
cursor: pointer;
box-shadow:
0 14px 35px -10px rgba(15, 62, 46, .25),
inset 0 1px 0 rgba(255, 255, 255, .8);
transition: all var(--t-fast) var(--ease);
text-decoration: none;
}
.live-chat-btn:hover {
transform: translateY(-3px);
background: #fff;
color: var(--c-primary-2);
box-shadow:
0 20px 45px -10px rgba(15, 62, 46, .35),
0 0 0 4px rgba(108, 176, 76, .15);
}
.live-chat-btn .lc-icon {
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-leaf), var(--c-primary));
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: .85rem;
position: relative;
}
.live-chat-btn .lc-pulse {
position: absolute;
top: -2px; right: -2px;
width: 10px; height: 10px;
background: #FF5C5C;
border: 2px solid #fff;
border-radius: 50%;
animation: lcPulse 1.8s ease-in-out infinite;
}
@keyframes lcPulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 92, 92, .55); }
50% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(255, 92, 92, 0); }
}
.live-chat-btn .lc-label .top {
display: block;
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--c-muted);
font-weight: 500;
}
.live-chat-btn .lc-label .bot {
display: block;
font-size: .92rem;
color: var(--c-ink);
font-weight: 600;
line-height: 1.1;
}
@media (max-width: 575px) {
.live-chat-btn {
bottom: 18px; right: 18px;
padding: .6rem .85rem .6rem .6rem;
}
.live-chat-btn .lc-label { display: none; }
.to-top { bottom: 80px; right: 18px; }
}
/* Glass WhatsApp button — bottom-left, mirrors .live-chat-btn */
.whatsapp-btn {
position: fixed;
bottom: 30px; left: 30px;
z-index: 51;
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .8rem 1.1rem .8rem .85rem;
background: rgba(255, 255, 255, .65);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, .7);
border-radius: var(--r-pill);
color: var(--c-primary-2);
font-family: inherit;
font-size: .9rem;
font-weight: 600;
text-decoration: none;
box-shadow:
0 14px 35px -10px rgba(37, 211, 102, .28),
inset 0 1px 0 rgba(255, 255, 255, .8);
transition: all var(--t-fast) var(--ease);
}
.whatsapp-btn:hover {
transform: translateY(-3px);
background: #fff;
color: var(--c-primary-2);
box-shadow:
0 20px 45px -10px rgba(37, 211, 102, .40),
0 0 0 4px rgba(37, 211, 102, .15);
}
.whatsapp-btn:focus-visible {
outline: 2px solid #25D366;
outline-offset: 3px;
}
.whatsapp-btn .wa-icon {
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #25D366, #128C7E);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1rem;
position: relative;
}
.whatsapp-btn .wa-pulse {
position: absolute;
top: -2px; right: -2px;
width: 10px; height: 10px;
background: #25D366;
border: 2px solid #fff;
border-radius: 50%;
animation: waPulse 1.8s ease-in-out infinite;
}
@keyframes waPulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
50% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(37, 211, 102, 0); }
}
.whatsapp-btn .wa-label .top {
display: block;
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--c-muted);
font-weight: 500;
}
.whatsapp-btn .wa-label .bot {
display: block;
font-size: .82rem;
color: var(--c-primary-2);
font-weight: 600;
line-height: 1.1;
letter-spacing: .01em;
}
@media (max-width: 575px) {
.whatsapp-btn {
bottom: 18px; left: 18px;
padding: .6rem .85rem .6rem .6rem;
}
.whatsapp-btn .wa-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.whatsapp-btn,
.whatsapp-btn:hover { transition: none; transform: none; }
.whatsapp-btn .wa-pulse { animation: none; }
}
/* =====================================================================
25. POPUP FORM
===================================================================== */
.popup-overlay {
position: fixed; inset: 0;
z-index: 200;
background: rgba(15, 62, 46, .55);
backdrop-filter: blur(10px);
display: none;
align-items: center;
justify-content: center;
padding: 1.25rem;
opacity: 0;
transition: opacity var(--t-mid) var(--ease);
}
.popup-overlay.is-open { display: flex; opacity: 1; }
body.popup-open { overflow: hidden; }
.popup-modal {
width: min(960px, 100%);
max-height: 92vh;
overflow-y: auto;
border-radius: var(--r-xl);
background: rgba(255, 255, 255, .96);
backdrop-filter: blur(30px) saturate(180%);
-webkit-backdrop-filter: blur(30px) saturate(180%);
border: 1px solid rgba(255, 255, 255, .8);
position: relative;
box-shadow: 0 40px 80px -20px rgba(15, 62, 46, .4);
transform: translateY(20px);
transition: transform var(--t-mid) var(--ease);
}
.popup-overlay.is-open .popup-modal { transform: translateY(0); }
.popup-close {
position: absolute;
top: 1rem; right: 1rem;
width: 38px; height: 38px;
border-radius: 50%;
border: 1px solid var(--glass-border);
background: rgba(255, 255, 255, .8);
color: var(--c-primary);
cursor: pointer;
z-index: 2;
transition: all var(--t-fast) var(--ease);
}
.popup-close:hover { background: var(--c-primary); color: #fff; transform: rotate(90deg); }
.popup-grid { display: grid; grid-template-columns: .9fr 1.1fr; }
.popup-aside {
position: relative;
padding: 2.5rem;
background: linear-gradient(160deg, #143E31, #0B2E22);
color: #fff;
overflow: hidden;
border-radius: var(--r-xl) 0 0 var(--r-xl);
}
.popup-aside__bg { position: absolute; inset: 0; pointer-events: none; }
.popup-blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
}
.popup-blob--1 { width: 200px; height: 200px; top: -50px; left: -50px; background: rgba(108, 176, 76, .35); }
.popup-blob--2 { width: 240px; height: 240px; bottom: -80px; right: -60px; background: rgba(201, 168, 76, .14); }
.popup-aside__inner { position: relative; }
.popup-title { color: #fff; font-size: 1.5rem; margin-block: 1rem; line-height: 1.25; }
.popup-title .serif-italic, .popup-title .gold-italic { color: #E5C46B; }
.popup-lead { color: rgba(255, 255, 255, .8); font-size: .92rem; }
.popup-perks { list-style: none; padding: 0; margin: 1.5rem 0; display: flex; flex-direction: column; gap: .6rem; }
.popup-perks li { display: flex; align-items: center; gap: .65rem; font-size: .92rem; color: rgba(255, 255, 255, .9); }
.popup-perks i { color: var(--c-leaf); font-size: .8rem; }
.popup-contact { display: flex; flex-direction: column; gap: .55rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .15); margin-top: 1rem; }
.popup-contact a { color: rgba(255, 255, 255, .85); font-size: .88rem; display: flex; align-items: center; gap: .55rem; }
.popup-contact a i { color: var(--c-leaf); }
.popup-form { padding: 2.5rem; }
.popup-form .form-label { font-size: .85rem; font-weight: 600; color: var(--c-ink); margin-bottom: .35rem; display: block; }
.popup-form .form-control, .popup-form .form-select {
width: 100%;
background: var(--c-ivory-2);
border: 1px solid transparent;
border-radius: var(--r-md);
padding: .8rem 1rem;
font-family: inherit;
font-size: .95rem;
color: var(--c-ink);
transition: all var(--t-fast) var(--ease);
}
.popup-form .form-control:focus, .popup-form .form-select:focus {
outline: none;
background: #fff;
border-color: var(--c-leaf);
box-shadow: 0 0 0 4px rgba(108, 176, 76, .14);
}
.popup-form textarea.form-control { resize: vertical; min-height: 100px; }
.popup-form .form-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 1rem center !important;
background-size: 14px 14px !important;
padding-right: 2.5rem !important;
}
.form-note { color: var(--c-muted); font-size: .82rem; display: inline-flex; align-items: center; gap: .35rem; }
.form-note i { color: var(--c-leaf-2); }
/* Tablet & mobile: hide the green branding aside so the form gets the full
modal width — there isn't room to show both side by side on small screens. */
@media (max-width: 991px) {
.popup-grid { grid-template-columns: 1fr; }
.popup-aside { display: none; }
.popup-form { padding: 2rem; }
}
/* =====================================================================
26. ACHIEVEMENTS / STATS BAR
===================================================================== */
.achievements { padding-block: clamp(3rem, 5vw, 5rem); }
.achievements-card {
background: rgba(255, 255, 255, .65);
backdrop-filter: blur(22px) saturate(180%);
-webkit-backdrop-filter: blur(22px) saturate(180%);
border: 1px solid var(--glass-border);
border-radius: var(--r-xl);
box-shadow: 0 22px 50px -20px rgba(15, 62, 46, .2);
padding: 3rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
position: relative;
overflow: hidden;
}
.achievements-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(50% 50% at 50% 0%, rgba(108, 176, 76, .14), transparent 70%);
pointer-events: none;
}
.achievement { text-align: center; position: relative; }
.achievement + .achievement::before {
content: '';
position: absolute;
left: -1rem; top: 25%; bottom: 25%;
width: 1px;
background: rgba(27, 83, 64, .08);
}
.achievement-num {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(2rem, 4vw, 3rem);
color: var(--c-primary);
line-height: 1;
margin-bottom: .35rem;
font-weight: 400;
}
.achievement-suffix { color: var(--c-leaf-2); }
.achievement-label {
color: var(--c-muted);
font-size: .9rem;
letter-spacing: -.01em;
}
@media (max-width: 991px) {
.achievements-card { grid-template-columns: repeat(2, 1fr); padding: 2rem; }
.achievement + .achievement::before { display: none; }
}
/* =====================================================================
27. AOS DEFAULTS (subtle motion)
===================================================================== */
[data-aos] { transition-timing-function: var(--ease) !important; }
/* =====================================================================
28. PAGE BANNER (interior pages: about, portfolio, blog, etc.)
===================================================================== */
.page-banner {
padding: 9rem 0 5rem;
position: relative;
overflow: hidden;
background:
radial-gradient(50% 50% at 100% 0%, rgba(108, 176, 76, .16), transparent 70%),
radial-gradient(50% 50% at 0% 100%, rgba(27, 83, 64, .1), transparent 70%),
linear-gradient(180deg, #FBFAF6 0%, #F2F7EF 100%);
text-align: center;
isolation: isolate;
}
.page-banner .hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.page-banner .hero-bg .leaf-1 { top: 14%; left: -40px; opacity: .07; width: 200px; }
.page-banner .hero-bg .leaf-2 { bottom: 8%; right: -30px; opacity: .06; width: 180px; transform: rotate(160deg); }
.page-banner .hero-bg .blob-1 { width: 380px; height: 380px; top: -120px; right: -80px; }
.page-banner .hero-bg .blob-2 { width: 280px; height: 280px; bottom: -100px; left: -80px; }
.page-banner__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.page-banner .breadcrumb-pill { margin-bottom: 1.5rem; }
.page-banner .page-title {
font-size: clamp(2.2rem, 4.6vw, 3.8rem);
letter-spacing: -.035em;
line-height: 1.1;
color: var(--c-ink);
margin: 0 auto .85rem;
max-width: 920px;
}
.page-banner .page-sub {
color: var(--c-muted);
font-size: 1.05rem;
line-height: 1.65;
max-width: 680px;
margin: 0 auto;
}
@media (max-width: 575px) {
.page-banner { padding: 7.5rem 0 3rem; }
}
/* =====================================================================
28b. BOOTSTRAP ACCORDION (inner pages) — themed as glass FAQ
===================================================================== */
.faq-section .accordion,
.faq-accordion {
display: flex;
flex-direction: column;
gap: .75rem;
max-width: 820px;
margin: 0 auto;
background: transparent !important;
}
.faq-section .accordion-item,
.faq-accordion .accordion-item {
background: rgba(255, 255, 255, .65) !important;
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid var(--glass-border) !important;
border-radius: var(--r-md) !important;
overflow: hidden;
transition: all var(--t-mid) var(--ease);
}
.faq-section .accordion-item:has(.accordion-button:not(.collapsed)),
.faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
background: #fff !important;
border-color: rgba(108, 176, 76, .35) !important;
box-shadow: 0 16px 40px -18px rgba(27, 83, 64, .25);
}
.faq-section .accordion-header,
.faq-accordion .accordion-header { margin: 0; }
.faq-section .accordion-button,
.faq-accordion .accordion-button {
width: 100%;
background: transparent !important;
border: none !important;
text-align: left;
padding: 1.2rem 1.5rem !important;
font-family: inherit !important;
font-size: 1rem !important;
font-weight: 600 !important;
color: var(--c-ink) !important;
cursor: pointer;
line-height: 1.4;
box-shadow: none !important;
display: flex !important;
align-items: center;
gap: 1rem;
position: relative;
}
.faq-section .accordion-button .faq-num,
.faq-accordion .accordion-button .faq-num {
font-family: 'Instrument Serif', Georgia, serif;
color: var(--c-leaf);
margin-right: .8rem;
font-weight: 400;
font-size: 1.1rem;
flex-shrink: 0;
}
/* Replace Bootstrap chevron with our themed + icon */
.faq-section .accordion-button::after,
.faq-accordion .accordion-button::after {
content: '\f067' !important; /* fa-plus */
font-family: 'Font Awesome 6 Free' !important;
font-weight: 900 !important;
background-image: none !important;
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
background-color: rgba(108, 176, 76, .15) !important;
color: var(--c-primary) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
font-size: .82rem !important;
margin-left: auto;
flex-shrink: 0;
transition: all var(--t-fast) var(--ease) !important;
transform: rotate(0deg) !important;
}
.faq-section .accordion-button:not(.collapsed)::after,
.faq-accordion .accordion-button:not(.collapsed)::after {
background-color: var(--c-primary) !important;
color: #fff !important;
transform: rotate(45deg) !important;
}
.faq-section .accordion-body,
.faq-accordion .accordion-body {
padding: 0 1.5rem 1.4rem 1.5rem !important;
color: var(--c-muted);
font-size: .95rem;
line-height: 1.7;
}
.faq-section .accordion-body p { color: var(--c-muted); margin: 0; }
.faq-section .accordion-collapse,
.faq-accordion .accordion-collapse { border: none !important; }
/* Inner-page Bootstrap-row FAQ — collapse 2-col layout to centered single column
matching the homepage FAQ pattern. !important is required to beat Bootstrap CDN's
col-lg-* width rules. */
.faq-section .row {
flex-direction: column !important;
align-items: center !important;
margin-inline: auto !important;
max-width: 880px;
}
.faq-section .row > [class^="col-"],
.faq-section .row > [class*=" col-"] {
width: 100% !important;
max-width: 820px !important;
flex: 0 0 100% !important;
margin-inline: auto !important;
padding-inline: 0 !important;
}
.faq-section .row > .col-lg-4 {
text-align: center !important;
margin-bottom: 2.5rem !important;
}
.faq-section .col-lg-4 .eyebrow { margin: 0 auto 1rem; }
.faq-section .col-lg-4 .section-title { margin-bottom: 1rem; }
.faq-section .col-lg-4 .section-lead,
.faq-section .col-lg-4 p { color: var(--c-muted); margin-bottom: 1.5rem; }
.faq-section .col-lg-4 .btn { margin: 0 auto; }
/* Make sure the accordion itself is centered too */
.faq-section .accordion,
.faq-section .faq-accordion {
margin: 0 auto !important;
max-width: 820px;
width: 100%;
}
/* =====================================================================
28c. INNER SERVICE PAGE FOLDS — dark service section icons + layout
===================================================================== */
.section--dark .service-card .service-icon {
background: linear-gradient(135deg, rgba(108, 176, 76, .25), rgba(108, 176, 76, .12));
color: var(--c-leaf);
border: 1px solid rgba(108, 176, 76, .25);
width: 54px; height: 54px;
border-radius: var(--r-md);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.4rem;
}
.section--dark .service-card:hover .service-icon {
background: linear-gradient(135deg, var(--c-leaf), var(--c-primary));
color: #fff;
}
.section--dark .service-card .service-glow { display: none; }
.service-card .service-glow { display: none; }
/* "Other Services" cross-promo: ensure layout aligns and icons render */
#other-services .services-grid {
margin-top: 2.5rem;
}
#other-services .service-card {
height: 100%;
}
#other-services .service-card .service-icon i { line-height: 1; }
/* =====================================================================
28d. INNER-PAGE PRICING SECTION (.publish-cost-sec) — light theme
===================================================================== */
.publish-cost-sec {
padding-block: clamp(4rem, 7vw, 6.5rem);
position: relative;
overflow: hidden;
background:
radial-gradient(40% 50% at 90% 10%, rgba(108, 176, 76, .12), transparent 70%),
radial-gradient(40% 50% at 10% 90%, rgba(27, 83, 64, .08), transparent 70%),
linear-gradient(180deg, var(--c-paper) 0%, var(--c-mint) 100%);
}
.publish-cost-sec .row { align-items: center; }
.publish-cost-sec .col-lg-6 { width: 100%; }
@media (min-width: 992px) {
.publish-cost-sec .col-lg-6 { width: 50%; }
}
.publish-cost-sec .eyebrow { margin-bottom: 1rem; }
.publish-cost-sec .section-title { margin-bottom: 1.25rem; }
.publish-cost-sec p { color: var(--c-muted); margin-bottom: 1rem; }
.publish-cost-sec .btn { margin-top: 1rem; }
/* .publish-cost-art {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
aspect-ratio: 5/4;
box-shadow: 0 30px 60px -20px rgba(15, 62, 46, .3);
}
.publish-cost-art img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.publish-cost-art::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(108, 176, 76, .14), transparent 50%);
pointer-events: none;
} */
/* =====================================================================
28e. INNER-PAGE WHY/VALUE SECTIONS — bullet lists with leaf-check icons
===================================================================== */
/* Inner-page bullet lists with FA icons — hide native bullets, render chip-style icons.
.genre-list is the most common class used by service pages; broaden coverage so
any inline ul with FA icons inside service / why / value / about sections gets the same treatment. */
.genre-list,
.why-eph-sec ul,
.about-snippet ul,
.publish-cost-sec ul,
#value ul,
.value-section ul,
.service-hero__lead + ul,
.faq-section .col-lg-4 ul {
list-style: none !important;
padding-left: 0 !important;
margin: 1.25rem 0 1.75rem !important;
}
.genre-list li,
.why-eph-sec ul li,
.about-snippet ul li,
.publish-cost-sec ul li,
#value ul li,
.value-section ul li,
.faq-section .col-lg-4 ul li {
display: flex !important;
align-items: flex-start !important;
gap: .65rem !important;
padding: .35rem 0 !important;
color: var(--c-text) !important;
font-size: .98rem !important;
line-height: 1.6 !important;
list-style: none !important;
}
.genre-list li::marker,
.why-eph-sec ul li::marker,
.publish-cost-sec ul li::marker,
#value ul li::marker { content: ''; }
.genre-list li > i,
.why-eph-sec ul li > i,
.about-snippet ul li > i,
.publish-cost-sec ul li > i,
#value ul li > i,
.value-section ul li > i,
.faq-section .col-lg-4 ul li > i {
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 50%;
background: rgba(108, 176, 76, .18);
color: var(--c-leaf-2) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
font-size: .65rem;
margin-top: 4px;
}
/* The inner publishing.php "Why It Matters" section uses .why-eph-sec --
ensure image + content align nicely with the new design. */
.why-eph-sec {
padding-block: clamp(4rem, 7vw, 6.5rem);
position: relative;
overflow: hidden;
background:
radial-gradient(40% 50% at 10% 10%, rgba(108, 176, 76, .12), transparent 70%),
linear-gradient(180deg, var(--c-mint) 0%, var(--c-paper) 100%);
}
.why-eph-sec .row { align-items: center; }
.why-eph-sec .col-lg-6 { width: 100%; }
@media (min-width: 992px) {
.why-eph-sec .col-lg-6 { width: 50%; }
}
/* .why-eph-art {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
aspect-ratio: 5/4;
box-shadow: 0 30px 60px -20px rgba(15, 62, 46, .3);
}
.why-eph-art img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
} */
.why-eph-art__chip {
position: absolute;
bottom: 1.25rem; left: 1.25rem;
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .5rem 1rem;
background: var(--glass-bg-2);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
border: 1px solid rgba(255, 255, 255, .65);
border-radius: var(--r-pill);
font-size: .82rem;
font-weight: 600;
color: var(--c-primary);
box-shadow: 0 12px 30px -12px rgba(15, 62, 46, .3);
}
/* =====================================================================
29. SERVICE HERO (interior pages)
===================================================================== */
.service-hero {
padding: 8rem 0 4.5rem;
position: relative;
overflow: hidden;
background:
radial-gradient(50% 50% at 90% 10%, rgba(108, 176, 76, .14), transparent 70%),
radial-gradient(50% 50% at 10% 90%, rgba(27, 83, 64, .08), transparent 70%),
linear-gradient(180deg, #FBFAF6 0%, #F2F7EF 100%);
}
.service-hero .hero-bg .leaf-1 { top: 12%; left: -50px; opacity: .07; width: 220px; }
.service-hero-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 3.5rem;
align-items: center;
}
.service-hero-grid > * { min-width: 0; }
.service-hero__title {
font-size: clamp(2rem, 3.8vw, 3.2rem);
letter-spacing: -0.035em;
line-height: 1.12;
color: var(--c-ink);
margin: 1rem 0 1.25rem;
}
.service-hero__lead {
color: var(--c-muted);
font-size: 1rem;
line-height: 1.7;
margin-bottom: 1rem;
}
.service-hero__ctas { margin-top: 1.75rem; }
@media (max-width: 991px) {
.service-hero { padding: 7rem 0 3rem; }
.service-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
/* Breadcrumb pill — premium glass */
.breadcrumb-pill {
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .4rem .55rem .4rem .85rem;
background: var(--glass-bg-2);
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
border: 1px solid var(--glass-border);
border-radius: var(--r-pill);
font-size: .82rem;
color: var(--c-muted);
box-shadow: 0 6px 16px -8px rgba(15, 62, 46, .15), inset 0 1px 0 rgba(255, 255, 255, .55);
margin-bottom: .25rem;
}
.breadcrumb-pill a {
display: inline-flex;
align-items: center;
gap: .4rem;
color: var(--c-primary);
font-weight: 600;
padding: .25rem .55rem;
border-radius: var(--r-pill);
transition: background var(--t-fast) var(--ease);
}
.breadcrumb-pill a:hover { background: rgba(108, 176, 76, .12); }
.breadcrumb-pill a i { color: var(--c-leaf-2); font-size: .85rem; }
.breadcrumb-pill .sep i { font-size: .6rem; color: var(--c-soft); }
.breadcrumb-pill .current {
padding: .25rem .85rem;
color: var(--c-ink);
font-weight: 600;
background: rgba(108, 176, 76, .12);
border-radius: var(--r-pill);
}
/* =====================================================================
29b. QUOTE CARD FORM — premium glass design
===================================================================== */
.quote-card {
position: relative;
padding: 2.25rem;
background: var(--glass-bg-2);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(255, 255, 255, .7);
border-radius: var(--r-xl);
box-shadow:
0 30px 80px -30px rgba(15, 62, 46, .35),
inset 0 1px 0 rgba(255, 255, 255, .85);
overflow: hidden;
isolation: isolate;
}
.quote-card::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 220px; height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(108, 176, 76, .25), transparent 70%);
z-index: -1;
}
.quote-card__head {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.quote-card__ico {
width: 50px; height: 50px;
border-radius: 14px;
background: linear-gradient(135deg, var(--c-leaf), var(--c-primary));
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.15rem;
flex-shrink: 0;
box-shadow: 0 10px 24px -10px rgba(108, 176, 76, .5);
}
.quote-card__eyebrow {
display: inline-block;
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .18em;
color: var(--c-leaf-2);
font-weight: 600;
margin-bottom: 4px;
}
.quote-card__title {
font-size: 1.25rem;
margin: 0;
color: var(--c-ink);
line-height: 1.25;
}
.quote-card__lead {
color: var(--c-muted);
font-size: .92rem;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.quote-card__form .qc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .9rem;
}
.qc-field { display: block; }
.qc-field--full { grid-column: 1 / -1; }
.qc-label {
display: block;
font-size: .78rem;
font-weight: 600;
color: var(--c-ink);
margin-bottom: .35rem;
letter-spacing: -.005em;
}
.qc-field input,
.qc-field select,
.qc-field textarea {
width: 100%;
background: rgb(190 225 174 / 35%);
border: 1.5px solid transparent;
border-radius: var(--r-md);
padding: .75rem 1rem;
font-family: inherit;
font-size: .92rem;
color: var(--c-ink);
transition: all var(--t-fast) var(--ease);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.qc-field input::placeholder,
.qc-field textarea::placeholder { color: var(--c-soft); }
.qc-field input:focus,
.qc-field select:focus,
.qc-field textarea:focus {
outline: none;
background: #fff;
border-color: var(--c-leaf);
box-shadow: 0 0 0 4px rgba(108, 176, 76, .14);
}
.qc-field textarea { resize: vertical; min-height: 90px; }
.qc-field select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 14px 14px;
padding-right: 2.5rem;
}
.qc-submit {
width: 100%;
margin-top: 1.25rem;
justify-content: center;
}
.qc-note {
margin-top: 1rem;
text-align: center;
color: var(--c-muted);
font-size: .82rem;
display: flex;
align-items: center;
justify-content: center;
gap: .4rem;
}
.qc-note i { color: var(--c-leaf-2); }
@media (max-width: 575px) {
.quote-card { padding: 1.5rem; }
.quote-card__form .qc-grid { grid-template-columns: 1fr; }
}
/* =====================================================================
29c. CONTACT-FORM (interior pages, contact.php) — same design language
===================================================================== */
.contact-form .form-control,
.contact-form .form-select,
.contact-section input,
.contact-section select,
.contact-section textarea {
background: var(--c-ivory);
border: 1.5px solid transparent;
border-radius: var(--r-md);
padding: .8rem 1rem;
font-family: inherit;
font-size: .95rem;
color: var(--c-ink);
width: 100%;
transition: all var(--t-fast) var(--ease);
}
.contact-form .form-control:focus,
.contact-form .form-select:focus,
.contact-section input:focus,
.contact-section select:focus,
.contact-section textarea:focus {
outline: none;
background: #fff;
border-color: var(--c-leaf);
box-shadow: 0 0 0 4px rgba(108, 176, 76, .14);
}
/* =====================================================================
30. UTILITIES
===================================================================== */
.text-center { text-align: center; }
.text-white { color: #fff; }
.mt-2 { margin-top: .5rem; } .mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 1.5rem; } .mt-5 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: 1.5rem; }
/* Bootstrap row helpers used in legacy markup */
.row { display: flex; flex-wrap: wrap; margin: 0 -.75rem; }
.row > [class^="col-"], .row > [class*=" col-"] { padding: 0 .75rem; flex: 0 0 auto; }
.col-12 { width: 100%; }
.col-6 { width: 50%; }
.col-md-4 { width: 100%; }
.col-md-6 { width: 100%; }
.col-md-7 { width: 100%; }
.col-md-5 { width: 100%; }
.col-md-12 { width: 100%; }
.col-lg-2 { width: 50%; }
.col-lg-3 { width: 50%; }
.col-lg-4 { width: 100%; }
.col-lg-6 { width: 100%; }
.col-lg-8 { width: 100%; }
@media (min-width: 768px) {
.col-md-4 { width: 33.333%; }
.col-md-5 { width: 41.666%; }
.col-md-6 { width: 50%; }
.col-md-7 { width: 58.333%; }
.col-md-12 { width: 100%; }
}
@media (min-width: 992px) {
.col-lg-2 { width: 16.666%; }
.col-lg-3 { width: 25%; }
.col-lg-4 { width: 33.333%; }
.col-lg-6 { width: 50%; }
.col-lg-8 { width: 66.666%; }
}
.g-3 { gap: 1rem 0; }
.g-4 { gap: 1.5rem 0; }
.g-5 { gap: 2rem 0; }
.d-flex { display: flex; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.flex-wrap { flex-wrap: wrap; }
.gap-3 { gap: 1rem; }
/* Owl base re-skin */
.owl-carousel .owl-dots { display: flex; justify-content: center; gap: 4px; margin-top: 1rem; }
.hero-stage .owl-stage-outer { overflow: hidden; }
.testimonials-slider .owl-stage-outer { overflow: hidden; }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
/* =====================================================================
31. PORTFOLIO PAGE — filter tabs + grid cards
===================================================================== */
.portfolio-grid-section { padding-block: clamp(3rem, 6vw, 5rem); }
/* Filter chips */
.portfolio-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .5rem;
margin-bottom: 3rem;
padding: .55rem;
background: var(--glass-bg-2);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
border: 1px solid rgba(255, 255, 255, .65);
border-radius: var(--r-pill);
box-shadow: 0 14px 40px -18px rgba(15, 62, 46, .25), inset 0 1px 0 rgba(255, 255, 255, .8);
max-width: max-content;
margin-inline: auto 3rem;
margin-left: auto;
margin-right: auto;
}
.pf-chip {
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .55rem 1.15rem;
background: transparent;
border: 1px solid transparent;
border-radius: var(--r-pill);
font-family: inherit;
font-size: .88rem;
font-weight: 600;
color: var(--c-muted);
cursor: pointer;
transition: all var(--t-fast) var(--ease);
white-space: nowrap;
}
.pf-chip:hover {
color: var(--c-primary);
background: rgba(108, 176, 76, .1);
}
.pf-chip.active {
background: linear-gradient(135deg, var(--c-primary), var(--c-leaf-2));
color: #fff;
box-shadow: 0 10px 24px -10px rgba(27, 83, 64, .55);
}
.pf-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
padding: 0 .45rem;
height: 22px;
border-radius: var(--r-pill);
background: rgba(108, 176, 76, .18);
color: var(--c-primary);
font-size: .72rem;
font-weight: 700;
line-height: 1;
}
.pf-chip.active .pf-count {
background: rgba(255, 255, 255, .25);
color: #fff;
}
/* Portfolio card grid */
.portfolio-grid { row-gap: 2rem; }
.pf-item { transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.pf-item.is-hidden { display: none; }
.portfolio-card {
display: block;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--glass-bg-2);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid var(--glass-border);
box-shadow: 0 14px 40px -18px rgba(15, 62, 46, .22);
transition: all var(--t-mid) var(--ease);
height: 100%;
text-decoration: none;
color: inherit;
position: relative;
}
.portfolio-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 50px -16px rgba(15, 62, 46, .35);
border-color: rgba(108, 176, 76, .4);
}
.portfolio-card .book__cover {
position: relative;
aspect-ratio: 2/3;
overflow: hidden;
background: var(--c-mint);
border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.portfolio-card .book__cover img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .6s var(--ease);
}
.portfolio-card:hover .book__cover img { transform: scale(1.05); }
.portfolio-card .book__cover::before {
content: '';
position: absolute; top: 0; left: 0; bottom: 0;
width: 6%;
background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent);
z-index: 2;
}
.book__shine {
position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
transform: translateX(-100%);
transition: transform .8s var(--ease);
pointer-events: none;
}
.portfolio-card:hover .book__shine { transform: translateX(100%); }
.portfolio-card__meta {
padding: 1.1rem 1.25rem 1.2rem;
}
.portfolio-card__cat {
display: inline-block;
font-size: .68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--c-leaf-2);
margin-bottom: .55rem;
}
.portfolio-card__title {
font-size: 1rem;
font-weight: 600;
color: var(--c-ink);
margin: 0 0 .25rem;
line-height: 1.35;
letter-spacing: -.005em;
/* Clamp to 2 lines */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.portfolio-card__author {
display: block;
font-size: .82rem;
color: var(--c-muted);
font-style: italic;
}
.portfolio-card__cta {
margin-top: 1rem;
display: inline-flex;
align-items: center;
gap: .4rem;
color: var(--c-primary);
font-weight: 600;
font-size: .85rem;
transition: gap var(--t-fast) var(--ease);
}
.portfolio-card__cta i { color: var(--c-leaf-2); }
.portfolio-card:hover .portfolio-card__cta { gap: .6rem; color: var(--c-primary-2); }
@media (max-width: 575px) {
.portfolio-filters {
padding: .4rem;
gap: .3rem;
margin-inline: -.5rem 0;
border-radius: var(--r-lg);
}
.pf-chip { padding: .45rem .85rem; font-size: .8rem; }
}
/* =====================================================================
32. CONTACT PAGE — list + map
===================================================================== */
.contact-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.contact-list li {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.25rem;
background: var(--glass-bg-2);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid var(--glass-border);
border-radius: var(--r-md);
box-shadow: 0 12px 30px -16px rgba(15, 62, 46, .2);
transition: all var(--t-mid) var(--ease);
}
.contact-list li:hover {
transform: translateX(4px);
border-color: rgba(108, 176, 76, .4);
box-shadow: 0 18px 40px -14px rgba(27, 83, 64, .25);
}
.contact-ico {
width: 46px; height: 46px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(108, 176, 76, .18), rgba(27, 83, 64, .12));
color: var(--c-primary);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
transition: all var(--t-mid) var(--ease);
}
.contact-list li:hover .contact-ico {
background: linear-gradient(135deg, var(--c-leaf), var(--c-primary));
color: #fff;
}
.contact-list li small {
display: block;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--c-muted);
font-weight: 600;
margin-bottom: 3px;
}
.contact-list li a {
font-size: 1rem;
font-weight: 600;
color: var(--c-ink);
transition: color var(--t-fast) var(--ease);
}
.contact-list li a:hover { color: var(--c-primary); }
.contact-list li p {
font-size: .92rem;
color: var(--c-text);
margin: 0;
line-height: 1.5;
}
/* Contact section / form layout */
.contact-section { padding-block: clamp(3rem, 6vw, 5rem); }
.contact-form .form-label {
display: block;
font-size: .82rem;
font-weight: 600;
color: var(--c-ink);
margin-bottom: .35rem;
letter-spacing: -.005em;
}
.contact-form .opt {
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--c-leaf-2);
margin-left: .35rem;
font-weight: 600;
}
.contact-form .form-control,
.contact-form .form-select,
.contact-form textarea {
background: var(--c-ivory);
border: 1.5px solid transparent;
border-radius: var(--r-md);
padding: .85rem 1rem;
font-family: inherit;
font-size: .95rem;
color: var(--c-ink);
width: 100%;
transition: all var(--t-fast) var(--ease);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.contact-form .form-control:focus,
.contact-form .form-select:focus,
.contact-form textarea:focus {
outline: none;
background: #fff;
border-color: var(--c-leaf);
box-shadow: 0 0 0 4px rgba(108, 176, 76, .14);
}
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form .form-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 14px 14px;
padding-right: 2.5rem;
}
.form-note {
display: inline-flex;
align-items: center;
gap: .4rem;
color: var(--c-muted);
font-size: .82rem;
}
.form-note i { color: var(--c-leaf-2); }
/* Map */
.map-section { padding-block: clamp(2rem, 5vw, 5rem); }
.map-card {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
background: var(--glass-bg-2);
border: 1px solid var(--glass-border);
box-shadow: 0 30px 70px -30px rgba(15, 62, 46, .35);
aspect-ratio: 21/9;
}
.map-card iframe {
width: 100%; height: 100%;
border: 0;
display: block;
filter: saturate(.85) hue-rotate(-8deg);
}
/* Contact intro — section that uses .about-snippet with body copy + contact-list */
#contact-intro {
padding-block: clamp(3rem, 6vw, 5rem) !important;
}
#contact-intro .row { align-items: center; }
/* =====================================================================
32b. CONTACT PAGE — clean two-column layout (copy left + form right)
===================================================================== */
.contact-page {
padding-block: clamp(3.5rem, 7vw, 6.5rem);
position: relative;
overflow: hidden;
}
.contact-page::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(40% 50% at 90% 10%, rgba(108, 176, 76, .12), transparent 70%),
radial-gradient(40% 50% at 10% 90%, rgba(27, 83, 64, .08), transparent 70%);
pointer-events: none;
z-index: -1;
}
.contact-page-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
position: relative;
z-index: 1;
}
.contact-page-copy { min-width: 0; }
.contact-page-copy .eyebrow { margin-bottom: 1.1rem; }
.contact-page-copy .section-title { margin-bottom: 1.25rem; }
.contact-page-copy p { color: var(--c-muted); line-height: 1.7; margin-bottom: 1rem; }
.contact-page-copy p.lead { color: var(--c-text); font-size: 1.05rem; }
.contact-page-copy .contact-list { margin-top: 2rem; }
.contact-perks {
list-style: none;
padding: 0;
margin: 2rem 0 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: .65rem 1.25rem;
}
.contact-perks li {
display: flex;
align-items: flex-start;
gap: .55rem;
color: var(--c-ink);
font-size: .9rem;
line-height: 1.4;
font-weight: 500;
}
.contact-perks li i {
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 50%;
background: rgba(108, 176, 76, .18);
color: var(--c-leaf-2);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .65rem;
margin-top: 2px;
}
.contact-page-form { min-width: 0; }
/* Make the embedded quote-card a touch tighter on the contact page */
.contact-page-form .quote-card { padding: 2rem; }
.contact-page-form .quote-card__head { margin-bottom: 1rem; }
@media (max-width: 991px) {
.contact-page-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.contact-perks { grid-template-columns: 1fr; }
}
/* =====================================================================
33. BLOG INDEX — search bar + uniform card grid
===================================================================== */
.blog-section { padding-block: clamp(3rem, 6vw, 5rem); }
/* Search bar */
.blog-search-wrap {
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.blog-search {
position: relative;
flex: 1;
min-width: 280px;
max-width: 640px;
display: flex;
align-items: center;
background: var(--glass-bg-2);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, .65);
border-radius: var(--r-pill);
padding: .25rem .55rem .25rem 1.25rem;
box-shadow: 0 12px 32px -16px rgba(15, 62, 46, .22), inset 0 1px 0 rgba(255, 255, 255, .8);
transition: all var(--t-fast) var(--ease);
}
.blog-search:focus-within {
border-color: rgba(108, 176, 76, .45);
box-shadow: 0 14px 36px -14px rgba(27, 83, 64, .28), 0 0 0 4px rgba(108, 176, 76, .14);
background: #fff;
}
.blog-search__ico {
color: var(--c-primary);
font-size: 1rem;
flex-shrink: 0;
margin-right: .65rem;
}
.blog-search input {
flex: 1;
background: transparent;
border: none;
outline: none;
font-family: inherit;
font-size: .98rem;
color: var(--c-ink);
padding: .85rem 0;
min-width: 0;
}
.blog-search input::placeholder {
color: var(--c-soft);
font-weight: 400;
}
.blog-search input::-webkit-search-cancel-button { display: none; }
.blog-search__clear {
width: 34px; height: 34px;
border-radius: 50%;
border: none;
background: rgba(108, 176, 76, .15);
color: var(--c-primary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all var(--t-fast) var(--ease);
}
.blog-search__clear:hover {
background: var(--c-primary);
color: #fff;
transform: rotate(90deg);
}
.blog-search-count {
display: inline-flex;
align-items: center;
padding: .5rem 1rem;
border-radius: var(--r-pill);
background: rgba(108, 176, 76, .12);
border: 1px solid rgba(108, 176, 76, .22);
color: var(--c-primary);
font-size: .85rem;
font-weight: 600;
white-space: nowrap;
}
/* Empty state */
.blog-empty {
text-align: center;
padding: 4rem 1.5rem;
background: var(--glass-bg-2);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px dashed rgba(108, 176, 76, .35);
border-radius: var(--r-xl);
margin-top: 2rem;
}
.blog-empty i {
font-size: 2.5rem;
color: var(--c-leaf);
margin-bottom: 1rem;
opacity: .7;
}
.blog-empty h3 { color: var(--c-ink); margin-bottom: .5rem; }
.blog-empty p { color: var(--c-muted); margin-bottom: 1.5rem; }
/* Hide blog items while searching */
.blog-grid-item.is-hidden { display: none !important; }
/* Card art clickable wrapper */
.blog-card__art-link {
display: block;
overflow: hidden;
}
.blog-card .post-title a {
color: inherit;
transition: color var(--t-fast) var(--ease);
}
.blog-card .post-title a:hover { color: var(--c-primary); }
@media (max-width: 575px) {
.blog-search-wrap { gap: .75rem; }
.blog-search-count { width: 100%; justify-content: center; }
}
.post-cat {
display: inline-block;
padding: .35rem .85rem;
background: rgba(108, 176, 76, .14);
color: var(--c-primary);
border: 1px solid rgba(108, 176, 76, .25);
border-radius: var(--r-pill);
font-size: .7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .14em;
margin-bottom: 1rem;
width: max-content;
}
.post-title {
font-size: clamp(1.4rem, 2.5vw, 2rem);
color: var(--c-ink);
letter-spacing: -.02em;
line-height: 1.2;
margin: 0 0 1rem;
}
.post-desc {
color: var(--c-muted);
line-height: 1.65;
margin: 0 0 1.25rem;
font-size: .98rem;
}
.post-meta {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
margin-bottom: 1.5rem;
font-size: .82rem;
color: var(--c-muted);
}
.post-meta i { color: var(--c-leaf-2); margin-right: .3rem; }
.blog-card {
display: flex;
flex-direction: column;
background: var(--glass-bg-2);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: 0 14px 40px -18px rgba(15, 62, 46, .22);
transition: all var(--t-mid) var(--ease);
height: 100%;
}
.blog-card:hover {
transform: translateY(-6px);
box-shadow: 0 28px 60px -18px rgba(15, 62, 46, .35);
border-color: rgba(108, 176, 76, .35);
}
.blog-card__art {
aspect-ratio: 16/10;
background-color: var(--c-mint);
position: relative;
overflow: hidden;
isolation: isolate;
}
.blog-card__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
opacity: 0;
transition: opacity .45s ease, transform var(--t-mid) var(--ease);
z-index: 1;
}
.blog-card__art.is-loaded .blog-card__img { opacity: 1; }
.blog-card:hover .blog-card__art.is-loaded .blog-card__img { transform: scale(1.04); }
/* Skeleton shimmer — visible until the image fires `load` */
.blog-card__art::before {
content: '';
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(110deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, .55) 50%,
rgba(255, 255, 255, 0) 100%),
linear-gradient(180deg, #e6efe8 0%, #d6e3d8 100%);
background-size: 220% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: -150% 0, 0 0;
animation: blog-skeleton 1.4s ease-in-out infinite;
transition: opacity .35s ease;
}
.blog-card__art.is-loaded::before {
opacity: 0;
animation: none;
pointer-events: none;
}
.blog-card__art::after {
content: '';
position: absolute; inset: 0;
z-index: 3;
background: linear-gradient(180deg, transparent 50%, rgba(15, 62, 46, .15));
pointer-events: none;
}
.blog-card__body {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex: 1;
}
.blog-card .post-title {
font-size: 1.15rem;
margin-bottom: .65rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card .post-desc {
font-size: .9rem;
margin-bottom: 1rem;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.post-link {
display: inline-flex;
align-items: center;
gap: .4rem;
color: var(--c-primary);
font-weight: 600;
font-size: .9rem;
transition: gap var(--t-fast) var(--ease);
margin-top: auto;
}
.post-link:hover { gap: .65rem; color: var(--c-primary-2); }
/* =====================================================================
34. BLOG POST BODY — long-form article styling
===================================================================== */
.blog-post-body {
background: var(--glass-bg-2);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid var(--glass-border);
border-radius: var(--r-xl);
padding: clamp(1.75rem, 3.5vw, 3rem);
box-shadow: 0 20px 50px -28px rgba(15, 62, 46, .2);
font-size: 1.02rem;
line-height: 1.85;
color: var(--c-text);
}
.blog-post-body p { margin: 0 0 1.25rem; color: var(--c-text); }
.blog-post-body h2 {
font-size: clamp(1.5rem, 2.6vw, 2rem);
margin: 2.5rem 0 .9rem;
color: var(--c-ink);
letter-spacing: -.025em;
}
.blog-post-body h3 {
font-size: clamp(1.25rem, 2vw, 1.5rem);
margin: 2rem 0 .75rem;
color: var(--c-ink);
letter-spacing: -.015em;
}
.blog-post-body h4 {
font-size: 1.1rem;
margin: 1.75rem 0 .6rem;
color: var(--c-primary);
font-weight: 600;
}
.blog-post-body ul,
.blog-post-body ol {
margin: 0 0 1.5rem;
padding-left: 1.5rem;
}
.blog-post-body li {
margin-bottom: .55rem;
color: var(--c-text);
}
.blog-post-body li::marker { color: var(--c-leaf); }
.blog-post-body blockquote {
margin: 2rem 0;
padding: 1.25rem 1.5rem;
background: rgba(108, 176, 76, .08);
border-left: 4px solid var(--c-leaf);
border-radius: var(--r-md);
font-style: italic;
color: var(--c-ink);
}
.blog-post-body blockquote p:last-child { margin-bottom: 0; }
.blog-post-body hr {
border: none;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(27, 83, 64, .2), transparent);
margin: 2.5rem 0;
}
.blog-post-body a {
color: var(--c-primary);
text-decoration: underline;
text-decoration-color: rgba(108, 176, 76, .4);
text-underline-offset: 3px;
transition: all var(--t-fast) var(--ease);
}
.blog-post-body a:hover {
color: var(--c-primary-2);
text-decoration-color: var(--c-leaf);
}
.blog-post-body img {
border-radius: var(--r-md);
margin: 1.5rem 0;
box-shadow: 0 14px 30px -12px rgba(15, 62, 46, .25);
}
.blog-post-body strong { color: var(--c-ink); font-weight: 600; }
.blog-post-body table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
background: rgba(255, 255, 255, .55);
border-radius: var(--r-md);
overflow: hidden;
}
.blog-post-body th {
background: rgba(108, 176, 76, .14);
color: var(--c-primary-2);
padding: .85rem 1rem;
text-align: left;
font-size: .9rem;
font-weight: 600;
border-bottom: 1px solid rgba(108, 176, 76, .25);
}
.blog-post-body td {
padding: .8rem 1rem;
font-size: .92rem;
border-bottom: 1px solid rgba(27, 83, 64, .06);
}
.blog-post-body tr:last-child td { border-bottom: none; }
/* =====================================================================
35. CLEAN UP — deprecated old selectors retained as no-op safety nets
These classes appear in legacy markup but no longer render visible chrome.
They're listed here so future audits know they're intentionally inert.
===================================================================== */
.bg-shape, .bg-shape--arch-left, .bg-shape--arch-right,
.paper-grain,
.about-snippet__image, .about-snippet__spacer, .about-snippet__copy, .about-snippet__title,
.about-collage, .about-img, .about-badge, .about-feather-mark,
.publish-cost-sec, .publish-cost-art, .publish-cost-art__chip,
.why-eph-sec, .why-eph-art,
.team-callout-sec, .team-callout-card, .team-callout-card__bg, .team-callout-card__title, .team-callout-card__cta-row,
.cta-section, .cta-card, .cta-bg, .cta-shape, .cta-title, .cta-sub, .cta-row,
.eyebrow--pill,
.crumbs, .service-hero__crumbs, .page-banner__crumbs,
.book-grid-stage, .book-grid-col, .book-grid-list,
.float-book, .float-book--left, .float-book--right, .float-book__tag,
.side-chip, .hero-doodle, .annotate, .ink-dots, .sparkle, .shelf-floor,
.book__badge,
.brand-slider-section,
.dist-map, .dist-glow {
/* Intentionally empty — legacy selectors kept here to avoid layout surprises
on any pages that may still reference them. */
}
/* =====================================================================
36. BLOG SINGLE-POST — feature hero, two-column layout, sidebar, author
===================================================================== */
.blog-feature {
background: var(--glass-bg-2);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid var(--glass-border);
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: 0 20px 50px -22px rgba(15, 62, 46, .22);
margin-bottom: 2.5rem;
}
.blog-feature__art {
display: block;
background-color: var(--c-mint);
aspect-ratio: 9 / 6;
min-height: 280px;
position: relative;
overflow: hidden;
isolation: isolate;
}
.blog-feature__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
opacity: 0;
transition: opacity .5s ease;
z-index: 1;
}
.blog-feature__art.is-loaded .blog-feature__img { opacity: 1; }
/* Skeleton shimmer for the article hero */
.blog-feature__art::before {
content: '';
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(110deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, .55) 50%,
rgba(255, 255, 255, 0) 100%),
linear-gradient(180deg, #e6efe8 0%, #d6e3d8 100%);
background-size: 220% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: -150% 0, 0 0;
animation: blog-skeleton 1.4s ease-in-out infinite;
transition: opacity .35s ease;
}
.blog-feature__art.is-loaded::before {
opacity: 0;
animation: none;
pointer-events: none;
}
@keyframes blog-skeleton {
0% { background-position: -150% 0, 0 0; }
100% { background-position: 150% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.blog-card__art::before,
.blog-feature__art::before {
animation: none;
}
.blog-card__img,
.blog-feature__img {
transition: opacity .15s ease;
}
}
@media (max-width: 767px) {
.blog-feature__art { aspect-ratio: 16 / 9; min-height: 220px; }
}
/* Article meta strip shown above the post body */
.blog-post-meta-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.25rem;
margin-bottom: 1.5rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid rgba(27, 83, 64, .1);
font-size: .88rem;
color: var(--c-muted);
}
.blog-post-meta-strip .post-cat { margin: 0; }
.blog-post-meta-strip .meta-divider {
display: inline-block;
width: 4px; height: 4px;
border-radius: 50%;
background: rgba(108, 176, 76, .5);
}
.blog-post-meta-strip i { color: var(--c-leaf-2); margin-right: .35rem; }
/* Two-column post layout.
align-items defaults to `stretch`, so the sidebar column matches the
article body height — that's required for position:sticky to anchor. */
.blog-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 991px) {
.blog-layout { grid-template-columns: 1fr; }
}
/* Sidebar wrapper — stretches to the full row height so the sticky sidebar
inside has a tall scroll context to stick within. */
.blog-sidebar-col {
position: relative;
}
/* Sidebar — sticky so it stays in view as the long article scrolls.
No internal overflow / scrollbar; the page handles scrolling. */
.blog-sidebar {
position: -webkit-sticky;
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
@media (max-width: 991px) {
.blog-sidebar { position: static; }
}
.blog-side-card {
background: var(--glass-bg-2);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
padding: 1.25rem 1.35rem;
box-shadow: 0 14px 36px -22px rgba(15, 62, 46, .2);
}
.blog-side-label {
display: block;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--c-primary);
margin-bottom: .85rem;
}
/* Share */
.blog-share {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: .55rem;
}
.share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px; height: 38px;
border-radius: 50%;
background: rgba(108, 176, 76, .14);
color: var(--c-primary);
border: 1px solid rgba(108, 176, 76, .25);
transition: all var(--t-fast) var(--ease);
}
.share-btn:hover {
background: var(--c-primary);
color: #fff;
transform: translateY(-2px);
}
/* TOC */
.blog-toc-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: .35rem;
max-height: 360px;
overflow-y: auto;
/* Hide scrollbar visually but keep wheel scroll working */
scrollbar-width: none;
-ms-overflow-style: none;
}
.blog-toc-list::-webkit-scrollbar { width: 0; height: 0; display: none; }
.blog-toc-list li a {
display: block;
padding: .45rem .65rem;
border-radius: var(--r-md);
color: var(--c-text);
font-size: .88rem;
line-height: 1.4;
transition: all var(--t-fast) var(--ease);
}
.blog-toc-list li a:hover {
background: rgba(108, 176, 76, .12);
color: var(--c-primary);
}
.blog-toc-list li.toc-h3 a { padding-left: 1.5rem; font-size: .82rem; color: var(--c-muted); }
.blog-toc-list li.is-active a { background: rgba(108, 176, 76, .18); color: var(--c-primary-2); font-weight: 600; }
.blog-toc-list:empty { display: none; }
.blog-side-toc:has(.blog-toc-list:empty) { display: none; }
/* Sidebar CTA */
.blog-side-cta h4 {
font-size: 1.15rem;
color: var(--c-ink);
margin: 0 0 .5rem;
line-height: 1.3;
}
.blog-side-cta p {
color: var(--c-muted);
font-size: .9rem;
line-height: 1.6;
margin-bottom: 1rem;
}
/* Author card */
.blog-author { margin-top: 2.5rem; }
.blog-author-card {
display: grid;
grid-template-columns: 90px 1fr;
gap: 1.5rem;
align-items: start;
background: var(--glass-bg-2);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
padding: 1.5rem 1.75rem;
box-shadow: 0 14px 40px -22px rgba(15, 62, 46, .2);
}
@media (max-width: 575px) {
.blog-author-card { grid-template-columns: 1fr; text-align: center; }
}
.blog-author-avatar {
width: 90px; height: 90px;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-primary), var(--c-leaf));
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: .04em;
box-shadow: 0 12px 28px -10px rgba(27, 83, 64, .35);
margin-inline: auto;
}
.blog-author-eyebrow {
display: block;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--c-primary);
margin-bottom: .35rem;
}
.blog-author-name {
margin: 0 0 .6rem;
font-size: 1.25rem;
color: var(--c-ink);
letter-spacing: -.015em;
}
.blog-author-desc {
margin: 0;
color: var(--c-muted);
line-height: 1.7;
font-size: .95rem;
}
/* Recent posts */
.blog-recent {
padding-block: clamp(3rem, 6vw, 5rem);
background: linear-gradient(180deg, transparent, rgba(237, 232, 223, .55));
}
.blog-recent .section-head { text-align: center; margin-bottom: 2.5rem; }
/* =====================================================================
38. THANK-YOU PAGE — minimal success state with countdown auto-redirect
===================================================================== */
.thank-you-section {
min-height: calc(100vh - 200px);
display: flex;
align-items: center;
padding: clamp(4rem, 8vw, 7rem) 0;
background:
radial-gradient(45% 60% at 100% 10%, rgba(108, 176, 76, .10), transparent 70%),
radial-gradient(40% 50% at 0% 90%, rgba(201, 168, 76, .06), transparent 70%);
}
.thank-you-card {
max-width: 540px;
margin: 0 auto;
text-align: center;
padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
background: var(--glass-bg-2);
backdrop-filter: blur(22px) saturate(180%);
-webkit-backdrop-filter: blur(22px) saturate(180%);
border: 1px solid rgba(255, 255, 255, .7);
border-radius: var(--r-xl);
box-shadow:
0 28px 60px -22px rgba(15, 62, 46, .22),
inset 0 1px 0 rgba(255, 255, 255, .85);
}
.thank-you-ico {
width: 72px; height: 72px;
margin: 0 auto 1.5rem;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-leaf), var(--c-primary));
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
box-shadow: 0 16px 28px -10px rgba(27, 83, 64, .4);
animation: thankYouPop .55s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes thankYouPop {
0% { opacity: 0; transform: scale(.4); }
100% { opacity: 1; transform: scale(1); }
}
.thank-you-title {
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
line-height: 1.2;
letter-spacing: -.02em;
color: var(--c-ink);
margin: 0 0 .65rem;
}
.thank-you-lead {
font-size: 1rem;
color: var(--c-muted);
line-height: 1.6;
margin: 0 0 1.75rem;
}
/* Countdown + skip link */
.thank-you-redirect {
display: inline-flex;
align-items: center;
gap: .85rem;
padding: .55rem .85rem .55rem .55rem;
background: rgba(108, 176, 76, .1);
border: 1px solid rgba(108, 176, 76, .22);
border-radius: var(--r-pill);
font-size: .88rem;
color: var(--c-text);
}
.redirect-ring {
position: relative;
width: 32px; height: 32px;
flex-shrink: 0;
}
.redirect-ring svg {
width: 100%; height: 100%;
transform: rotate(-90deg);
}
.redirect-ring .ring-bg {
fill: none;
stroke: rgba(108, 176, 76, .22);
stroke-width: 3;
}
.redirect-ring .ring-fill {
fill: none;
stroke: var(--c-primary);
stroke-width: 3;
stroke-linecap: round;
transition: stroke-dashoffset .1s linear;
}
.redirect-count {
position: absolute;
inset: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .78rem;
font-weight: 700;
color: var(--c-primary-2);
}
.redirect-text { color: var(--c-text); }
.redirect-skip {
margin-left: .5rem;
color: var(--c-primary);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--t-fast) var(--ease);
}
.redirect-skip:hover {
color: var(--c-primary-2);
border-bottom-color: var(--c-primary-2);
}
@media (max-width: 575px) {
.thank-you-section { padding: 3rem 0; }
.thank-you-card { padding: 1.75rem 1.25rem; }
.thank-you-ico { width: 62px; height: 62px; font-size: 1.5rem; }
.thank-you-redirect { gap: .65rem; padding: .5rem .75rem .5rem .5rem; font-size: .82rem; }
.redirect-skip { display: block; margin: .25rem 0 0; }
}
/* =====================================================================
38b. LEGAL PAGES — privacy policy & terms-conditions
Two-column layout: sticky table-of-contents on the left, numbered
section cards on the right.
===================================================================== */
.legal-section {
padding-block: clamp(3rem, 6vw, 5rem);
background:
radial-gradient(50% 60% at 100% 0%, rgba(108, 176, 76, .08), transparent 70%),
radial-gradient(40% 50% at 0% 100%, rgba(201, 168, 76, .05), transparent 70%);
}
.legal-layout {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: clamp(1.5rem, 3vw, 2.75rem);
align-items: start;
}
@media (max-width: 991px) {
.legal-layout { grid-template-columns: 1fr; }
}
/* Sticky TOC */
.legal-toc {
position: -webkit-sticky;
position: sticky;
top: 100px;
padding: 1.5rem 1.5rem 1.25rem;
background: var(--glass-bg-2);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid rgba(255, 255, 255, .65);
border-radius: var(--r-lg);
box-shadow: 0 16px 36px -22px rgba(15, 62, 46, .2);
}
.legal-toc__label {
display: block;
font-size: .72rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c-primary);
margin-bottom: .9rem;
}
.legal-toc__list {
list-style: none;
padding: 0;
margin: 0;
counter-reset: legal-toc;
}
.legal-toc__list li { margin: 0; }
.legal-toc__list a {
display: flex;
align-items: flex-start;
gap: .65rem;
padding: .55rem .65rem;
border-radius: var(--r-md);
color: var(--c-text);
font-size: .88rem;
line-height: 1.4;
text-decoration: none;
transition: all var(--t-fast) var(--ease);
}
.legal-toc__list a:hover {
background: rgba(108, 176, 76, .12);
color: var(--c-primary);
}
.legal-toc__num {
flex-shrink: 0;
color: var(--c-muted);
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
margin-top: .15rem;
}
.legal-toc__list a:hover .legal-toc__num { color: var(--c-leaf-2); }
/* Legal body — stack of section cards */
.legal-body {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.legal-card {
position: relative;
padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
background: var(--glass-bg-2);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid var(--glass-border);
border-radius: var(--r-xl);
box-shadow: 0 14px 38px -22px rgba(15, 62, 46, .2);
scroll-margin-top: 100px;
transition: box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.legal-card:target {
box-shadow:
0 20px 50px -22px rgba(15, 62, 46, .28),
0 0 0 2px rgba(108, 176, 76, .35);
}
.legal-card__num {
position: absolute;
top: -14px;
left: clamp(1.5rem, 3vw, 2.5rem);
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 28px;
padding: 0 .8rem;
background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2));
color: #fff;
border-radius: var(--r-pill);
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
box-shadow: 0 8px 22px -8px rgba(15, 62, 46, .45);
}
.legal-card__title {
font-size: clamp(1.25rem, 2.2vw, 1.65rem);
color: var(--c-ink);
letter-spacing: -.015em;
line-height: 1.25;
margin: 0 0 1rem;
}
.legal-card p {
margin: 0 0 1rem;
color: var(--c-text);
line-height: 1.75;
font-size: 1rem;
}
.legal-card p:last-child { margin-bottom: 0; }
.legal-card a {
color: var(--c-primary);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(108, 176, 76, .4);
text-underline-offset: 3px;
transition: all var(--t-fast) var(--ease);
}
.legal-card a:hover {
color: var(--c-primary-2);
text-decoration-color: var(--c-leaf);
}
.legal-list {
list-style: none;
padding: 0;
margin: 0 0 1rem;
display: flex;
flex-direction: column;
gap: .65rem;
}
.legal-list li {
position: relative;
padding: .9rem 1.1rem .9rem 2.4rem;
background: rgba(255, 255, 255, .55);
border: 1px solid rgba(108, 176, 76, .18);
border-radius: var(--r-md);
color: var(--c-text);
line-height: 1.6;
font-size: .96rem;
}
.legal-list li::before {
content: '';
position: absolute;
left: .9rem;
top: 1.15rem;
width: 8px; height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-leaf), var(--c-primary));
box-shadow: 0 0 0 3px rgba(108, 176, 76, .18);
}
.legal-list strong { color: var(--c-primary-2); font-weight: 700; }
/* Final "Contact Us" card gets a subtle accent */
.legal-card--accent {
background:
linear-gradient(135deg, rgba(108, 176, 76, .14), rgba(255, 255, 255, .85));
border-color: rgba(108, 176, 76, .35);
}
@media (max-width: 575px) {
.legal-card { padding: 1.5rem 1.25rem; }
.legal-card__num { left: 1.25rem; min-width: 38px; height: 24px; font-size: .68rem; }
.legal-card__title { margin-top: .35rem; }
.legal-list li { padding: .85rem 1rem .85rem 2.25rem; }
}
/* =====================================================================
39. FORM TOAST — shown when ?form_status=... is in the URL after a redirect
===================================================================== */
.form-toast {
position: fixed;
left: 50%;
bottom: 30px;
transform: translate(-50%, 30px);
z-index: 110;
display: inline-flex;
align-items: center;
gap: .85rem;
padding: .85rem 1rem .85rem 1.15rem;
max-width: min(94vw, 480px);
background: #fff;
color: var(--c-ink);
border-radius: var(--r-pill);
border: 1px solid rgba(108, 176, 76, .25);
box-shadow: 0 20px 50px -15px rgba(15, 62, 46, .35);
font-size: .92rem;
font-weight: 500;
line-height: 1.4;
opacity: 0;
pointer-events: none;
transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.form-toast.is-visible {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
}
.form-toast--error {
border-color: rgba(225, 28, 43, .25);
background: linear-gradient(135deg, #fff, #fff5f5);
}
.form-toast > i { color: #d83b3b; font-size: 1.05rem; flex-shrink: 0; }
.form-toast button {
width: 28px; height: 28px;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, .06);
color: var(--c-text);
cursor: pointer;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all var(--t-fast) var(--ease);
}
.form-toast button:hover { background: rgba(0, 0, 0, .12); }
/* Loading state on form submit buttons (added via JS) */
form.site-form button[type="submit"]:disabled { opacity: .75; cursor: progress; }
/* =====================================================================
36b. BLOG INDEX — full-width filter bar with category chips
===================================================================== */
.blog-filter-bar {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
margin-bottom: 1.5rem;
padding: 1.1rem 1.25rem 1.15rem;
background: var(--glass-bg-2);
backdrop-filter: blur(22px) saturate(180%);
-webkit-backdrop-filter: blur(22px) saturate(180%);
border: 1px solid rgba(255, 255, 255, .7);
border-radius: var(--r-xl);
box-shadow:
0 18px 48px -22px rgba(15, 62, 46, .22),
inset 0 1px 0 rgba(255, 255, 255, .85);
}
/* Search input — spans full width of the bar */
.blog-filter-search {
position: relative;
display: flex;
align-items: center;
width: 100%;
background: #fff;
border: 1px solid rgba(108, 176, 76, .25);
border-radius: var(--r-pill);
padding: .35rem .55rem .35rem 1.35rem;
box-shadow:
0 8px 22px -14px rgba(15, 62, 46, .18),
inset 0 1px 0 rgba(255, 255, 255, .9);
transition: all var(--t-fast) var(--ease);
}
.blog-filter-search:focus-within {
border-color: var(--c-leaf);
box-shadow:
0 12px 30px -14px rgba(27, 83, 64, .25),
0 0 0 4px rgba(108, 176, 76, .14);
}
.blog-filter-search__ico {
color: var(--c-primary);
font-size: 1.05rem;
flex-shrink: 0;
margin-right: .75rem;
}
.blog-filter-search__input {
flex: 1;
border: 0;
background: transparent;
outline: none;
font: inherit;
font-size: 1rem;
color: var(--c-ink);
padding: .85rem 0;
min-width: 0;
}
.blog-filter-search__input::placeholder {
color: var(--c-soft);
font-weight: 400;
}
.blog-filter-search__input::-webkit-search-cancel-button { display: none; }
.blog-filter-search__clear {
width: 38px; height: 38px;
border: 0;
border-radius: 50%;
background: rgba(108, 176, 76, .15);
color: var(--c-primary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all var(--t-fast) var(--ease);
}
.blog-filter-search__clear:hover {
background: var(--c-primary);
color: #fff;
transform: rotate(90deg);
}
/* Category chips + count row */
.blog-filter-row {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.blog-filter-chips {
display: flex;
flex-wrap: wrap;
gap: .55rem;
flex: 1;
min-width: 0;
}
.blog-chip {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .55rem 1rem;
background: #fff;
border: 1px solid rgba(108, 176, 76, .28);
border-radius: var(--r-pill);
color: var(--c-text);
font-size: .88rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: all var(--t-fast) var(--ease);
white-space: nowrap;
}
.blog-chip i { color: var(--c-leaf-2); font-size: .85rem; }
.blog-chip__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
padding: 0 .45rem;
height: 20px;
border-radius: 999px;
background: rgba(108, 176, 76, .18);
color: var(--c-primary-2);
font-size: .72rem;
font-weight: 700;
letter-spacing: .02em;
}
.blog-chip:hover {
border-color: var(--c-leaf);
color: var(--c-primary);
transform: translateY(-1px);
box-shadow: 0 8px 18px -10px rgba(27, 83, 64, .22);
}
.blog-chip.is-active {
background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2));
border-color: transparent;
color: #fff;
box-shadow: 0 10px 22px -12px rgba(15, 62, 46, .45);
}
.blog-chip.is-active i { color: var(--c-leaf); }
.blog-chip.is-active .blog-chip__count {
background: rgba(255, 255, 255, .22);
color: #fff;
}
.blog-filter-count {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .5rem 1rem;
border-radius: var(--r-pill);
background: rgba(108, 176, 76, .12);
border: 1px solid rgba(108, 176, 76, .22);
color: var(--c-primary);
font-size: .85rem;
font-weight: 600;
white-space: nowrap;
}
.blog-filter-count i { color: var(--c-leaf-2); }
.blog-filter-count strong { color: var(--c-primary-2); }
/* Mobile: chips become a horizontally-scrollable strip so they never wrap
awkwardly or push the bar past the viewport edge. */
@media (max-width: 575px) {
.blog-filter-bar { padding: .9rem 1rem 1rem; }
.blog-filter-search { padding-left: 1.1rem; }
.blog-filter-search__ico { margin-right: .55rem; }
.blog-filter-search__input { font-size: .94rem; }
.blog-filter-chips {
flex-wrap: nowrap;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
-ms-overflow-style: none;
margin: 0 -.5rem;
padding: .25rem .5rem;
}
.blog-filter-chips::-webkit-scrollbar { display: none; }
.blog-filter-row { gap: .65rem; }
.blog-filter-count { width: 100%; justify-content: center; }
}
/* =====================================================================
37. BLOG — tablet & mobile refinements
===================================================================== */
/* Defensive width containment for blog single posts. Prevents any wide child
(long titles, tables, images, embeds) from blowing the viewport out and
creating a page-level horizontal scrollbar.
NOTE: do NOT touch `.container` — Bootstrap manages its breakpoint
max-widths, and overriding here breaks the desktop layout. */
.blog-layout,
.blog-post-body,
.blog-sidebar-col,
.blog-sidebar,
.blog-feature {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.blog-feature { margin: 0 0 2.5rem; } /* zero out default margins */
.blog-post-body > * { max-width: 100%; }
.blog-post-body img,
.blog-post-body iframe,
.blog-post-body video {
max-width: 100%;
height: auto;
}
/* Allow the breadcrumb pill to wrap on narrow screens instead of forcing
a single-line pill that pushes the page wider than the viewport. */
.page-banner .breadcrumb-pill {
flex-wrap: wrap;
max-width: 100%;
}
.page-banner .breadcrumb-pill .current {
white-space: normal;
overflow-wrap: anywhere;
}
/* Page title can break long words on tiny screens */
.page-banner .page-title {
overflow-wrap: anywhere;
word-break: break-word;
}
/* Tables: horizontal scroll on small screens, keep cells from wrapping
awkwardly. First column (labels) is allowed to wrap so it stays readable. */
.blog-post-body .table-responsive {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--r-md);
margin: 1.5rem 0;
}
.blog-post-body .table-responsive > table {
margin: 0;
min-width: 100%;
}
@media (max-width: 991px) {
.blog-post-body .table-responsive > table {
min-width: 640px;
}
.blog-post-body .table-responsive th,
.blog-post-body .table-responsive td {
white-space: nowrap;
font-size: .88rem;
padding: .7rem .85rem;
}
/* The first column carries the long region/label text — allow it to wrap
so the table doesn't end up absurdly wide. */
.blog-post-body .table-responsive th:first-child,
.blog-post-body .table-responsive td:first-child {
white-space: normal;
min-width: 200px;
max-width: 240px;
}
}
/* Tablet & mobile: hide the in-article TOC card (keeps Share + CTA only) */
@media (max-width: 991px) {
.blog-side-toc { display: none !important; }
}
/* Tighten the post body and feature on tablet/mobile */
@media (max-width: 767px) {
.blog-post-body {
padding: clamp(1.25rem, 5vw, 1.75rem);
font-size: .97rem;
line-height: 1.75;
}
.blog-post-body h2 { font-size: 1.4rem; margin: 2rem 0 .7rem; }
.blog-post-body h3 { font-size: 1.15rem; margin: 1.5rem 0 .55rem; }
.blog-post-body h4 { font-size: 1.02rem; margin: 1.25rem 0 .5rem; }
.blog-post-body blockquote {
margin: 1.5rem 0;
padding: 1rem 1.1rem;
font-size: .95rem;
}
.blog-post-meta-strip {
gap: .65rem 1rem;
font-size: .82rem;
}
.blog-post-meta-strip .meta-divider { display: none; }
}
/* Sidebar cards spacing on mobile (sidebar already drops to static via the
.blog-layout rule above). Trim padding so cards feel compact. */
@media (max-width: 767px) {
.blog-sidebar { margin-top: 1.5rem; }
.blog-side-card { padding: 1.1rem 1.2rem; }
.blog-side-cta h4 { font-size: 1.05rem; }
.share-btn { width: 36px; height: 36px; }
}
/* Author + recent cards tighten up too */
@media (max-width: 575px) {
.blog-author-card {
padding: 1.25rem 1.25rem;
gap: 1rem;
}
.blog-author-avatar { width: 70px; height: 70px; font-size: 1.3rem; }
.blog-author-name { font-size: 1.1rem; }
.blog-author-desc { font-size: .92rem; }
}