/* ============================================================
Cantori v6 Design System
Cream-forward · Midnight navy hero/footer accent · Antique gold
Cormorant Garamond + DM Sans
============================================================ */
/* ========== TOKENS ========== */
:root {
/* Midnight palette — reserved for hero, footer, accent bands */
--ink: #040e1d;
--ink2: #071528;
--ink3: #0d1e38;
--ink4: #152342;
--ink5: #1a2a50;
/* Gold */
--au1: #7a5a18;
--au2: #a87c28;
--au3: #c89838;
--au4: #e0b44a;
--au5: #f0c85c;
--aug: rgba(224,180,74,0.18); /* glow base */
/* Parchment / cream — dominant page surface */
--p0: #fefcf7; /* near-white ivory */
--p1: #f8f2e6; /* warm parchment */
--p2: #f0e8d4; /* medium parchment */
--p3: #e8dcc6; /* deeper parchment */
/* Text */
--text-on-dark: #f0e8d4;
--text-muted: rgba(240,232,212,0.55);
--text-on-light: #1a1408;
--text-on-light2: #4a4030;
--text-on-light3: #6b5c40;
/* Radius */
--r: 12px;
--rs: 8px;
--rv: 20px;
/* Shadows — warm for cream surfaces */
--s1: 0 2px 8px rgba(26,20,8,0.10);
--s2: 0 4px 16px rgba(26,20,8,0.13);
--s3: 0 8px 32px rgba(26,20,8,0.18);
--s4: 0 16px 48px rgba(26,20,8,0.24);
/* Gold glow ring */
--sglow: 0 0 0 3px var(--aug);
/* Legacy aliases (support/investors pages use these) */
--navy: var(--ink3);
--navy-deep: var(--ink);
--navy-light: var(--ink4);
--parchment: var(--p2);
--parchment-warm: #e8dcc6;
--parchment-pale: var(--p1);
--gold: var(--au4);
--gold-light: var(--au5);
--gold-muted: var(--au2);
--text-primary: var(--text-on-dark);
--text-secondary: var(--text-muted);
--text-dark: var(--text-on-light);
--text-dark-secondary: var(--text-on-light2);
}
/* ========== RESET ========== */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
background: var(--p0);
color: var(--text-on-light);
font-family: 'DM Sans', sans-serif;
font-weight: 300;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
overflow-x: hidden; /* Prevent horizontal scroll on mobile (iOS needs both html+body) */
}
/* ========== KEYFRAMES ========== */
@keyframes goldShimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
@keyframes trebleRotate {
from { transform: translateX(-50%) rotate(0deg); }
to { transform: translateX(-50%) rotate(360deg); }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Staggered entrance for hero children */
@keyframes fadeUpStagger {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
/* ========== GLOBAL NAVIGATION ========== */
.site-nav {
position: sticky;
top: 0;
z-index: 200;
background: rgba(254,252,247,0.94);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(200,152,56,0.18);
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.site-nav.scrolled {
background: rgba(254,252,247,0.98);
box-shadow: 0 2px 16px rgba(26,20,8,0.09);
}
.site-nav-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 2rem;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.site-nav-brand {
text-decoration: none;
flex-shrink: 0;
display: flex;
align-items: center;
overflow: visible; /* must not clip the logo-glow-wrap halo */
transition: opacity 0.2s ease;
}
.site-nav-brand:hover {
opacity: 0.82;
}
/* ---- Logo glow wrap (nav + footer logos) ----
isolation: isolate scopes z-index:-1 to within this container so the
::before halo sits behind the img without escaping the stacking context.
mix-blend-mode:screen inside the isolate group blends against the group's
transparent backdrop → the gold gradient renders as a warm organic blob
(no clipping rectangle at any zoom; soft edges via blur + transparent stop) */
.logo-glow-wrap {
position: relative;
display: inline-block;
isolation: isolate; /* contain the ::before within this stacking context */
overflow: visible; /* halo must not be clipped by this wrapper */
}
.logo-glow-wrap::before {
content: '';
position: absolute;
inset: -80%; /* larger offset because nav/footer mark is smaller */
background: radial-gradient(
circle at center,
rgba(255, 214, 140, 0.42) 0%,
rgba(255, 198, 112, 0.22) 22%,
rgba(255, 180, 90, 0.09) 42%,
rgba(255, 170, 80, 0.03) 62%,
transparent 80% /* zero before box edge — no hard rectangle */
);
filter: blur(20px);
mix-blend-mode: screen;
pointer-events: none;
z-index: -1;
}
.logo-glow-wrap img {
position: relative;
z-index: 1;
}
/* Nav logo: transparent-background wordmark — no background or shadow needed */
.site-nav-logo-img {
display: block;
height: 60px;
width: auto;
transition: opacity 0.2s ease;
}
.site-nav-brand:hover .site-nav-logo-img {
opacity: 0.78;
}
.site-nav-right {
display: flex;
align-items: center;
gap: 0.25rem;
}
.site-nav-link {
font-family: 'DM Sans', sans-serif;
font-size: 0.8rem;
font-weight: 400;
letter-spacing: 0.04em;
color: var(--text-on-light2);
text-decoration: none;
padding: 0.4rem 0.7rem;
border-radius: var(--rs);
transition: color 0.18s ease, background 0.18s ease;
position: relative;
white-space: nowrap;
}
.site-nav-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
right: 50%;
height: 2px;
background: var(--au3);
border-radius: 1px;
transition: left 0.25s cubic-bezier(0.22, 1, 0.36, 1), right 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-nav-link:hover {
color: var(--text-on-light);
background: rgba(200,152,56,0.08);
}
.site-nav-link:hover::after {
left: 0.7rem;
right: 0.7rem;
}
/* Gold underline on active page */
.site-nav-link--active {
color: var(--au2);
font-weight: 500;
}
/* Active link keeps underline expanded */
.site-nav-link--active::after {
left: 0.7rem;
right: 0.7rem;
}
.site-nav-cta {
font-family: 'DM Sans', sans-serif;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--ink2);
background: linear-gradient(135deg, var(--au3) 0%, var(--au4) 50%, var(--au5) 100%);
text-decoration: none;
padding: 0.6rem 1.35rem;
border-radius: var(--rs);
margin-left: 0.5rem;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
position: relative;
overflow: hidden;
box-shadow: 0 3px 12px rgba(200,152,56,0.25), 0 0 16px rgba(224,180,74,0.12);
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
}
.site-nav-cta::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
background-size: 200% 100%;
opacity: 0;
transition: opacity 0.2s;
}
.site-nav-cta:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 6px 20px rgba(200,152,56,0.3), 0 0 28px rgba(224,180,74,0.18);
background: linear-gradient(135deg, var(--au4) 0%, var(--au5) 50%, #f0c85c 100%);
}
.site-nav-cta:hover::before { opacity: 1; }
.site-nav-cta:active {
transform: translateY(-0.5px) scale(0.98);
}
.site-nav-ghost {
font-family: 'DM Sans', sans-serif;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.05em;
color: var(--au2);
border: 1.5px solid rgba(200,152,56,0.5);
text-decoration: none;
padding: 0.55rem 1.2rem;
border-radius: var(--rs);
margin-left: 0.5rem;
transition: all 0.22s ease;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.site-nav-ghost:hover {
border-color: var(--au3);
color: var(--au3);
background: rgba(200,152,56,0.07);
transform: translateY(-1px);
}
/* Hamburger — hidden on desktop */
.site-nav-hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 36px;
height: 36px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
border-radius: var(--rs);
transition: background 0.18s ease;
flex-shrink: 0;
}
.site-nav-hamburger:hover {
background: rgba(200,152,56,0.1);
}
.site-nav-hamburger span {
display: block;
height: 1.5px;
width: 22px;
background: var(--ink3);
border-radius: 1px;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
transform-origin: center;
}
.site-nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-nav-hamburger.open span:nth-child(2) { opacity: 0; }
.site-nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* ========== NAV SCROLL SHADOW ========== */
/* Add scroll class via tiny inline script in nav partial */
/* ========== HERO — navy band ========== */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 3rem 2rem;
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse 70% 55% at 50% 35%, rgba(224,180,74,0.07) 0%, transparent 65%),
radial-gradient(ellipse 100% 80% at 50% 100%, rgba(7,21,40,0.8) 0%, transparent 60%),
linear-gradient(175deg, var(--ink2) 0%, var(--ink3) 45%, var(--ink4) 100%);
}
/* Parchment-noise overlay */
.hero::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23p)' opacity='1'/%3E%3C/svg%3E");
opacity: 0.022;
}
/* Gold corner ornaments */
.hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
background:
radial-gradient(circle 120px at 0% 0%, rgba(224,180,74,0.09) 0%, transparent 100%),
radial-gradient(circle 120px at 100% 0%, rgba(224,180,74,0.09) 0%, transparent 100%),
radial-gradient(circle 80px at 0% 100%, rgba(224,180,74,0.06) 0%, transparent 100%),
radial-gradient(circle 80px at 100% 100%,rgba(224,180,74,0.06) 0%, transparent 100%);
}
/* Treble-clef watermark */
.hero-treble {
position: absolute;
bottom: -1rem;
left: 50%;
transform: translateX(-50%);
font-size: 28rem;
line-height: 1;
color: var(--au3);
opacity: 0.022;
pointer-events: none;
user-select: none;
font-family: 'Cormorant Garamond', serif;
z-index: 0;
}
.hero-inner {
position: relative;
z-index: 1;
max-width: 780px;
}
/* Cathedral glow — warm radial halo radiating from the Cantori wordmark.
::before with mix-blend-mode:screen blends gold luminosity into the dark
navy hero — no hard bounding box at any zoom level. */
.hero-wordmark-wrap {
position: relative;
display: inline-block;
width: 100%;
max-width: 600px;
margin: 0 auto 2.5rem;
overflow: visible; /* halo must not be clipped by this container */
}
.hero-wordmark-wrap::before {
content: '';
position: absolute;
/* Extend well past the mark so the gradient reaches full transparency
before the ::before box boundary — zero hard edges at any zoom level */
inset: -60%;
background: radial-gradient(
circle at center,
rgba(255, 214, 140, 0.55) 0%,
rgba(255, 198, 112, 0.30) 25%,
rgba(255, 180, 90, 0.12) 45%,
rgba(255, 180, 90, 0.04) 65%,
transparent 80% /* fully transparent before box edge */
);
filter: blur(24px); /* obliterates any residual gradient boundary */
mix-blend-mode: screen; /* blends INTO dark navy — no overlay rectangle */
pointer-events: none;
z-index: -1; /* behind the wordmark image */
}
/* Full Cantori wordmark logo in hero */
.hero-wordmark {
position: relative;
z-index: 1; /* above ::before halo within the stacking context */
display: block;
width: 100%;
/* Tight candlelight glow on the letterforms themselves (layer 2 of glow) */
filter: drop-shadow(0 0 14px rgba(255, 214, 140, 0.65))
drop-shadow(0 0 36px rgba(224, 180, 74, 0.30))
drop-shadow(0 0 72px rgba(200, 152, 56, 0.14));
}
/* Staggered entrance for hero elements */
.hero-inner > * {
animation: fadeUpStagger 0.7s ease both;
}
.hero-inner > *:nth-child(1) { animation-delay: 0.1s; }
.hero-inner > *:nth-child(2) { animation-delay: 0.2s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.35s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.5s; }
.hero-inner > *:nth-child(5) { animation-delay: 0.6s; }
/* Walkthrough CTA — most prominent button, extra lift */
.hero-walkthrough-btn {
padding: 1rem 2.8rem !important;
font-size: 1.05rem !important;
letter-spacing: 0.04em !important;
box-shadow: 0 6px 24px rgba(224,180,74,0.4), 0 0 40px rgba(224,180,74,0.22), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
.hero-walkthrough-btn:hover {
transform: translateY(-4px) scale(1.04) !important;
box-shadow: 0 12px 36px rgba(224,180,74,0.48), 0 0 64px rgba(224,180,74,0.3), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
.hero-label {
font-family: 'DM Sans', sans-serif;
font-weight: 400;
font-size: 0.78rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--au4);
margin-bottom: 1.75rem;
}
.hero h1 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(2.6rem, 6.5vw, 5rem);
line-height: 1.1;
color: var(--p1);
margin-bottom: 1.75rem;
letter-spacing: -0.015em;
}
.hero h1 em {
font-style: italic;
color: var(--au4);
}
.hero-lede {
font-size: 1.1rem;
color: var(--text-muted);
max-width: 560px;
margin: 0 auto 3rem;
line-height: 1.85;
}
/* CTA row */
.hero-cta {
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
/* On narrow desktop where 3 buttons compete for space, stack primary CTA */
@media (max-width: 700px) and (min-width: 561px) {
.hero-cta {
flex-direction: column;
align-items: center;
}
.hero-cta .btn-primary,
.hero-cta .btn-ghost {
width: 100%;
max-width: 340px;
justify-content: center;
}
}
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.95rem 2.4rem;
border-radius: var(--r);
background: linear-gradient(135deg, var(--au3) 0%, var(--au4) 50%, var(--au5) 100%);
color: var(--ink2);
font-family: 'DM Sans', sans-serif;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.03em;
text-decoration: none;
border: none;
cursor: pointer;
box-shadow: 0 4px 16px rgba(224,180,74,0.28), 0 0 24px rgba(224,180,74,0.18), inset 0 1px 0 rgba(255,255,255,0.25);
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: hidden;
min-height: 48px;
}
.btn-primary::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
background-size: 200% 100%;
animation: goldShimmer 3s linear infinite;
opacity: 0;
transition: opacity 0.3s;
}
.btn-primary::after {
content: '';
position: absolute;
inset: 0;
border-radius: var(--r);
background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15), transparent 70%);
opacity: 0;
transition: opacity 0.25s;
pointer-events: none;
}
.btn-primary:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 28px rgba(224,180,74,0.35), 0 0 48px rgba(224,180,74,0.25), inset 0 1px 0 rgba(255,255,255,0.3);
background: linear-gradient(135deg, var(--au4) 0%, var(--au5) 50%, #f0c85c 100%);
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover::after { opacity: 1; }
.btn-primary:active {
transform: translateY(-1px) scale(0.98);
}
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.95rem 2.4rem;
border-radius: var(--r);
border: 2px solid rgba(224,180,74,0.45);
color: var(--au4);
font-family: 'DM Sans', sans-serif;
font-weight: 500;
font-size: 0.95rem;
letter-spacing: 0.03em;
text-decoration: none;
background: rgba(224,180,74,0.08);
cursor: pointer;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: hidden;
min-height: 48px;
}
.btn-ghost::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--r);
background: linear-gradient(135deg, rgba(224,180,74,0.12) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.25s;
pointer-events: none;
}
.btn-ghost:hover {
border-color: rgba(224,180,74,0.75);
background: rgba(224,180,74,0.15);
box-shadow: 0 6px 20px rgba(224,180,74,0.2), 0 0 32px rgba(224,180,74,0.12), inset 0 1px 0 rgba(255,255,255,0.1);
transform: translateY(-2px) scale(1.01);
color: var(--au5);
}
.btn-ghost:hover::before { opacity: 1; }
.btn-ghost:active {
transform: translateY(-0.5px) scale(0.99);
}
.hero-scroll-line {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 56px;
background: linear-gradient(to bottom, transparent, rgba(200,152,56,0.5));
z-index: 1;
}
/* ========== PROBLEM — cream surface ========== */
.problem {
background: var(--p0);
color: var(--text-on-light);
padding: 3rem 2rem;
position: relative;
}
.problem-inner {
max-width: 960px;
margin: 0 auto;
}
.section-eyebrow {
font-family: 'DM Sans', sans-serif;
font-weight: 400;
font-size: 0.78rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--au2);
margin-bottom: 1.25rem;
}
.problem h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
font-size: clamp(1.9rem, 3.5vw, 2.7rem);
line-height: 1.22;
color: var(--ink3);
margin-bottom: 3.5rem;
max-width: 680px;
}
.problem-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.problem-card {
padding: 2rem 1.5rem;
border-top: 2px solid var(--au3);
background: var(--p1);
border-radius: 0 0 var(--rs) var(--rs);
box-shadow: var(--s1);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.problem-card:hover {
transform: translateY(-3px);
box-shadow: var(--s2);
}
.problem-number {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: 3.2rem;
color: var(--ink3);
display: block;
margin-bottom: 0.75rem;
line-height: 1;
}
.problem-card p {
font-size: 0.93rem;
color: var(--text-on-light2);
line-height: 1.75;
}
/* ========== STAT CARDS — scard pattern — navy accent band ========== */
.scards {
background: var(--ink2);
padding: 3rem 2rem;
position: relative;
overflow: hidden;
}
.scards-inner {
max-width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}
.scard {
background: var(--ink3);
border: 1px solid rgba(224,180,74,0.12);
border-radius: var(--r);
padding: 1.75rem 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: var(--s2);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
cursor: default;
}
.scard::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--r);
background: linear-gradient(
90deg,
transparent 0%,
rgba(224,180,74,0.07) 40%,
rgba(240,200,92,0.12) 50%,
rgba(224,180,74,0.07) 60%,
transparent 100%
);
background-size: 200% 100%;
opacity: 0;
transition: opacity 0.3s ease;
}
.scard:hover {
transform: translateY(-4px);
box-shadow: var(--s3), 0 0 24px rgba(224,180,74,0.12);
border-color: rgba(224,180,74,0.35);
}
.scard:hover::before {
opacity: 1;
animation: goldShimmer 1.8s linear infinite;
}
.scard-value {
font-family: 'Cormorant Garamond', serif;
font-size: 2.6rem;
font-weight: 600;
color: var(--au4);
line-height: 1;
margin-bottom: 0.5rem;
}
.scard-label {
font-size: 0.8rem;
color: var(--text-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.4;
}
/* ========== FEATURES — cream surface ========== */
.features {
background: var(--p1);
padding: 3rem 2rem;
}
.features-inner {
max-width: 960px;
margin: 0 auto;
}
.section-header {
margin-bottom: 2.5rem;
}
.section-header h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: clamp(1.9rem, 3.5vw, 2.7rem);
line-height: 1.2;
color: var(--ink3);
margin-top: 0.75rem;
}
.features-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.feature-item {
background: var(--p0);
border: 1px solid rgba(200,152,56,0.15);
border-radius: var(--r);
padding: 2rem;
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.feature-item:hover {
border-color: rgba(200,152,56,0.35);
box-shadow: var(--s2);
transform: translateY(-2px);
}
.feature-icon {
font-size: 1.6rem;
color: var(--au3);
margin-bottom: 1rem;
opacity: 0.85;
}
.feature-item h3 {
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
font-size: 1.45rem;
color: var(--ink3);
margin-bottom: 0.75rem;
}
.feature-item p {
font-size: 0.92rem;
color: var(--text-on-light2);
line-height: 1.8;
}
/* ========== SIDES (Director / Musician) — cream surface ========== */
.sides {
background: var(--p0);
padding: 3rem 2rem;
}
.sides-inner {
max-width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: start;
}
.qc {
background: var(--p1);
border: 1px solid rgba(200,152,56,0.18);
border-radius: var(--r);
padding: 2.5rem;
position: relative;
overflow: hidden;
box-shadow: var(--s1);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.qc:hover {
border-color: rgba(200,152,56,0.38);
box-shadow: var(--s2);
}
/* Folded-corner ornament */
.qc::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 0; height: 0;
border-style: solid;
border-width: 0 32px 32px 0;
border-color: transparent var(--p2) transparent transparent;
}
.qc::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 32px; height: 32px;
background: linear-gradient(225deg, rgba(200,152,56,0.12) 0%, transparent 60%);
pointer-events: none;
}
.side-label {
font-family: 'DM Sans', sans-serif;
font-weight: 400;
font-size: 0.78rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--au2);
margin-bottom: 1rem;
}
.qc h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: clamp(1.4rem, 2.5vw, 1.9rem);
color: var(--ink3);
margin-bottom: 1.75rem;
line-height: 1.3;
}
.qc ul {
list-style: none;
padding: 0;
}
.qc li {
font-size: 0.92rem;
color: var(--text-on-light2);
padding: 0.6rem 0 0.6rem 1.5rem;
position: relative;
line-height: 1.65;
border-bottom: 1px solid rgba(200,152,56,0.1);
}
.qc li:last-child {
border-bottom: none;
}
.qc li::before {
content: '';
position: absolute;
left: 0;
top: 1.05rem;
width: 8px;
height: 1px;
background: var(--au3);
}
/* ========== SCREENSHOT GALLERY — cream surface, warm-bordered frames ========== */
.gallery {
background: var(--p2);
padding: 3rem 2rem;
}
.gallery-inner {
max-width: 1100px;
margin: 0 auto;
}
/* Gallery section heading inherits standard on-light text */
.gallery .section-header h2 {
color: var(--ink3);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
margin-top: 3.5rem;
}
.gallery-frame {
border-radius: var(--r);
overflow: hidden;
border: 1px solid rgba(200,152,56,0.22);
background: var(--p0);
box-shadow: var(--s2);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
aspect-ratio: 16 / 10;
display: flex;
align-items: center;
justify-content: center;
}
.gallery-frame:hover {
transform: translateY(-4px) scale(1.01);
box-shadow: var(--s3), 0 0 24px rgba(200,152,56,0.12);
border-color: rgba(200,152,56,0.42);
}
.gallery-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gallery-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
color: rgba(200,152,56,0.35);
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.gallery-placeholder-icon {
font-size: 2rem;
opacity: 0.4;
}
/* ========== WAITLIST — cream surface ========== */
.waitlist {
background: var(--p1);
padding: 3rem 2rem;
position: relative;
overflow: hidden;
}
.waitlist::before {
content: '';
position: absolute;
top: 0; left: 50%; transform: translateX(-50%);
width: 600px; height: 1px;
background: linear-gradient(to right, transparent, rgba(200,152,56,0.3), transparent);
}
.waitlist-inner {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.waitlist h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: clamp(1.9rem, 3.5vw, 2.8rem);
line-height: 1.2;
color: var(--ink3);
margin-bottom: 1rem;
}
.waitlist p {
font-size: 1rem;
color: var(--text-on-light2);
line-height: 1.8;
margin-bottom: 2.5rem;
}
.waitlist-form {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
}
.waitlist-input {
flex: 1;
min-width: 240px;
padding: 0.85rem 1.25rem;
border-radius: var(--r);
border: 1px solid rgba(200,152,56,0.3);
background: var(--p0);
color: var(--text-on-light);
font-family: 'DM Sans', sans-serif;
font-size: max(1rem, 16px); /* prevent iOS zoom */
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.waitlist-input::placeholder {
color: var(--text-on-light3);
}
.waitlist-input:focus {
border-color: rgba(200,152,56,0.55);
box-shadow: 0 0 0 3px rgba(200,152,56,0.12);
}
.waitlist-select {
flex: 1;
min-width: 200px;
padding: 0.85rem 1.25rem;
border-radius: var(--r);
border: 1px solid rgba(200,152,56,0.3);
background: var(--p0);
color: var(--text-on-light);
font-family: 'DM Sans', sans-serif;
font-size: max(1rem, 16px);
outline: none;
appearance: none;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.waitlist-select:focus {
border-color: rgba(200,152,56,0.55);
box-shadow: 0 0 0 3px rgba(200,152,56,0.12);
}
.waitlist-select option {
background: var(--p0);
color: var(--text-on-light);
}
.waitlist-note {
margin-top: 1.25rem;
font-size: 0.8rem;
color: var(--text-on-light3);
letter-spacing: 0.05em;
}
.waitlist-success {
display: none;
margin-top: 1.5rem;
padding: 1rem 1.5rem;
border-radius: var(--r);
background: rgba(200,152,56,0.1);
border: 1px solid rgba(200,152,56,0.3);
color: var(--au2);
font-size: 0.95rem;
}
/* ========== CLOSING — cream surface ========== */
.closing {
background: var(--p0);
color: var(--text-on-light);
padding: 3rem 2rem;
text-align: center;
}
.closing-inner {
max-width: 680px;
margin: 0 auto;
}
.closing-ornament {
font-size: 1.1rem;
color: var(--au3);
margin-bottom: 2rem;
opacity: 0.65;
letter-spacing: 0.5em;
}
.closing h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
font-size: clamp(1.8rem, 3.5vw, 2.5rem);
color: var(--ink3);
margin-bottom: 2rem;
font-style: italic;
line-height: 1.25;
}
.closing-text {
font-size: 1.05rem;
color: var(--text-on-light2);
line-height: 1.9;
margin-bottom: 1.5rem;
}
.closing-secondary {
font-size: 0.95rem;
margin-bottom: 0;
}
/* ========== FOOTER — navy band ========== */
.site-footer {
background: var(--ink);
padding: 2.5rem 2rem;
text-align: center;
border-top: 1px solid rgba(224,180,74,0.1);
}
.footer-inner {
max-width: 960px;
margin: 0 auto;
}
/* Footer logo: founder's actual wordmark image, centered */
.footer-logo-mark {
display: flex;
justify-content: center;
margin-bottom: 1.25rem;
}
.footer-logo-img {
display: block;
height: 76px;
width: auto;
opacity: 0.88;
transition: opacity 0.2s ease;
}
.footer-logo-img:hover {
opacity: 1;
}
.footer-divider {
width: 40px;
height: 1px;
background: rgba(200,152,56,0.4);
margin: 1.75rem auto;
}
/* Footer CTA — Join the Founding Chapter button */
.footer-cta-wrap {
display: flex;
justify-content: center;
margin: 1.5rem auto;
}
.footer-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.65rem 1.75rem;
font-family: 'DM Sans', sans-serif;
font-size: 0.82rem;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
color: var(--au4);
border: 1px solid rgba(224,180,74,0.45);
border-radius: 4px;
background: transparent;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.footer-cta:hover {
background: rgba(224,180,74,0.08);
border-color: rgba(224,180,74,0.7);
color: var(--au5);
}
.footer-links {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.25rem;
margin-bottom: 1rem;
}
.footer-bottom {
font-size: 0.78rem;
color: var(--text-muted);
}
.footer-colophon {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.85rem;
color: rgba(200,152,56,0.5);
letter-spacing: 0.06em;
margin-top: 0.75rem;
}
.footer-sep {
display: inline-block;
margin: 0 0.65em;
opacity: 0.4;
color: var(--text-muted);
}
.footer-support-link {
color: rgba(240,232,212,0.55);
text-decoration: none;
letter-spacing: 0.04em;
font-size: 0.8rem;
padding: 0.25rem 0.5rem;
border-radius: 4px;
transition: color 0.2s ease;
}
.footer-support-link:hover {
color: var(--au4);
}
/* ========== SUPPORT / INVESTORS PAGE COMPAT ========== */
.support-hero,
.investor-hero {
background:
radial-gradient(ellipse 70% 55% at 50% 35%, rgba(224,180,74,0.07) 0%, transparent 65%),
linear-gradient(175deg, var(--ink2) 0%, var(--ink3) 45%, var(--ink4) 100%);
}
/* ========== SHARED SECTION HEADINGS (on cream) ========== */
.section-eyebrow-dark {
font-family: 'DM Sans', sans-serif;
font-weight: 400;
font-size: 0.78rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--au2);
margin-bottom: 1.25rem;
}
/* ========== ORNAMENTAL DESIGN SYSTEM ========== */
/*
Embroidered vestment borders — subtle illuminated manuscript motifs.
Three levels of ornament, all CSS/SVG, zero image weight.
1. Section dividers — .orn-divider (cross-diamond rule)
2. Heading flourish — .orn-heading (gold underline with central diamond)
3. Footer vine band — .orn-footer-band (repeating fleur vine)
4. Card corner accent — .orn-card-corner (applied via ::before/::after on card)
5. Pull-quote ornament — .orn-quote (decorative opening mark)
*/
/* ---- 1. Ornamental section divider ---- */
/*
Use:
A horizontal rule with a centered lozenge-cross motif.
*/
.orn-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin: 0.5rem auto;
max-width: 480px;
user-select: none;
pointer-events: none;
}
.orn-divider::before,
.orn-divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(to var(--_dir, right), transparent, rgba(200,152,56,0.3));
}
.orn-divider::before { --_dir: right; }
.orn-divider::after { --_dir: left; }
/* The central glyph is injected via a span so it works in all contexts */
.orn-divider-glyph {
flex-shrink: 0;
width: 2.5rem;
text-align: center;
/* Inline SVG diamond-cross: compact, no HTTP request */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' fill='none'%3E%3Cpath d='M20 2 L23 10 L20 18 L17 10 Z' fill='%23c89838' opacity='0.45'/%3E%3Ccircle cx='20' cy='10' r='1.8' fill='%23c89838' opacity='0.35'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
height: 20px;
}
/* Convenience wrapper: full-width subtle rule for between-section spacing */
.orn-rule {
border: none;
height: 1px;
background: linear-gradient(to right, transparent 0%, rgba(200,152,56,0.22) 25%, rgba(200,152,56,0.22) 75%, transparent 100%);
margin: 0;
}
/* ---- 2. Section heading flourish ---- */
/*
Use: add class .orn-heading to any section h2 you want a flourish beneath.
Renders a short gold underline bar with a tiny central diamond.
Works on cream surfaces (dark text). Add padding-bottom to create space.
*/
.orn-heading {
position: relative;
padding-bottom: 1.1rem;
margin-bottom: 1.5rem; /* replace native margin-bottom that section styles apply */
}
/* The flourish line */
.orn-heading::after {
content: '';
position: absolute;
bottom: 0.35rem;
left: 50%;
transform: translateX(-50%);
width: 3.5rem;
height: 2px;
background: linear-gradient(to right, transparent, var(--au3) 30%, var(--au4) 50%, var(--au3) 70%, transparent);
border-radius: 1px;
}
/* Central diamond on the flourish line */
.orn-heading::before {
content: '';
position: absolute;
bottom: 0.22rem;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 7px;
height: 7px;
background: var(--au4);
opacity: 0.5;
z-index: 1;
}
/* Left-aligned variant for text-left sections */
.orn-heading--left::after {
left: 0;
transform: none;
}
.orn-heading--left::before {
left: calc(3.5rem / 2);
transform: translateX(-50%) rotate(45deg);
}
/* ---- 3. Footer ornamental vine band ---- */
/*
A thin repeating vine/trefoil SVG strip above the footer.
The SVG is a 120×16 tile with a stylised floral vine.
*/
.orn-footer-band {
height: 20px;
width: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='M0 10 C10 4, 20 4, 30 10 C40 16, 50 16, 60 10 C70 4, 80 4, 90 10 C100 16, 110 16, 120 10' stroke='%23c89838' stroke-width='0.8' fill='none' opacity='0.28'/%3E%3Ccircle cx='30' cy='10' r='2.2' fill='%23c89838' opacity='0.2'/%3E%3Ccircle cx='60' cy='10' r='2.2' fill='%23c89838' opacity='0.2'/%3E%3Ccircle cx='90' cy='10' r='2.2' fill='%23c89838' opacity='0.2'/%3E%3Cpath d='M30 10 L30 4 M60 10 L60 4 M90 10 L90 4' stroke='%23c89838' stroke-width='0.7' opacity='0.22'/%3E%3Cpath d='M30 4 C29 1, 31 1, 30 4' stroke='%23c89838' stroke-width='0.7' fill='none' opacity='0.25'/%3E%3Cpath d='M60 4 C59 1, 61 1, 60 4' stroke='%23c89838' stroke-width='0.7' fill='none' opacity='0.25'/%3E%3Cpath d='M90 4 C89 1, 91 1, 90 4' stroke='%23c89838' stroke-width='0.7' fill='none' opacity='0.25'/%3E%3C/svg%3E");
background-repeat: repeat-x;
background-size: 120px 20px;
background-position: center;
display: block;
overflow: hidden;
background-color: var(--ink); /* matches footer background */
}
/* ---- 4. Card corner accents ---- */
/*
Add to a card wrapper. The ::before and ::after pseudo-elements draw
two L-shaped gold corners — top-left and bottom-right — like embroidered
altar linen corners.
Use: add class .orn-card to any card that should have corner accents.
The card itself must have position: relative.
*/
.orn-card {
position: relative;
}
.orn-card::before,
.orn-card::after {
content: '';
position: absolute;
width: 1.1rem;
height: 1.1rem;
pointer-events: none;
opacity: 0.35;
transition: opacity 0.25s ease;
}
.orn-card::before {
top: 0.7rem;
left: 0.7rem;
border-top: 1px solid var(--au3);
border-left: 1px solid var(--au3);
}
.orn-card::after {
bottom: 0.7rem;
right: 0.7rem;
border-bottom: 1px solid var(--au3);
border-right: 1px solid var(--au3);
}
.orn-card:hover::before,
.orn-card:hover::after {
opacity: 0.65;
}
/* ---- 5. Pull-quote / callout ornament ---- */
/*
Wraps a quote or highlighted text with a decorative gold border and
illuminated-manuscript quote glyph.
Use: ...
*/
.orn-quote {
position: relative;
border-left: 2px solid var(--au3);
padding: 1.25rem 1.5rem 1.25rem 2rem;
margin: 2rem 0;
background: rgba(200,152,56,0.04);
}
.orn-quote::before {
content: '\201C';
position: absolute;
top: -0.5rem;
left: -0.1rem;
font-family: 'Cormorant Garamond', serif;
font-size: 4rem;
color: var(--au3);
opacity: 0.3;
line-height: 1;
pointer-events: none;
}
/* Top ornamental tick */
.orn-quote::after {
content: '';
position: absolute;
top: 0;
left: -4px;
width: 6px;
height: 6px;
background: var(--au3);
border-radius: 50%;
opacity: 0.5;
}
/* ---- Shared utility: ornamental cross separator ---- */
/*
The cross-line ornament used already in pricing/directors (.prx-ornament, .dx-ornament)
is now a shared global class so all pages can use it without page-scoped duplication.
*/
.orn-cross-rule {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 3rem;
}
.orn-cross-rule-line {
flex: 1;
height: 1px;
background: rgba(200,152,56,0.2);
}
.orn-cross-rule-glyph {
color: var(--au3);
font-size: 0.85rem;
opacity: 0.55;
flex-shrink: 0;
}
/* ---- Button visibility fixes ---- */
/*
Ensure secondary buttons on CREAM backgrounds are clearly visible.
These override the default .btn-ghost style for on-cream contexts.
*/
/* On-cream secondary / ghost button — clearly bordered in dark navy */
.btn-outline-dark {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.95rem 2.4rem;
border-radius: var(--r);
border: 2px solid rgba(13,30,56,0.45);
color: var(--ink3);
font-family: 'DM Sans', sans-serif;
font-weight: 500;
font-size: 0.95rem;
letter-spacing: 0.03em;
text-decoration: none;
background: transparent;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: hidden;
min-height: 48px;
}
.btn-outline-dark:hover {
border-color: rgba(200,152,56,0.7);
color: var(--au2);
background: rgba(200,152,56,0.07);
box-shadow: 0 4px 16px rgba(200,152,56,0.15);
transform: translateY(-2px) scale(1.01);
}
.btn-outline-dark:active {
transform: translateY(-0.5px) scale(0.99);
}
/* ========== INVESTMENT-GRADE POLISH ========== */
/* Footer link hover: gold color with smooth underline */
.footer-support-link {
position: relative;
}
.footer-support-link::after {
content: '';
position: absolute;
bottom: -1px;
left: 50%;
right: 50%;
height: 1px;
background: var(--au4);
transition: left 0.22s cubic-bezier(0.22, 1, 0.36, 1), right 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-support-link:hover::after {
left: 0;
right: 0;
}
/* Footer link columns — structured grid on desktop, stack on mobile */
.footer-links-grid {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 0.5rem 2.5rem;
justify-content: center;
margin-bottom: 1.5rem;
}
.footer-links-grid .footer-support-link {
text-align: center;
padding: 0.35rem 0.5rem;
}
@media (max-width: 560px) {
.footer-links-grid {
grid-template-columns: 1fr 1fr;
gap: 0.35rem 1.5rem;
}
}
/* Smooth focus states for accessibility */
a:focus-visible,
button:focus-visible {
outline: 2px solid var(--au3);
outline-offset: 3px;
}
/* Pull-quote polish for /about and /investors */
.orn-pullquote {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.35rem, 2.5vw, 1.85rem);
font-weight: 400;
font-style: italic;
line-height: 1.55;
color: var(--ink3);
position: relative;
padding: 2rem 0 2rem 2.5rem;
margin: 2.5rem 0;
border-left: 3px solid var(--au3);
}
.orn-pullquote::before {
content: '\201C';
position: absolute;
top: 0.5rem;
left: 0.25rem;
font-family: 'Cormorant Garamond', serif;
font-size: 5rem;
color: var(--au3);
opacity: 0.2;
line-height: 1;
pointer-events: none;
}
.orn-pullquote-attr {
display: block;
margin-top: 1rem;
font-family: 'DM Sans', sans-serif;
font-size: 0.78rem;
font-style: normal;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--au2);
}
/* Scroll-line pulse animation */
.hero-scroll-line {
animation: scrollPulse 2.5s ease-in-out infinite;
}
@keyframes scrollPulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* CLS prevention: reserve space for logo images */
.site-nav-logo-img {
aspect-ratio: 832 / 520;
}
.footer-logo-img {
aspect-ratio: 832 / 520;
}
/* ========== RESPONSIVE ========== */
@media (max-width: 900px) {
.scards-inner {
grid-template-columns: repeat(2, 1fr);
}
.sides-inner {
grid-template-columns: 1fr;
}
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
/* Mobile nav */
.site-nav-hamburger {
display: flex;
}
.site-nav-right {
position: absolute;
top: 64px;
left: 0;
right: 0;
background: var(--p0);
border-bottom: 1px solid rgba(200,152,56,0.18);
flex-direction: column;
align-items: stretch;
padding: 0.75rem 1.25rem 1.25rem;
gap: 0;
z-index: 199;
box-shadow: 0 8px 24px rgba(26,20,8,0.10);
/* Smooth slide-down transition */
display: flex;
max-height: 0;
overflow: hidden;
opacity: 0;
padding-top: 0;
padding-bottom: 0;
transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.25s ease,
padding 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-nav-right.open {
max-height: 500px;
opacity: 1;
padding: 0.75rem 1.25rem 1.25rem;
}
.site-nav-link {
padding: 0.85rem 0.5rem;
font-size: 0.95rem;
border-bottom: 1px solid rgba(200,152,56,0.1);
border-radius: 0;
min-height: 48px;
display: flex;
align-items: center;
}
/* Disable hover underline on mobile — active-only indicator */
.site-nav-link::after {
display: none;
}
.site-nav-link:last-of-type {
border-bottom: none;
}
.site-nav-link--active::after {
display: none;
}
.site-nav-logo-img {
height: 48px;
}
.site-nav-cta {
margin: 0.85rem 0 0;
text-align: center;
padding: 0.75rem 1rem;
border-radius: var(--r);
font-size: 0.9rem;
}
.site-nav-ghost {
margin: 0.5rem 0 0;
text-align: center;
padding: 0.65rem 1rem;
border-radius: var(--r);
font-size: 0.9rem;
}
.problem-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.features-list {
grid-template-columns: 1fr;
}
.hero {
min-height: 92vh;
padding: 4rem 1.5rem 5rem;
}
.hero h1 {
font-size: clamp(2.2rem, 8vw, 3rem);
}
.problem,
.features,
.sides,
.closing,
.waitlist,
.gallery,
.scards {
padding: 4rem 1.5rem;
}
}
@media (max-width: 560px) {
.scards-inner {
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.gallery-grid {
grid-template-columns: 1fr;
}
.hero-cta {
flex-direction: column;
align-items: center;
}
.hero-cta .btn-primary,
.hero-cta .btn-ghost {
width: 100%;
max-width: 280px;
justify-content: center;
}
.waitlist-form {
flex-direction: column;
}
.waitlist-input,
.waitlist-select {
min-width: unset;
width: 100%;
}
}
@media (max-width: 480px) {
.problem h2,
.closing h2 {
font-size: 1.7rem;
}
}
/* ====================================================================
ORNAMENTAL LAYER v2 — drop caps · illuminated caps · divider v2
colophon · trefoil flourish · marginal rule · popular corner variant
CSS-only, zero image weight, zero JS impact
==================================================================== */
/* ---- 1. Drop-cap initial ---- */
/*
Apply to the opening (lede) paragraph on hero sections only — one per page.
Cantori...
Calligraphic initial styled to match the C-with-harp favicon aesthetic:
flowing gold strokes, warm antique gold (#c9a961), illuminated manuscript
depth via layered text-shadow, and a soft gold glow for dimension.
*/
.orn-drop-cap::first-letter {
font-family: 'Cormorant Garamond', serif;
font-size: 4.5em;
font-weight: 700;
font-style: italic;
line-height: 0.85;
float: left;
margin-right: 0.15em;
margin-top: 0.05em;
/* Warm antique gold — matches C-with-harp favicon */
-webkit-text-fill-color: #c9a961;
color: #c9a961;
/* Layered shadows for illuminated manuscript depth:
1. Subtle dark bottom shadow (grounding, 3D feel)
2. Warm gold inner glow (illuminated letter effect)
3. Soft amber outer halo (manuscript gold leaf warmth) */
text-shadow:
0 2px 4px rgba(74, 64, 48, 0.35), /* dark shadow for depth */
0 0 14px rgba(200, 152, 56, 0.45), /* warm gold glow */
0 0 6px rgba(201, 169, 97, 0.6); /* tight gold highlight */
/* Decorative swash flourish beneath the cap — echoes the flowing
curves of the C in the C-with-harp icon; a subtle underline flourish */
position: relative;
}
/* Decorative swash: a fine gold underline stroke beneath the drop cap,
suggesting the tapered pen stroke of classical calligraphy */
.orn-drop-cap::before {
content: '';
position: absolute;
bottom: -2px;
left: 3px;
width: 1.4em;
height: 1.5px;
background: linear-gradient(
to right,
rgba(201, 169, 97, 0.85) 0%,
rgba(224, 180, 74, 0.6) 60%,
transparent 100%
);
border-radius: 1px;
pointer-events: none;
}
/* On dark hero backgrounds, use brighter gold with stronger glow */
.hero .orn-drop-cap::first-letter,
.dx-hero .orn-drop-cap::first-letter,
.mx-hero .orn-drop-cap::first-letter,
.abt-hero .orn-drop-cap::first-letter,
.inv-hero .orn-drop-cap::first-letter,
.prx-hero .orn-drop-cap::first-letter,
.support-hero .orn-drop-cap::first-letter,
.sec-hero .orn-drop-cap::first-letter,
.aply-hero .orn-drop-cap::first-letter {
-webkit-text-fill-color: var(--au4);
color: var(--au4);
text-shadow:
0 2px 5px rgba(74, 64, 48, 0.3),
0 0 18px rgba(224, 180, 74, 0.55),
0 0 8px rgba(240, 200, 92, 0.7);
}
/* Brighter swash flourish on dark backgrounds */
.hero .orn-drop-cap::before,
.dx-hero .orn-drop-cap::before,
.mx-hero .orn-drop-cap::before,
.abt-hero .orn-drop-cap::before,
.inv-hero .orn-drop-cap::before,
.prx-hero .orn-drop-cap::before,
.support-hero .orn-drop-cap::before,
.sec-hero .orn-drop-cap::before,
.aply-hero .orn-drop-cap::before {
background: linear-gradient(
to right,
rgba(224, 180, 74, 0.9) 0%,
rgba(240, 200, 92, 0.65) 60%,
transparent 100%
);
}
/* Mobile: reduce to 3-line height */
@media (max-width: 600px) {
.orn-drop-cap::first-letter {
font-size: 3.5em;
}
}
/* ---- 2. Illuminated section-opener capital ---- */
/*
Inline gold calligraphic initial for section h2 openers — no background tile.
Usage:
Where the Church Finds Its Musicians
*/
.orn-illum-cap {
font-family: 'Cormorant Garamond', serif;
font-size: 1.25em;
font-weight: 700;
font-style: italic;
color: #c9a961;
display: inline;
margin-right: 0.05em;
}
/* ---- 3. Elaborated lozenge-cross divider v2 ---- */
/*
The existing .orn-divider flanked by two filigree sweeps.
Total width ~280px, centered.
Usage:
*/
.orn-divider-v2 {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin: 0.5rem auto;
max-width: 280px;
user-select: none;
pointer-events: none;
}
/* Left and right filigree sweeps: linear-gradient ending in a dot */
.orn-divider-v2::before,
.orn-divider-v2::after {
content: '';
flex: 1;
height: 2px;
position: relative;
}
/* Left sweep — fades from transparent to gold, ending in a small gold dot */
.orn-divider-v2::before {
background:
radial-gradient(circle at 100% 50%, rgba(200,152,56,0.7) 0%, rgba(200,152,56,0.7) 2px, transparent 3px),
linear-gradient(to right, transparent 0%, rgba(200,152,56,0.45) 70%, rgba(200,152,56,0.65) 100%);
}
/* Right sweep — mirror */
.orn-divider-v2::after {
background:
radial-gradient(circle at 0% 50%, rgba(200,152,56,0.7) 0%, rgba(200,152,56,0.7) 2px, transparent 3px),
linear-gradient(to left, transparent 0%, rgba(200,152,56,0.45) 70%, rgba(200,152,56,0.65) 100%);
}
/* The central glyph — same diamond-lozenge as the v1 divider */
.orn-divider-v2 .orn-divider-glyph {
flex-shrink: 0;
width: 2.5rem;
text-align: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' fill='none'%3E%3Cpath d='M20 2 L23 10 L20 18 L17 10 Z' fill='%23c89838' opacity='0.55'/%3E%3Ccircle cx='20' cy='10' r='1.8' fill='%23c89838' opacity='0.45'/%3E%3Ccircle cx='12' cy='10' r='1.2' fill='%23c89838' opacity='0.3'/%3E%3Ccircle cx='28' cy='10' r='1.2' fill='%23c89838' opacity='0.3'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
height: 20px;
}
/* ---- 4. Popular-tier double corner variant ---- */
/*
More elaborate corner for the featured/popular pricing tier.
Stacks a second, offset L-bracket on top of the standard .orn-card corners.
Usage: add .orn-card--popular alongside .orn-card on the featured tier.
*/
.orn-card--popular::before,
.orn-card--popular::after {
width: 1.5rem;
height: 1.5rem;
opacity: 0.55;
}
/* Double bracket: inner bracket via outline */
.orn-card--popular::before {
border-top: 2px solid var(--au4);
border-left: 2px solid var(--au4);
box-shadow: 5px 5px 0 -3px rgba(200,152,56,0.35);
}
.orn-card--popular::after {
border-bottom: 2px solid var(--au4);
border-right: 2px solid var(--au4);
box-shadow: -5px -5px 0 -3px rgba(200,152,56,0.35);
}
.orn-card--popular:hover::before,
.orn-card--popular:hover::after {
opacity: 0.8;
}
/* ---- 5. Section-heading flourish enhancement — trefoil mark ---- */
/*
Adds a small trefoil/fleur-de-lys above the gold underline on .orn-heading.
The trefoil is CSS-drawn: three small rotated squares (diamonds) arranged
in a vertical cluster, centered above the underline.
Applied by adding a data attribute: class="orn-heading orn-heading--trefoil"
*/
.orn-heading--trefoil {
padding-bottom: 1.6rem; /* extra room for trefoil + underline */
}
/* The trefoil uses a background-image with three stacked diamond SVG shapes */
.orn-heading--trefoil::after {
bottom: 0.55rem; /* shift the underline down to make room */
}
.orn-heading--trefoil::before {
/* Override single diamond with a trefoil cluster */
content: '';
position: absolute;
bottom: 0.95rem;
left: 50%;
transform: translateX(-50%);
width: 18px;
height: 12px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none'%3E%3Crect x='8' y='0' width='5' height='5' rx='0.5' transform='rotate(45 10.5 2.5)' fill='%23e0b44a' opacity='0.55'/%3E%3Crect x='3' y='5' width='4.5' height='4.5' rx='0.5' transform='rotate(45 5.25 7.25)' fill='%23c89838' opacity='0.4'/%3E%3Crect x='11' y='5' width='4.5' height='4.5' rx='0.5' transform='rotate(45 13.25 7.25)' fill='%23c89838' opacity='0.4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
z-index: 1;
}
/* Left-aligned trefoil variant */
.orn-heading--left.orn-heading--trefoil::before {
left: calc(3.5rem / 2);
transform: translateX(-50%);
}
/* ---- 6. Manuscript colophon ---- */
/*
A centered single-line colophon at the foot of long-form pages.
Three small gold diamonds separated by hairline gold lines,
with 'Soli Deo Gloria' in Cormorant italic small caps below.
Usage:
*/
.orn-colophon {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
margin: 3rem auto 2rem;
max-width: 240px;
user-select: none;
pointer-events: none;
}
.orn-colophon-diamonds {
display: flex;
align-items: center;
gap: 0;
width: 100%;
}
/* Left and right hairline rules */
.orn-colophon-diamonds::before,
.orn-colophon-diamonds::after {
content: '';
flex: 1;
height: 1px;
background: rgba(201,169,97,0.35);
}
/* Central three-diamond SVG */
.orn-colophon-gem {
flex-shrink: 0;
width: 3.5rem;
height: 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 14' fill='none'%3E%3Crect x='24' y='2' width='8' height='8' rx='0' transform='rotate(45 28 6)' fill='%23c9a961' opacity='0.65'/%3E%3Crect x='10' y='3' width='6' height='6' rx='0' transform='rotate(45 13 6)' fill='%23c9a961' opacity='0.4'/%3E%3Crect x='40' y='3' width='6' height='6' rx='0' transform='rotate(45 43 6)' fill='%23c9a961' opacity='0.4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.orn-colophon-text {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.82rem;
font-variant: small-caps;
letter-spacing: 0.14em;
color: rgba(201,169,97,0.7);
text-align: center;
}
/* ---- 7. Marginal rule ---- */
/*
A thin (1px) gold vertical rule down the left side of the main content
column, with horizontal tick marks every ~120px. Evokes manuscript page
margins. Wraps the content column via a parent element.
Usage: add class .orn-marginal-wrap to the section container.
Only renders on desktop (≥900px). Left-positioned relative to container.
*/
.orn-marginal-wrap {
position: relative;
}
.orn-marginal-wrap::before {
content: '';
position: absolute;
top: 3rem;
bottom: 3rem;
left: 0.75rem;
width: 1px;
pointer-events: none;
/* Vertical gold line with tick marks every 120px */
background-image:
linear-gradient(to bottom, rgba(200,152,56,0.28) 0%, rgba(200,152,56,0.28) 100%),
/* Tick marks: 5px wide × 1px tall, at 120px intervals */
repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 119px,
rgba(200,152,56,0.45) 119px,
rgba(200,152,56,0.45) 120px
);
background-size: 1px 100%, 1px 120px;
background-repeat: no-repeat, repeat-y;
}
/* Small horizontal ticks that extend 5px right at each 120px interval */
.orn-marginal-wrap::after {
content: '';
position: absolute;
top: 3rem;
bottom: 3rem;
left: 0.75rem;
width: 6px;
pointer-events: none;
background-image: repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 119px,
rgba(200,152,56,0.4) 119px,
rgba(200,152,56,0.4) 120px
);
background-size: 6px 120px;
}
/* Hide marginal rule at mobile widths — layout shifts make it unreliable */
@media (max-width: 900px) {
.orn-marginal-wrap::before,
.orn-marginal-wrap::after {
display: none;
}
}
/* ====================================================================
SCROLL REVEAL — Intersection Observer animation system
GPU-composited: transform + opacity only. No layout thrash.
==================================================================== */
/* Base: element hidden below viewport */
.sr {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
will-change: opacity, transform;
}
/* Stagger grid: parent receives class, children delay via JS */
.sr-stagger > * {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
will-change: opacity, transform;
}
/* Revealed state: animate in */
.sr-visible,
.sr-stagger > .sr-visible,
.sr-stagger.sr-visible > * {
opacity: 1;
transform: translateY(0);
}
/* Gallery frame reveals (150ms stagger applied by JS) */
.gallery-frame {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.55s ease, transform 0.55s ease;
will-change: opacity, transform;
}
.gallery-frame.sr-visible {
opacity: 1;
transform: translateY(0);
}
/* Investors page section content blocks — scoped to .sr so non-animated sections stay visible */
.inv-section.sr > *:not(.inv-ornament) {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.65s ease, transform 0.65s ease;
will-change: opacity, transform;
}
.inv-section.sr-visible > *:not(.inv-ornament):nth-child(1) { transition-delay: 0ms; }
.inv-section.sr-visible > *:not(.inv-ornament):nth-child(2) { transition-delay: 80ms; }
.inv-section.sr-visible > *:not(.inv-ornament):nth-child(3) { transition-delay: 160ms; }
.inv-section.sr-visible > *:not(.inv-ornament):nth-child(4) { transition-delay: 240ms; }
.inv-section.sr-visible > *:not(.inv-ornament):nth-child(5) { transition-delay: 320ms; }
.inv-section.sr-visible > *:not(.inv-ornament):nth-child(6) { transition-delay: 400ms; }
.inv-section.sr-visible > * {
opacity: 1;
transform: translateY(0);
}
/* Feature / problem cards — per-card stagger */
.problem-grid.sr-stagger .problem-card:nth-child(1) { transition-delay: 0ms; }
.problem-grid.sr-stagger .problem-card:nth-child(2) { transition-delay: 100ms; }
.problem-grid.sr-stagger .problem-card:nth-child(3) { transition-delay: 200ms; }
.scards-inner.sr-stagger .scard:nth-child(1) { transition-delay: 0ms; }
.scards-inner.sr-stagger .scard:nth-child(2) { transition-delay: 80ms; }
.scards-inner.sr-stagger .scard:nth-child(3) { transition-delay: 160ms; }
.scards-inner.sr-stagger .scard:nth-child(4) { transition-delay: 240ms; }
.features-list.sr-stagger .feature-item:nth-child(1) { transition-delay: 0ms; }
.features-list.sr-stagger .feature-item:nth-child(2) { transition-delay: 80ms; }
.features-list.sr-stagger .feature-item:nth-child(3) { transition-delay: 160ms; }
.features-list.sr-stagger .feature-item:nth-child(4) { transition-delay: 240ms; }
.sides-inner.sr-stagger .qc:nth-child(1) { transition-delay: 0ms; }
.sides-inner.sr-stagger .qc:nth-child(2) { transition-delay: 100ms; }
/* Drop-cap reveal animation — scale + gold glow on first appearance */
.orn-drop-cap-reveal::first-letter {
animation: dropCapReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes dropCapReveal {
from {
opacity: 0;
transform: scale(0.8);
text-shadow: 0 0 0px rgba(224, 180, 74, 0);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Nav: slide down on initial page load */
.site-nav {
transform: translateY(-100%);
transition: transform 0.3s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.site-nav.nav-enter {
transform: translateY(0);
}
/* Ornamental divider SVG draw-in animation */
.orn-divider.orn-vine {
overflow: hidden;
}
.orn-divider-v2.orn-vine::before,
.orn-divider-v2.orn-vine::after {
transform: scaleX(0);
transform-origin: center;
transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.orn-divider-v2.orn-vine.sr-visible::before,
.orn-divider-v2.orn-vine.sr-visible::after {
transform: scaleX(1);
}
.orn-divider-v2.orn-vine::after {
transition-delay: 0.1s;
}
/* Aria widget pulse: 3s attention-grab, then stops */
.aria-toggle::after {
animation: ariaPulse 2.5s ease-in-out infinite;
animation-delay: 0.5s;
}
.aria-widget.aria-pulse-done .aria-toggle::after {
animation: none;
opacity: 0;
}
/* Investors page stat numbers — smooth counter target */
.inv-stat-num {
display: inline-block;
font-family: 'Cormorant Garamond', serif;
font-size: inherit;
font-weight: inherit;
color: inherit;
transition: color 0.3s ease;
}
/* Feature card links and interactive elements */
.feature-item a,
.problem-card a {
color: inherit;
text-decoration: none;
}
/* Screenshot images hover: scale(1.01) + shadow — already in CSS, ensure consistency */
.gallery-frame:hover img,
.inv-screen-card:hover .inv-screen-img-wrap img {
transform: scale(1.03);
}
/* Investors page lightbox image reveal */
.inv-lb-img-wrap img {
animation: fadeIn 0.3s ease both;
}
/* ====================================================================
SVG ICON SYSTEM — zero-emoji replacement layer
Every decorative unicode glyph is replaced by an inline-SVG data URI.
Stroke-only, antique gold #c9a961, consistent across all devices.
==================================================================== */
:root {
/* ── Cross icon (replaces ✝) ── */
--icon-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2v20M2 12h20' stroke='%23c9a961' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-cross-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%23c9a961' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
/* ── Check mark (replaces ✝ in feature lists) ── */
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4' stroke='%23c9a961' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
/* ── X mark (replaces ✕) ── */
--icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23c9a961' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%231a1408' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
/* ── Arrows (replaces ← → ↗) ── */
--icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M10 3L5 8l5 5' stroke='%23c9a961' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 3l5 5-5 5' stroke='%23c9a961' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--icon-expand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 3h7v7M13 3L6 10' stroke='%23c9a961' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
/* ── Music note (replaces ♪ / ĊA; / ĊB;) ── */
--icon-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 18V5l12-3v13' stroke='%23c9a961' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='6' cy='18' r='3' stroke='%23c9a961' stroke-width='1.5'/%3E%3Ccircle cx='18' cy='15' r='3' stroke='%23c9a961' stroke-width='1.5'/%3E%3C/svg%3E");
/* ── Dollar sign (replaces $ in feature glyphs) ── */
--icon-dollar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2v20M17 6H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H7' stroke='%23c9a961' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
/* ── Alpha / diction (replaces α) ── */
--icon-alpha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17 18c-2 0-4-3.6-5-9S9 0 7 0' stroke='%23c9a961' stroke-width='0' fill='none'/%3E%3Ctext x='4' y='18' font-family='serif' font-style='italic' font-size='18' fill='%23c9a961' opacity='0.85'>%CE%B1 * {
position: relative;
z-index: 1;
}
/* ---- Gallery section enhanced heading ---- */
.gallery .section-header h2::after {
background: linear-gradient(to right,
transparent,
rgba(200,152,56,0.45) 25%,
var(--au3) 50%,
rgba(200,152,56,0.45) 75%,
transparent
);
}
/* ---- Waitlist section ornamental top border enhancement ---- */
.waitlist::before {
/* Override to make the top line more visible */
width: 480px;
background: linear-gradient(to right, transparent, rgba(200,152,56,0.35), transparent) !important;
}
/* ---- Feature icon enhanced gold ---- */
.feature-icon {
color: var(--au3);
opacity: 1;
}
/* ---- Problem card border-top glow on hover ---- */
.problem-card {
transition: border-top-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ---- Sides card enhanced: folded corner visible on hover ---- */
.qc:hover::after {
border-color: transparent var(--p3) transparent transparent;
}
/* ---- Footer ornamental rule enhancement ---- */
/*
The orn-footer-band already exists. Add a gold hairline above it
for stronger visual separation from the last content section.
*/
.orn-footer-band {
box-shadow: 0 -1px 0 rgba(200,152,56,0.15);
}
/* Soli Deo Gloria colophon — subtle gold shimmer on hover */
.footer-colophon {
transition: color 0.3s ease;
cursor: default;
}
.footer-colophon:hover {
color: rgba(200,152,56,0.72);
}
/* ---- Nav active link — gold underline always visible ---- */
/*
Active page link has underline fully expanded from center.
Already defined but reinforce with border-bottom fallback for browsers
that don't support ::after properly.
*/
.site-nav-link--active {
border-bottom: none; /* Use ::after system instead */
}
/* Scrolled nav — warmer shadow for depth */
.site-nav.scrolled {
box-shadow: 0 2px 20px rgba(26,20,8,0.12), 0 1px 0 rgba(200,152,56,0.08);
}
/* ---- Scroll reveal — float upward variant (20px, already in CSS) ---- */
/*
The existing .sr system already uses translateY(20px) → 0.
This layer adds a spring-curve for more organic feel on new additions.
*/
.sr-spring {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.sr-spring.sr-visible {
opacity: 1;
transform: translateY(0);
}
/* ---- Pull-quote refined — used on about/investors ---- */
.orn-pullquote {
border-left-width: 3px;
background: linear-gradient(to right, rgba(200,152,56,0.04), transparent 60%);
}
/* ---- Pricing tier card ornamental top bar ---- */
/*
The tier cards get a 2px gold top accent bar to match the problem-card
border-top treatment — visual consistency across card families.
*/
.prx-tier-card {
border-top: 2px solid rgba(200,152,56,0.25);
transition: border-top-color 0.28s ease,
box-shadow 0.28s ease,
transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.prx-tier-card:hover {
border-top-color: var(--au3);
}
.prx-tier-card--popular {
border-top: 2px solid var(--au4) !important;
}
/* ---- Apply page enhanced ---- */
/*
Applying orn-card class spirit to the apply form container.
*/
.aply-form-wrap {
position: relative;
}
/* ---- Section closing couplet — decorative cross-rule before footer ---- */
/*
The closing section gets a centered cross-rule to visually cap the page.
*/
.closing-ornament {
/* Override existing closing-ornament to use SVG cross instead of text */
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 2.5rem;
}
.closing-ornament::before,
.closing-ornament::after {
content: '';
flex: 0 0 3rem;
height: 1px;
background: rgba(200,152,56,0.35);
}
/* ---- prefers-reduced-motion guard ---- */
@media (prefers-reduced-motion: reduce) {
.sr-spring {
opacity: 1;
transform: none;
transition: none;
}
.problem,
.features,
.sides,
.closing,
.waitlist,
.gallery {
/* Background textures are static, no animation needed */
}
}
/* ---- Mobile: ensure hero CTA never clips ---- */
@media (max-width: 400px) {
.hero-walkthrough-btn {
padding: 0.9rem 1.6rem !important;
font-size: 0.95rem !important;
}
.hero-cta {
gap: 0.75rem;
}
}
/* ---- All cards site-wide — subtle gold glow on focus for accessibility ---- */
.feature-item:focus-within,
.problem-card:focus-within,
.scard:focus-within {
box-shadow: 0 0 0 2px rgba(200,152,56,0.4);
}
/* ============================================================
ZERO-UNICODE CROSS REPLACEMENT — v1
Replace all ✝ text-based crosses with SVG via CSS.
font-size:0 hides the unicode char; ::after injects SVG cross.
Covers every class that uses ✝ as content across all views.
============================================================ */
/* SVG cross data URI — gold (#c9a961), 14×14 viewBox */
:root {
--svg-cross-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18' fill='none'%3E%3Cline x1='7' y1='1' x2='7' y2='17' stroke='%23c9a961' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='2' y1='5.5' x2='12' y2='5.5' stroke='%23c9a961' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
--svg-cross-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18' fill='none'%3E%3Cline x1='7' y1='1' x2='7' y2='17' stroke='%231a1a2e' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='2' y1='5.5' x2='12' y2='5.5' stroke='%231a1a2e' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
--svg-cross-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18' fill='none'%3E%3Cline x1='7' y1='1' x2='7' y2='17' stroke='%23faf7f2' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='2' y1='5.5' x2='12' y2='5.5' stroke='%23faf7f2' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Ornament divider glyphs (section separators across all pages) */
.prx-ornament-glyph,
.dx-ornament-glyph,
.mx-ornament-glyph,
.sec-ornament-glyph,
.abt-ornament-glyph,
.inv-ornament-glyph,
.divider-rule-glyph,
.orn-cross-rule-glyph,
.aply-orn-glyph {
font-size: 0 !important;
display: inline-block;
width: 14px;
height: 18px;
background: var(--svg-cross-gold) no-repeat center / contain;
vertical-align: middle;
flex-shrink: 0;
}
/* Hero decorative cross (large, centered above headline) */
.prx-hero-cross,
.dx-hero-cross,
.mx-hero-cross,
.abt-hero-cross,
.aply-hero-cross,
.support-hero-ornament {
font-size: 0 !important;
display: inline-block;
width: 22px;
height: 28px;
background: var(--svg-cross-gold) no-repeat center / contain;
vertical-align: middle;
}
/* List check marks — belief items, security checks, confidentiality checks */
.abt-belief-check,
.sec-list-check {
font-size: 0 !important;
display: inline-block;
width: 13px;
height: 17px;
background: var(--svg-cross-gold) no-repeat center / contain;
flex-shrink: 0;
vertical-align: middle;
}
/* Support page wall empty ornament */
.wall-empty-ornament {
font-size: 0 !important;
display: inline-block;
width: 18px;
height: 23px;
background: var(--svg-cross-gold) no-repeat center / contain;
opacity: 0.45;
}
/* Support page why-card icon (on navy bg — use cream cross) */
.why-card-icon {
font-size: 0 !important;
display: inline-block;
width: 16px;
height: 20px;
background: var(--svg-cross-cream) no-repeat center / contain;
vertical-align: middle;
}
/* Support thankyou page ornaments */
.thankyou-ornament,
.thankyou-divider-cross {
font-size: 0 !important;
display: inline-block;
width: 18px;
height: 23px;
background: var(--svg-cross-gold) no-repeat center / contain;
}
/* Closing section cross-rule glyph (already .orn-cross-rule-glyph above,
but also handle direct text inside .orn-cross-rule-glyph div) */
.orn-cross-rule-glyph {
font-size: 0 !important;
}
/* investors.ejs ornament glyph */
.inv-ornament-glyph {
background: var(--svg-cross-gold) no-repeat center / contain;
}
/* ============================================================
COMPREHENSIVE MOBILE RESPONSIVENESS FIXES
Deep audit for 375px, 390px, 768px, 1440px
============================================================ */
/* ========== EXTRA SMALL DEVICES (375px - iPhone SE) ========== */
@media (max-width: 375px) {
/* Ensure no horizontal overflow */
html, body {
overflow-x: hidden;
width: 100%;
}
/* Reduce padding on containers */
.site-nav-inner {
padding: 0 1rem;
}
/* Make all text readable */
body {
font-size: 14px;
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
/* Ensure tap targets are 44px minimum */
button, a[role="button"], input[type="submit"], .btn-primary, .btn-ghost {
min-height: 48px;
min-width: 44px;
padding: 0.75rem 1rem !important;
}
/* Image scaling */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Card layouts single column */
[class*="grid"], [class*="columns"] {
grid-template-columns: 1fr !important;
}
/* Ensure hero sections fit viewport */
.hero {
min-height: auto;
padding: 2rem 1rem;
}
.hero h1 {
font-size: clamp(1.75rem, 5vw, 2.5rem);
}
/* Form fields full-width */
form input, form textarea, form select {
width: 100%;
max-width: 100%;
min-height: 44px;
padding: 0.75rem !important;
font-size: 16px; /* Prevent zoom on iOS */
}
/* Footer links wrap */
.footer-links {
flex-direction: column;
gap: 1rem;
}
.footer-links-grid {
grid-template-columns: 1fr !important;
}
/* Gallery/screenshot overflow prevention */
[class*="gallery"], [class*="screenshot"] {
overflow-x: hidden;
}
[class*="gallery"] img, [class*="screenshot"] img {
max-width: 100%;
height: auto;
}
/* Aria widget accessibility */
[class*="aria"], [class*="widget"] {
width: 100%;
max-width: 100%;
}
[class*="aria"] input, [class*="widget"] input {
min-height: 44px;
font-size: 16px;
}
/* Tap-friendly pills/buttons */
[class*="pill"], [class*="badge"], [class*="tag"] {
min-height: 40px;
padding: 0.5rem 1rem;
display: inline-flex;
align-items: center;
}
}
/* ========== SMALL PHONES (390px - iPhone 14/15) ========== */
@media (max-width: 390px) {
.site-nav-inner {
padding: 0 1rem;
height: 56px;
}
.site-nav-logo-img {
height: 48px;
}
.hero h1 {
font-size: clamp(1.8rem, 5.5vw, 2.8rem);
margin-bottom: 1.25rem;
}
.hero-lede {
font-size: 0.95rem;
margin: 0 auto 2rem;
}
.btn-primary, .btn-ghost {
padding: 0.85rem 1.2rem !important;
font-size: 0.9rem;
min-height: 44px;
}
input, textarea, select {
font-size: 16px; /* Prevent iOS zoom */
}
}
/* ========== TABLETS / SMALL LANDSCAPES (768px - iPad) ========== */
@media (max-width: 768px) and (min-width: 376px) {
/* Additional tablet-specific rules */
.site-nav-inner {
padding: 0 1.5rem;
}
/* Ensure form fields stay accessible */
form input, form textarea, form select {
min-height: 44px;
font-size: 16px;
}
/* Gallery improvements */
[class*="gallery"] {
grid-template-columns: 1fr 1fr !important;
gap: 1rem;
}
/* Large images scale down */
img[style*="width"] {
width: 100% !important;
max-width: 100%;
height: auto;
}
}
/* ========== LANDSCAPE ORIENTATION FIX ========== */
@media (max-height: 500px) {
.hero {
min-height: auto;
padding: 1.5rem;
}
.hero h1 {
margin-bottom: 0.75rem;
}
.hero-lede {
margin: 0 auto 1.5rem;
}
}
/* ========== DESKTOP (1440px+) OPTIMIZATION ========== */
@media (min-width: 1440px) {
/* Ensure max-width containers don't exceed 1400px */
[class*="inner"], [class*="container"], [class*="wrapper"] {
max-width: 1100px !important;
margin: 0 auto;
}
/* Desktop tap targets can stay at minimum 44px */
button, a[role="button"], input[type="submit"] {
min-height: 44px;
}
}
/* ========== UNIVERSAL ACCESSIBILITY IMPROVEMENTS ========== */
/* Ensure all interactive elements are keyboard accessible */
@media (prefers-reduced-motion: no-preference) {
button, a[role="button"], input[type="submit"],
.btn-primary, .btn-ghost,
[class*="link"], [class*="pill"], [class*="badge"] {
transition: all 0.2s ease;
}
}
/* High contrast mode support */
@media (prefers-contrast: more) {
body {
color: var(--ink);
}
button, a[role="button"], input[type="submit"] {
border: 2px solid currentColor;
}
}
/* Dark mode support (if needed in future) */
@media (prefers-color-scheme: dark) {
/* Currently not implemented, but structure in place */
}
/* ========== TOAST NOTIFICATIONS ==========
Stack of up to 3 toasts, bottom-right, slide-in from right.
Driven by public/js/toast.js — CantoriToast.show(msg, type).
============================================ */
#cantori-toast-container {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 9900;
display: flex;
flex-direction: column-reverse;
gap: 0.65rem;
pointer-events: none;
max-width: 340px;
width: calc(100vw - 3rem);
}
.c-toast {
display: flex;
align-items: flex-start;
gap: 0.65rem;
padding: 0.85rem 1rem 0.85rem 0.9rem;
border-left: 3px solid var(--au3);
background: rgba(15, 22, 42, 0.97);
color: rgba(240,232,212,0.92);
font-family: 'DM Sans', sans-serif;
font-size: 0.84rem;
font-weight: 300;
line-height: 1.45;
box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
pointer-events: all;
transform: translateX(calc(100% + 2rem));
opacity: 0;
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.22s ease;
will-change: transform, opacity;
border-radius: 2px;
}
.c-toast--visible {
transform: translateX(0);
opacity: 1;
}
.c-toast--leaving {
transform: translateX(calc(100% + 2rem));
opacity: 0;
}
.c-toast--success { border-left-color: rgba(72,160,72,0.85); }
.c-toast--error { border-left-color: rgba(200,60,60,0.85); }
.c-toast--info { border-left-color: var(--au3); }
.c-toast-icon {
flex-shrink: 0;
width: 1.1rem;
height: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
margin-top: 0.1rem;
}
.c-toast--success .c-toast-icon { color: rgba(100,200,100,0.9); }
.c-toast--error .c-toast-icon { color: rgba(220,90,90,0.9); }
.c-toast--info .c-toast-icon { color: var(--au4); }
.c-toast-msg { flex: 1; min-width: 0; }
.c-toast-close {
flex-shrink: 0;
background: none;
border: none;
cursor: pointer;
color: rgba(240,232,212,0.35);
font-size: 1rem;
line-height: 1;
padding: 0 0 0 0.4rem;
transition: color 0.15s ease;
}
.c-toast-close:hover { color: rgba(240,232,212,0.75); }
@media (max-width: 520px) {
#cantori-toast-container {
bottom: 1rem;
right: 0.75rem;
left: 0.75rem;
width: auto;
max-width: none;
}
}
/* ========== SKELETON / LOADING SHIMMER ==========
.skel on placeholder elements, .skel--dark for navy surfaces.
================================================= */
@keyframes skelShimmer {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}
.skel {
display: block;
background: linear-gradient(
90deg,
rgba(26,20,8,0.07) 25%,
rgba(26,20,8,0.14) 37%,
rgba(26,20,8,0.07) 63%
);
background-size: 800px 100%;
animation: skelShimmer 1.5s ease-in-out infinite;
border-radius: 3px;
}
.skel-line { height: 0.85rem; margin-bottom: 0.5rem; }
.skel-line--sm { height: 0.65rem; }
.skel-line--lg { height: 1.1rem; }
.skel-btn { height: 2.8rem; border-radius: 2px; max-width: 180px; }
/* Dark-surface variant (admin / navy backgrounds) */
.skel--dark {
background: linear-gradient(
90deg,
rgba(240,232,212,0.05) 25%,
rgba(240,232,212,0.11) 37%,
rgba(240,232,212,0.05) 63%
);
background-size: 800px 100%;
animation: skelShimmer 1.5s ease-in-out infinite;
}
/* Admin skeleton row (matches .adm-table row height) */
.adm-skel-row {
display: grid;
grid-template-columns: 1.5rem 2fr 1fr 1fr 1fr;
gap: 1rem;
padding: 0.9rem 1rem;
border-bottom: 1px solid rgba(26,20,8,0.08);
align-items: center;
}
/* ========== CANTORI TV (YouTube CRT embed) ========== */
.ctv-section {
display: flex;
flex-direction: column;
align-items: center;
padding: 3.5rem 1.5rem 0;
position: relative;
}
/* "Now Playing" eyebrow label */
.ctv-label-pre {
font-family: 'DM Sans', sans-serif;
font-size: 0.68rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--au3);
margin-bottom: 1.4rem;
opacity: 0.72;
}
/* TV body: navy bezel with gold border + glow */
.ctv-body {
position: relative;
background: var(--ink2);
border: 4px solid var(--au4);
border-radius: 18px;
padding: 18px 18px 10px;
width: 100%;
max-width: 680px;
box-shadow:
0 0 0 2px var(--ink),
0 0 22px 4px rgba(224,180,74,0.28),
0 0 64px 14px rgba(224,180,74,0.10),
0 14px 48px rgba(4,14,29,0.75),
inset 0 1px 0 rgba(224,180,74,0.14);
}
/* Antennas */
.ctv-antenna {
position: absolute;
top: -32px;
width: 3px;
height: 32px;
background: linear-gradient(to top, var(--au2), var(--au4));
border-radius: 2px;
}
.ctv-antenna--l { left: 27%; transform: rotate(-13deg); transform-origin: bottom center; }
.ctv-antenna--r { right: 27%; transform: rotate(13deg); transform-origin: bottom center; }
/* Screen container */
.ctv-screen-wrap {
border-radius: 10px;
overflow: hidden;
background: #000;
}
/* 16:9 iframe wrapper + CRT pseudo-element overlays */
.ctv-screen {
position: relative;
width: 100%;
padding-top: 56.25%;
border-radius: 10px;
overflow: hidden;
}
.ctv-screen iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
display: block;
}
/* CRT vignette — barely-there dark corners; transparent zone pushed wide so
the gold outer glow on .ctv-body reads clean without a visible dark ring */
.ctv-screen::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at center,
transparent 72%,
rgba(4,14,29,0.18) 100%
);
pointer-events: none;
z-index: 2;
border-radius: 10px;
}
/* Curved-screen sheen — glass glare top-left, fade bottom-right */
.ctv-screen::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
155deg,
rgba(255,255,255,0.08) 0%,
rgba(255,255,255,0.02) 30%,
transparent 55%,
rgba(0,0,0,0.10) 100%
);
pointer-events: none;
z-index: 3;
border-radius: 10px;
}
/* Bezel footer: CANTORI wordmark + tuning knobs */
.ctv-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 6px 2px;
}
.ctv-brand {
font-family: 'Cormorant Garamond', serif;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.38em;
color: var(--au3);
text-transform: uppercase;
opacity: 0.78;
}
.ctv-knobs {
display: flex;
gap: 9px;
}
.ctv-knob {
width: 15px;
height: 15px;
border-radius: 50%;
background: radial-gradient(circle at 38% 38%, var(--ink4), var(--ink));
border: 1.5px solid var(--au2);
box-shadow: 0 0 5px rgba(224,180,74,0.18);
}
/* TV stand */
.ctv-stand {
display: flex;
flex-direction: column;
align-items: center;
}
.ctv-stand-neck {
width: 38px;
height: 16px;
background: linear-gradient(to bottom, var(--ink2), var(--ink3));
border-left: 2px solid var(--au2);
border-right: 2px solid var(--au2);
}
.ctv-stand-base {
width: 116px;
height: 8px;
background: linear-gradient(to bottom, var(--ink3), var(--ink2));
border-radius: 0 0 8px 8px;
border: 2px solid var(--au2);
border-top: none;
box-shadow: 0 4px 14px rgba(224,180,74,0.14);
}
@media (max-width: 480px) {
.ctv-section { padding: 2.5rem 1rem 0; }
.ctv-body { border-radius: 12px; padding: 12px 12px 8px; }
.ctv-antenna--l { left: 22%; }
.ctv-antenna--r { right: 22%; }
.ctv-stand-base { width: 88px; }
}
/* Screen overlay wrapper — gives the sound button a stacking context outside
ctv-screen-wrap's overflow:hidden so the button is never clipped */
.ctv-screen-overlay {
position: relative;
}
/* Mute/unmute toggle — bottom-right corner of the TV screen */
.ctv-sound-btn {
position: absolute;
bottom: 10px;
right: 10px;
z-index: 20;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(201, 169, 97, 0.45);
background: rgba(8, 6, 4, 0.72);
color: var(--au3);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
line-height: 1;
opacity: 0.72;
transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
pointer-events: auto;
}
.ctv-sound-btn:hover,
.ctv-sound-btn:focus-visible {
opacity: 1;
background: rgba(8, 6, 4, 0.92);
border-color: var(--au3);
outline: none;
box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.3);
}
.ctv-sound-btn svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
display: block;
pointer-events: none;
}
/* ========== CUSTOM SCROLLBAR (webkit) ========== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--au3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--au4); }
/* ========== TEXT SELECTION ========== */
::selection { background: rgba(224,180,74,0.3); color: var(--ink2); }
::-moz-selection { background: rgba(224,180,74,0.3); color: var(--ink2); }
/* ========== PAGE TRANSITIONS ========== */
@keyframes pageEnter {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pageExit {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-4px); }
}
body {
animation: pageEnter 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.page-exit {
animation: pageExit 0.2s ease forwards;
pointer-events: none;
}
/* ========== HERO CTA PULSE ========== */
@keyframes ctaPulse {
0%, 100% {
box-shadow: 0 4px 16px rgba(224,180,74,0.28), 0 0 24px rgba(224,180,74,0.18), inset 0 1px 0 rgba(255,255,255,0.25);
}
50% {
box-shadow: 0 6px 28px rgba(224,180,74,0.55), 0 0 56px rgba(224,180,74,0.38), 0 0 80px rgba(224,180,74,0.15), inset 0 1px 0 rgba(255,255,255,0.30);
}
}
.btn-pulse {
animation: ctaPulse 2.4s ease-in-out infinite;
}
.btn-pulse:hover {
animation: none; /* disable pulse on hover so hover style takes full effect */
}
@media (max-width: 768px) {
.btn-pulse:active {
transform: scale(0.97) !important;
}
}
/* ========== SKIP TO CONTENT (accessibility) ========== */
.skip-to-content {
position: fixed;
top: -100%;
left: 1rem;
z-index: 9999;
padding: 0.75rem 1.5rem;
background: var(--au4);
color: var(--ink2);
font-family: 'DM Sans', sans-serif;
font-weight: 600;
font-size: 0.9rem;
border-radius: 0 0 var(--r) var(--r);
text-decoration: none;
transition: top 0.2s ease;
box-shadow: var(--s3);
}
.skip-to-content:focus {
top: 0;
outline: 2px solid var(--ink2);
outline-offset: 2px;
}
/* Extended focus-visible to cover inputs and selects */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--au3);
outline-offset: 2px;
}
/* ========== FOOTER GOLD GRADIENT BORDER ========== */
.site-footer {
border-top: none; /* replaced by ::before gradient */
position: relative;
}
.site-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(200,152,56,0.35) 15%,
rgba(224,180,74,0.7) 35%,
rgba(240,200,92,0.9) 50%,
rgba(224,180,74,0.7) 65%,
rgba(200,152,56,0.35) 85%,
transparent 100%
);
}
/* ========== FOOTER LITURGICAL SEASON BADGE ========== */
.footer-liturgical {
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
font-family: 'DM Sans', sans-serif;
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(240,232,212,0.38);
margin-top: 0.6rem;
}
.footer-liturgical-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
opacity: 0.75;
}
/* ========== HERO LITURGICAL DAY INDICATOR ========== */
.litur-day {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin: 1.25rem 0 0.5rem;
font-family: 'Cormorant Garamond', 'Georgia', serif;
font-size: 0.82rem;
font-style: italic;
font-weight: 500;
letter-spacing: 0.04em;
color: rgba(240, 232, 212, 0.65);
text-align: center;
line-height: 1;
}
.litur-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
opacity: 0.9;
/* Ring of light effect on the dot */
box-shadow: 0 0 4px currentColor;
}
.litur-sep {
opacity: 0.45;
font-style: normal;
}
.litur-color-name {
opacity: 0.8;
}
/* ========== PRINT STYLES ========== */
@media print {
.site-nav, .aria-widget, button, input[type="button"] {
display: none;
}
body {
background: white;
color: black;
}
img {
max-width: 100%;
}
}