/* ========================================================================== The Erin Pearson Collection Charcoal base · antique gold accent · warm cream type ========================================================================== */ /* --------------------------------------------------------------- fonts Self-hosted, not fetched from Google. Three reasons, in order of how much they bit: a blocked or slow fonts.googleapis.com silently falls back to Georgia and nobody can tell from the outside — which is exactly what happened here, and it meant every screenshot of the type was of a font the site was not using; corporate and school networks do block it; and a third-party stylesheet in blocks the first paint. 312 KB against a 15 MB site. These are variable fonts: one file covers every weight, and the optical-size axis lets the same face be drawn differently at heading and text sizes. */ @font-face { font-family: "Bodoni Moda"; src: url("/assets/fonts/bodoni-moda.woff2") format("woff2"); font-weight: 400 900; font-display: swap; } @font-face { font-family: "Literata"; src: url("/assets/fonts/literata.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Literata"; src: url("/assets/fonts/literata-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; } @font-face { font-family: "EB Garamond"; src: url("/assets/fonts/eb-garamond.woff2") format("woff2"); font-weight: 400 800; font-display: swap; } :root { --ink: #201e1a; --ink-raised: #26231f; --ink-deep: #1a1815; --cream: #efe9dd; --body: #d6cfc2; --cream-dim: #bdb6a9; --cream-faint: #8d867a; --gold: #c6a664; --gold-dim: #a88b52; --line: rgba(198, 166, 100, 0.26); --line-soft: rgba(239, 233, 221, 0.1); /* Display face. Bodoni — an eighteenth-century Didone, the face of art catalogues, auction houses and fashion plates ever since. The point is the stroke contrast: hairline thins against heavy stems. That is what makes it read as drawn rather than typed, and it is what Garamond does not do. A Garamond IS the resume face — Times, Cambria, Cormorant, Spectral all sit in that same family of quiet book serifs, and no amount of weight or size gets a CV out of them. */ --serif: "Bodoni Moda", Didot, "Bodoni MT", "Playfair Display", Georgia, serif; /* Body. Literata was drawn for Google Play Books — for people reading for an hour at a stretch on a screen. Set against Newsreader, Lora, Alegreya, Source Serif and Vollkorn at identical size on this exact background, it came out the largest on the page and the sturdiest in the stroke. That combination is the whole job here. Light type on a dark ground loses its thin strokes, so a face with LOW stroke contrast, a tall x-height and open apertures stays legible where a delicate one greys out. Newsreader was the opposite of all three, which is why it read as small and faint. Its wedge serifs also keep it out of resume territory — this is a literary face, not a document face. Not a grotesque: Inter, Helvetica and the like are what make a site read as a software product, however classical the headings are. */ --sans: "Literata", Georgia, serif; --label: "EB Garamond", Garamond, Georgia, serif; /* Conservation mounting: a warm dark mat, with a fine aged-gilt line at its inner edge. A broad slab of gold would fight the frames, most of which are gilt already. */ --mount: #2b261e; --fillet: #8a7038; --measure: 1180px; --gutter: clamp(1.25rem, 4vw, 3.5rem); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ink); /* Light type on a dark ground looks thinner than the same type on white — the background bleeds into the strokes. The body colour is lifted and the size raised a little to compensate; both are legibility, not decoration. */ color: var(--body); font-family: var(--sans); font-size: 1.12rem; font-weight: 400; line-height: 1.72; letter-spacing: 0; /* Let the optical-size axis do its job: the same face drawn with sturdier strokes at text size and finer ones at display size. */ font-optical-sizing: auto; /* NOT -webkit-font-smoothing: antialiased. It thins every stroke, which is the last thing light-on-dark type needs — it was working against the legibility everything else here is trying to buy. */ text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } /* eleventy-img wraps every photo in . Left as an inline box it sits between the layout parent and the , so percentage heights on the image have nothing definite to resolve against and are silently dropped. display: contents removes it from layout so the IS the child. */ picture { display: contents; } a { color: inherit; } h1, h2, h3, .masthead__title { font-family: var(--serif); color: var(--cream); line-height: 1.16; margin: 0; /* The single most important line in this stylesheet for legibility. Bodoni carries an optical-size axis, and left on "auto" it draws finer and finer hairlines the larger the type gets — which is right on paper and wrong here, because on a dark ground those hairlines simply stop existing. The masthead and the section headings were visibly breaking up. Pinning the axis to a text size keeps the sturdier cut at every size: the drama of the thick-thin contrast, without losing the thins. */ font-optical-sizing: none; font-variation-settings: "opsz" 11; } h1, .masthead__title { font-weight: 500; letter-spacing: -0.008em; } h2, h3 { font-weight: 600; letter-spacing: 0.002em; } /* --------------------------------------------------------------- helpers */ .wrap { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); } /* Letterspaced small caps rather than uppercase sans — the difference between a gallery label and a web app. */ .overline, .card__meta, .piece__tags, .nav a, .filters button, .piece__details dt, .field label, .btn, .preview-banner, .portrait-frame p { font-family: var(--label); font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.13em; /* Small caps are small; at 500 on this ground they were closer to a suggestion than a label. */ font-weight: 600; } .overline { font-size: 0.98rem; color: var(--gold-dim); margin: 0; } .rule { width: 72px; height: 1px; background: var(--gold); border: 0; margin: 2rem auto; } .btn { display: inline-block; font-size: 0.98rem; letter-spacing: 0.17em; color: var(--gold); text-decoration: none; border: 1px solid var(--gold); background: transparent; padding: 0.95rem 2rem; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; } .btn:hover, .btn:focus-visible { background: var(--gold); color: var(--ink); } .skip { position: absolute; left: -9999px; } .skip:focus { left: 1rem; top: 1rem; z-index: 999; background: var(--gold); color: var(--ink); padding: 0.6rem 1rem; } /* ------------------------------------------------------- preview banner */ .preview-banner { background: #2f2b26; color: var(--cream-dim); text-align: center; font-size: 0.9rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line-soft); } /* --------------------------------------------------------------- header */ .masthead { border-bottom: 1px solid var(--line-soft); padding: 1.75rem 0 0; } .masthead__title { font-family: var(--serif); font-size: clamp(1.5rem, 3.2vw, 1.95rem); color: var(--cream); text-decoration: none; display: block; line-height: 1.2; } .masthead__overline { margin-top: 0.3rem; font-size: 0.92rem; } .nav { display: flex; gap: 2rem; margin-top: 1.15rem; flex-wrap: wrap; } .nav a { font-size: 1rem; text-decoration: none; color: var(--cream-faint); padding-bottom: 0.7rem; border-bottom: 1px solid transparent; transition: color 0.2s ease; } .nav a:hover { color: var(--cream-dim); } .nav a[aria-current="page"] { color: var(--cream); border-bottom-color: var(--gold); } /* ----------------------------------------------------------------- hero */ .hero { text-align: center; padding: clamp(4rem, 12vh, 8.5rem) 0 clamp(3rem, 8vh, 5rem); max-width: 44rem; margin-inline: auto; } .hero__title { font-size: clamp(2.75rem, 7vw, 4.6rem); margin: 1.75rem 0 0; } .hero__lede { font-size: 1.14rem; line-height: 1.85; color: var(--cream-dim); margin: 0 auto 2.75rem; max-width: 30rem; } /* Home preview: three works visible, the rest reachable with the arrows. */ .strip-wrap { padding-bottom: clamp(3rem, 8vh, 5.5rem); border-bottom: 1px solid var(--line-soft); } .carousel { position: relative; } .strip { display: flex; align-items: flex-end; gap: clamp(1rem, 3vw, 2.75rem); overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: none; padding: 0 0 0.5rem; } .strip::-webkit-scrollbar { display: none; } .carousel:not(.has-more) .strip { justify-content: center; } .strip__item { flex: 0 0 calc((100% - 2 * clamp(1rem, 3vw, 2.75rem)) / 3); scroll-snap-align: start; } @media (max-width: 700px) { .strip__item { flex-basis: 74%; } } .carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; background: rgba(32, 30, 26, 0.88); border: 1px solid var(--line); color: var(--gold); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .carousel__nav:hover { background: var(--gold); color: var(--ink); } .carousel__nav[hidden] { display: none; } .carousel__nav--prev { left: 0.35rem; } .carousel__nav--next { right: 0.35rem; } .strip a { display: block; text-decoration: none; transition: opacity 0.3s ease; } .strip a:hover { opacity: 0.82; } .strip img, .strip .photo-missing { width: 100%; height: auto; } /* ---------------------------------------------------------------- about */ .about { padding: clamp(3.5rem, 9vh, 6rem) 0 clamp(4rem, 10vh, 7rem); max-width: 44rem; } /* Was a 4:5 placeholder box waiting for a portrait. Now it holds Erin's own photograph and takes its shape from her, not from a box drawn before she had chosen one. */ .portrait-frame { max-width: 34rem; margin: 0 0 3rem; } .portrait-frame p { font-size: 0.95rem; color: var(--gold-dim); text-align: center; margin: 0; line-height: 2; } .about h2 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin-bottom: 1.75rem; } .about p { margin: 0 0 1.45rem; color: var(--cream-dim); line-height: 1.85; } /* ----------------------------------------------------------- collection */ .collection-head { display: flex; align-items: baseline; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; padding: clamp(2.5rem, 6vh, 4rem) 0 0; } .collection-head h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); } .filters { display: flex; gap: 1.75rem; } .filters button { background: none; border: 0; border-bottom: 1px solid transparent; padding: 0 0 0.3rem; font-size: 1rem; color: var(--cream-faint); cursor: pointer; transition: color 0.2s ease; } .filters button:hover { color: var(--cream-dim); } .filters button[aria-pressed="true"] { color: var(--gold); border-bottom-color: var(--gold); } .search { margin: 1.5rem 0 0 auto; width: min(100%, 17rem); } .search input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-soft); color: var(--cream); font-family: var(--sans); font-size: 0.9rem; font-weight: 300; padding: 0.5rem 0; } .search input::placeholder { color: var(--cream-faint); } .search input:focus { outline: none; border-bottom-color: var(--gold); } /* Masonry so every piece keeps its true proportions and nothing is cropped. Without JS this falls back to CSS multi-column, which still reads fine. */ .grid { columns: 2; column-gap: clamp(1.5rem, 4vw, 3.25rem); padding: clamp(1.75rem, 4vh, 2.75rem) 0 clamp(4rem, 10vh, 6rem); } .grid.is-masonry { columns: auto; display: flex; align-items: flex-start; gap: clamp(1.5rem, 4vw, 3.25rem); } .grid__col { flex: 1 1 0; min-width: 0; } @media (max-width: 700px) { .grid { columns: 1; } .grid.is-masonry { display: block; } .grid.is-masonry .grid__col + .grid__col { margin-top: 0; } } .card { break-inside: avoid; margin-bottom: clamp(2rem, 5vw, 3.25rem); display: block; text-decoration: none; } .card[hidden] { display: none; } .card img, .card .photo-missing { width: 100%; transition: opacity 0.3s ease; } .card:hover img { opacity: 0.85; } .card__title { font-family: var(--serif); font-size: 1.4rem; color: var(--cream); margin: 1rem 0 0.35rem; line-height: 1.25; } .card__meta { font-size: 0.92rem; color: var(--gold-dim); } .card__meta em { font-style: italic; text-transform: none; letter-spacing: 0.02em; font-size: 0.82rem; color: var(--cream-faint); } .no-results { color: var(--cream-faint); font-style: italic; padding: 2rem 0 6rem; } /* ----------------------------------------------------------- piece page */ .piece { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; padding: clamp(1.5rem, 3vh, 2.25rem) 0 clamp(3rem, 8vh, 5rem); } @media (max-width: 900px) { .piece { grid-template-columns: 1fr; } } /* ------- gallery: one image at a time, swipeable, never cropped -------- */ .gallery { position: relative; border: 1px solid var(--line-soft); } .gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; height: clamp(360px, 66vh, 760px); } .gallery__track::-webkit-scrollbar { display: none; } .gallery__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 3vw, 2.5rem); cursor: zoom-in; box-sizing: border-box; min-width: 0; } /* The mount hugs the plate rather than filling the slide. Filling it meant a square piece in a tall slide sat in a great empty field of mount board — a framer would cut the mount to the work, not the wall. max-width/max-height keep it inside the slide; width/height auto let the photograph's own proportions decide the shape. Never cropped either way. */ .gallery__slide img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; } .gallery__slide .photo-missing { width: 100%; height: 100%; aspect-ratio: auto; } .gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.6rem; height: 2.6rem; display: grid; place-items: center; background: rgba(32, 30, 26, 0.75); border: 1px solid var(--line); color: var(--gold); font-size: 0.95rem; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .gallery__nav:hover { background: var(--gold); color: var(--ink); } .gallery__nav--prev { left: 0.75rem; } .gallery__nav--next { right: 0.75rem; } .gallery__dots { display: flex; justify-content: center; gap: 0.5rem; padding: 0.9rem 0 0; } .gallery__dot { width: 6px; height: 6px; border-radius: 50%; border: 0; padding: 0; background: var(--cream-faint); opacity: 0.5; cursor: pointer; transition: background-color 0.2s ease, opacity 0.2s ease; } .gallery__dot[aria-current="true"] { background: var(--gold); opacity: 1; } .gallery[data-single="true"] .gallery__nav, .gallery[data-single="true"] + .gallery__dots { display: none; } /* ------------------------------------------------------------ lightbox */ .lightbox { position: fixed; inset: 0; background: #15130f; z-index: 100; display: none; flex-direction: column; } .lightbox[open], .lightbox.is-open { display: flex; } .lightbox__track { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; min-height: 0; } .lightbox__track::-webkit-scrollbar { display: none; } .lightbox__slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 5vw, 4rem); min-width: 0; box-sizing: border-box; } .lightbox__slide img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; } .lightbox__close { position: absolute; top: 1.25rem; right: 1.5rem; background: none; border: 0; color: var(--cream-dim); font-size: 1.6rem; line-height: 1; cursor: pointer; z-index: 2; } .lightbox__close:hover { color: var(--gold); } .lightbox .gallery__nav { z-index: 2; } /* ------------------------------------------------------- piece details */ .piece__section { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; color: var(--gold); margin: 0 0 0.5rem; } .piece__title { font-size: clamp(1.8rem, 3.4vw, 2.25rem); margin-bottom: 0.35rem; } .piece__tags { font-size: 0.95rem; color: var(--gold-dim); margin-bottom: 1.1rem; } .piece__body p { margin: 0 0 0.9rem; color: var(--cream-dim); line-height: 1.66; } .piece__provenance { margin-top: 1.35rem; } .piece__provenance h2 { font-family: var(--serif); font-size: 1.15rem; color: var(--gold); margin-bottom: 0.4rem; font-weight: 400; } .piece__provenance p { margin: 0; color: var(--cream-dim); line-height: 1.66; } .piece__divider { border: 0; border-top: 1px solid var(--line-soft); margin: 1.3rem 0 1.05rem; } .piece__status { font-style: italic; color: var(--cream-faint); margin: 0 0 2rem; } .back { display: inline-block; font-size: 0.85rem; color: var(--cream-dim); text-decoration: none; border-bottom: 1px solid var(--line-soft); padding-bottom: 0.2rem; } .back:hover { color: var(--gold); border-bottom-color: var(--gold); } /* ------------------------------------------------------- enquiry form */ .enquiry__note { font-size: 0.86rem; color: var(--cream-faint); margin: 0 0 1.05rem; line-height: 1.58; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } } .field { margin-bottom: 0.9rem; } .field label { display: block; font-size: 0.95rem; color: var(--cream-faint); margin-bottom: 0.35rem; } .field input, .field textarea { width: 100%; background: rgba(239, 233, 221, 0.03); border: 1px solid var(--line-soft); color: var(--cream); font-family: var(--sans); font-size: 0.95rem; font-weight: 300; padding: 0.62rem 0.85rem; border-radius: 0; } .field textarea { min-height: 4.75rem; resize: vertical; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); } .form-status { margin-top: 1rem; font-size: 0.88rem; color: var(--gold); } /* --------------------------------------------------------------- footer */ .footer { border-top: 1px solid var(--line-soft); text-align: center; padding: clamp(3rem, 7vh, 4.5rem) 0; margin-top: auto; } .footer__mark { color: var(--gold); font-size: 1rem; margin-bottom: 1.25rem; } .footer p { margin: 0.25rem 0; font-size: 0.85rem; color: var(--cream-faint); } /* ------------------------------------------------------ misc utilities */ .photo-missing { background: repeating-linear-gradient( 45deg, rgba(239, 233, 221, 0.04), rgba(239, 233, 221, 0.04) 10px, transparent 10px, transparent 20px ); border: 1px solid var(--line-soft); aspect-ratio: 4 / 5; width: 100%; } body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ------------------------------------------------- artist and catalogue */ .card__artist { font-family: var(--serif); font-size: 1.02rem; font-style: italic; color: var(--cream-dim); margin: 0.1rem 0 0.4rem; line-height: 1.3; } .piece__artist { font-family: var(--serif); font-size: 1.3rem; font-style: italic; color: var(--cream-dim); margin: 0 0 0.55rem; line-height: 1.25; } /* Year, medium, edition, dimensions — the catalogue facts, kept quiet. */ .piece__details { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1.1rem; margin: 1.15rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--line-soft); font-size: 0.84rem; } .piece__details dt { color: var(--gold-dim); font-size: 0.92rem; align-self: center; } .piece__details dd { margin: 0; color: var(--cream-dim); } /* --------------------------------------- her longer sections, full width */ .piece__more { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(1.75rem, 4vw, 3.25rem); padding: clamp(2rem, 5vh, 3.25rem) 0 clamp(3.5rem, 9vh, 5.5rem); border-top: 1px solid var(--line-soft); } .piece__more-item h2 { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; color: var(--gold); margin: 0 0 0.6rem; } .piece__more-item p { margin: 0 0 0.9rem; color: var(--cream-dim); font-size: 0.94rem; line-height: 1.72; } .piece__provenance p { margin: 0 0 0.75rem; } /* The surround. Cover photographs are squared and trimmed to the frame, so this brass line IS the visible edge of the plate — it does the job the bare wall was doing by accident, in the collection's own colour. */ /* One treatment, used on every photograph on the site — collection, home preview, piece page, and fullscreen. The mat is what makes a letterboxed photo read as a mounted plate rather than as something cropped by an invisible box, which is how it looked black-on-black. */ .card img, .strip img, .gallery__slide img, .lightbox__slide img, .portrait-frame img { border: 1px solid var(--fillet); padding: clamp(11px, 1.5vw, 22px); background: var(--mount); } /* Erin gets mounted the same way the works do — she is part of the same hang, not a headshot pasted above it. */ .portrait-frame img { width: 100%; height: auto; } /* The frame around the gallery is redundant now each plate has its own. */ .gallery { border: 0; } /* ------------------------------------------------- classical arrangement */ .masthead .wrap { text-align: center; } .masthead { border-bottom: 3px double var(--line); padding-bottom: 0.15rem; } .masthead__title { font-size: clamp(1.8rem, 3.8vw, 2.5rem); } .nav { justify-content: center; gap: 3rem; } .collection-head { flex-direction: column; align-items: center; text-align: center; gap: 0; padding-bottom: 0; } .collection-head h1 { font-size: clamp(2.3rem, 5vw, 3.3rem); } /* A short rule with a diamond at its centre, drawn rather than set from a glyph — ornament characters get substituted for emoji on some systems. */ .collection-head h1::after { content: ""; display: block; width: 92px; height: 5px; margin: 0.7rem auto 0; background: linear-gradient(var(--gold), var(--gold)) center/100% 1px no-repeat, linear-gradient(var(--gold), var(--gold)) center/5px 5px no-repeat; -webkit-mask: linear-gradient(#000, #000) center/100% 1px no-repeat, linear-gradient(#000, #000) center/5px 5px no-repeat; mask: linear-gradient(#000, #000) center/100% 1px no-repeat, linear-gradient(#000, #000) center/5px 5px no-repeat; transform: rotate(0deg); } .collection-head h1::after { background: none; position: relative; } .collection-head h1::after { width: 110px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold) 78%, transparent); -webkit-mask: none; mask: none; } .search { margin: 1.1rem auto 0; } .search input { text-align: center; } .card { text-align: center; } .card__title { margin-top: 1.1rem; }