/* ============================================================================ GeneratedArt editorial design system. Swiss-minimal, gallery-typographic. Two typefaces only: - Fraunces : display + editorial pull-quotes (variable, optical sized) - Inter : everything else (UI, body) Dark by default, light theme via `data-theme="light"` on . No images of UI chrome — the work is the hero. ========================================================================== */ @import url("https://rsms.me/inter/inter.css"); @import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,700&display=swap"); :root { --bg: #0b0b0c; --bg-elev: #141416; --fg: #ededee; --fg-muted: #9a9aa1; --fg-subtle: #5e5e66; --rule: #25252a; --accent: #ededee; --accent-ink: #0b0b0c; --warn: #f5b14b; --max: 1280px; --gutter: clamp(1rem, 4vw, 2.5rem); --col-gap: clamp(1rem, 2vw, 1.75rem); --row-gap: clamp(2rem, 5vw, 4rem); --display: "Fraunces", Georgia, serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, "JetBrains Mono", "Menlo", monospace; --t-fast: 120ms cubic-bezier(0.2, 0, 0, 1); } html[data-theme="light"] { --bg: #f8f7f4; --bg-elev: #ffffff; --fg: #18181b; --fg-muted: #57575e; --fg-subtle: #8e8e95; --rule: #e3e3df; --accent: #18181b; --accent-ink: #ffffff; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color var(--t-fast); } a:hover { border-color: var(--fg); } .ga-container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } /* -- top nav ------------------------------------------------------------- */ .ga-nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--rule); } .ga-nav__row { display: flex; align-items: center; justify-content: space-between; height: 64px; } .ga-nav__brand { font-family: var(--display); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.01em; border: 0; } .ga-nav__brand em { font-style: italic; color: var(--fg-muted); font-weight: 300; } .ga-nav__links { display: flex; gap: 1.75rem; } .ga-nav__links a { border: 0; font-size: 0.875rem; color: var(--fg-muted); letter-spacing: 0.02em; } .ga-nav__links a:hover, .ga-nav__links a[aria-current="page"] { color: var(--fg); } .ga-nav__cta { border: 1px solid var(--fg); padding: 0.45rem 0.95rem; font-size: 0.85rem; font-weight: 500; border-radius: 999px; } .ga-nav__cta:hover { background: var(--fg); color: var(--bg); } .ga-theme-toggle { background: transparent; border: 1px solid var(--rule); color: var(--fg-muted); font-size: 0.75rem; padding: 0.3rem 0.55rem; border-radius: 4px; cursor: pointer; } .ga-theme-toggle:hover { color: var(--fg); border-color: var(--fg); } /* -- typography utilities ------------------------------------------------ */ .ga-display { font-family: var(--display); font-weight: 300; font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: 0.96; letter-spacing: -0.025em; margin: 0; } .ga-display em { font-style: italic; font-weight: 400; color: var(--fg-muted); } .ga-h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 1rem; } .ga-eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-subtle); margin: 0 0 0.5rem; } .ga-lede { font-size: 1.125rem; color: var(--fg-muted); max-width: 56ch; } .ga-mono { font-family: var(--mono); font-size: 0.85rem; } /* -- section scaffolding ------------------------------------------------- */ .ga-section { padding: clamp(3rem, 8vw, 6rem) 0; border-top: 1px solid var(--rule); } .ga-section:first-of-type { border-top: 0; } .ga-section__head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 2.5rem; gap: 2rem; } .ga-section__head a { border: 0; color: var(--fg-muted); font-size: 0.85rem; } .ga-section__head a:hover { color: var(--fg); } /* -- hero ---------------------------------------------------------------- */ .ga-hero { padding: clamp(4rem, 10vw, 8rem) 0 clamp(3rem, 6vw, 5rem); } .ga-hero__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--rule); } .ga-hero__meta dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-subtle); } .ga-hero__meta dd { margin: 0.4rem 0 0; font-family: var(--display); font-size: 1.5rem; font-weight: 400; } /* -- countdown ----------------------------------------------------------- */ .ga-drop { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--col-gap); border: 1px solid var(--rule); padding: clamp(1.5rem, 3vw, 2.5rem); } .ga-drop__title { font-family: var(--display); font-size: 2rem; line-height: 1.05; margin: 0.5rem 0; } .ga-drop__count { font-family: var(--mono); font-size: 1.2rem; letter-spacing: 0.05em; color: var(--fg-muted); } .ga-drop__cta { align-self: end; justify-self: end; border: 1px solid var(--fg); border-radius: 999px; padding: 0.7rem 1.4rem; font-weight: 500; } .ga-drop__cta:hover { background: var(--fg); color: var(--bg); } @media (max-width: 720px) { .ga-drop { grid-template-columns: 1fr; } .ga-drop__cta { justify-self: start; } } /* -- grids --------------------------------------------------------------- */ .ga-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--col-gap) var(--col-gap); } .ga-grid--wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } /* -- card (artist / project / gallery) ----------------------------------- */ .ga-card { display: flex; flex-direction: column; gap: 0.85rem; border: 0; padding: 0; background: transparent; } .ga-card a { border: 0; } .ga-card__media { aspect-ratio: 1 / 1; background: var(--bg-elev); border: 1px solid var(--rule); position: relative; overflow: hidden; } .ga-card__media img, .ga-card__media iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; } .ga-card__title { font-family: var(--display); font-weight: 400; font-size: 1.2rem; margin: 0; line-height: 1.2; } .ga-card__meta { display: flex; justify-content: space-between; color: var(--fg-muted); font-size: 0.85rem; } .ga-card__price { font-family: var(--mono); } /* -- iframe (live render) ------------------------------------------------ */ .ga-render { width: 100%; aspect-ratio: 1/1; border: 1px solid var(--rule); background: #000; display: block; } /* -- table (sales feed, drops list) -------------------------------------- */ .ga-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .ga-table th, .ga-table td { text-align: left; padding: 0.85rem 0.5rem; border-bottom: 1px solid var(--rule); } .ga-table th { font-weight: 500; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-subtle); } .ga-table td.num { font-family: var(--mono); text-align: right; } /* -- footer -------------------------------------------------------------- */ .ga-foot { border-top: 1px solid var(--rule); padding: 3rem 0 2rem; margin-top: 5rem; font-size: 0.85rem; color: var(--fg-muted); } .ga-foot__row { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--col-gap); margin-bottom: 2rem; } .ga-foot h4 { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-subtle); margin: 0 0 1rem; font-weight: 500; } .ga-foot ul { list-style: none; margin: 0; padding: 0; } .ga-foot li { margin-bottom: 0.45rem; } .ga-foot a { border: 0; color: var(--fg-muted); } .ga-foot a:hover { color: var(--fg); } .ga-foot__bot { display: flex; justify-content: space-between; padding-top: 1.5rem; border-top: 1px solid var(--rule); color: var(--fg-subtle); font-size: 0.78rem; } @media (max-width: 720px) { .ga-foot__row { grid-template-columns: 1fr 1fr; } .ga-hero__meta { grid-template-columns: 1fr; } } /* -- editorial article (manifesto, docs) --------------------------------- */ .ga-article { max-width: 68ch; margin: 0 auto; padding: 4rem 0; } .ga-article h1 { font-family: var(--display); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1; margin: 0 0 2rem; letter-spacing: -0.02em; } .ga-article h2 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; margin: 3rem 0 1rem; } .ga-article h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; margin: 2rem 0 0.5rem; } .ga-article p { margin: 0 0 1.2rem; } .ga-article blockquote { font-family: var(--display); font-style: italic; font-weight: 300; font-size: 1.5rem; line-height: 1.3; color: var(--fg-muted); border-left: 2px solid var(--fg); padding-left: 1.5rem; margin: 2rem 0; } .ga-article hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; } /* -- artist + project hero ---------------------------------------------- */ .ga-entity { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); padding: clamp(2rem, 5vw, 4rem) 0; } .ga-entity__media iframe, .ga-entity__media img { width: 100%; aspect-ratio: 1/1; border: 1px solid var(--rule); } .ga-entity__title { font-family: var(--display); font-weight: 300; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1; margin: 1rem 0; letter-spacing: -0.02em; } .ga-entity__features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; border-top: 1px solid var(--rule); padding-top: 1.5rem; margin-top: 2rem; } .ga-entity__features dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-subtle); } .ga-entity__features dd { margin: 0.3rem 0 0; font-size: 0.95rem; } @media (max-width: 860px) { .ga-entity { grid-template-columns: 1fr; } }