/* ============================================================================
DECK GARDEN — "VINTAGE ALMANAC" THEME
----------------------------------------------------------------------------
A warm, tactile, antique-occult-almanac look. Drop-in replacement for
home.css — same HTML, zero markup changes. Swap the in index.html.
Aesthetic: aged parchment paper, oxblood + forest-ink + antique brass,
letterpress typography (Playfair Display Didone + EB Garamond body), a paper
grain + faint engraving texture, ornamental rules, vintage botanical-print
energy. Editorial, timeless, the opposite of neon or pastel.
Fonts @imported here (can't touch ).
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');
:root {
/* ---- Parchment & ink palette ---- */
--paper: #f4ecd8; /* aged parchment */
--paper-2: #efe5cc; /* deeper paper */
--paper-3: #e8dcbe; /* panel edge */
--card: #fbf6e9; /* lighter card stock */
--ink: #2a2118; /* sepia-black ink */
--ink-soft: #5c4f3c; /* faded ink */
--ink-dim: #8a7a5e; /* light annotation */
--oxblood: #7a2620; /* primary — deep red */
--oxblood-deep: #5c1a16;
--forest: #2f4733; /* secondary — deep green */
--forest-deep: #1f3023;
--sepia-deep: #3a2c1e; /* aged-leather brown — testimonials backdrop */
--sepia-deeper: #281f15; /* deeper espresso brown */
--brass: #a9802f; /* metallic gold-brass */
--brass-light: #c69a44;
--brass-deep: #7e5e1d;
--line: rgba(122, 38, 32, 0.22);
--line-soft: rgba(42, 33, 24, 0.14);
--rule: #b89a5a; /* ornamental rule */
--radius-sm: 4px;
--radius: 6px;
--radius-lg: 8px;
--shadow-sm: 0 1px 3px rgba(60, 40, 16, 0.10);
--shadow: 0 6px 22px -8px rgba(60, 40, 16, 0.28);
--shadow-lg: 0 18px 50px -16px rgba(60, 40, 16, 0.40);
--font-display: 'Playfair Display', Georgia, serif;
--font-body: 'EB Garamond', Georgia, serif;
/* compatibility aliases */
--gold: var(--brass); --gold-light: var(--brass-light); --gold-dark: var(--brass-deep);
--purple: var(--oxblood); --purple-dark: var(--oxblood-deep); --purple-light: var(--oxblood);
--cream: var(--paper); --cream-warm: var(--paper-2); --lavender: var(--paper-3); --lavender-soft: var(--paper-2);
--white: var(--card);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; max-width: 100%; }
/* ---------------- Paper background: parchment + grain + vignette --------- */
body {
font-family: var(--font-body);
color: var(--ink);
font-size: 18px;
line-height: 1.72;
position: relative;
background:
radial-gradient(1200px 800px at 50% -10%, rgba(169,128,47,0.10), transparent 60%),
radial-gradient(900px 700px at 100% 100%, rgba(122,38,32,0.06), transparent 55%),
linear-gradient(180deg, #f6efdc 0%, #f1e7d0 100%);
background-attachment: fixed;
}
/* Fine paper grain + faint engraved hatch (inline SVG). */
body::before {
content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
/* Corner vignette so the page reads like a bound page edge. */
body::after {
content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
box-shadow: inset 0 0 180px rgba(60, 40, 16, 0.18);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }
/* ============================ BUTTONS ===================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
padding: 13px 28px; border-radius: 999px;
font-family: var(--font-body); font-size: 16px; font-weight: 600; letter-spacing: 0.02em;
border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn-primary { background: var(--oxblood); color: var(--paper); border-color: var(--oxblood-deep); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--oxblood-deep); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-outline { background: transparent; color: var(--oxblood); border-color: var(--oxblood); }
.btn-outline:hover { background: var(--oxblood); color: var(--paper); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-gold { background: linear-gradient(180deg, var(--brass-light), var(--brass-deep)); color: #2a1c00; border-color: var(--brass-deep); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: var(--shadow); filter: brightness(1.05); }
.btn-lg { padding: 15px 32px; font-size: 17px; }
.btn .appicon { width: 18px; height: 18px; }
/* ============================ NAV ======================================== */
.nav {
padding: 14px 0; position: sticky; top: 0; z-index: 100;
background: rgba(244, 236, 216, 0.9);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border-bottom: 3px double var(--rule);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo {
display: flex; align-items: center; gap: 14px;
font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: 0.01em;
color: var(--oxblood);
}
.logo-mark { width: 96px; height: 96px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } /* emblem +100% (was 48px) — site name kept at 26px */
.logo-mark img { width: 100%; height: 100%; object-fit: contain; filter: sepia(0.25) drop-shadow(0 2px 4px rgba(60,40,16,0.3)); }
.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
.nav-links a {
font-family: var(--font-body); font-size: 16px; color: var(--ink-soft); font-weight: 500;
letter-spacing: 0.02em; position: relative; transition: color 0.2s;
}
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1.5px; background: var(--oxblood); transition: right 0.25s ease; }
.nav-links a:hover { color: var(--oxblood); }
.nav-links a:hover::after { right: 0; }
.nav-right { display: flex; align-items: center; gap: 14px; }
/* Hamburger */
.nav-toggle {
display: none; flex-direction: column; justify-content: center; gap: 5px;
width: 44px; height: 44px; padding: 10px; cursor: pointer; flex-shrink: 0;
background: transparent; border: 1.5px solid var(--oxblood); border-radius: 6px; transition: background 0.2s;
}
.nav-toggle:hover { background: rgba(122,38,32,0.06); }
.nav-toggle-bar { display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--oxblood); transition: transform 0.28s cubic-bezier(.2,.7,.2,1), opacity 0.2s; }
.nav.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ============================ HERO ======================================= */
.hero { position: relative; padding: 72px 0 96px; overflow: hidden; }
.hero::before { /* Tiling Flower-of-Life lattice — IDENTICAL to home.css:
same tile, stroke 0.6, opacity 0.18, gold #a8812f, 96×84 size + mask. */
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='56' viewBox='0 0 64 56'%3E%3Cg fill='none' stroke='%23a8812f' stroke-width='0.6' stroke-opacity='0.18'%3E%3Ccircle cx='-32' cy='0' r='32'/%3E%3Ccircle cx='0' cy='0' r='32'/%3E%3Ccircle cx='32' cy='0' r='32'/%3E%3Ccircle cx='64' cy='0' r='32'/%3E%3Ccircle cx='96' cy='0' r='32'/%3E%3Ccircle cx='-48' cy='28' r='32'/%3E%3Ccircle cx='-16' cy='28' r='32'/%3E%3Ccircle cx='16' cy='28' r='32'/%3E%3Ccircle cx='48' cy='28' r='32'/%3E%3Ccircle cx='80' cy='28' r='32'/%3E%3Ccircle cx='-32' cy='56' r='32'/%3E%3Ccircle cx='0' cy='56' r='32'/%3E%3Ccircle cx='32' cy='56' r='32'/%3E%3Ccircle cx='64' cy='56' r='32'/%3E%3Ccircle cx='96' cy='56' r='32'/%3E%3C/g%3E%3C/svg%3E");
background-size: 96px 84px;
-webkit-mask-image: radial-gradient(ellipse 135% 115% at 50% 32%, #000 55%, rgba(0,0,0,0.35) 90%, transparent);
mask-image: radial-gradient(ellipse 135% 115% at 50% 32%, #000 55%, rgba(0,0,0,0.35) 90%, transparent);
}
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; background: repeating-linear-gradient(90deg, var(--rule) 0 14px, transparent 14px 22px); opacity: 0.5; }
.hero-inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; position: relative; z-index: 1; }
.hero-badge {
display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px; margin-bottom: 26px;
border: 1px solid var(--oxblood); border-radius: 999px; white-space: nowrap; max-width: 100%;
font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--oxblood); background: rgba(122,38,32,0.04);
}
.hero-badge::before { content: "❧"; color: var(--brass-deep); font-size: 1.1em; }
.hero h1 {
font-family: var(--font-display); font-size: clamp(38px, 4.6vw, 64px); font-weight: 800;
line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 22px;
}
.hero h1 em { font-style: italic; color: var(--oxblood); font-weight: 600; }
/* The optional break after "discover" is OFF by default (heading wraps
naturally on desktop & portrait phones); the portrait-tablet and
landscape-phone hero blocks turn it on to force "beautiful card deck apps."
onto its own line. */
.hero h1 .hero-break { display: none; }
.hero-lede { font-size: 19.5px; color: var(--ink-soft); max-width: 520px; margin-bottom: 32px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 14px 26px; }
.hero-pill { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-soft); font-weight: 500; }
.hero-pill svg { color: var(--brass-deep); flex-shrink: 0; }
/* Hero art — photo (bg4.jpg). Stretches to the FULL height of the hero so it
stands as tall as the Flower-of-Life lattice (.hero::before spans inset:0).
align-self:stretch makes this grid cell fill the row; the image shows whole
(object-fit:contain), scaled so its height fills the cell — never cropped. */
.hero-art {
position: relative; align-self: stretch; min-height: 520px;
display: flex; align-items: center; justify-content: center;
}
.hero-logo {
position: relative; z-index: 3;
width: auto; max-width: 100%;
height: 100%; object-fit: contain;
/* no shadow/glow — clean photo edges */
}
/* ============================ SECTION BASE =============================== */
.section { padding: 92px 0; position: relative; z-index: 1; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 54px; }
.section-eyebrow {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
color: var(--brass-deep); margin-bottom: 16px;
}
.section-eyebrow::before, .section-eyebrow::after { content: "❦"; color: var(--oxblood); opacity: 0.7; }
.section-title {
font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 46px); font-weight: 800;
line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 16px;
}
.section-sub { font-size: 18px; color: var(--ink-soft); font-style: italic; }
/* ============================ TWO PATHS ================================== */
.paths { padding: 80px 0; position: relative; z-index: 1; }
.paths-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.path {
position: relative; isolation: isolate; overflow: hidden;
border-radius: var(--radius-lg); padding: 44px 38px; display: flex; flex-direction: column;
background: var(--card); border: 1px solid var(--line);
box-shadow: var(--shadow);
transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s, border-color 0.3s;
}
/* double-rule inner frame, like a certificate (above the photo bg) */
.path::before {
content: ""; position: absolute; inset: 8px; border: 1px solid var(--accent, var(--oxblood)); opacity: 0.28; border-radius: 4px; pointer-events: none; z-index: 1;
}
.path > * { position: relative; z-index: 2; }
.path:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.path.creators { --accent: var(--oxblood); }
.path.seekers { --accent: var(--forest); }
.path-tag {
display: inline-flex; align-self: flex-start; align-items: center; gap: 8px;
font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
padding: 7px 16px; border-radius: 999px; margin-bottom: 22px; color: var(--paper);
}
.path-tag::before { content: "❧"; }
.path.creators .path-tag { background: var(--oxblood); }
.path.seekers .path-tag { background: var(--forest); }
.path h3 { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--ink); margin-bottom: 12px; line-height: 1.12; }
.path h3::after { content: "❦"; display: block; color: var(--brass); font-size: 18px; margin-top: 10px; }
.path > p { color: var(--ink-soft); font-size: 16px; margin-bottom: 26px; }
.path ul { list-style: none; margin-bottom: 30px; flex: 1; }
.path li { display: flex; align-items: flex-start; gap: 13px; padding: 9px 0; font-size: 16px; color: var(--ink); }
.check {
flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; margin-top: 2px;
display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--paper);
background: var(--oxblood);
}
.path.seekers .check { background: var(--forest); }
/* --- Photo background per path box --------------------------------------
bg1.jpg behind "For Creators", bg2.jpg behind "For Seekers".
Sits on its own layer behind the inner frame (::before, z 0) and the
content (.path > *, z 1). The card already has `isolation: isolate` +
`overflow: hidden`, so z-index:0 here stacks *below* content but the
image still tints the whole card. Responsive via background-size:cover;
faded for readability via opacity; and masked so it dissolves from the
right edge toward the left (right -> left gradient fade). */
.path.creators,
.path.seekers { background-color: var(--card); }
.path.creators::after,
.path.seekers::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-repeat: no-repeat;
/* Horizontal push of the photo PAST the right edge (a larger value moves the
image further right / shows less of it on the left). Set by JS per box
width (dgPositionPathPhotos() in index.html) as the custom property
--creators-bg-shift on the .path element — pseudo-elements can't be styled
from JS, but they inherit custom props from their host. JS sets a POSITIVE
px magnitude; the calc() negates it so the image is pushed rightward. The
fallback (260px) covers the moment before the script runs / if JS is off.
overflow:hidden on .path clips whatever spills past the edge. */
background-position: right calc(-1 * var(--creators-bg-shift, 260px)) center;
background-size: cover;
opacity: 0.5; /* less transparent (was 0.16, +20% opacity) — still readable */
/* Fade out toward the LEFT. The dissolve starts at the very RIGHT edge and
runs continuously all the way across — so by the time it reaches the spot
where the photo's own left content boundary falls, the mask is already
near-transparent and there's no hard vertical edge. Solid only at the far
right; smoothly gone well before the left edge. */
-webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0.6) 32%, rgba(0,0,0,0.18) 58%, rgba(0,0,0,0.04) 75%, transparent 88%);
mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0.6) 32%, rgba(0,0,0,0.18) 58%, rgba(0,0,0,0.04) 75%, transparent 88%);
}
.path.creators::after { background-image: url("images/bg1.jpg"); }
.path.seekers::after { background-image: url("images/bg2.jpg");background-position: right -1px center; }
/* ============================ HOW IT WORKS ============================== */
.how { background: transparent; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.step {
position: relative; border-radius: var(--radius); padding: 36px 30px;
background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
transition: transform 0.3s, box-shadow 0.3s;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step-num {
font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--paper);
width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
margin-bottom: 18px; background: var(--oxblood); border: 2px solid var(--brass); box-shadow: 0 0 0 3px rgba(122,38,32,0.1);
}
.step h4 { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--ink-soft); }
.step p .hl, .hl { color: var(--oxblood); font-weight: 600; font-style: italic; }
.how-note { text-align: center; margin-top: 32px; font-size: 14.5px; color: var(--ink-soft); font-style: italic; }
.how-note strong { color: var(--oxblood); font-style: normal; }
/* ============================ FEATURES ================================== */
.features { background: transparent; padding-top: 42px; } /* 92px − 50px */
.feature-group { margin-bottom: 56px; }
.feature-group:last-child { margin-bottom: 0; }
.feature-group-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 28px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.feature-group-head h3 { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--ink); }
.feature-group-head span { font-size: 15px; color: var(--ink-soft); font-style: italic; }
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature {
position: relative; border-radius: var(--radius); padding: 28px 24px;
background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
transition: transform 0.28s, box-shadow 0.28s;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature-icon {
width: 52px; height: 52px; margin-bottom: 16px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; color: var(--oxblood);
background: rgba(122,38,32,0.06); border: 1px solid var(--line);
}
.features .seekers-grid .feature-icon { color: var(--forest); background: rgba(47,71,51,0.07); }
.feature h4 { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.feature p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
/* ============================ PRICING ================================== */
.pricing { background: transparent; padding-top: 42px; } /* 92px − 50px */
.price-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; align-items: stretch; }
.price-card {
position: relative; border-radius: var(--radius-lg); padding: 38px 30px;
display: flex; flex-direction: column;
/* bg7.jpg photo at 75% transparency: a 75%-opaque parchment veil is layered
ON TOP of the photo, so the image reads through at quarter strength. Responsive
via background-size:cover; clipped to the rounded card by border-radius (no
overflow:hidden needed — that would hide the "Most popular" badge). */
background:
linear-gradient(rgba(251,246,233,0.85), rgba(251,246,233,0.85)),
url("images/bg7.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 1px solid var(--line); box-shadow: var(--shadow-sm);
transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.price-card::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--line); border-radius: 4px; pointer-events: none; }
.price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.price-card.featured {
border: 2px solid var(--brass); box-shadow: var(--shadow); transform: translateY(-8px);
/* same bg7 photo at 75%, with a slightly warmer top-veil so the featured card
still reads a touch brighter than its neighbours. */
background:
linear-gradient(180deg, rgba(253,248,236,0.85), rgba(251,246,233,0.85)),
url("images/bg7.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.price-card.featured::before { border-color: var(--oxblood); opacity: 0.4; }
.price-card.featured:hover { transform: translateY(-13px); box-shadow: var(--shadow-lg); }
.price-card.featured::after {
content: "Most popular"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
background: var(--oxblood); color: var(--paper); font-family: var(--font-body);
font-size: 12px; font-weight: 700; letter-spacing: 0.06em; padding: 5px 16px; border-radius: 999px; white-space: nowrap;
}
.price-kicker { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-deep); margin-bottom: 10px; }
.price-name { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.price-amount { font-family: var(--font-display); font-size: 52px; font-weight: 800; color: var(--oxblood); line-height: 1.05; display: flex; align-items: baseline; gap: 6px; margin: 10px 0 4px; }
.price-amount .per { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--ink-soft); font-style: italic; }
.price-once { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brass-deep); background: rgba(169,128,47,0.12); padding: 4px 12px; border-radius: 999px; margin-bottom: 18px; }
.price-desc { font-size: 15px; color: var(--ink-soft); margin-bottom: 20px; }
.price-card ul { list-style: none; margin-bottom: 26px; flex: 1; }
.price-card li { display: flex; align-items: flex-start; gap: 11px; padding: 7px 0; font-size: 15px; color: var(--ink); }
.price-card li .check { width: 19px; height: 19px; font-size: 10px; }
.price-foot { font-size: 13px; color: var(--ink-dim); margin-top: 12px; text-align: center; font-style: italic; }
.pricing-aside { text-align: center; margin-top: 32px; font-size: 15px; color: var(--ink-soft); font-style: italic; }
.pricing-aside strong { color: var(--oxblood); font-style: normal; }
/* ============================ TESTIMONIALS ============================== */
.testimonials {
position: relative; overflow: hidden; z-index: 1;
background: linear-gradient(160deg, var(--sepia-deep), var(--sepia-deeper)); color: var(--paper);
border-top: 3px double var(--brass); border-bottom: 3px double var(--brass);
}
.testimonials::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n2)' opacity='0.06'/%3E%3C/svg%3E"); }
.testimonials .section-title { color: var(--paper); }
.testimonials .section-eyebrow { color: var(--brass-light); }
.testimonials .section-eyebrow::before, .testimonials .section-eyebrow::after { color: var(--brass-light); }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; z-index: 1; }
.testimonial {
position: relative; border-radius: var(--radius); padding: 30px;
/* bg8.jpg photo at 75% transparency: a 75%-opaque DARK sepia-brown veil sits
ON TOP of the photo (these cards carry light cream text, so the veil stays
dark to keep it readable — the image reads through at quarter strength).
Responsive via background-size:cover; clipped to the rounded corners by
border-radius. */
background:
linear-gradient(rgba(58,44,30,0.85), rgba(58,44,30,0.85)),
url("images/bg8.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 1px solid rgba(201, 154, 68, 0.3);
transition: transform 0.3s, border-color 0.3s;
}
.testimonial:hover { transform: translateY(-4px); border-color: var(--brass-light); }
.testimonial .quote-mark { font-family: var(--font-display); font-size: 58px; line-height: 0.5; color: var(--brass-light); margin-bottom: 14px; }
.testimonial-text { font-size: 16px; line-height: 1.7; margin-bottom: 22px; color: rgba(244,236,216,0.94); font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; color: var(--sepia-deeper); font-size: 18px; background: linear-gradient(140deg, var(--brass-light), var(--brass-deep)); }
.testimonial-author .name { font-weight: 700; font-size: 14.5px; color: var(--paper); }
.testimonial-author .role { font-size: 13px; color: rgba(244,236,216,0.6); font-style: italic; }
.testimonials-disclaimer { text-align: center; margin-top: 34px; font-size: 13px; color: rgba(244,236,216,0.5); position: relative; z-index: 1; font-style: italic; }
/* ============================ FINAL CTA ================================ */
.cta { position: relative; overflow: hidden; padding: 90px 0; text-align: center; z-index: 1; background: linear-gradient(180deg, var(--paper-2), var(--paper)); border-top: 1px solid var(--line); }
.cta::before { /* Same tiling Flower-of-Life lattice as the hero — identical to home.css. */
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='56' viewBox='0 0 64 56'%3E%3Cg fill='none' stroke='%23a8812f' stroke-width='0.6' stroke-opacity='0.18'%3E%3Ccircle cx='-32' cy='0' r='32'/%3E%3Ccircle cx='0' cy='0' r='32'/%3E%3Ccircle cx='32' cy='0' r='32'/%3E%3Ccircle cx='64' cy='0' r='32'/%3E%3Ccircle cx='96' cy='0' r='32'/%3E%3Ccircle cx='-48' cy='28' r='32'/%3E%3Ccircle cx='-16' cy='28' r='32'/%3E%3Ccircle cx='16' cy='28' r='32'/%3E%3Ccircle cx='48' cy='28' r='32'/%3E%3Ccircle cx='80' cy='28' r='32'/%3E%3Ccircle cx='-32' cy='56' r='32'/%3E%3Ccircle cx='0' cy='56' r='32'/%3E%3Ccircle cx='32' cy='56' r='32'/%3E%3Ccircle cx='64' cy='56' r='32'/%3E%3Ccircle cx='96' cy='56' r='32'/%3E%3C/g%3E%3C/svg%3E");
background-size: 96px 84px;
-webkit-mask-image: radial-gradient(ellipse 120% 110% at 50% 50%, #000 50%, transparent 92%);
mask-image: radial-gradient(ellipse 120% 110% at 50% 50%, #000 50%, transparent 92%);
}
.cta .container { position: relative; z-index: 1; }
.cta-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--brass-deep); margin-bottom: 16px; }
.cta-eyebrow::before { content: "❧"; color: var(--oxblood); }
.cta h2 { font-family: var(--font-display); font-size: clamp(32px, 4vw, 50px); font-weight: 800; margin-bottom: 16px; line-height: 1.08; color: var(--ink); }
.cta h2 em { font-style: italic; color: var(--oxblood); }
.cta p { color: var(--ink-soft); font-size: 17.5px; max-width: 500px; margin: 0 auto 30px; }
.cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* ============================ FOOTER ================================== */
footer { background: linear-gradient(180deg, var(--paper-2), #e6d9bb); padding: 64px 0 28px; color: var(--ink-soft); position: relative; z-index: 1; border-top: 3px double var(--rule); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 36px; margin-bottom: 36px; }
.footer-brand .logo { margin-bottom: 16px; }
.footer-brand p { font-size: 14px; color: var(--ink-soft); margin-bottom: 18px; max-width: 280px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
color: var(--oxblood); background: transparent; border: 1.5px solid var(--oxblood); transition: all 0.2s;
}
.footer-social a:hover { background: var(--oxblood); color: var(--paper); transform: translateY(-2px); }
.footer-col h5 { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { font-size: 14px; color: var(--ink-soft); transition: color 0.2s; }
.footer-col a:hover { color: var(--oxblood); }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 22px; text-align: center; font-size: 13px; color: var(--ink-dim); }
.footer-disclaimer { max-width: 560px; margin: 0 auto 10px; font-size: 12.5px; color: var(--ink-dim); line-height: 1.6; font-style: italic; }
/* ============================ RESPONSIVE ============================== */
@media (max-width: 940px) {
/* --- Larger BODY text on tablets/iPad (~50% up). Headings untouched -------
This breakpoint covers iPad portrait (~810–1024px), which the ≤560px
phone bump never reached — so its body copy was rendering at the small
base sizes. Bump the regular text ~1.5× here. Heading selectors
(.hero h1, .section-title, .feature-group-head h3, .path h3, .price-name,
.price-amount, .cta h2) set their own size and are deliberately excluded. */
body { font-size: 22.5px; } /* 18 → ×1.25; lifts inherited copy */
.hero-lede { font-size: 24.5px; } /* 19.5 → ×1.25 */
.section-sub { font-size: 22.5px; } /* 18 → ×1.25 */
.section-eyebrow { font-size: 16px; } /* 13 → ×1.25 */
.path > p { font-size: 20px; } /* 16 → ×1.25 */
.path li { font-size: 20px; } /* 16 → ×1.25 */
.feature-group-head span{ font-size: 18.5px; } /* 15 → ×1.25 */
.feature p { font-size: 18px; } /* 14.5 → ×1.25 */
.step p { font-size: 18.5px; } /* 15 → ×1.25 */
.price-desc { font-size: 18.5px; } /* 15 → ×1.25 */
.price-card li { font-size: 18.5px; } /* 15 → ×1.25 */
.testimonial-text { font-size: 20px; } /* 16 → ×1.25 */
.pricing-aside { font-size: 18.5px; } /* 15 → ×1.25 */
.nav-toggle { display: flex; }
.nav-inner { position: relative; }
.nav-links {
position: absolute; top: calc(100% + 14px); right: 0; left: 0;
flex-direction: column; align-items: stretch; gap: 0;
background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 8px; overflow: hidden;
box-shadow: var(--shadow-lg);
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity 0.22s ease, transform 0.22s cubic-bezier(.2,.7,.2,1), visibility 0.22s;
}
.nav.is-open .nav-links { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-links li { width: 100%; }
.nav-links a { display: block; padding: 14px 16px; border-radius: 6px; font-size: 17px; }
.nav-links a::after { display: none; }
.nav-links a:hover, .nav-links a:active { background: rgba(122,38,32,0.06); color: var(--oxblood); }
.nav-links li + li { border-top: 1px solid var(--line); }
.hero-inner { grid-template-columns: 1fr; }
.hero-art { display: none; }
.hero { padding-bottom: 50px; }
/* (Removed a stale `background-size: 480px` override left over from the old
compass-ring SVG — it was blowing the lattice tile up to 480px on mobile.
The lattice now keeps its correct 96×84px tile at all sizes, like home.css.) */
.steps { grid-template-columns: 1fr; }
.features-grid { grid-template-columns: repeat(2, 1fr); }
.testimonials-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.price-card { padding: 28px 20px; }
.path { padding: 34px 26px; }
.nav { padding: 8px 0; }
.nav .logo-mark { width: 64px; height: 64px; }
.nav .logo { font-size: 26px; }
}
/* --- Portrait tablets: bg4.jpg as a full-bleed hero background ------------
On a tablet held vertically, the hero stacks to one column (lots of empty
space on the right). Re-use the hidden .hero-art ![]()
as a background
layer: pinned to fill the WHOLE .hero box top→bottom (ignoring the hero's
72/96px padding, so it spans the full Flower-of-Life lattice area edge to
edge), aligned to the RIGHT, and faded out toward the LEFT so the copy
stays readable over the parchment. Sits above the lattice (z0) but below
the text/CTA (z1). Phones (≤600px) and landscape are excluded. */
@media (orientation: portrait) and (min-width: 601px) and (max-width: 940px) {
.hero { position: relative; }
/* Hide the Flower-of-Life lattice entirely on portrait tablets — the photo
fills the hero here, so the SVG pattern would only bleed over the image. */
.hero::before { display: none; }
/* Anchor the absolute .hero-art to the SECTION (.hero), not to .container /
.hero-inner. Those carry `position: relative`, which would otherwise
capture the absolute child and inset it by the container's max-width +
28px side padding AND the hero's 72/96px vertical padding — leaving the
gaps on top/bottom/right. Dropping their positioning lets the image fill
the full .hero box, exactly co-extensive with the lattice (inset:0). */
.hero .container { position: static; }
.hero .hero-inner { position: static; }
.hero-art {
display: block; /* un-hide (was display:none at ≤940px) */
position: absolute; top: 0; bottom: 0; right: -100px; /* shifted 100px right; overflow clips the strip */
width: calc(min(72%, 600px) + 100px); /* keep the same on-screen coverage after the shift */
height: auto; min-height: 0; /* override the 520px min-height */
margin: 0; padding: 0; z-index: 0; /* behind the copy (z1), above lattice (z0) */
pointer-events: none;
/* fade out toward the LEFT so it dissolves into the parchment under the text */
-webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0.55) 45%, transparent 88%);
mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0.55) 45%, transparent 88%);
}
.hero-art .hero-logo {
width: 100%; height: 100%;
object-fit: cover; /* fill the full top→bottom height */
object-position: right center; /* keep the right side of the photo in view */
filter: none; /* no shadow/glow */
}
/* Copy column stays above the image. Give .container/.hero-inner their own
stacking context via z-index so the text sits over the photo even though
they're now position:static (z-index needs a positioned OR isolated box —
use isolation so we don't reintroduce a positioning ancestor). */
.hero .container { isolation: isolate; }
.hero-copy { position: relative; z-index: 1; }
/* Force the heading to break after "discover" on portrait tablets. */
.hero h1 .hero-break { display: inline; }
}
/* --- Phones in LANDSCAPE: same bg4.jpg full-bleed hero background ----------
Identical treatment to the portrait-tablet block above, but for a phone held
sideways. `max-height: 600px` is the discriminator: it catches phones in
landscape (short viewport) while EXCLUDING tablets in landscape (which are
≥~768px tall). The photo fills the whole .hero box top→bottom (co-extensive
with the Flower-of-Life lattice), is right-aligned, and fades out on the left
so the copy stays readable. */
@media (orientation: landscape) and (max-width: 940px) and (max-height: 600px) {
.hero { position: relative; }
/* Hide the lattice entirely on landscape phones — same reason as the
portrait-tablet block: the photo fills the hero, so the SVG would only
bleed over the image. */
.hero::before { display: none; }
.hero .container { position: static; }
.hero .hero-inner { position: static; }
.hero-art {
display: block; /* un-hide (was display:none at ≤940px) */
position: absolute; top: 0; bottom: 0; right: -100px; /* shifted 100px right; overflow clips the strip */
width: calc(min(60%, 620px) + 100px); /* keep the same on-screen coverage after the shift */
height: auto; min-height: 0;
margin: 0; padding: 0; z-index: 0;
pointer-events: none;
-webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0.55) 45%, transparent 88%);
mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0.55) 45%, transparent 88%);
}
.hero-art .hero-logo {
width: 100%; height: 100%;
object-fit: cover;
object-position: right center;
filter: none;
}
.hero .container { isolation: isolate; }
.hero-copy { position: relative; z-index: 1; }
/* Force the heading to break after "discover" on landscape phones. */
.hero h1 .hero-break { display: inline; }
}
/* --- Tablet LANDSCAPE / narrowed desktop (601–940px, TALL): close the gap ---
Without this block there was a dead zone: between the full desktop layout
(>940px, .hero-art shown as a grid column) and the breakpoints that bring
bg4.jpg back as a full-bleed background, the image VANISHED. The portrait-
tablet block requires portrait; the landscape-phone block requires
max-height:600px — so a LANDSCAPE viewport that is 601–940px wide AND taller
than 600px (a tablet held sideways, or a desktop window narrowed into that
band) matched NEITHER, and .hero-art stayed display:none from the ≤940px
block. This covers exactly that band so the photo stays visible — full-size
on the right above 940px → full-bleed background below it — with no gap.
Same treatment as the portrait-tablet / landscape-phone blocks. */
@media (orientation: landscape) and (min-width: 601px) and (max-width: 940px) and (min-height: 601px) {
.hero { position: relative; }
.hero::before { display: none; }
.hero .container { position: static; }
.hero .hero-inner { position: static; }
.hero-art {
display: block; /* un-hide (was display:none at ≤940px) */
position: absolute; top: 0; bottom: 0; right: -100px; /* shifted 100px right; overflow clips the strip */
width: calc(min(60%, 620px) + 100px); /* keep the same on-screen coverage after the shift */
height: auto; min-height: 0;
margin: 0; padding: 0; z-index: 0;
pointer-events: none;
-webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0.55) 45%, transparent 88%);
mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0.55) 45%, transparent 88%);
}
.hero-art .hero-logo {
width: 100%; height: 100%;
object-fit: cover;
object-position: right center;
filter: none;
}
.hero .container { isolation: isolate; }
.hero-copy { position: relative; z-index: 1; }
/* Match the heading break used by the other full-bleed hero blocks. */
.hero h1 .hero-break { display: inline; }
}
@media (max-width: 600px) {
.paths-grid { grid-template-columns: 1fr; }
/* (No phone-specific creators shift here — the container query on
.path.creators::after handles it by the box's own width: a stacked phone
box is <460px wide, so it gets the larger 52cqw push automatically.) */
/* Stack in DOM order on phones: Seedling → Garden → Publish.
(No `order: -1` on .featured — that used to pull Garden above Seedling.) */
.price-grid {
grid-template-columns: 1fr; max-width: 460px; margin: 0 auto;
gap: 64px; /* roomier separation between stacked price boxes */
}
/* Decorative divider centered in each 64px gap between stacked cards — a short
brass dashed rule with a ❦ floral-heart glyph (the theme's own vocabulary).
Uses only FREE ::after pseudos so it never collides with the cards' inner
frame (::before) or the "Most popular" badge (.featured::after):
• below Seedling -> Seedling's ::after (bottom of a non-featured card)
• below Garden -> Publish's ::after (top of the last, non-featured card)
Garden (featured) is skipped because its ::after is the badge. */
.price-card:not(.featured):not(:last-child)::after, /* Seedling: gap below */
.price-card.featured + .price-card::after { /* Publish: gap above */
content: "❦";
position: absolute; left: 50%; transform: translateX(-50%);
z-index: 4; pointer-events: none;
width: 240px; max-width: 80%; text-align: center;
font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--brass-deep);
background:
linear-gradient(var(--rule), var(--rule)) left center / 38% 1.5px no-repeat,
linear-gradient(var(--rule), var(--rule)) right center / 38% 1.5px no-repeat;
}
/* Seedling's ornament sits in the gap BELOW it; Publish's sits in the gap ABOVE it.
Half of the 64px gap = 32px, centred on the glyph. */
.price-card:not(.featured):not(:last-child)::after { bottom: -42px; }
.price-card.featured + .price-card::after { top: -42px; }
}
/* --- Portrait phones: tighten the gap above the Features ("Everything You
Need") and Pricing ("Simple, Honest Pricing") sections by 50px. The section
already has 42px top padding; a -50px margin-top pulls it up the full 50px
(closing the gap to the block above — the For Seekers path / the Features
section respectively) without going to invalid negative padding. */
@media (orientation: portrait) and (max-width: 600px) {
.features { margin-top: -50px; }
.pricing { margin-top: -50px; }
/* (No per-device shift for the creators photo here anymore — the base rule
positions it as a fraction of the box width (28cqw), so it scales with the
column on every device, phones included.) */
}
@media (max-width: 560px) {
/* --- Larger BODY text on phones (~50% up, matching the tablet block).
Headings/eyebrows/pills/buttons set their own size and are excluded. */
body { font-size: 22.5px; } /* 18 → ×1.25 — lifts inherited text */
.hero-lede { font-size: 24.5px; } /* 19.5 → ×1.25 */
.section-sub { font-size: 22.5px; } /* 18 → ×1.25 */
.section-eyebrow{ font-size: 16px; } /* 13 → ×1.25 */
.path > p { font-size: 20px; } /* 16 → ×1.25 */
.path li { font-size: 20px; } /* 16 → ×1.25 */
.feature-group-head span { font-size: 18.5px; } /* 15 → ×1.25 */
.step p { font-size: 18.5px; } /* 15 → ×1.25 */
.feature p { font-size: 18px; } /* 14.5 → ×1.25 */
.price-desc { font-size: 18.5px; } /* 15 → ×1.25 */
.price-card li { font-size: 18.5px; } /* 15 → ×1.25 */
.testimonial-text { font-size: 20px; } /* 16 → ×1.25 */
.pricing-aside { font-size: 18.5px; } /* 15 → ×1.25 */
.hero h1 { font-size: 34px; line-height: 1.1; }
/* Top pill on ONE line on phones — smaller font + tighter tracking + padding
so "CARD DECK APPS FOR IOS & ANDROID" fits without wrapping. */
.hero-badge { font-size: 11px; letter-spacing: 0.12em; padding: 6px 14px; gap: 7px; }
.section-title { font-size: 30px; }
.features-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.container { padding: 0 20px; }
.nav { padding: 5px 0; }
.nav .logo-mark { width: 70px; height: 70px; }
.nav .logo { font-size: 26px; }
.hero-cta { flex-wrap: nowrap; gap: 10px; }
.hero-cta .btn-lg { padding: 13px 16px; font-size: 15px; white-space: nowrap; flex: 0 1 auto; }
}
@media (max-width: 400px) {
.nav .logo { font-size: 26px; }
.nav .logo-mark { width: 72px; height: 72px; }
.nav { padding: 4px 0; }
/* Smallest phones: shrink the pill a touch more so it stays on one line. */
.hero-badge { font-size: 10px; letter-spacing: 0.1em; padding: 6px 12px; }
.hero h1 { font-size: 31px; }
}
@media (prefers-reduced-motion: reduce) {
.path, .step, .feature, .price-card, .testimonial, .btn { transition: none !important; }
}