/*
CarlosSuarezArt — Home page only.
Everything here is specific to index.html: the hero (Movement V's reveal),
and the differentiated rhythm between New Works (tight, immediate) and
the Collection preview (generous, unhurried). Shared pieces — artwork
card, section intro, the stagger grid, the New Works band itself — live
in components.css/layout.css so Gallery and Collection pages can reuse
them later without duplicating rules.
Design rationale for every non-obvious rule here is recorded in the
homepage art-direction review (see conversation history / SITE-GUIDE.md)
— cropping, hero scale, and section rhythm were all deliberate fixes,
not arbitrary choices.
*/
/* ===== Header, Home variant =====
Invisible during Movements I–IV (nothing should compete with the
silence), fades in at Movement VI alongside the enter cue. State is
tracked on , not on .hero, because the header is a preceding
sibling of .hero in the DOM — a following-sibling CSS selector
couldn't reach it from a class on .hero itself. */
.site-header--home{
opacity: 0;
animation: reveal-up 1.4s ease-out forwards;
animation-delay: 10.5s;
}
/* ===== Movements I–IV: the wordmark and line, centered alone ===== */
.intro-content{
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 1.2s ease, transform 1.2s ease;
}
html.csa-revealed .intro-content{
opacity: 0;
transform: translateY(-16px) scale(0.97);
pointer-events: none;
}
.wordmark{
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--text-display);
letter-spacing: 0.1em;
color: var(--color-blue);
opacity: 0;
animation: reveal-up 1.6s ease-out forwards;
animation-delay: 2.2s;
}
/* ===== Calé — the artist's professional/artistic name. Visually
secondary to the formal wordmark (smaller, tighter tracking, Ink
Black not Museum Blue — blue stays reserved for the formal name alone,
per Bible §9's "used like a signature: sparingly") but distinctive
through italic Fraunces, reading as a personal signature next to a
formal one rather than a subtitle. Plain text; only swapped for an
image by home-render.js if a real signature asset is ever uploaded. ===== */
/* Removed from the Hero by design decision: the wordmark itself now
reads "Carlos Suárez–Calé" (set via Site Settings), so this standalone
second line repeated the same name a visitor had just read a moment
earlier. display:none is the only change — markup, home-render.js's
population of this element (including the image-swap path for an
uploaded signature asset), and every timing/spacing value are
untouched, so this is fully reversible by removing one property.
.tagline's own margin-top now applies directly after the wordmark, as
a direct, honest consequence, not a separate spacing edit. */
.cale-signature,
.cale-signature__image{
display: none;
}
.tagline{
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
font-size: clamp(15px, 2vw, 19px);
color: var(--color-black);
margin-top: var(--space-3);
opacity: 0;
animation: reveal-up 1.6s ease-out forwards;
animation-delay: 5.5s;
}
/* ===== Hero — settled Movement V/VI state =====
Tight top padding: the image should command the screen almost
immediately below the header, not after a long run of empty space.
.hero__frame/.hero__glow/.hero__caption/.hero__cue sit in NORMAL flow
from the very start (reserving their real layout space immediately,
just invisible) so revealing them never shifts the page — only
.intro-content, absolutely positioned above them, needs to move. */
/* padding-top is broken out from the shorthand specifically so it can be
driven by --dyn-hero-top-spacing (Layout Settings, CMS-editable) with
the original token as its fallback — see SITE-GUIDE.md, "Layout
Settings." Left/right/bottom stay on the plain tokens; only this one
value was approved for CMS control. */
.hero{
position: relative;
padding-top: var(--dyn-hero-top-spacing, var(--space-6));
padding-left: var(--space-4);
padding-right: var(--space-4);
padding-bottom: var(--space-7);
text-align: center;
min-height: 60vh;
/* Clips .hero__glow's decorative radial gradient at narrow viewports —
it already fades to fully transparent well inside its own box, so
clipping never cuts off anything visible; it only prevents the
phantom horizontal-scroll overflow the unclipped box caused. */
overflow: hidden;
}
/* Ambient glow — sits behind the frame only, never the whole section.
Bible §36 addendum permits an accent color "directly behind a piece on
its own page"; this is a soft, contained radial falloff, not a
page-spanning gradient background (which §20 separately forbids). */
.hero__glow{
position: absolute;
top: 6%;
left: 50%;
transform: translateX(-50%);
width: min(70vw, 900px);
height: 85%;
background: radial-gradient(ellipse at center, var(--accent-contrast-shadow) 0%, transparent 68%);
opacity: 0;
animation: glow-in 2.4s ease-out forwards;
animation-delay: 8.1s;
pointer-events: none;
z-index: 0;
}
@keyframes glow-in{ to{ opacity: 0.14; } }
/* Frame is now a plain positioning wrapper only (stacking context for the
glow behind it) — it no longer imposes its own box size. Previously an
explicit height here (min(84vh,920px)) competed with the aspect-ratio
home-render.js sets from the real image dimensions: once max-width
capped the width, the browser couldn't satisfy the explicit height AND
the true ratio at once, so the box silently stopped matching the
painting's real shape — for a wide/panoramic piece this meant the
visible image (via object-fit:contain inside a wrong-shaped box) was
letterboxed well short of its intended size, worse on narrow/mobile
viewports where the mismatch compounds. Sizing now lives entirely on
the ![]()
below via native max-width/max-height + aspect-ratio, which
the browser can always satisfy exactly — no letterboxing, no cropping,
correct for wide, square, and vertical paintings alike. */
.hero__frame{
position: relative;
z-index: 1;
opacity: 0;
animation: reveal-up 2.4s ease-out forwards;
animation-delay: 8.1s;
}
/* Concept C (contained arrival): reduced from min(84vh,920px). This is
the binding constraint for tall/vertical paintings — for those, this
value directly controls how much of the settled Hero lands within one
ordinary screen. For a wide/panoramic painting, width is usually the
binding constraint instead (see max-width above), so this change alone
won't bring a wide piece's caption/cue fully into view — that's a real,
named trade-off, not an oversight; see HERO-DESIGN-REVIEW.md. */
.hero__frame img{
display: block;
width: auto;
height: auto;
/* The 90vw/68vh responsive caps stay fixed — they're what keeps the
artwork correctly bounded on any screen size and aren't exposed to
Layout Settings. Only the absolute px ceiling (for very large
screens) is CMS-editable, via --dyn-hero-max-width/height. */
max-width: min(90vw, var(--dyn-hero-max-width, 1400px));
max-height: min(68vh, var(--dyn-hero-max-height, 680px));
margin: 0 auto;
/* aspect-ratio set inline per piece by home-render.js, from the real
image's natural dimensions — this is what lets the browser reserve
the correct final space immediately, before the file finishes
loading, with no layout shift once it does. Nothing is ever cropped
to fit a shape; the box is computed from the painting, never the
other way around. */
}
/* max-width + margin:0 auto centers the wrapper itself — without this,
its children (.title, .meta) are plain elements and inherit the
sitewide reading-column max-width (base.css, 640px) with no margin of
their own, which anchors them to the left edge of this wrapper instead
of centering on the artwork's axis. Same fix already proven correct on
.featured-work__label below. */
/* Removed from the Hero by design decision: the arrival moment is
deliberately emotional, not informational (Bible §13/§28 — the Hero's
one job is "emotional entry," and the arrival sequence as originally
specified never included a title/medium caption at all). Wall-label
information belongs to Featured Work and the future Artwork Detail
page, both already built for it. display:none is the single change —
markup, home-render.js's population of these fields, and every other
Hero rule are untouched, so this is fully reversible by removing one
property. Everything else on the page shifts up to fill the reclaimed
space as a direct, honest consequence, not a separate spacing edit. */
.hero__caption{
display: none;
}
.hero__caption .title{
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: var(--text-title);
letter-spacing: 0.01em;
color: var(--color-black);
}
/* This line carries whatever wall-label facts exist for the piece — for
some paintings that's year + medium, for others (year not yet
confirmed) it's medium alone. Its own weight and tracking are tuned to
read as a deliberate, confident wall label either way, rather than
depending on a specific field count to look "full." margin-top now
uses the spacing scale (was a bare 6px, the one hardcoded pixel value
in this file — tokens.css's own rule is that nothing outside it
hardcodes a raw size). */
.hero__caption .meta{
font-family: var(--font-sans);
font-size: var(--text-micro);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-gray);
margin-top: var(--space-1);
}
.hero__cue{
position: relative;
z-index: 1;
margin-top: var(--dyn-hero-caption-continue-gap, var(--space-4));
opacity: 0;
animation: reveal-up 1.4s ease-out forwards;
animation-delay: 10.5s;
}
/* ===== Skip / returning-visitor state =====
Set on (never on .hero — see note on .site-header--home above)
either by the manual skip button or by the synchronous returning-
visitor check in
, before first paint. Every timed animation
above is cancelled outright; everything appears in its final state
immediately, with no partial ceremony ever flashing first. */
html.csa-skip .site-header--home,
html.csa-skip .wordmark,
html.csa-skip .cale-signature,
html.csa-skip .cale-signature__image,
html.csa-skip .tagline,
html.csa-skip .hero__frame,
html.csa-skip .hero__caption,
html.csa-skip .hero__cue{
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
/* .hero__glow is deliberately excluded from the shared reset above.
For every other element in that list, transform:none is the correct
settled state — their transform was only ever an artifact of their own
reveal animation. The glow is different: left:50% + translateX(-50%)
is its permanent centering mechanism, not animation residue. Catching
it in the blanket reset left it pinned by its left edge instead of its
center on returning visits — confirmed live, it rendered entirely in
the right half of the Hero. This keeps the opacity/animation reset
(still correct for the glow) while preserving the transform that
actually centers it on the artwork's axis. */
html.csa-skip .hero__glow{
animation: none !important;
opacity: 0.14 !important;
transform: translateX(-50%) !important;
}
/* .intro-content (the wordmark/Calé/tagline wrapper) also matches
html.csa-revealed .intro-content above — csa-skip always pairs with
csa-revealed (see home-sequence.js), and a parent stuck at opacity:0
hides children regardless of their own opacity:1 above. Must win over
that rule explicitly, restoring the wrapper itself, not just its
contents.
position:static is the actual fix here, not just a cleanup: the base
rule (.intro-content, top of this file) is position:absolute + inset:0
— full-bleed over the whole Hero, on purpose, for the ceremony, where
the image beneath is still invisible (opacity:0) so nothing is really
overlapping yet. But on a returning visit, the artwork is visible
immediately — leaving intro-content absolute here left it stacked
directly on top of the painting (confirmed live: the wordmark rendered
inside the image's own bounding box, with no backdrop). Switching to
static drops it back into normal document flow, where source order
already places it before .hero__frame — so it settles quietly above
the artwork instead of on it, matching the same relative position it
already holds during the first-visit ceremony, just without the timed
reveal. The first-visit ceremony's own choreography (Movements I–VI,
the timed reveal-up animations, the fade-away transform on natural
completion) is untouched — this rule only fires once csa-skip is set. */
html.csa-skip .intro-content{
position: static;
opacity: 1 !important;
transform: none !important;
transition: none !important;
pointer-events: auto !important;
margin-bottom: var(--dyn-hero-logo-artwork-gap, var(--space-5));
}
/* ===== Safe visual presets =====
Every value here is one of a small, pre-approved set — never an open
color/pixel/font control. This is what lets the Content Manager offer
real flexibility without any path to damaging the Creative Bible's
locked system. See SITE-GUIDE.md, "Design protection." Presets are
applied as data-attributes on by home-render.js, read from
site-settings.js. "standard" always matches the rules already defined
above/elsewhere with no override needed. */
html[data-wordmark-size="small"] .site-header__wordmark{ font-size: 0.85rem; }
html[data-wordmark-size="large"] .site-header__wordmark{ font-size: 1.2rem; }
html[data-logo-position="left"] .site-header{ justify-content: flex-start; gap: var(--space-6); }
html[data-typography-scale="compact"]{ --text-heading: clamp(1.375rem, 3vw, 2.125rem); --text-body: 0.875rem; }
html[data-typography-scale="spacious"]{ --text-heading: clamp(1.625rem, 4vw, 2.75rem); --text-body: 1rem; }
html[data-text-align="left"] .hero__caption,
html[data-text-align="left"] .section-intro{ text-align: left; margin-left: 0; }
/* heroImageScale, heroImagePosition's padding-top effect, and
sectionSpacing's Collection Preview effect are retired as of Layout
Settings (see SITE-GUIDE.md). heroImageScale had already been inert
since the Hero sizing refactor moved sizing from .hero__frame's own
height onto the ![]()
itself — these rules targeted a property that no
longer existed. The other two are superseded outright: Layout
Settings' numeric Hero Top Spacing and Collections padding fields are
now the sole authority over those properties, so leaving these presets
live would let a preset pick silently fight a Layout Settings value.
The visualPresets keys themselves are left in site-settings.js
(harmless, avoids an unnecessary migration) — only their effect here
is removed. */
/* Animation speed presets — proportionally scaled timing, standard values
already set inline via animation-delay above. Quick ≈ 0.55x, Slow ≈
1.4x. JS timer for the csa-revealed class (home-sequence.js) must be
kept in sync with the hero/glow delay values here — see that file's
TIMING_PRESETS constant. */
html[data-animation-speed="quick"] .wordmark{ animation-delay: 1.2s; }
html[data-animation-speed="quick"] .cale-signature,
html[data-animation-speed="quick"] .cale-signature__image{ animation-delay: 1.8s; }
html[data-animation-speed="quick"] .tagline{ animation-delay: 3.0s; }
html[data-animation-speed="quick"] .hero__frame,
html[data-animation-speed="quick"] .hero__glow{ animation-delay: 4.4s; }
html[data-animation-speed="quick"] .hero__caption{ animation-delay: 5.3s; }
html[data-animation-speed="quick"] .hero__cue,
html[data-animation-speed="quick"] .site-header--home{ animation-delay: 5.7s; }
html[data-animation-speed="quick"] .letter-link{ animation-delay: 5.9s; }
html[data-animation-speed="slow"] .wordmark{ animation-delay: 3.1s; }
html[data-animation-speed="slow"] .cale-signature,
html[data-animation-speed="slow"] .cale-signature__image{ animation-delay: 4.6s; }
html[data-animation-speed="slow"] .tagline{ animation-delay: 7.7s; }
html[data-animation-speed="slow"] .hero__frame,
html[data-animation-speed="slow"] .hero__glow{ animation-delay: 11.3s; }
html[data-animation-speed="slow"] .hero__caption{ animation-delay: 13.6s; }
html[data-animation-speed="slow"] .hero__cue,
html[data-animation-speed="slow"] .site-header--home{ animation-delay: 14.7s; }
html[data-animation-speed="slow"] .letter-link{ animation-delay: 15.2s; }
/* ===== Ceremony-only controls =====
The skip button and the optional Letter link are distinct from the
sitewide accessibility "skip to content" link in base.css — these are
part of the Movement I–VI experience itself, not a screen-reader aid. */
.ceremony-skip{
position: absolute;
top: 20px;
left: 20px;
z-index: 5;
font-family: var(--font-sans);
font-size: var(--text-micro);
letter-spacing: 0.08em;
color: transparent;
background: none;
border: none;
cursor: pointer;
transition: color 0.4s ease;
}
.ceremony-skip:hover, .ceremony-skip:focus-visible{ color: var(--color-gray); }
html.csa-skip .ceremony-skip{ display: none; }
.letter-link{
position: absolute;
top: 20px;
right: 20px;
z-index: 5;
font-family: var(--font-sans);
font-size: var(--text-micro);
letter-spacing: 0.05em;
color: var(--color-border);
text-decoration: none;
opacity: 0;
animation: reveal-up 1.4s ease-out forwards;
animation-delay: 10.9s;
transition: color 0.4s ease;
}
.letter-link:hover, .letter-link:focus-visible{ color: var(--color-gray); }
html.csa-skip .letter-link{ animation: none !important; opacity: 1 !important; }
/* ===== Section rhythm — deliberately NOT identical between New Works
and the Collection preview (Bible §12: every section considered on
its own terms). New Works keeps its own tighter padding from
.new-works in components.css. The Collection section here gets a
distinctly more generous padding, reinforcing that it's the slower,
deeper room. ===== */
.new-works,
.home-section--collection{
border-top: 0.5px solid var(--color-border);
}
.home-section--collection{
padding-top: var(--dyn-collections-padding-top, var(--space-9));
padding-bottom: var(--dyn-collections-padding-bottom, var(--space-8));
}
.home-section__cta{
text-align: center;
margin-top: var(--space-6);
}
/* ===== Artist Statement, Featured Work, Exhibitions, The Studio,
Collector's Circle, Contact — the new Phase 3 sections below the
ceremony/Collections Entry. Same hairline-divided rhythm as New Works/
Collections Entry above; each still considered on its own terms
per Bible §12 ("every section's rhythm should be considered on its own
terms, not inherited") and §10 ("too much space, arbitrarily, and it
stops feeling intentional and starts feeling unfinished").
Three padding tiers, not one shared value — a section carrying a full
painting earns a full "gallery moment" of room around it; a section
holding a single sentence does not, and giving it the same room reads
as an empty wall rather than a considered pause. This is the same
white-space discipline the Bible already applies to paintings (§10),
extended to short text-only moments instead of exempting them. ===== */
.home-section--statement,
.home-section--featured,
.home-section--exhibitions,
.home-section--studio,
.home-section--about-artist,
.home-section--collectors,
.home-section--contact,
.home-section--follow{
border-top: 0.5px solid var(--color-border);
}
/* Tier 1 — gallery moments: a real painting is present, the full
"wall of its own" room (Bible §10) is warranted. Exhibitions/Studio
ship hidden and have no Layout Settings fields yet (see SITE-GUIDE.md)
— they stay on the plain token until they're real, visible sections. */
.home-section--exhibitions,
.home-section--studio{
padding: var(--space-7) 0;
}
.home-section--featured{
padding-top: var(--dyn-featured-work-padding-top, var(--space-7));
padding-bottom: var(--dyn-featured-work-padding-bottom, var(--space-7));
}
/* Tier 2 — the arrival pause: Artist Statement is the first thing a
visitor reads right after the Hero ceremony settles. It's one sentence,
but it follows the site's largest moment, so it keeps a little more
room than the closing utility sections below — a breath, not a room. */
.home-section--statement{
padding-top: var(--dyn-artist-statement-padding-top, var(--space-6));
padding-bottom: var(--dyn-artist-statement-padding-bottom, var(--space-6));
}
/* Tier 3 — closing utility: Collector's Circle and Contact are both a
single quiet sentence each, back to back, at the end of the page. Full
gallery-moment padding here previously measured as more empty space
than content — tightening this is what actually removes the
unnecessary space, rather than just narrating "generous" spacing that
isn't tied to anything. Split into two independent rules (previously
shared) so Layout Settings can control each section separately. */
.home-section--about-artist{
padding: var(--space-5) 0;
}
.home-section--collectors{
padding-top: var(--dyn-collectors-circle-padding-top, var(--space-5));
padding-bottom: var(--dyn-collectors-circle-padding-bottom, var(--space-5));
}
.home-section--contact{
padding-top: var(--dyn-contact-padding-top, var(--space-5));
padding-bottom: var(--dyn-contact-padding-bottom, var(--space-5));
}
/* Follow the Studio — the closing note after Contact. Same quiet tier as
Collector's Circle/Contact (a brief pause, not a gallery moment); no
Layout Settings fields yet, same reasoning as Exhibitions/Studio — add
them if this section ever needs independent tuning. */
.home-section--follow{
padding: var(--space-5) 0;
}
/* The quiet tiers' headings read a shade lighter than a gallery-moment
heading — reinforcing "this room is a pause" through weight, not just
through less padding, so the rhythm is felt twice, consistently,
rather than only in the whitespace. Fraunces 300 is already loaded
sitewide (see tokens.css), so this adds no new asset or size step —
Bible §8 caps the number of *sizes*, not weights. */
.home-section--statement .section-intro__heading,
.home-section--about-artist .section-intro__heading,
.home-section--collectors .section-intro__heading,
.home-section--contact .section-intro__heading,
.home-section--follow .section-intro__heading{
font-weight: 300;
}
/* Multiple quiet text-links side by side (Instagram/Facebook/YouTube,
whichever real entries exist in Site Settings) — same .text-link
component used everywhere else on the site, just laid out in a row
with a hairline-scale gap between them instead of one link alone. */
.home-section--follow .home-section__cta{
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-4);
}
/* Line-height raised from 1.6 to 1.75 — brought in line with the
reflection-text convention used elsewhere on the site (wall-label
reflections and Featured Work's own reflection both sit at 1.8): this
is the same voice, italic serif text meant to be read slowly rather
than scanned, so its pacing should match rather than run tighter than
the other passages doing the same emotional job. */
.artist-statement__text{
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
font-size: var(--text-heading);
line-height: 1.75;
color: var(--color-black);
margin-top: var(--space-4);
}
/* Deliberately smaller than the Hero's own frame (min(84vh, 920px)) — for
the piece currently featured (or any piece without a written reflection
yet), this section shows the identical image and title the Hero just
showed, with nothing new to add in words. A visibly quieter, closer
scale is what keeps the second encounter from reading as a plain
repeat: the Hero is the arrival, full command of the screen; this is
the closer, quieter second look, sized accordingly even before any
reflection text exists. Once a reflection is written, the words carry
the "closer look," not just the frame size. */
.featured-work__frame{
position: relative;
margin: var(--space-6) auto 0;
width: auto;
height: min(58vh, 640px);
max-width: 100%;
}
.featured-work__frame img{
width: auto;
height: 100%;
max-width: 100%;
object-fit: contain;
margin: 0 auto;
display: block;
}
.featured-work__label{
max-width: var(--reading-max);
margin: var(--space-5) auto 0;
text-align: center;
}
.featured-work__title{
font-family: var(--font-serif);
font-style: italic;
font-size: var(--text-heading);
color: var(--color-black);
}
/* Tightened from --space-2 to --space-1 and matched to the Hero caption's
0.1em tracking (was 0.08em) — the same "sits close beneath its title,
reads as a confident label regardless of field count" treatment as the
Hero meta line, so both wall-label moments on this page feel like one
consistent typographic voice rather than two slightly different ones. */
.featured-work__meta{
font-family: var(--font-sans);
font-size: var(--text-micro);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-gray);
margin-top: var(--space-1);
}
.featured-work__reflection{
font-family: var(--font-serif);
font-weight: 300;
font-size: var(--text-body);
line-height: 1.8;
color: var(--color-gray);
margin-top: var(--space-4);
}
.home-section--contact .home-section__cta{
margin-top: var(--space-5);
}
/* Exhibitions/The Studio ship with [hidden] in the markup and stay that
way until real content exists — see index.html and SITE_SETTINGS.
homepageSections. No rules needed here beyond the shared block above;
[hidden] already removes them from layout entirely. */