/* ------------------------------------------------------------------ aart — design tokens Derived from 104galerie-com-DESIGN.md material: flat · shapes: sharp · voice: neutral, third person ------------------------------------------------------------------ */ :root { /* colour */ --bg: #ffffff; --fg: #000000; --accent: #ff0000; /* used exactly twice on the page */ --ink-2: #594d4d; /* secondary text */ --ink-3: #808080; /* tertiary text, eyebrows */ --rule: #cccccc; /* 1px hairlines */ --rule-soft: #eaeaea; --raised: #070606; /* footer / dark surface */ --raised-fg: #ffffff; --surface: #f5f5f5; /* image stage, thumbnails */ --card: #ffffff; /* work cards */ --highlight: #f5f5f5; /* current table row */ /* spacing scale: 2 · 21 · 42 · 79 · 225 */ --s-1: 2px; --s-2: 21px; --s-3: 42px; --s-4: 79px; --s-5: 225px; /* type: Author, base 15/27, ratio 1.125 from 12px */ --font: "Author", "Helvetica Neue", Helvetica, Arial, sans-serif; --fs-micro: 12px; --lh-micro: 18px; --fs-sm: 13.333px; --lh-sm: 21px; --fs-body: 15px; --lh-body: 27px; --fs-lg: 16.875px; --lh-lg: 27px; --fs-h3: 19px; --lh-h3: 27px; --fs-display: 22.5px; --lh-display: 37.5px; --fs-title: 38.4px; --lh-title: 42px; --measure: 62ch; --container: 1280px; } /* Grey variant: . Page ground steps down to neutral-50, so the artwork stage, thumbnails and work cards lift to white. */ :root[data-theme="grey"] { --bg: #f2f2f2; --surface: #ffffff; --card: #ffffff; --highlight: #e8e8e8; --rule: #c4c4c4; --rule-soft: #dcdcdc; } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } h1, h2, h3, h4, p, dl, dd, figure, table { margin: 0; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } ul, ol { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; } [hidden] { display: none !important; } /* ---------- layout primitives ---------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s-3); } .eyebrow { font-size: var(--fs-micro); line-height: var(--lh-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .section { padding-top: var(--s-4); border-top: 1px solid var(--rule); } .section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--s-3); margin-bottom: var(--s-3); } .section-head h2 { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 400; } .prose { max-width: var(--measure); } .prose p + p { margin-top: var(--s-2); } .muted { color: var(--ink-2); } .small { font-size: var(--fs-sm); line-height: var(--lh-sm); } /* ---------- header ---------- */ .site-header { border-bottom: 1px solid var(--fg); background: var(--bg); position: sticky; top: 0; z-index: 10; } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); height: 63px; /* 42 + 21 */ } .brand { font-size: var(--fs-display); line-height: 1; letter-spacing: -0.02em; font-weight: 500; text-transform: lowercase; white-space: nowrap; } .brand small { display: block; font-size: 10px; line-height: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin-top: var(--s-1); } .nav { display: flex; gap: var(--s-2); font-size: var(--fs-sm); line-height: var(--lh-sm); } .nav a { padding: var(--s-2) 0; border-bottom: 1px solid transparent; } .nav a:hover { text-decoration: none; border-bottom-color: var(--fg); } .nav a[aria-current="page"] { border-bottom-color: var(--fg); } .search { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--fg); padding-bottom: var(--s-1); } .search input { font: inherit; font-size: var(--fs-sm); border: 0; background: transparent; width: 140px; padding: 0; color: var(--fg); } .search input::placeholder { color: var(--ink-3); } .search input:focus { outline: none; } .search button { line-height: 0; } /* ---------- crumbs ---------- */ .crumbs { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); line-height: var(--lh-sm); } .crumbs ol { display: flex; gap: 8px; } .crumbs li + li::before { content: "/"; color: var(--ink-3); margin-right: 8px; } .crumbs .ids { display: flex; gap: var(--s-2); color: var(--ink-2); } .crumbs .ids b { font-weight: 500; color: var(--fg); } /* ---------- artwork hero ---------- */ .work { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-3); padding: var(--s-3) 0 var(--s-4); } .viewer { min-width: 0; } .stage { background: var(--surface); aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; } .stage img { width: 100%; height: 100%; object-fit: contain; } .stage-caption { display: flex; justify-content: space-between; gap: var(--s-2); margin-top: 10px; font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--ink-3); } .thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: var(--s-2); } .thumbs button { aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid transparent; background: var(--surface); } .thumbs button img { width: 100%; height: 100%; object-fit: cover; } .thumbs button[aria-pressed="true"] { border-color: var(--fg); } .thumbs button:hover { border-color: var(--ink-3); } .details { position: sticky; top: calc(63px + var(--s-3)); align-self: start; } .details .eyebrow { margin-bottom: 10px; } .title { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; } .title em { font-style: normal; color: var(--ink-3); } .artist-line { margin-top: var(--s-2); display: flex; align-items: baseline; gap: 10px; } .artist-line .note { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--ink-3); } .spec { margin-top: var(--s-3); border-top: 1px solid var(--fg); } .spec > div { display: grid; grid-template-columns: 120px 1fr; gap: var(--s-2); padding: 10px 0; border-bottom: 1px solid var(--rule); } .spec dt { color: var(--ink-3); font-size: var(--fs-sm); line-height: var(--lh-body); } .spec dd { min-width: 0; } .spec code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; letter-spacing: 0.02em; } .price-block { margin-top: var(--s-3); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); } .price { font-size: var(--fs-display); line-height: var(--lh-display); } .price span { font-size: var(--fs-sm); color: var(--ink-2); margin-left: 6px; } .availability { margin-top: var(--s-2); display: grid; gap: 6px; font-size: var(--fs-sm); line-height: var(--lh-sm); } .availability li { display: flex; align-items: center; gap: 10px; } .availability .dot { width: 8px; height: 8px; background: var(--fg); flex: none; } .availability .dot.available { background: var(--accent); } /* accent use 1 */ .availability .dot.off { background: transparent; border: 1px solid var(--ink-3); } .availability .off-text { color: var(--ink-3); } .actions { margin-top: var(--s-3); display: grid; gap: 10px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 var(--s-2); font-size: var(--fs-sm); letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--fg); background: var(--fg); color: var(--raised-fg); transition: background-color 120ms linear, border-color 120ms linear; } .btn:hover { text-decoration: none; background: var(--accent); border-color: var(--accent); } /* accent use 2 */ .btn-secondary { background: transparent; color: var(--fg); } .btn-secondary:hover { background: var(--fg); border-color: var(--fg); color: var(--raised-fg); } .fine { margin-top: var(--s-2); font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--ink-3); } /* ---------- about the work / the artist ---------- */ .about { padding-bottom: var(--s-4); } .about-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } .about-col { min-width: 0; } .about-col .eyebrow { margin-bottom: 10px; } .about-col .lede { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 400; margin-bottom: var(--s-2); max-width: 34ch; } .lede-note { display: block; font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--ink-3); margin-top: var(--s-1); } .about-col + .about-col { border-left: 1px solid var(--rule); padding-left: var(--s-4); margin-left: calc(var(--s-4) * -1 / 2); } /* ---------- collapsible section (print options) ---------- */ .options { padding-top: 0; } .section-toggle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) auto 42px; gap: var(--s-3); align-items: baseline; width: 100%; text-align: left; padding: var(--s-3) 0; cursor: pointer; } .section-toggle-title { font-size: var(--fs-display); line-height: var(--lh-display); } .section-toggle:hover .section-toggle-title { text-decoration: underline; text-underline-offset: 4px; } .section-toggle-meta { font-size: var(--fs-sm); line-height: var(--lh-display); color: var(--ink-3); white-space: nowrap; } /* plus / minus toggle drawn with borders: flat, no icon font */ .opt-toggle { position: relative; width: 14px; height: 14px; justify-self: end; align-self: center; } .opt-toggle::before, .opt-toggle::after { content: ""; position: absolute; background: var(--fg); top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); } .opt-toggle::after { transform: translateY(-50%) rotate(90deg); transition: transform 150ms ease; } .section-toggle[aria-expanded="true"] .opt-toggle::after { transform: translateY(-50%) rotate(0deg); } .section-body { padding-bottom: var(--s-4); } .section-body-cta { margin-top: var(--s-3); } /* ---------- options table ---------- */ .table-wrap { overflow-x: auto; } table.options-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--fg); font-size: var(--fs-sm); line-height: var(--lh-sm); } .options-table th, .options-table td { text-align: left; vertical-align: top; padding: 14px var(--s-2) 14px 0; border-bottom: 1px solid var(--rule); } .options-table th { font-weight: 400; color: var(--ink-3); font-size: var(--fs-micro); line-height: var(--lh-micro); letter-spacing: 0.12em; text-transform: uppercase; } .options-table td:first-child { font-size: var(--fs-body); line-height: var(--lh-body); } .options-table td:nth-child(3) { min-width: 200px; } .options-table code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; white-space: nowrap; } .options-table tr.current td { background: var(--highlight); } .options-table tr.current td:first-child { box-shadow: inset 3px 0 0 var(--fg); padding-left: 12px; } .tag { display: inline-block; margin-left: 10px; padding: 0 6px; font-size: 10px; line-height: 18px; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--fg); vertical-align: 2px; } .price-list { display: grid; } .price-list li { display: flex; justify-content: space-between; gap: var(--s-2); padding: 2px 0; } .price-list li + li { border-top: 1px solid var(--rule-soft); } .price-list b { font-weight: 500; } .price-list .is-listing b { text-decoration: underline; text-underline-offset: 3px; } .note-grid { margin-top: var(--s-4); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); } .note-grid h3 { font-size: var(--fs-body); font-weight: 500; margin-bottom: 8px; } .note-grid p { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-2); } .discount { display: grid; gap: 6px; font-size: var(--fs-sm); line-height: var(--lh-sm); } .discount li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--rule-soft); padding: 4px 0; } .discount b { font-weight: 500; } /* ---------- other works ---------- */ .works { padding-bottom: var(--s-4); } .works-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); } .work-card figure { margin: 0; } .work-card .frame { aspect-ratio: 1 / 1; background: var(--card); overflow: hidden; border: 1px solid var(--rule); padding: var(--s-2); } .work-card .frame img { width: 100%; height: 100%; object-fit: contain; } .work-card:hover .frame { border-color: var(--fg); } .work-card:hover { text-decoration: none; } .work-card figcaption { display: flex; justify-content: space-between; margin-top: 8px; font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--ink-2); } .work-card.current .frame { border-color: var(--fg); } .work-card.current figcaption::after { content: "Viewing"; color: var(--ink-3); } /* ---------- footer ---------- */ .site-footer { background: var(--raised); color: var(--raised-fg); padding: var(--s-4) 0 var(--s-3); margin-top: var(--s-3); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-3); } .site-footer .eyebrow { color: #9f9f9f; margin-bottom: 10px; } .site-footer .brand-mark { font-size: var(--fs-display); line-height: 1; letter-spacing: -0.02em; font-weight: 500; text-transform: lowercase; color: var(--raised-fg); margin-bottom: 10px; } .site-footer ul { display: grid; gap: 4px; font-size: var(--fs-sm); line-height: var(--lh-sm); } .site-footer .claim { font-size: var(--fs-display); line-height: var(--lh-display); max-width: 22ch; } .footer-bottom { margin-top: var(--s-4); padding-top: var(--s-2); border-top: 1px solid #393939; display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-micro); line-height: var(--lh-micro); color: #9f9f9f; } /* ---------- responsive ---------- */ @media (max-width: 1024px) { .work { grid-template-columns: 1fr; } .details { position: static; } .works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-grid { grid-template-columns: 1fr 1fr; } .section-head { grid-template-columns: 1fr; gap: var(--s-2); } .about-cols { grid-template-columns: 1fr; gap: var(--s-3); } .about-col + .about-col { border-left: 0; padding-left: 0; margin-left: 0; border-top: 1px solid var(--rule); padding-top: var(--s-3); } .section-toggle { grid-template-columns: minmax(0, 1fr) 42px; gap: 6px var(--s-2); } .section-toggle .eyebrow { grid-column: 1; } .section-toggle .opt-toggle { grid-column: 2; grid-row: 1; } .section-toggle-title { grid-column: 1; } .section-toggle-meta { grid-column: 1; line-height: var(--lh-sm); } .note-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .container { padding: 0 var(--s-2); } .site-header .container { height: auto; flex-wrap: wrap; padding-top: var(--s-2); padding-bottom: var(--s-2); } .nav { flex-wrap: wrap; gap: 4px var(--s-2); } .nav a { padding: 4px 0; } .search { order: 3; width: 100%; } .search input { width: 100%; } .title { font-size: 30.4px; line-height: 34px; } .thumbs { grid-template-columns: repeat(3, 1fr); } .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: 1fr; } .crumbs { flex-direction: column; gap: 4px; } .spec > div { grid-template-columns: 1fr; gap: 0; } }