/* ============================================================================
THE LOTUS PRIEST · "CINEMATIC TEMPLE" · PROOF OF CONCEPT LAYER
----------------------------------------------------------------------------
Loaded AFTER styles.css. This file only ADDS and OVERRIDES. The master
design system is never edited, so this whole layer can be deleted by
removing one and nothing else changes.
The idea: the current site holds one tone from top to bottom. This adds
dynamic range, so the page moves between light and dark instead of
running at a single pitch for 9,500 pixels.
THREE HERO TREATMENTS are defined below so they can be compared directly:
.threshold--over text laid over a full-screen photograph
.threshold--under full-width photograph, undimmed, text beneath it
.threshold--split photograph beside the words, undimmed, uncropped
See hero-options.html to view all three stacked.
All motion is wrapped in BOTH:
@supports (animation-timeline: view()) -> silently skipped if unsupported
@media (prefers-reduced-motion: no-preference)
so there is no JavaScript, and reduced-motion users get a still page.
========================================================================== */
/* ========================================================= THE THREE DARKS
One primary that carries the identity, one secondary for variation, one
rare accent. Applied as a class on or on a single .
(default) Amenti purple #2A1566 the brand, most surfaces
.theme-plum Plum #2A1049 secondary, some surfaces
.theme-temple Temple floor #092437 rare, sampled from Ali's tile photo
Every dark surface is a three-stop gradient, so each theme sets all three:
--amenti-purple the lit edge
--amenti-purple-deep the body of the colour
--amenti-abyss the far corner it falls away into
That third stop used to be hardcoded (#1B0E48 in .landing, #1D0F4E in
.amenti-band) which is why the far corner never moved when the palette
changed. It is a token now, and both components are re-pointed below. */
:root { --amenti-abyss: #1B0E48; }
.theme-plum {
--amenti-purple: #3E1C72;
--amenti-purple-deep: #2A1049;
--amenti-abyss: #1A0A2F;
}
.theme-temple {
--amenti-purple: #14405E;
--amenti-purple-deep: #092437;
--amenti-abyss: #04141F;
}
/* Re-point the two components that hardcoded their far stop. */
.amenti-band {
background:
radial-gradient(1000px 480px at 50% -10%,
var(--amenti-purple) 0%,
var(--amenti-purple-deep) 62%,
var(--amenti-abyss) 100%);
}
.landing {
background:
radial-gradient(1100px 640px at 72% -12%,
var(--amenti-purple) 0%,
var(--amenti-purple-deep) 55%,
var(--amenti-abyss) 100%);
}
/* The ribbon faded to --purple-deep, which belongs to the LIGHT palette, so on
any non-purple theme it ran two different colours. Both stops now match. */
.event-ribbon {
background: linear-gradient(90deg, var(--amenti-purple-deep), var(--amenti-purple));
}
/* ----------------------------------------------------------------- TOKENS */
.cine {
--papyrus-hi: #FBF6EA;
/* The sticky site header sits ABOVE the hero in normal flow, so a hero of
100svh actually ends one header-height below the fold and clips its own
content. Every full-height hero subtracts this. Matches
.site-header__bar min-height (78px) plus its 1px bottom border. */
--header-h: 79px;
/* The gatherings ribbon now sits above the header too, so on pages that
carry one the hero has to subtract that as well. Pages without a ribbon
keep 0 automatically. */
--ribbon-h: 0px;
}
.cine:has(.event-ribbon) { --ribbon-h: 49px; }
/* Full-bleed bands are direct children of , so they need no viewport
width maths (which is what causes the classic scrollbar overflow bug). */
.cine main { overflow-x: clip; }
/* ============================================================ HERO · SHARED */
.threshold { position: relative; background: var(--cream); }
.threshold__title { text-wrap: balance; margin: 0 0 clamp(1rem, 2vw, 1.5rem); }
.threshold__lede { line-height: 1.68; margin: 0; }
.threshold__lede em { font-style: italic; }
/* ==================================================== HERO A · TEXT OVER
The photograph fills the screen and the words sit on it. Most immersive.
The cost is real: the scrim needed to keep type readable also mutes the
flower, and the headline covers part of the image. */
.threshold--over {
min-height: calc(100vh - var(--header-h, 0px) - var(--ribbon-h, 0px));
min-height: calc(100svh - var(--header-h, 0px) - var(--ribbon-h, 0px));
display: grid;
align-items: end;
overflow: hidden;
background: var(--amenti-purple-deep);
isolation: isolate;
}
.threshold--over .threshold__media { position: absolute; inset: 0; z-index: -2; }
.threshold--over .threshold__media img {
width: 100%; height: 100%;
object-fit: cover; object-position: 50% 42%;
transform: scale(1.04);
}
.threshold--over .threshold__scrim {
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(to top, rgba(18,10,34,.80) 0%, rgba(18,10,34,.55) 38%, rgba(18,10,34,.12) 72%, rgba(18,10,34,.45) 100%),
linear-gradient(115deg, rgba(59,31,139,.52) 0%, rgba(42,21,102,.16) 55%, rgba(20,10,40,.48) 100%);
}
.threshold--over .threshold__inner {
position: relative;
padding-block: clamp(5.5rem, 11vh, 8.5rem) clamp(3rem, 7vh, 5rem);
max-width: 56rem;
}
.threshold--over .eyebrow { color: var(--gold-bright); opacity: .95; margin-bottom: .9rem; }
.threshold--over .threshold__title {
font-size: clamp(2.6rem, 5.8vw, 5.6rem);
line-height: 1.05;
color: var(--papyrus-hi);
text-shadow: 0 2px 30px rgba(10, 5, 22, .5);
}
.threshold--over .threshold__title .hl {
text-decoration-color: var(--gold-bright);
text-decoration-thickness: 2px;
text-underline-offset: 8px;
}
.threshold--over .threshold__lede {
font-size: clamp(1.12rem, 1.6vw, 1.4rem);
color: rgba(247, 241, 227, .88);
max-width: 44ch;
text-shadow: 0 1px 18px rgba(10, 5, 22, .55);
}
.threshold--over .threshold__lede em { color: var(--gold-bright); }
.threshold--over .hero__ctas { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (max-height: 800px) and (min-width: 701px) {
.threshold--over .threshold__inner { padding-block: 5.5rem 3rem; }
.threshold--over .threshold__title { font-size: clamp(2.4rem, 4.6vw, 3.9rem); }
.threshold--over .threshold__lede { font-size: 1.12rem; line-height: 1.6; }
}
/* ---- variant: a single centred bloom ----
A photograph of one large flower needs the type to stay out of its way.
The words are kept deliberately smaller and the crop is pushed down, so
the bloom sits in the upper third and the headline lands on the pads
below it rather than across the petals. */
/* ---- variant: a single centred bloom, text split top and bottom ----
Earlier this stacked the headline and the lede together at the bottom.
That put the whole text block across the flower AND meant the scrim had to
be heavy over most of the frame to keep it readable, so the bloom was
buried twice over.
Now the hero is a three-row grid: headline in the top row, an empty middle
row that belongs entirely to the flower, and the lede in the bottom row.
The empty row IS the spacing between the two texts, so it grows on tall
screens instead of needing a fixed margin. */
.threshold--bloom {
display: grid;
grid-template-rows: auto minmax(4rem, 1fr) auto;
align-items: stretch;
}
.threshold--bloom .threshold__top {
grid-row: 1;
align-self: start;
padding-block: clamp(2.5rem, 5vh, 4rem) 0;
text-align: center;
}
.threshold--bloom .threshold__bottom {
grid-row: 3;
align-self: end;
padding-block: 0 clamp(2.25rem, 4.5vh, 3.5rem);
text-align: center;
}
/* Bigger and heavier than before. It sits on the darkest part of the scrim
now, so it can carry real size without fighting the photograph. */
.threshold--bloom .threshold__title {
font-size: clamp(2.3rem, 4.6vw, 4.2rem);
line-height: 1.05;
margin: 0;
max-width: 20ch;
margin-inline: auto;
letter-spacing: -0.01em;
}
.threshold--bloom .threshold__lede {
font-size: clamp(1.05rem, 1.25vw, 1.22rem);
line-height: 1.6;
max-width: 56ch;
margin-inline: auto;
}
/* The flower is centred in the middle band. */
.threshold--bloom .threshold__media img { object-position: 50% 48%; }
/* Dark at the top where the headline sits, dark at the bottom where the lede
sits, and almost clear through the middle third so the bloom comes through
at close to its real colour. */
.threshold--bloom .threshold__scrim {
background:
linear-gradient(to bottom,
rgba(16, 9, 30, .90) 0%,
rgba(16, 9, 30, .76) 20%, /* holds under the headline, which ends ~24% */
rgba(16, 9, 30, .24) 38%,
rgba(16, 9, 30, .10) 52%, /* the bloom's centre sits here */
rgba(16, 9, 30, .28) 66%,
rgba(16, 9, 30, .78) 84%, /* picks up again before the lede at ~84% */
rgba(16, 9, 30, .92) 100%),
linear-gradient(115deg, rgba(59,31,139,.26) 0%, rgba(42,21,102,.06) 50%, rgba(20,10,40,.26) 100%);
}
/* Short screens: the middle window would otherwise vanish entirely. */
@media (max-height: 760px) {
.threshold--bloom { grid-template-rows: auto minmax(2.5rem, 1fr) auto; }
.threshold--bloom .threshold__title { font-size: clamp(2rem, 3.8vw, 3rem); }
}
@media (max-width: 700px) {
.threshold--over { min-height: calc(92svh - var(--header-h, 0px) - var(--ribbon-h, 0px)); }
}
/* =================================================== HERO B · PHOTO ABOVE
The photograph runs the full width of the page at full brightness with
nothing on top of it, and the words sit underneath in the cream.
Largest possible image with zero loss of colour. */
.threshold--under { padding-bottom: clamp(3rem, 6vw, 5.5rem); }
.threshold__wide { margin: 0; }
.threshold__wide img {
width: 100%;
height: clamp(20rem, 56svh, 34rem);
object-fit: cover;
object-position: 50% 38%;
display: block;
border-bottom: 1px solid var(--rule-strong);
}
.threshold--under .threshold__below {
max-width: 60rem;
padding-top: clamp(2.5rem, 5vw, 4rem);
}
.threshold--under .threshold__title { font-size: clamp(2.4rem, 4.8vw, 4.2rem); line-height: 1.08; }
.threshold--under .threshold__lede { font-size: clamp(1.12rem, 1.45vw, 1.38rem); color: var(--ink-soft); max-width: 52ch; }
.threshold--under .hero__ctas { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
/* ==================================================== HERO C · SPLIT
The photograph beside the words, at full colour, uncropped from its
native 3:4, and roughly twice the size it is on the current site. */
.threshold--split { padding-block: clamp(2.25rem, 4vw, 3.75rem) clamp(3rem, 6vw, 5.5rem); }
/* The split hero alone runs wider than the standard reading container, so
the photograph has somewhere to grow into on large screens. */
.threshold--split > .container { max-width: 88rem; }
.threshold__grid {
display: grid;
grid-template-columns: 1.02fr .98fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
@media (max-width: 900px) { .threshold__grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.threshold--split .threshold__title { font-size: clamp(2.5rem, 5vw, 4.4rem); line-height: 1.08; }
.threshold--split .threshold__lede { font-size: clamp(1.12rem, 1.45vw, 1.38rem); color: var(--ink-soft); max-width: 46ch; }
.threshold--split .hero__ctas { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.threshold__figure {
position: relative; margin: 0;
justify-self: end; width: 100%; max-width: 34rem; /* ~544px vs 323px today */
}
@media (max-width: 900px) { .threshold__figure { justify-self: center; max-width: 26rem; } }
.threshold__figure img {
width: 100%;
aspect-ratio: 3 / 4; /* the file's own proportion, nothing cropped */
object-fit: cover;
border: 1px solid var(--rule-strong);
border-radius: var(--radius);
display: block;
}
/* A thin gold rule offset behind the photograph. A printed-invitation
detail that frames the image without touching or dimming it. */
.threshold__figure::after {
content: "";
position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem;
border: 1px solid var(--gold);
opacity: .55; border-radius: var(--radius);
z-index: -1; pointer-events: none;
}
@media (max-width: 900px) { .threshold__figure::after { display: none; } }
/* ==================================================================== FILM
A photograph given the entire width of the page, with a line of text
resting on it. This is the punctuation the current page has none of.
Here an overlay IS right: these are atmosphere shots of rooms and
gatherings, not the product, so darkening them costs nothing. */
.film {
position: relative;
min-height: clamp(24rem, 58vh, 36rem);
display: grid; place-items: center;
overflow: hidden; isolation: isolate;
background: var(--amenti-purple-deep);
}
.film__media { position: absolute; inset: 0; z-index: -2; }
.film__media img { width: 100%; height: 100%; object-fit: cover; }
.film__scrim {
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to bottom, rgba(18,10,34,.62), rgba(18,10,34,.44) 45%, rgba(18,10,34,.74));
}
.film__inner { text-align: center; padding-block: clamp(4rem, 9vw, 6.5rem); }
.film__quote {
font-family: var(--font-display);
font-size: clamp(1.55rem, 3.2vw, 2.75rem);
line-height: 1.28; color: var(--papyrus-hi);
margin: 0 auto; max-width: 24ch; text-wrap: balance;
text-shadow: 0 2px 26px rgba(10, 5, 22, .55);
}
.film__attrib {
margin-top: 1.5rem;
font-family: var(--font-ui); font-size: .7rem; font-weight: 600;
letter-spacing: .28em; text-transform: uppercase; color: var(--gold-bright);
}
/* ================================================================= BUTTONS
One rule for the whole site: a PURPLE button carries GOLD text, and a GOLD
button carries PURPLE text. Previously purple buttons used cream and gold
buttons used ink, so the two never spoke to each other.
The :not() list matters. .btn--outline, .btn--onfilm and .btn--ghost-light
are transparent, so forcing gold on them would put gold text on cream or
on a photograph. They keep their own colours.
Measured contrast: gold-bright on purple 6.42:1, purple on gold 5.57:1.
Both clear WCAG AA. */
.cine .btn:not(.btn--gold):not(.btn--outline):not(.btn--onfilm):not(.btn--ghost-light),
.cine .btn:not(.btn--gold):not(.btn--outline):not(.btn--onfilm):not(.btn--ghost-light):hover {
color: var(--gold-bright);
}
.cine .btn--gold,
.cine .btn--gold:hover { color: var(--purple); }
/* GUARD, and this is the CSS trap HANDOFF.md warns about. styles.css line 992
sets ".start-here__copy a.btn { color:#F5EFE0 }" at specificity 0,2,1, which
beats a plain .btn rule and silently renders the label cream instead of
gold. Anything targeting button colour inside .prose, .founder__copy or
.start-here__copy has to out-specify that. */
.cine .prose a.btn:not(.btn--gold):not(.btn--outline),
.cine .founder__copy a.btn:not(.btn--gold):not(.btn--outline),
.cine .start-here__copy a.btn:not(.btn--gold):not(.btn--outline),
.cine .prose a.btn:not(.btn--gold):not(.btn--outline):hover,
.cine .founder__copy a.btn:not(.btn--gold):not(.btn--outline):hover,
.cine .start-here__copy a.btn:not(.btn--gold):not(.btn--outline):hover {
color: var(--gold-bright);
}
.cine .prose a.btn--gold,
.cine .founder__copy a.btn--gold,
.cine .start-here__copy a.btn--gold,
.cine .prose a.btn--gold:hover,
.cine .founder__copy a.btn--gold:hover,
.cine .start-here__copy a.btn--gold:hover {
color: var(--purple);
}
/* Ghost button that reads correctly on a photograph */
.btn--onfilm {
background: rgba(247, 241, 227, .07);
border-color: rgba(247, 241, 227, .55);
color: var(--papyrus-hi);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.btn--onfilm:hover { background: rgba(247, 241, 227, .16); border-color: var(--gold-bright); color: #FFF; }
/* ============================================================ CHAPTER MARK */
.chapter-mark {
display: flex; align-items: center; gap: 1.1rem;
font-family: var(--font-ui); font-size: .68rem; font-weight: 600;
letter-spacing: .3em; text-transform: uppercase; color: var(--gold-text);
margin-bottom: 1.6rem;
}
.chapter-mark::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(to right, var(--rule-strong), transparent); }
.chapter-mark--center { justify-content: center; }
.chapter-mark--center::after { display: none; }
.chapter-mark--center::before { content: ""; width: 2.4rem; height: 1px; background: var(--rule-strong); }
/* ================================================================= FOUNDER */
.cine .founder { align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.cine .founder__portrait { position: relative; }
.cine .founder__portrait img {
aspect-ratio: 3 / 4; object-fit: cover;
border: 1px solid var(--rule-strong); border-radius: var(--radius);
}
.cine .founder__portrait::after {
content: "";
position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem;
border: 1px solid var(--gold); opacity: .5;
z-index: -1; border-radius: var(--radius);
}
@media (max-width: 880px) { .cine .founder__portrait::after { display: none; } }
/* ================================================================ OFFERING
Work With Me. The three offers were three stacked blocks of prose in a
52rem column with every photograph and testimonial dumped at the end.
Each one now runs as text beside a photograph and the voice of someone
who actually walked it, so the proof sits next to the promise. */
.offering {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
gap: clamp(2rem, 4.5vw, 4rem);
align-items: start;
}
/* Flipped rows put the photograph on the left. The column widths must flip
with it, or the prose lands in the narrow column and the aside gets the
wide one. */
.offering--flip { grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr); }
.offering--flip .offering__copy { order: 2; }
.offering--flip .offering__aside { order: 1; }
@media (max-width: 900px) {
.offering { grid-template-columns: 1fr; gap: 2.5rem; }
.offering--flip .offering__copy { order: 0; }
.offering--flip .offering__aside { order: 0; }
}
.offering__copy h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.offering__copy .prose { font-size: 1.15rem; }
/* The aside sticks alongside the long prose on desktop so the photograph and
the testimonial stay in view while the offer is being read. */
.offering__aside { display: grid; gap: 1.5rem; position: sticky; top: 6.5rem; }
@media (max-width: 900px) { .offering__aside { position: static; } }
.offering__photo { margin: 0; position: relative; }
.offering__photo img {
width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
border: 1px solid var(--rule-strong); border-radius: var(--radius);
display: block;
}
.offering__voice { margin: 0; }
.offering__voice blockquote { font-size: 1.05rem; line-height: 1.6; }
/* =================================================================== CARDS */
.cine .article-card__media { aspect-ratio: 4 / 3; }
.cine .article-card { transition: border-color .3s ease, transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; }
.cine .article-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.cine .elixir-card { padding-top: 1.2rem; }
.cine .elixir-card__media { aspect-ratio: 1 / 1; }
/* ============================================================== NEWSLETTER
Deliberately NOT a big dark block. An earlier version of this file turned
the free-guide panel into a full purple gradient and it shouted over
everything around it. It now stays in the light temple like the rest of
the page, with a single gold rule along the top as the only flourish. */
.cine .newsletter {
border-top: 2px solid var(--gold);
}
/* ==================================================================== TYPE */
.cine h2 { text-wrap: balance; }
.cine p, .cine .lede { text-wrap: pretty; }
.cine .section-head--xl h2 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
/* ================================================================== MOTION */
@keyframes cine-rise {
from { opacity: 0; transform: translateY(2.2rem); }
to { opacity: 1; transform: none; }
}
@keyframes cine-film-drift {
from { transform: scale(1.12) translateY(-1.5rem); }
to { transform: scale(1.12) translateY(1.5rem); }
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.rise {
animation: cine-rise linear both;
animation-timeline: view();
animation-range: entry 8% cover 32%;
}
.film__media img {
animation: cine-film-drift linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
}
}
/* --------------------------------------------------------------- RESPONSIVE */
@media (max-width: 700px) { .film { min-height: 21rem; } }
/* ====================================================== COMPARISON PAGE ONLY
The label strips used on hero-options.html. Not part of the design. */
.optlabel {
background: var(--ink); color: var(--papyrus-hi);
padding: 1.1rem 0; position: sticky; top: 0; z-index: 90;
}
.optlabel__inner { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: baseline; }
.optlabel strong {
font-family: var(--font-ui); font-size: .78rem; font-weight: 600;
letter-spacing: .26em; text-transform: uppercase; color: var(--gold-bright);
}
.optlabel span { font-family: var(--font-ui); font-size: .88rem; color: rgba(244,239,228,.75); }