/* ========================================================================== siris-light.css — THE PLASTER SYSTEM -------------------------------------------------------------------------- Load AFTER siris.css and siris-v2.css. Opt in per page with . WHY THIS EXISTS Black was doing too much work. It is also the one colour that appears nowhere in the paintings: sampling all six sitters plus the hero, every dominant cluster falls in hue 23–45 — umber, sienna, ochre — and the darkest tone in the entire body of work is #1a170e, a warm brown-black. There is no #000 anywhere in Siris Hill's painting. So this palette is not invented. It is measured from the work, the way the Hockney Foundation's yellows and blues are measured from Hockney. It also happens to be the wall colour of an old-master gallery, which is the room this work belongs in. MEASURED SOURCE VALUES (10-cluster quantise across the corpus) #1a170e 14.0% #614222 12.6% #43371f 11.4% #261e11 11.2% #7d5e35 11.1% #0a0804 10.0% #312515 8.2% #3d2915 8.0% #a48556 7.4% #c8b182 6.2% ========================================================================== */ body.v2-light{ /* ---- ground: the light end of the artist's own range ---- */ --plaster-000:#f5f1e8; /* page ground — warm chalk, never #fff */ --plaster-100:#efe9dc; /* alternate band */ --plaster-200:#e6ddcb; /* raised surface, cards */ --plaster-300:#d8cdb6; /* hairlines and edges */ /* ---- ink: sampled, not invented. #1a170e is the darkest tone that actually occurs in the paintings. ---- */ --umber-900:#1a170e; --umber-700:#312515; --umber-500:#614222; --sienna:#7d5e35; --ochre:#a48556; --chalk-ochre:#c8b182; /* ---- text ladder on plaster ---- */ --on-light-1:#1a170e; --on-light-2:rgba(26,23,14,.72); --on-light-3:rgba(26,23,14,.52); --on-light-4:rgba(26,23,14,.16); background:var(--plaster-000); color:var(--on-light-1); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } body.v2-light ::selection{ background:var(--ochre); color:var(--plaster-000); } /* -------------------------------------------------------------------------- TYPOGRAPHY on plaster. Same shapes as the dark system — only the ladder changes — so the two grounds are recognisably one site. -------------------------------------------------------------------------- */ body.v2-light .v2-eyebrow{ color:var(--on-light-3); } body.v2-light .v2-hero-title, body.v2-light .v2-section-title, body.v2-light .section-title{ color:var(--umber-900); } body.v2-light .v2-sub, body.v2-light .v2-lead, body.v2-light .v2-body{ color:var(--on-light-1); } body.v2-light .v2-caption{ color:var(--on-light-2); } body.v2-light .v2-rule{ background:var(--sienna); opacity:.9; } /* The letter line keeps its private, hand-written register — on plaster it reads as ink on paper, which is what a letter actually is. */ body.v2-light .v2-letter{ color:var(--umber-700); } body.v2-light .v2-letter::before{ background:var(--sienna); opacity:1; } body.v2-light [data-v2-wipe].is-wiping::after{ background:var(--sienna); } body.v2-light a{ color:var(--umber-500); } body.v2-light .v2-cta{ color:var(--umber-900); border-bottom-color:var(--on-light-4); } body.v2-light .v2-cta:hover, body.v2-light .v2-cta:focus-visible{ color:var(--sienna); border-bottom-color:var(--sienna); } body.v2-light a:focus-visible, body.v2-light button:focus-visible{ outline:2px solid var(--sienna); outline-offset:3px; } /* -------------------------------------------------------------------------- SURFACES -------------------------------------------------------------------------- */ body.v2-light .v2-card{ background:var(--plaster-200); border-color:var(--plaster-300); } body.v2-light .v2-card:hover, body.v2-light .v2-card:focus-visible{ background:var(--plaster-100); border-color:var(--sienna); } body.v2-light .v2-card__title{ color:var(--umber-900); } body.v2-light .v2-card__meta{ color:var(--on-light-3); } /* A painting on a plaster wall needs a shadow that reads as depth in a lit room, not as a drop-shadow on a screen. Warm, low, and short. */ body.v2-light .plate{ background:var(--plaster-200); box-shadow:0 22px 60px rgba(26,23,14,.18), 0 2px 6px rgba(26,23,14,.10); } body.v2-light .v2-invitation{ color:var(--on-light-3); } body.v2-light .v2-invitation:hover, body.v2-light .v2-invitation:focus-visible{ color:var(--umber-900); } body.v2-light .v2-invitation__chevron{ border-color:var(--on-light-4); } body.v2-light .site-footer{ background:var(--plaster-100); border-top:1px solid var(--plaster-300); } /* -------------------------------------------------------------------------- THE RECORD on plaster -------------------------------------------------------------------------- */ body.v2-light .record__entry{ border-top-color:var(--on-light-4); } body.v2-light .record__entry:last-child{ border-bottom-color:var(--on-light-4); } body.v2-light a.record__entry:hover, body.v2-light a.record__entry:focus-visible{ background:rgba(125,94,53,.06); } body.v2-light .record__yr{ color:var(--on-light-4); } body.v2-light a.record__entry:hover .record__yr{ color:var(--sienna); } body.v2-light .record__title{ color:var(--umber-900); } body.v2-light .record__where{ color:var(--on-light-2); } body.v2-light .record__tag{ color:var(--on-light-3); } body.v2-light .record__entry--peak .record__yr, body.v2-light .record__entry--peak .record__tag{ color:var(--sienna); } /* -------------------------------------------------------------------------- THE RAIL on plaster -------------------------------------------------------------------------- */ body.v2-light .rail a{ color:var(--on-light-3); } body.v2-light .rail a:hover, body.v2-light .rail a:focus-visible{ color:var(--umber-900); } body.v2-light .rail [aria-current="page"]{ color:var(--sienna); } body.v2-light .rail [aria-current="page"]::before{ background:var(--sienna); } @media (max-width:1200px){ body.v2-light .rail{ background:var(--plaster-000); } } /* -------------------------------------------------------------------------- FORMS -------------------------------------------------------------------------- */ body.v2-light .ml-input{ color:var(--umber-900); border-bottom-color:var(--on-light-4); } body.v2-light .ml-input::placeholder{ color:var(--on-light-3); } body.v2-light .ml-input:focus{ border-bottom-color:var(--sienna); } body.v2-light .ml-btn{ color:var(--umber-900); border-bottom-color:var(--on-light-4); } body.v2-light .ml-btn:hover{ color:var(--sienna); border-bottom-color:var(--sienna); } body.v2-light .v2-skip{ background:var(--chip-bg); color:var(--chip-fg); }