/* ==========================================================================
ICON Festival of Comic & Narrative Arts — Brand System
Import this sheet into any ICON deliverable (mockup, signage comp, social
tile, poster, deck page) and build from tokens + components only.
Fonts (load in of each deliverable):
========================================================================== */
:root {
/* ---- Fields (dark) — teal-black, never pure black -------------------- */
--ink-0: #020807; /* deepest field end */
--ink-1: #04100f; /* dark field mid */
--teal-9: #0b2422; /* deep stage teal */
--teal-7: #163230; /* Ross field teal (site hero heritage) */
--teal-5: #2c5a5c; /* gallery teal — accents, rules on light */
/* ---- Golds ----------------------------------------------------------- */
--gold: #d4af37; /* anchor — keylines, small flat type, ornament */
--gold-hot: #ffe9b0; /* candlelight — bloom cores, peak highlights */
--gold-hi: #f6dd95; /* metallic gradient top */
--gold-mid: #e0b969; /* metallic gradient middle */
--gold-low: #b98e3f; /* metallic gradient base */
--bronze: #8a6a2a; /* shadowed gold — borders on vellum, depth */
--gold-antique: #9c7c2f; /* small gold type on vellum */
--gold-antique-2: #b8923c;
/* ---- Light field (vellum) -------------------------------------------- */
--vellum-0: #fbf7ee;
--vellum-1: #f0e6cf;
--ivory: #f5efe6; /* light type on dark fields */
--ink-warm: #1f1b14; /* headings on vellum */
--ink-body: rgba(40, 35, 26, 0.84);
/* ---- Type ------------------------------------------------------------ */
--display: 'Cinzel', 'Trajan Pro', serif;
--body: 'EB Garamond', Georgia, serif;
/* ---- Recipes --------------------------------------------------------- */
--grad-gold-text: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold-mid) 42%, var(--gold-low) 100%);
--grad-gold-btn: linear-gradient(135deg, #f2d184, #b99045);
--grad-field:
radial-gradient(55% 46% at 50% 42%, rgba(255, 233, 176, 0.13) 0%, rgba(214, 170, 92, 0.05) 42%, rgba(214, 170, 92, 0) 68%),
radial-gradient(140% 130% at 50% 45%, rgba(4, 16, 15, 0) 40%, rgba(2, 8, 7, 0.82) 100%),
linear-gradient(165deg, #0f2826 0%, #071614 52%, #020807 100%);
--grad-field-teal:
radial-gradient(52% 48% at 50% 46%, rgba(255, 243, 198, 0.22) 0%, rgba(214, 170, 92, 0.09) 38%, rgba(214, 170, 92, 0) 64%),
radial-gradient(140% 135% at 50% 44%, rgba(6, 16, 17, 0) 42%, rgba(3, 9, 10, 0.78) 100%),
linear-gradient(165deg, var(--teal-7) 0%, #0c2124 48%, #050f11 100%);
--grad-field-vellum:
radial-gradient(ellipse 120% 80% at 50% -6%, rgba(255, 250, 238, 0.9), rgba(247, 239, 222, 0) 60%),
linear-gradient(180deg, var(--vellum-0) 0%, var(--vellum-1) 100%);
--shadow-glow: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
--shadow-bloom: 0 0 60px rgba(212, 175, 55, 0.22);
}
*, *::before, *::after { box-sizing: border-box; }
/* ==========================================================================
FIELDS — every composition starts on one of these three
========================================================================== */
.icon-field {
position: relative;
background: var(--grad-field);
color: var(--ivory);
overflow: hidden;
}
.icon-field--teal { background: var(--grad-field-teal); }
/* Bloom modifiers. Default field bloom is centered and subtle.
--bloom-center: slightly stronger center bloom for hero moments.
--bloom-left: bloom shifted left, for subject-left layouts (angel hero). */
.icon-field--bloom-center {
background:
radial-gradient(55% 48% at 50% 44%, rgba(255, 233, 176, 0.20) 0%, rgba(214, 170, 92, 0.07) 42%, rgba(214, 170, 92, 0) 68%),
radial-gradient(140% 130% at 50% 45%, rgba(4, 16, 15, 0) 40%, rgba(2, 8, 7, 0.82) 100%),
linear-gradient(165deg, #0f2826 0%, #071614 52%, #020807 100%);
}
.icon-field--bloom-left {
background:
radial-gradient(60% 55% at 28% 44%, rgba(255, 233, 176, 0.20) 0%, rgba(214, 170, 92, 0.07) 40%, rgba(214, 170, 92, 0) 66%),
radial-gradient(140% 130% at 50% 45%, rgba(4, 16, 15, 0) 40%, rgba(2, 8, 7, 0.82) 100%),
linear-gradient(165deg, #0f2826 0%, #071614 52%, #020807 100%);
}
.icon-field--vellum {
background: var(--grad-field-vellum);
color: var(--ink-warm);
}
/* ==========================================================================
DECO FRAME — double keyline set inside the bleed. Outer bright, inner faint.
Add .deco-frame inside a .icon-field; content sits above it (z-index).
========================================================================== */
.deco-frame { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.deco-frame::before {
content: ""; position: absolute; inset: 22px;
border: 1px solid var(--gold); opacity: 0.9;
}
.deco-frame::after {
content: ""; position: absolute; inset: 30px;
border: 1px solid var(--gold); opacity: 0.45;
}
/* Tighter inset for small tiles (social, plaques) */
.deco-frame--tight::before { inset: 12px; }
.deco-frame--tight::after { inset: 18px; }
/* Heavy variant for signage-scale pieces */
.deco-frame--heavy::before { border-width: 2px; }
/* Deco fan ornament — the crown motif. Place inside .deco-frame or a plaque. */
.deco-fan {
display: block;
width: 44px; height: 26px;
margin: 0 auto;
background: center / contain no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 26'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='1.4'%3E%3Cpath d='M22 24 22 6'/%3E%3Cpath d='M22 24 12 8'/%3E%3Cpath d='M22 24 32 8'/%3E%3Cpath d='M22 24 5 14'/%3E%3Cpath d='M22 24 39 14'/%3E%3Ccircle cx='22' cy='3.4' r='2'/%3E%3Ccircle cx='10.6' cy='5.6' r='1.6'/%3E%3Ccircle cx='33.4' cy='5.6' r='1.6'/%3E%3Ccircle cx='2.8' cy='12.4' r='1.4'/%3E%3Ccircle cx='41.2' cy='12.4' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
}
/* ==========================================================================
TYPE — Cinzel carries ceremony, Garamond carries the reading
========================================================================== */
/* Eyebrow — small, wide-tracked, uppercase */
.eyebrow {
margin: 0;
font: 600 clamp(0.7rem, 0.95vw, 0.86rem) var(--display);
letter-spacing: 0.44em;
text-indent: 0.44em; /* re-center tracked caps */
text-transform: uppercase;
color: var(--gold);
}
.icon-field--vellum .eyebrow { color: var(--gold-antique); }
/* Metallic gold type — display sizes only, never below ~0.9rem */
.gold-text {
background: var(--grad-gold-text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: var(--shadow-glow);
}
/* MARQUEE STACK — the signature three-tier billing.
The Art Of
Alex Ross
Exhibition
*/
.marquee { display: grid; gap: clamp(0.5rem, 1.2vw, 1rem); justify-items: center; text-align: center; }
.marquee-over, .marquee-under {
margin: 0;
font: 600 clamp(0.72rem, 1.1vw, 1rem) var(--display);
letter-spacing: 0.42em;
text-indent: 0.42em;
text-transform: uppercase;
color: var(--ivory);
}
.marquee-under { color: var(--gold); letter-spacing: 0.5em; text-indent: 0.5em; }
.marquee-name {
margin: 0;
font: 700 clamp(2.6rem, 8.5vw, 7rem)/1.04 var(--display);
letter-spacing: 0.06em;
text-transform: uppercase;
text-wrap: balance;
}
.icon-field--vellum .marquee-over,
.icon-field--vellum .marquee-under { color: var(--ink-warm); }
.icon-field--vellum .marquee-under { color: var(--gold-antique); }
/* Section heading + body */
.icon-h2 {
margin: 0;
font: 500 clamp(1.9rem, 4.2vw, 3.4rem)/1.12 var(--display);
letter-spacing: 0.03em;
color: #f6f0e7;
}
.icon-field--vellum .icon-h2 { color: var(--ink-warm); }
.icon-lede {
margin: 0;
font: 400 clamp(1.1rem, 1.55vw, 1.4rem)/1.7 var(--body);
color: rgba(239, 231, 216, 0.86);
}
.icon-body {
margin: 0;
font: 400 clamp(1rem, 1.3vw, 1.18rem)/1.72 var(--body);
color: rgba(239, 231, 216, 0.82);
}
.icon-field--vellum .icon-lede,
.icon-field--vellum .icon-body { color: var(--ink-body); }
/* Pull quote — Garamond italic with flat gold attribution */
.icon-quote {
margin: 0;
font: italic 400 clamp(1.3rem, 2vw, 1.8rem)/1.55 var(--body);
color: var(--ivory);
}
.icon-quote-attrib {
margin: 0.9rem 0 0;
font: 600 0.78rem var(--display);
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
}
/* Dates / venue line — tracked metallic caps */
.venue-line {
margin: 0;
font: 600 clamp(0.8rem, 1.2vw, 1.1rem) var(--display);
letter-spacing: 0.34em;
text-indent: 0.34em;
text-transform: uppercase;
}
/* ==========================================================================
COMPONENTS
========================================================================== */
/* Deco divider — rule, diamond, rule */
.deco-divider { display: flex; align-items: center; justify-content: center; }
.deco-divider::before, .deco-divider::after {
content: ""; width: clamp(48px, 13vw, 170px); height: 1px;
background: linear-gradient(90deg, transparent, var(--gold));
}
.deco-divider::after { transform: scaleX(-1); }
.deco-divider .diamond {
width: 9px; height: 9px; margin: 0 0.9rem;
border: 1px solid var(--gold); transform: rotate(45deg);
}
.icon-field--vellum .deco-divider::before,
.icon-field--vellum .deco-divider::after { background: linear-gradient(90deg, transparent, var(--gold-antique-2)); }
.icon-field--vellum .deco-divider .diamond { border-color: var(--gold-antique-2); }
/* Keyline media frame — double border around art/photo/video */
.keyline-media {
position: relative;
border: 1px solid rgba(212, 175, 55, 0.5);
padding: 10px;
}
.keyline-media::after {
content: ""; position: absolute; inset: 4px;
border: 1px solid rgba(212, 175, 55, 0.22);
pointer-events: none;
}
.keyline-media > img, .keyline-media > video {
display: block; width: 100%; height: 100%; object-fit: cover;
}
.icon-field--vellum .keyline-media { border-color: rgba(160, 130, 60, 0.55); }
.icon-field--vellum .keyline-media::after { border-color: rgba(160, 130, 60, 0.3); }
/* Plaque — room ID / label block (Sal comp #9, systematized) */
.plaque {
position: relative;
display: grid; gap: 0.7rem; justify-items: center; align-content: center;
text-align: center;
padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.2rem, 3vw, 2rem);
background: var(--grad-field);
border: 1px solid var(--gold);
box-shadow: var(--shadow-bloom);
}
.plaque::after {
content: ""; position: absolute; inset: 7px;
border: 1px solid rgba(212, 175, 55, 0.4); pointer-events: none;
}
.plaque-title {
margin: 0;
font: 700 clamp(1.15rem, 2.4vw, 1.7rem)/1.25 var(--display);
letter-spacing: 0.18em; text-indent: 0.18em;
text-transform: uppercase;
}
.plaque-sub {
margin: 0;
font: 600 clamp(0.62rem, 1vw, 0.74rem) var(--display);
letter-spacing: 0.34em; text-indent: 0.34em;
text-transform: uppercase;
color: var(--ivory);
}
/* Button */
.btn-gold {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px; padding: 0 1.4rem;
background: var(--grad-gold-btn); color: #070707;
border: none; cursor: pointer;
font: 700 0.74rem var(--display);
letter-spacing: 0.3em; text-indent: 0.3em;
text-transform: uppercase;
transition: transform 0.15s, box-shadow 0.15s;
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(212, 175, 55, 0.32); }
/* Ghost button — keyline variant for secondary actions */
.btn-keyline {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px; padding: 0 1.4rem;
background: transparent; color: var(--gold);
border: 1px solid var(--gold); cursor: pointer;
font: 700 0.74rem var(--display);
letter-spacing: 0.3em; text-indent: 0.3em;
text-transform: uppercase;
transition: background 0.15s, color 0.15s;
}
.btn-keyline:hover { background: rgba(212, 175, 55, 0.12); }
/* ==========================================================================
RATIO STAGES — fixed-ratio canvases for social/print/signage comps
========================================================================== */
.stage { position: relative; overflow: hidden; }
.stage--4x5 { aspect-ratio: 4 / 5; }
.stage--9x16 { aspect-ratio: 9 / 16; }
.stage--1x1 { aspect-ratio: 1 / 1; }
.stage--16x9 { aspect-ratio: 16 / 9; }
.stage--banner { aspect-ratio: 1 / 3; } /* hanging banner / totem */
/* Angel layer — hero art anchored to a stage edge, bloom behind it */
.angel-layer {
position: absolute; inset: 0; pointer-events: none;
display: flex; align-items: flex-end;
}
.angel-layer img {
display: block; height: 115%; width: auto;
object-fit: contain; object-position: left bottom;
}
.angel-layer--right { justify-content: flex-end; }
.angel-layer--right img { object-position: right bottom; }
/* Legibility scrim — darkens the far side of a stage so type reads over art.
Pair with an offset .marquee opposite the angel. */
.scrim-right {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(90deg, rgba(2, 8, 7, 0) 32%, rgba(2, 8, 7, 0.78) 62%);
}
.scrim-left {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(270deg, rgba(2, 8, 7, 0) 32%, rgba(2, 8, 7, 0.78) 62%);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; }
}
/* ==========================================================================
SITE NAV — slim marquee bar over the dark fields
========================================================================== */
.site-nav {
position: relative; z-index: 30;
display: flex; align-items: center; justify-content: space-between;
gap: 1.5rem;
padding: 0.85rem clamp(1.25rem, 4vw, 2.5rem);
background: linear-gradient(180deg, #04100f, #020807);
border-bottom: 1px solid rgba(212, 175, 55, 0.38);
}
.site-nav-logo img { height: 92px; width: auto; display: block; }
.site-nav-links { display: flex; align-items: center; gap: clamp(1.1rem, 3vw, 2.2rem); }
.site-nav-links a {
font: 600 0.78rem var(--display);
letter-spacing: 0.32em; text-indent: 0.32em;
text-transform: uppercase;
color: rgba(245, 239, 230, 0.78);
text-decoration: none;
transition: color 160ms ease;
}
.site-nav-links a:hover { color: var(--gold-hot); }
.site-nav-links a[aria-current="page"] { color: var(--gold); }
/* Phone nav: the links hide behind a menu button (added by /assets/icon-nav.js)
and open as a full-screen panel appended to . */
.site-nav-toggle { display: none; }
.site-menu {
position: fixed; inset: 0; z-index: 80;
display: none; flex-direction: column; align-items: center; justify-content: center;
gap: 1.3rem; padding: 2rem 1.5rem;
background: var(--grad-field-teal); color: var(--ivory); text-align: center;
}
.site-menu.is-open { display: flex; }
.site-menu-close {
position: absolute; top: 0.9rem; right: 0.9rem;
width: 44px; height: 44px; border: 1px solid var(--gold); background: transparent;
color: var(--gold); font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.site-menu-mark { height: 76px; width: auto; margin-bottom: 0.4rem; }
.site-menu-links { display: grid; gap: 1.3rem; }
.site-menu-links a {
font: 600 1.02rem var(--display);
letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase;
color: var(--ivory); text-decoration: none;
}
.site-menu-links a[aria-current="page"] { color: var(--gold); }
.site-menu-cta { margin-top: 0.9rem; min-width: 230px; min-height: 50px; text-decoration: none; }
.site-menu-line { margin: 0.4rem 0 0; font: 600 0.62rem var(--display); letter-spacing: 0.26em; text-indent: 0.26em; text-transform: uppercase; color: rgba(212, 175, 55, 0.82); }
@media (max-width: 720px) {
.site-nav { flex-direction: row; justify-content: space-between; gap: 1rem; padding: 0.55rem 1rem; }
.site-nav-logo img { height: 60px; }
.site-nav-links { display: none; }
.site-nav-toggle {
display: grid; gap: 6px; align-content: center;
width: 46px; height: 46px; padding: 0 10px;
background: transparent; border: 1px solid rgba(212, 175, 55, 0.65); cursor: pointer;
}
.site-nav-toggle span { display: block; height: 1.5px; background: var(--gold); }
}