/* 45h: Ash Sinclair's portfolio. The whole look, in one plain stylesheet. * * No build step: this file is linked as it is (theme/layout.liquid). Edit it, * save, reload. * * THE KNOBS. Every colour on the site resolves through the nine properties in * the first block below. Change them and the whole look changes; nothing else * names a colour of its own except the error red and the hero's dark mat. * Two presets ship: olive-led (the default) and emerald-led, chosen by * `data-preset` on in theme/layout.liquid. Dark mode is one more block, * chosen by the visitor's system setting or by the toggle in the footer. * Every value here is also in design/system/kit/tokens.json. * * THE ONE RULE. The ornament is the frame, never the ground. Ornament lives in * the chrome (header, footer, rules, frames, drop caps); no artwork ever sits * on a pattern. The single exception is Ash's own: her art, full screen, * behind the home page's card (the parallax hero). */ /* ── reset ─────────────────────────────────────────────────────────── */ *, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html { -webkit-text-size-adjust: 100%; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } ol, ul { list-style: none; } img, svg, video, iframe { display: block; max-width: 100%; } img, video { height: auto; } button, input, select, textarea { font: inherit; color: inherit; background-color: transparent; } button, [role="button"] { cursor: pointer; } table { border-collapse: collapse; } /* ── the knobs ─────────────────────────────────────────────────────── */ :root, [data-preset="olive"] { --ground: #FDFDD0; /* Ivory: the page */ --surface: #F3F2C4; /* panels, the footer, image mats */ --ink: #23361A; /* Moss Green: text */ --ink-soft: #5A5540; /* captions, metadata (from Wood Bark) */ --frame: #556F30; /* Fig Leaf: chrome, buttons, links */ --accent: #A2B447; /* Azeitona: fills, never text on the ground */ --ornament: #D4AF37; /* Gold: ornament only, never text */ --on-frame: #FDFDD0; /* text on a frame-coloured fill */ --rule: #C9CB8E; /* hairlines */ --error: #9B2C1F; --mat: #0E140A; /* behind the hero while an image loads */ color-scheme: light; } [data-preset="emerald"] { --surface: #EEF0CC; --ink: #0B2A1C; --ink-soft: #4C5646; --frame: #004F2E; /* Emerald Green */ --accent: #006850; /* Jade Green */ --rule: #BFCBA8; } /* Dark: the jewel greens. Shared by both presets. Declared twice, once for the system setting (unless the visitor chose light) and once for the toggle. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #03281A; --surface: #0A3A26; --ink: #FDFDD0; --ink-soft: #C8CCA2; --frame: #A2B447; --accent: #006850; --on-frame: #03281A; --rule: #2F5A40; --error: #F2A08F; color-scheme: dark; } } [data-theme="dark"] { --ground: #03281A; --surface: #0A3A26; --ink: #FDFDD0; --ink-soft: #C8CCA2; --frame: #A2B447; --accent: #006850; --on-frame: #03281A; --rule: #2F5A40; --error: #F2A08F; color-scheme: dark; } /* ── type and space ────────────────────────────────────────────────── */ :root { --font-display: "Uncial Antiqua", Georgia, serif; --font-text: "Alegreya", Georgia, serif; --font-label: "Alegreya SC", Georgia, serif; --gutter: 20px; --measure: 38rem; --max: 1312px; } @media (min-width: 900px) { :root { --gutter: 64px; } } html { background: var(--ground); } body { background: var(--ground); color: var(--ink); font-family: var(--font-text); font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--frame); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--ink); } :focus-visible { outline: 2px solid var(--frame); outline-offset: 3px; } img { max-width: 100%; } .wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); box-sizing: border-box; } .flow > * + * { margin-top: 14px; } .eyebrow { font-family: var(--font-label); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; color: var(--frame); } .eyebrow--soft { color: var(--ink-soft); } .display-1 { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.08; margin: 0; } .display-2 { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.12; margin: 0; } .display-3 { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.15; margin: 0; } .muted { color: var(--ink-soft); } .small { font-size: 15px; } .lede { font-size: 18px; line-height: 1.5; max-width: var(--measure); } .work-title { font-style: italic; } @media (min-width: 900px) { .display-1 { font-size: 64px; } .display-2 { font-size: 44px; } .display-3 { font-size: 30px; } body { font-size: 19px; line-height: 1.55; } } /* ── controls ──────────────────────────────────────────────────────── */ .cta { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px; box-sizing: border-box; font-family: var(--font-label); font-weight: 700; font-size: 17px; letter-spacing: 0.04em; border-radius: 2px; text-decoration: none; cursor: pointer; } .cta--primary { background: var(--frame); color: var(--on-frame); border: 0; } .cta--primary:hover { background: var(--ink); color: var(--ground); } .cta--secondary { background: transparent; color: var(--frame); border: 1.5px solid var(--frame); } .cta--secondary:hover { color: var(--ink); border-color: var(--ink); } .cta-row { display: flex; gap: 12px; flex-wrap: wrap; } .cta-row .cta { flex: 1 1 0; padding: 0 16px; } @media (min-width: 900px) { .cta-row .cta { flex: 0 0 auto; } } .textlink { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 500; } .pill { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 16px; text-decoration: none; color: var(--ink); border: 1.5px solid var(--frame); } .pill::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--frame); } .pill--closed { border-style: dashed; border-color: var(--ink-soft); color: var(--ink-soft); } .pill--closed::before { background: transparent; border: 1.5px solid var(--ink-soft); box-sizing: border-box; } .tag { display: inline-block; font-family: var(--font-label); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; padding: 3px 10px; background: var(--frame); color: var(--on-frame); border-radius: 2px; } .blank { color: var(--ink-soft); } /* ── ornament ──────────────────────────────────────────────────────── */ .ornament { color: var(--ornament); display: block; } .ornament-rule { display: flex; justify-content: center; padding: 28px 0 20px; } .ornament-rule svg { width: min(300px, 80%); height: 24px; } @media (min-width: 900px) { .ornament-rule svg { width: 420px; } } .frame { position: relative; padding: 8px; border: 1.5px solid var(--frame); } .frame > img { display: block; width: 100%; height: auto; } .frame__corner { position: absolute; width: 18px; height: 18px; color: var(--ornament); } .frame__corner--tl { left: -10px; top: -10px; } .frame__corner--tr { right: -10px; top: -10px; } .frame__corner--bl { left: -10px; bottom: -10px; } .frame__corner--br { right: -10px; bottom: -10px; } .dropcap { display: flex; gap: 14px; align-items: flex-start; } .dropcap__letter { flex-shrink: 0; width: 62px; height: 62px; margin: 4px; box-sizing: border-box; border: 1.5px solid var(--ornament); outline: 1px solid var(--ornament); outline-offset: 3px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--frame); } .panel { position: relative; background: var(--surface); border: 1.5px solid var(--frame); padding: 22px 20px; } .panel__corner { position: absolute; width: 36px; height: 36px; color: var(--ornament); } .panel__corner--tl { left: -6px; top: -6px; } .panel__corner--tr { right: -6px; top: -6px; transform: rotate(90deg); } /* ── header, menu, footer ──────────────────────────────────────────── */ .skip { position: absolute; left: -9999px; } .skip:focus { left: 12px; top: 12px; z-index: 60; background: var(--ground); color: var(--ink); padding: 10px 14px; border: 1.5px solid var(--frame); } .masthead { position: sticky; top: 0; z-index: 40; background: var(--ground); border-bottom: 1px solid var(--rule); } .masthead__bar { display: flex; align-items: center; justify-content: space-between; height: 64px; } @media (min-width: 900px) { .masthead__bar { height: 80px; } } .wordmark { display: block; width: 76px; height: 34px; background: var(--ink); -webkit-mask: url(/assets/wordmark-ash.png) no-repeat left center / contain; mask: url(/assets/wordmark-ash.png) no-repeat left center / contain; } @media (min-width: 900px) { .wordmark { width: 88px; height: 40px; } } .wordmark-sub { display: block; background: var(--ink); -webkit-mask: url(/assets/wordmark-sub.png) no-repeat left center / contain; mask: url(/assets/wordmark-sub.png) no-repeat left center / contain; } .socials { display: none; margin-left: auto; margin-right: 28px; gap: 28px; align-items: center; } .socials a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); text-decoration: none; font-size: 16px; } .socials a:hover { color: var(--frame); } .socials svg { width: 20px; height: 20px; flex-shrink: 0; } @media (min-width: 900px) { .socials { display: flex; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .tray { position: static; } .tray > summary { list-style: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; margin-right: -10px; } .tray > summary::-webkit-details-marker { display: none; } .tray .tray__close { display: none; } .tray[open] .tray__open { display: none; } .tray[open] .tray__close { display: block; } .tray__panel { position: absolute; z-index: 45; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1.5px solid var(--frame); padding: 28px 36px 28px; min-height: calc(100svh - 64px); box-sizing: border-box; } @media (min-width: 900px) { .tray__panel { left: auto; right: max(var(--gutter), calc((100vw - var(--max)) / 2)); top: calc(100% + 12px); width: 380px; min-height: 0; border: 1.5px solid var(--frame); } } .tray__item { display: flex; align-items: center; min-height: 64px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: 28px; } .tray__item:hover, .tray__item[aria-current="page"] { color: var(--frame); } .tray__social { display: flex; gap: 18px; } .tray__social a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; } .sitefoot { margin-top: 48px; background: var(--surface); color: var(--ink); border-top: 1.5px solid var(--frame); } .sitefoot__band { display: flex; justify-content: center; padding-top: 10px; color: var(--ornament); overflow: hidden; } .sitefoot__band svg { width: 256px; height: 16px; } @media (min-width: 900px) { .sitefoot__band svg { width: 480px; } } .sitefoot__main { display: flex; flex-direction: column; gap: 28px; padding-top: 28px; padding-bottom: 32px; } @media (min-width: 900px) { .sitefoot__main { flex-direction: row; justify-content: space-between; } } .sitefoot__mark { font-family: var(--font-display); font-size: 28px; line-height: 1.1; color: var(--frame); } .sitefoot__links { display: flex; flex-direction: column; gap: 2px; } .sitefoot__links a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; font-size: 17px; } .sitefoot__links a:hover { color: var(--frame); } .sitefoot__links svg { width: 20px; height: 20px; flex-shrink: 0; } .sitefoot__legal { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 28px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-soft); } .theme-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: transparent; color: var(--ink); border: 1px solid var(--rule); border-radius: 999px; font: inherit; font-size: 15px; cursor: pointer; } /* ── the parallax hero ─────────────────────────────────────────────── */ .phero { position: relative; height: calc(100svh - 64px); min-height: 560px; overflow: hidden; background: var(--mat); } @media (min-width: 900px) { .phero { height: calc(100svh - 80px); min-height: 640px; } } .phero__slide { position: absolute; inset: -40px; opacity: 0; transition: opacity 900ms ease; } .phero__slide.is-current { opacity: 1; } .phero__slide img { width: 100%; height: 100%; object-fit: cover; will-change: transform; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform 140ms linear; } .phero__credit { position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; background: var(--ground); color: var(--ink); border: 1px solid var(--frame); font-size: 14px; font-style: italic; text-decoration: none; } @media (min-width: 900px) { .phero__credit { left: auto; right: 32px; top: 28px; font-size: 15px; } } .phero__motion { position: absolute; right: 14px; top: 14px; z-index: 2; width: 44px; height: 44px; display: none; align-items: center; justify-content: center; background: var(--ground); color: var(--ink); border: 1px solid var(--frame); border-radius: 50%; cursor: pointer; } .phero__motion[aria-pressed="true"] { background: var(--frame); color: var(--on-frame); } .has-tilt .phero__motion { display: flex; } .phero__dots { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(var(--card-h, 360px) + 30px); display: flex; justify-content: center; gap: 4px; } @media (min-width: 900px) { .phero__dots { left: auto; right: 32px; bottom: 40px; } } .phero__dot { width: 32px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; padding: 0; } .phero__dot span { width: 9px; height: 9px; border-radius: 50%; background: var(--ground); border: 1.5px solid var(--frame); opacity: 0.75; } .phero__dot[aria-current="true"] span { width: 12px; height: 12px; opacity: 1; } .phero__card { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 18px; box-sizing: border-box; padding: 22px 20px 20px; background: var(--ground); border: 1.5px solid var(--frame); outline: 1px solid var(--ground); outline-offset: 3px; } .phero__card > * + * { margin-top: 10px; } @media (min-width: 900px) { .phero__card { left: var(--gutter); right: auto; bottom: 56px; width: 520px; padding: 34px 36px 32px; } } .phero--sequence { height: auto; min-height: 0; background: none; overflow: visible; } .phero--sequence .phero__panel { position: relative; height: calc(100svh - 64px); overflow: hidden; background: var(--mat); } .phero--sequence .phero__panel .phero__slide { opacity: 1; } /* ── works ─────────────────────────────────────────────────────────── */ .strip { display: flex; gap: 10px; overflow-x: auto; padding: 6px var(--gutter) 10px; scroll-snap-type: x proximity; } .strip a { flex-shrink: 0; scroll-snap-align: start; } .strip img { display: block; height: 168px; width: auto; } @media (min-width: 900px) { .strip img { height: 240px; } .strip { gap: 20px; } } .coll-row { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 12px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; } .coll-row__thumb { width: 96px; height: 72px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--surface); } .coll-row__thumb img { max-width: 96px; max-height: 72px; display: block; } .coll-row__text { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; } .coll-row__chev { width: 20px; height: 20px; color: var(--frame); } .card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; } @media (min-width: 700px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .coll-card { display: flex; flex-direction: column; gap: 10px; color: var(--ink); text-decoration: none; } .coll-card__mat { height: 260px; background: var(--surface); display: flex; align-items: center; justify-content: center; padding: 14px; box-sizing: border-box; } .coll-card__mat img { max-width: 100%; max-height: 100%; display: block; } @media (min-width: 900px) { .coll-card__mat { height: 300px; padding: 18px; } } .coll-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .year-head { display: flex; align-items: center; gap: 12px; padding-top: 18px; margin-bottom: 14px; } .year-head__rule { flex-grow: 1; height: 1.5px; background: var(--ornament); } .year-jump { display: flex; gap: 8px; flex-wrap: wrap; } .year-jump a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 72px; border: 1.5px solid var(--frame); color: var(--frame); text-decoration: none; font-family: var(--font-label); font-weight: 700; font-size: 16px; border-radius: 2px; } .works-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; } @media (min-width: 900px) { .works-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; align-items: start; } } .work-item { display: flex; flex-direction: column; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; } @media (min-width: 900px) { .work-item { padding: 0; border-bottom: 0; } } .work-item img { display: block; width: 100%; height: auto; } .work-item__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .work-item__name { font-size: 18px; font-weight: 500; } .crumb { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 16px; } .crumb svg, .pager svg { width: 18px; height: 18px; } .pager { display: flex; align-items: center; justify-content: space-between; } .pager__btn { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); } .pager__btn[aria-disabled="true"] { color: var(--rule); pointer-events: none; } .work-figure { margin: 0; padding: 12px 0 0; background: var(--surface); } @media (min-width: 900px) { .work-figure { padding: 24px; display: flex; justify-content: center; } } .work-figure button { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; } .work-figure img { display: block; width: 100%; height: auto; max-height: calc(100svh - 120px); object-fit: contain; } .work-figure__hint { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px; font-size: 14px; color: var(--ink-soft); } @media (min-width: 900px) { .work-figure__hint { display: none; } } .work-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 22px; padding-bottom: 36px; } @media (min-width: 900px) { .work-body { grid-template-columns: 7fr 5fr; column-gap: 32px; padding-top: 40px; } } .facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .facts dt { font-family: var(--font-label); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; color: var(--ink-soft); } .facts dd { margin: 2px 0 0; font-size: 17px; } .lightbox { position: fixed; inset: 0; z-index: 80; background: var(--mat); display: none; align-items: center; justify-content: center; } .lightbox.is-open { display: flex; } .lightbox img { max-width: 100vw; max-height: 100svh; object-fit: contain; touch-action: pinch-zoom; } .lightbox__close { position: absolute; right: 12px; top: 12px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--frame); background: var(--ground); color: var(--ink); cursor: pointer; } /* ── showreel, about, commissions, shop ────────────────────────────── */ .reel { position: relative; padding: 6px; border: 1.5px solid var(--frame); background: var(--mat); } .reel img, .reel iframe { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border: 0; } .reel__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; border: 2px solid #FDFDD0; background: rgba(14, 20, 10, 0.72); color: #FDFDD0; display: flex; align-items: center; justify-content: center; cursor: pointer; } .rows { display: flex; flex-direction: column; } .row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--rule); } .row__when { font-family: var(--font-label); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; color: var(--ink-soft); } .row__what { font-size: 18px; font-weight: 500; } @media (min-width: 900px) { .row { display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 24px; } .row__detail { grid-column: 2; } } .howto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .howto li { display: flex; gap: 14px; align-items: flex-start; } .howto__n { flex-shrink: 0; width: 40px; height: 40px; border: 1.5px solid var(--ornament); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; color: var(--frame); } .howto__t { padding-top: 6px; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 16px; font-weight: 500; } .field input, .field select, .field textarea { min-height: 48px; box-sizing: border-box; padding: 0 12px; font-family: var(--font-text); font-size: 18px; color: var(--ink); background: var(--ground); border: 1.5px solid var(--ink-soft); border-radius: 2px; } .field textarea { padding: 10px 12px; resize: vertical; } .field [aria-invalid="true"] { border: 2px solid var(--error); } .field__error { font-size: 15px; color: var(--error); } .field__hint { font-size: 15px; color: var(--ink-soft); } .form { display: flex; flex-direction: column; gap: 16px; } .product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } @media (min-width: 900px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } } .product-card { display: flex; flex-direction: column; gap: 6px; color: var(--ink); text-decoration: none; } .product-card__mat { aspect-ratio: 1 / 1; background: var(--surface); display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; } .product-card__mat img { max-width: 100%; max-height: 100%; display: block; box-shadow: 0 0 0 6px #FFFFFF; } .credit-box { border: 1px solid var(--rule); padding: 18px; } .section { padding-top: 28px; } .page-head { padding-top: 28px; padding-bottom: 8px; } .page-head > * + * { margin-top: 10px; } @media (prefers-reduced-motion: reduce) { .phero__slide, .phero__slide img { transition: none; } .phero__slide img { transform: none; } } .ornament-rule svg.ornament--curl { width: 48px; height: 48px; } svg.ornament--inline { width: 16px; height: 16px; display: inline-block; }