/* ==========================================================================
COBALT GALLERY — Elzinga Creative Studio design system
Canonical, reusable stylesheet. Linked by EVERY page. Locked 2026-06-12.
Source of truth: DESIGN.md. No page invents its own colors, type, or motion.
Feel: architectural, editorial, calm, premium. Photography-first — the
interface recedes so the work fills the room. Warm bone canvas + ONE
confident cobalt pop per view.
REQUIRED in every page (fonts assumed loaded by the page):
========================================================================== */
/* ── 1. TOKENS ──────────────────────────────────────────────────────────── */
:root {
/* Palette — exact hexes from DESIGN.md. Color is an event, not a wallpaper. */
--bone: #FAF8F2; /* canvas — page background, everywhere */
--ink: #15120D; /* text — headlines, body, dark UI */
--cobalt: #2B5196; /* the ONE pop — buttons, links, eyebrow rule, italic */
--sky: #A9C0D8; /* soft accent — fills, hover washes, subtle bg */
--stone: #C9C0AE; /* neutral — muted UI, image placeholders */
--line: #ECE6D9; /* hairline — borders, dividers */
--muted: #4D4940; /* text-2 — sub-copy, captions */
/* Derived / convenience */
--cobalt-dk: #234277; /* hover-darken for cobalt buttons */
--sky-wash: rgba(169,192,216,.22); /* faint hover wash */
/* Type families */
--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* Rhythm */
--radius-media: 14px; /* photo / media corners */
--radius-pill: 44px; /* buttons + pills */
--ease: cubic-bezier(.22,.61,.36,1); /* calm, buttery */
}
/* ── 2. BASE ────────────────────────────────────────────────────────────── */
.cg-body,
body.cg {
font-family: var(--font-body);
background: var(--bone);
color: var(--ink);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Accessible focus ring — cobalt, never removed. */
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
/* ── 3. DISPLAY TYPE ────────────────────────────────────────────────────── */
/* Fraunces, weight 300, tight tracking, ~1.0 leading. Italic emphasis word
in cobalt. Use .display on the big editorial headline; for the pop. */
.display {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(48px, 5.8vw, 86px);
line-height: 1.0;
letter-spacing: -.025em;
color: var(--ink);
font-optical-sizing: auto;
}
.display em { font-style: italic; color: var(--cobalt); }
/* Smaller section headline (same DNA, scaled down). */
.display-2 {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(34px, 4vw, 60px);
line-height: 1.04;
letter-spacing: -.02em;
color: var(--ink);
}
.display-2 em { font-style: italic; color: var(--cobalt); }
/* ── 4. EYEBROW LABEL ───────────────────────────────────────────────────── */
/* Short 26x2 cobalt rule + uppercase tracked cobalt label (Inter 600 12px). */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--cobalt);
}
.eyebrow::before {
content: "";
width: 26px;
height: 2px;
background: var(--cobalt);
display: inline-block;
flex-shrink: 0;
}
/* ── 5. SUB-COPY ────────────────────────────────────────────────────────── */
.sub {
font-size: 18px;
line-height: 1.62;
color: var(--muted);
max-width: 38ch;
}
/* ── 6. BUTTONS ─────────────────────────────────────────────────────────── */
/* Primary = cobalt pill, bone text. ~44px tall, calm darken on hover. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 15px 30px;
border-radius: var(--radius-pill);
border: none;
background: var(--cobalt);
color: var(--bone);
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
letter-spacing: .01em;
text-decoration: none;
cursor: pointer;
transition: background .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--cobalt-dk); }
/* Ghost link — text + cobalt arrow. Secondary action. */
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 15px 6px;
background: transparent;
border: none;
color: var(--ink);
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: color .2s var(--ease);
}
.btn-ghost .arr { color: var(--cobalt); transition: transform .22s var(--ease); }
.btn-ghost:hover .arr { transform: translateX(5px); }
/* Outline pill — bordered, fills cobalt on hover (tertiary). */
.btn-outline {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 28px;
border-radius: var(--radius-pill);
border: 1.5px solid var(--ink);
background: transparent;
color: var(--ink);
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-outline:hover { background: var(--cobalt); border-color: var(--cobalt); color: var(--bone); }
/* ── 7. NAV ─────────────────────────────────────────────────────────────── */
/* Logo + cobalt mark, text links, cobalt pill CTA. */
.cg-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 64px;
background: var(--bone);
}
.cg-nav .logo {
display: flex;
align-items: center;
gap: 9px;
font-family: var(--font-body);
font-weight: 600;
font-size: 19px;
letter-spacing: -.01em;
color: var(--ink);
text-decoration: none;
}
.cg-nav .logo .mark {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--cobalt);
flex-shrink: 0;
}
.cg-nav ul { list-style: none; display: flex; gap: 34px; align-items: center; margin: 0; padding: 0; }
.cg-nav ul a {
font-size: 13px;
color: var(--ink);
text-decoration: none;
opacity: .72;
transition: opacity .2s var(--ease);
}
.cg-nav ul a:hover { opacity: 1; }
.cg-nav .navcta {
padding: 10px 20px;
border-radius: var(--radius-pill);
font-weight: 600;
font-size: 13px;
background: var(--cobalt);
color: var(--bone);
text-decoration: none;
transition: background .2s var(--ease);
}
.cg-nav .navcta:hover { background: var(--cobalt-dk); }
/* ── 8. HERO LAYOUTS ────────────────────────────────────────────────────── */
/* Editorial split: copy left / photo right. */
.hero-split {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 56px;
align-items: center;
max-width: 1440px;
margin: 0 auto;
padding: 34px 64px 60px;
}
/* Centered variant — copy stacked + centered. */
.hero-center {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 1000px;
margin: 0 auto;
padding: 60px 64px;
}
.hero-center .sub { max-width: 56ch; }
/* The eyebrow→display→sub→CTA→meta intro pattern (vertical rhythm). */
.intro-eyebrow { margin-bottom: 18px; }
.intro-display { margin-bottom: 24px; }
.intro-sub { margin-bottom: 32px; }
.intro-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 38px; }
.hero-center .intro-cta { justify-content: center; }
/* ── 9. META STRIP ──────────────────────────────────────────────────────── */
/* Cobalt dots + short facts. */
.meta-strip { display: flex; gap: 24px; font-size: 13px; flex-wrap: wrap; color: var(--ink); }
.meta-strip span { display: inline-flex; align-items: center; gap: 8px; }
.meta-strip .dot,
.dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--cobalt);
display: inline-block;
flex-shrink: 0;
}
/* ── 10. PHOTO CARD ─────────────────────────────────────────────────────── */
/* Rounded media, tag pill bottom-left, price pill top-right. */
.photo-card {
position: relative;
aspect-ratio: 4/5;
border-radius: var(--radius-media);
overflow: hidden;
background: linear-gradient(165deg, var(--stone), #8f8978);
}
.photo-card > img,
.photo-card > picture img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .9s var(--ease);
}
.photo-card:hover > img,
.photo-card:hover > picture img { transform: scale(1.04); }
.photo-card .tag {
position: absolute;
left: 18px; bottom: 18px;
font-size: 11px; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase;
padding: 7px 13px;
border-radius: 30px;
background: var(--cobalt);
color: var(--bone);
z-index: 2;
}
.photo-card .price {
position: absolute;
right: 16px; top: 16px;
font-size: 12px; font-weight: 600;
padding: 8px 14px;
border-radius: 30px;
background: rgba(21,18,13,.5);
color: var(--bone);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
z-index: 2;
}
/* ── 11. HERO CONTOUR MOTIF (optional) ──────────────────────────────────── */
/* Slow-drifting cobalt SVG contour line behind a hero — the Daylight nod.
Drop an absolutely-positioned in a hero;
keep stroke at low opacity. Disabled under reduced-motion (see §14). */
.cg-contour {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
opacity: .14;
color: var(--cobalt);
}
.cg-contour path,
.cg-contour line,
.cg-contour circle { stroke: currentColor; fill: none; }
/* ── 12. MOTION — REVEAL ────────────────────────────────────────────────── */
/* Calm scroll-reveal: starts hidden + nudged down, eases up to visible.
Toggle the `.in` class via the IntersectionObserver snippet (see playbook).
Gated behind `html.cg-motion` so JS-off / no-IO degrades to fully visible. */
html.cg-motion .reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity .65s var(--ease), transform .65s var(--ease);
will-change: opacity, transform;
}
html.cg-motion .reveal.in { opacity: 1; transform: none; }
/* Staggered children — same reveal, cascaded. */
html.cg-motion .reveal-stagger > * {
opacity: 0;
transform: translateY(16px);
transition: opacity .6s var(--ease), transform .6s var(--ease);
}
html.cg-motion .reveal-stagger.in > * { opacity: 1; transform: none; }
html.cg-motion .reveal-stagger.in > :nth-child(1) { transition-delay: 0s; }
html.cg-motion .reveal-stagger.in > :nth-child(2) { transition-delay: .09s; }
html.cg-motion .reveal-stagger.in > :nth-child(3) { transition-delay: .18s; }
html.cg-motion .reveal-stagger.in > :nth-child(4) { transition-delay: .27s; }
html.cg-motion .reveal-stagger.in > :nth-child(5) { transition-delay: .36s; }
html.cg-motion .reveal-stagger.in > :nth-child(6) { transition-delay: .45s; }
/* ── 13. MOTION — HOVER / DRIFT ─────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
/* Subtle card lift. */
.lift { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.lift:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(21,18,13,.10); }
/* Slow contour drift — the only ambient animation, very low energy. */
.cg-contour { animation: cgDrift 38s ease-in-out infinite alternate; }
@keyframes cgDrift {
from { transform: translate3d(0, 0, 0) scale(1.02); }
to { transform: translate3d(-2.5%, 1.5%, 0) scale(1.06); }
}
}
/* ── 14. REDUCED MOTION — HARD STOP ─────────────────────────────────────── */
/* Honor the user's setting: drop all transforms/animation, opacity-only or
none. Nothing moves; everything is immediately visible. */
@media (prefers-reduced-motion: reduce) {
* , *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
html.cg-motion .reveal,
html.cg-motion .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
.lift:hover { transform: none !important; box-shadow: none !important; }
.cg-contour { animation: none !important; transform: none !important; }
.photo-card:hover > img,
.photo-card:hover > picture img { transform: none !important; }
}
/* ── 15. RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.cg-nav { padding: 20px 40px; }
.hero-split { gap: 40px; padding: 28px 40px 48px; }
.hero-center { padding: 48px 40px; }
}
@media (max-width: 768px) {
.cg-nav { padding: 16px 24px; }
.cg-nav ul { display: none; } /* pages supply their own mobile nav */
.hero-split { grid-template-columns: 1fr; gap: 32px; padding: 24px 24px 40px; }
.hero-center { padding: 40px 24px; }
.meta-strip { gap: 16px; }
}