/* ========================================================================== Lee Johnson Art site stylesheet Type: Marcellus (display) and Karla (text), both self-hosted. Edit the tokens in :root to shift the whole site at once. ========================================================================== */ /* --- Fonts (self-hosted: faster, private, no outside dependency) --------- */ @font-face { font-family: "Marcellus"; src: url("../fonts/marcellus-400.woff2") format("woff2"); font-weight: 400; font-display: swap; font-style: normal; } @font-face { font-family: "Karla"; src: url("../fonts/karla-400.woff2") format("woff2"); font-weight: 400; font-display: swap; font-style: normal; } @font-face { font-family: "Karla"; src: url("../fonts/karla-500.woff2") format("woff2"); font-weight: 500; font-display: swap; font-style: normal; } :root { /* --- Color (taken from the Lee Johnson Art logo) -------------------- */ --bone: #EAE1DA; /* page background: the 30 North cream, a step down */ --sand: #E2D8CF; /* alternating section background */ --shell: #D9CDC3; /* image mats, quiet blocks */ --line: #CDC0B5; /* hairlines */ --ink: #0C1B2D; /* headings, primary text */ --ink-soft: #4C5866; /* body copy */ /* Measured, not eyeballed. The old #8C8B89 read 2.64:1 on the cream and 2.27:1 on the sand band, against a 4.5:1 standard for text this size. This passes on both grounds with room to spare, and it is the same warm-grey family so nothing about the palette changes. */ --ink-muted: #5A5652; /* captions, meta */ --accent: #061426; /* the logo navy */ --rule: rgba(6, 20, 38, 0.20); /* navy hairline, quiet */ --rule-strong: rgba(6, 20, 38, 0.45); /* navy hairline, present */ --accent-soft: #13253A; --white: #FFFFFF; --linen: var(--bone); /* older name, kept so nothing breaks */ /* --- Type ------------------------------------------------------------- */ /* The page ground is not a tile any more. It is Lee's own photograph of a cold-press sheet, laid over the whole page once at cover size and pinned so it does not move: no repeat, therefore nothing to line up and nothing to recognise. It lives on and everything above it is either transparent or a translucent tint, so the same sheet runs behind the header, the bands and the footer without a seam anywhere. The file is greyscale and centred on white, and it multiplies, so the colour comes from --bone underneath rather than from the photograph. */ --sheet: url("../img/tex/sheet-wide.jpg"); /* The same sheet, centred on mid grey so it can be blended onto dark ground with hard-light. Used by every navy surface on the site. */ --relief: url("../img/tex/sheet-relief.jpg"); --navy: #1B3047; --serif: "Marcellus", Georgia, "Times New Roman", serif; --sans: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* --- Space ------------------------------------------------------------ */ --gutter: clamp(1.25rem, 5vw, 4rem); --section: clamp(3.25rem, 7.5vw, 6.75rem); --max: 1320px; --max-text: 62ch; } /* --- Reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html { background-color: var(--linen); } /* One sheet, fitted to the width of the page. Set to 100% of the width with the height left to follow, so the photograph keeps its own proportions: fitted across, not stretched to a window shape. It spans the page exactly once, so there is no side-to-side join anywhere. Down the page it continues, and its top and bottom edges were cross-faded into each other when the file was made, so the join has nothing to see. It lives on the page, not on a pinned layer, so it scrolls with the content the way ink sits on paper rather than sliding underneath it. */ body { margin: 0; background-color: var(--linen); background-image: var(--sheet); background-size: 100% auto; background-position: top center; background-repeat: repeat-y; background-blend-mode: multiply; color: var(--ink-soft); font-family: var(--sans); font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); line-height: 1.7; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } button { font: inherit; } /* --- Type scale --------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 400; line-height: 1.12; letter-spacing: 0.005em; margin: 0 0 0.5em; } h1 { font-size: clamp(2.5rem, 1.6rem + 4.4vw, 5rem); } h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); } h3 { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem); } p { margin: 0 0 1.15em; max-width: var(--max-text); } .lead { font-size: clamp(1.075rem, 1rem + 0.45vw, 1.3rem); color: var(--ink-soft); } .eyebrow { font-family: var(--serif); font-size: 0.82rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 1.4rem; } /* --- Layout ------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: 900px; } section { padding-block: var(--section); } .band--sand { background-color: var(--sand); } .rule { border: 0; border-top: 1px solid var(--line); margin: 0; } /* --- Header ------------------------------------------------------------- */ .site-header { position: relative; background: transparent; border-bottom: 1px solid transparent; transition: border-color 0.3s ease; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; } .brand { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; } .brand small { display: block; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.24em; color: var(--ink-muted); margin-top: 0.25rem; text-transform: uppercase; } .nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.2rem); } .nav a { text-decoration: none; font-family: var(--serif); font-size: 0.9rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft); padding-block: 0.35rem; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .nav a:hover { color: var(--ink); border-bottom-color: var(--ink); } .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); } /* On phones the pages stay across the top on their own row rather than collapsing into a menu button. If they do not fit, the row scrolls. */ @media (max-width: 820px) { .site-header__inner { flex-wrap: wrap; gap: 0; min-height: 0; padding-top: 0.6rem; } .brand { flex: 1 1 100%; } .nav { flex: 1 1 100%; justify-content: flex-start; gap: 1.15rem; margin-top: 0.55rem; padding-block: 0.15rem 0; border-top: 1px solid var(--rule); padding-top: 0.5rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .nav::-webkit-scrollbar { display: none; } .nav a { font-size: 0.7rem; letter-spacing: 0.05em; white-space: nowrap; padding-block: 0.3rem; } } @media (max-width: 440px) { .nav { gap: 0.62rem; } .nav a { font-size: 0.6rem; letter-spacing: 0.015em; } } /* --- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.9rem; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--ink); color: var(--ink); background: transparent; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .btn:hover { background: var(--ink); color: var(--linen); } .btn--solid { background: var(--accent); border-color: var(--accent); color: var(--white); } .btn--solid:hover { background: var(--ink); border-color: var(--ink); color: var(--linen); } .btn--quiet { border-color: var(--line); color: var(--ink-soft); } .btn--quiet:hover { border-color: var(--ink); background: transparent; color: var(--ink); } .btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; } .link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--ink); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid var(--line); padding-bottom: 0.35rem; transition: border-color 0.25s ease, gap 0.25s ease; } .link-arrow:hover { border-bottom-color: var(--ink); gap: 0.85rem; } /* --- Hero --------------------------------------------------------------- */ .hero { padding-block: clamp(2rem, 4vw, 3.5rem) 0; } @media (min-width: 900px) { } /* --- Section headings --------------------------------------------------- */ .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3.25rem); border-top: 1px solid var(--line); padding-top: 1.5rem; } .section-head h2 { margin: 0; } .section-head p { margin: 0; color: var(--ink-muted); font-size: 0.9rem; } .section-head .eyebrow { font-size: 0.82rem; letter-spacing: 0.22em; } /* --- Artwork grid ------------------------------------------------------- */ .grid-works { display: grid; gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.75rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } .grid-works--featured { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); } /* Every piece in this band is for sale and the heading above it says so, so the badge on each card would only repeat itself six times. It stays on the gallery, where availability is the thing that distinguishes one card from the next. */ .grid-works--featured .status { display: none; } @media (min-width: 980px) { .grid-works--featured { grid-template-columns: repeat(3, 1fr); } } .work { display: block; text-decoration: none; color: inherit; } .work__frame { background: var(--sand); overflow: hidden; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; } .work__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1); } .work:hover .work__frame img { transform: scale(1.028); } .work__meta { padding-top: 1.05rem; } .work__title { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); margin: 0 0 0.3rem; } .work__line { font-size: 0.82rem; color: var(--ink-muted); margin: 0; letter-spacing: 0.02em; } .work__price { font-size: 0.82rem; color: var(--ink-soft); margin: 0.45rem 0 0; } .status { display: inline-block; font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.25rem 0.6rem; border: 1px solid var(--line); color: var(--ink-muted); margin-top: 0.55rem; } .status--available { border-color: var(--accent); color: var(--accent); } /* --- Gallery filters ---------------------------------------------------- */ .filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; } .filters button { background: none; border: 1px solid var(--line); color: var(--ink-soft); padding: 0.55rem 1.15rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: all 0.2s ease; } .filters button:hover { border-color: var(--ink); color: var(--ink); } .filters button.is-active { background: var(--ink); border-color: var(--ink); color: var(--linen); } /* --- Artwork detail (lightbox panel) ------------------------------------ */ .detail-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(33, 30, 26, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; display: grid; place-items: center; padding: clamp(0.75rem, 3vw, 2.5rem); overflow-y: auto; } .detail-backdrop.is-open { opacity: 1; pointer-events: auto; } .detail { background: var(--linen); width: min(1100px, 100%); max-height: 92vh; overflow-y: auto; display: grid; grid-template-columns: 1fr; position: relative; transform: translateY(14px); transition: transform 0.35s ease; } .detail-backdrop.is-open .detail { transform: translateY(0); } @media (min-width: 860px) { .detail { grid-template-columns: 1.25fr 1fr; } } .detail__images { background: var(--sand); padding: clamp(1rem, 2.5vw, 2rem); display: grid; gap: 1rem; align-content: start; } .detail__body { padding: clamp(1.75rem, 3.5vw, 3rem); } .detail__specs { list-style: none; margin: 1.5rem 0; padding: 0; border-top: 1px solid var(--line); } .detail__specs li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; } .detail__specs span:first-child { color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; } .detail__close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; background: var(--linen); border: 1px solid var(--line); width: 40px; height: 40px; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--ink); } .detail__close:hover { background: var(--ink); color: var(--linen); } body.no-scroll { overflow: hidden; } /* --- Split blocks ------------------------------------------------------- */ .split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; align-items: start; } @media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; } .split--narrow-media { grid-template-columns: 0.8fr 1.2fr; } .split--reverse .split__media { order: 2; } } /* --- Commission CTA ----------------------------------------------------- */ .cta-band { background: var(--accent); color: #EDE7DC; } .cta-band h2, .cta-band .eyebrow { color: #FBF7F0; } .cta-band .eyebrow { color: rgba(251, 247, 240, 0.65); } .cta-band p { color: rgba(251, 247, 240, 0.85); } .cta-band .btn { border-color: rgba(251, 247, 240, 0.55); color: #FBF7F0; } .cta-band .btn:hover { background: #FBF7F0; color: var(--accent); border-color: #FBF7F0; } /* --- Steps -------------------------------------------------------------- */ .steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 0; } .steps li { counter-increment: step; display: grid; gap: 0.35rem 1.5rem; grid-template-columns: 3rem 1fr; padding: 1.5rem 0; border-top: 1px solid var(--line); } .steps li:last-child { border-bottom: 1px solid var(--line); } .steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--serif); font-size: 1.05rem; color: var(--accent); } .steps h3 { margin: 0 0 0.25rem; } .steps p { margin: 0; font-size: 0.95rem; } /* --- Price table -------------------------------------------------------- */ .price-list { list-style: none; padding: 0; margin: 1.5rem 0 0; border-top: 1px solid var(--line); } .price-list li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.85rem 0; border-bottom: 1px solid var(--line); } .price-list strong { font-weight: 500; color: var(--ink); } .price-list span { color: var(--ink-muted); font-size: 0.92rem; } /* --- Room photo strip --------------------------------------------------- */ .strip { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .strip figure { margin: 0; } .strip figcaption { font-size: 0.78rem; color: var(--ink-muted); margin-top: 0.7rem; } /* --- Quote -------------------------------------------------------------- */ .quote { border-left: 2px solid var(--accent); padding-left: clamp(1.25rem, 3vw, 2.25rem); } .quote p { font-family: var(--serif); font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); line-height: 1.4; color: var(--ink); } .quote cite { font-style: normal; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } /* --- Forms -------------------------------------------------------------- */ .form { display: grid; gap: 1.35rem; max-width: 720px; } .form__row { display: grid; gap: 1.35rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } } .field { display: grid; gap: 0.45rem; } .field label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); } .field input, .field select, .field textarea { font: inherit; font-size: 0.98rem; color: var(--ink); background: var(--white); border: 1px solid var(--line); padding: 0.85rem 1rem; border-radius: 0; width: 100%; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .field textarea { min-height: 150px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); } .field input[type="file"] { background: var(--sand); padding: 0.7rem; cursor: pointer; } .field .hint { font-size: 0.78rem; color: var(--ink-muted); } .form__note { font-size: 0.82rem; color: var(--ink-muted); max-width: var(--max-text); } .form-status { font-size: 0.9rem; padding: 0.9rem 1.1rem; border: 1px solid var(--line); background: var(--sand); display: none; } .form-status.is-visible { display: block; } .form-status.is-error { border-color: #A85A46; color: #7C3E2E; } /* --- Email capture ------------------------------------------------------ */ .signup { display: flex; flex-wrap: wrap; gap: 0.75rem; max-width: 560px; margin-top: 1.75rem; } .signup input { flex: 1 1 260px; } .signup .btn { flex: 0 0 auto; } /* --- Footer ------------------------------------------------------------- */ .site-footer { background: var(--sand); padding-block: clamp(3rem, 6vw, 5rem) 2rem; margin-top: 0; } .footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); } @media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } } .footer__grid h4, .footer__grid h2 { font-family: var(--serif); font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 1rem; } .footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; } .footer__links a { text-decoration: none; font-size: 0.92rem; color: var(--ink-soft); } .footer__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; } .footer__legal { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; justify-content: space-between; padding-top: 1.5rem; font-size: 0.76rem; color: var(--ink-muted); } .footer__legal a { color: var(--ink-muted); text-decoration: none; } .footer__legal a:hover { color: var(--ink); } /* --- Reveal on scroll --------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* --- Utilities ---------------------------------------------------------- */ .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; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--ink); color: var(--linen); padding: 0.75rem 1.25rem; } .skip-link:focus { left: 0; } .text-center { text-align: center; } .mx-auto { margin-inline: auto; } .stack > * + * { margin-top: 1.1rem; } .muted { color: var(--ink-muted); } .page-head { padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3.5rem); } .page-head p { max-width: 58ch; } /* ========================================================================== Full-bleed hero and overlay header (home page) ========================================================================== */ .brand { display: inline-flex; align-items: center; gap: 0.7rem; } .brand__mark { width: 46px; height: 24px; flex: 0 0 auto; } .brand__mark img { width: 100%; height: 100%; object-fit: contain; } .brand__text { display: block; } /* The homepage header is the same header as everywhere else. It used to be fixed and transparent with near-white links, which was correct when the hero was a full-bleed photo. The hero is cream now, so white links on cream meant the menu bar was invisible until you scrolled past the hero. */ body.home .site-header { background: color-mix(in srgb, var(--bone) 94%, transparent); backdrop-filter: saturate(180%) blur(10px); } /* Staggered featured row, the way a gallery hangs a wall */ @media (min-width: 980px) { .grid-works--featured > *:nth-child(even) { transform: translateY(2.75rem); } .grid-works--featured { margin-bottom: 2.75rem; } } /* Mark used as a quiet section divider */ /* Header mark swaps to the light version while it floats over the hero */ .brand__mark { position: relative; } .brand__mark img { position: absolute; inset: 0; transition: opacity 0.3s ease; } .brand__mark--light { opacity: 0; } .brand__mark--light { opacity: 0; } .brand__mark--dark { opacity: 1; } /* The STUDIO line, set the way the logo sets it */ /* Placeholder block: a section that is deliberately unfinished */ .placeholder { border: 1px dashed var(--line); background: var(--sand); padding: clamp(1.75rem, 4vw, 3rem); text-align: center; display: grid; justify-items: center; } .placeholder p { max-width: 52ch; } .placeholder .btn-row { margin-top: 1.5rem; justify-content: center; } /* ========================================================================== Navy detailing: hairlines, frames, and accent marks The logo navy earns its keep as line work, not just as filled blocks. ========================================================================== */ /* Hairlines go navy instead of warm grey */ .section-head { border-top-color: var(--rule); } .rule { border-top-color: var(--rule); } .detail__specs, .detail__specs li, .price-list, .price-list li, .steps li, .footer__grid, .footer__legal { border-color: var(--rule); } .field input, .field select, .field textarea { border-color: var(--rule); } /* Eyebrows get a short navy dash */ .eyebrow { display: flex; align-items: center; gap: 0.75rem; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); opacity: 0.55; flex: 0 0 auto; } /* Navigation: a persistent hairline under the row, heavier under the page you are on */ .site-header__inner { position: relative; } .nav a { border-bottom-width: 2px; padding-bottom: 0.3rem; } .nav a[aria-current="page"] { border-bottom-color: var(--accent); } .nav a:hover { border-bottom-color: var(--rule-strong); } /* Artwork frames */ .work__frame { border: 1px solid var(--rule); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .work:hover .work__frame { border-color: var(--rule-strong); box-shadow: 0 22px 40px -32px rgba(10, 34, 66, 0.55); } .strip figure img, .split__media img, .detail__images img { border: 1px solid var(--rule); } /* A reusable outlined box */ .frame-box { border: 1px solid var(--rule); padding: clamp(1.5rem, 3.5vw, 2.75rem); } .placeholder { border-color: var(--rule); } /* Quote: navy rule, navy mark */ .quote { border-left-color: var(--accent); } /* Footer sits under a navy line */ .site-footer { border-top: 1px solid var(--rule); } .footer__grid { border-bottom-color: var(--rule); } /* Section corner ticks: a small navy L on band edges, used sparingly */ .band--sand { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } /* ========================================================================== Hero: the painting hung on cream ========================================================================== */ /* The closed mobile nav panel sits just above the viewport; keep the header's own contents painting above it so nothing clips the wordmark. */ @media (max-width: 820px) { .nav { z-index: 1; } } /* Cards show the whole painting. Nothing is cropped to fit the grid. */ .work__frame { aspect-ratio: 1 / 1; background: var(--bone); padding: clamp(0.6rem, 1.4vw, 1.1rem); } .work__frame img { width: 100%; height: 100%; object-fit: contain; } .work:hover .work__frame img { transform: none; } /* Back link at the top of every page except home */ .back { padding-top: 1.35rem; } .back__link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 0.25rem; transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease; } .back__link:hover { color: var(--ink); border-bottom-color: var(--accent); gap: 0.75rem; } .back + .page-head { padding-top: clamp(1.25rem, 3vw, 2.25rem); } /* Marcellus sets wider than the face it replaced, so the header lockup needs to come down a step on small screens or it crowds the menu button. */ @media (max-width: 560px) { .brand { font-size: 1.02rem; letter-spacing: 0.11em; gap: 0.55rem; } .brand__mark { width: 38px; height: 20px; } .brand small { font-size: 0.55rem; letter-spacing: 0.2em; margin-top: 0.18rem; } } /* About: the portrait runs much taller than three short paragraphs, which left the text column stranded beside a column of empty cream. Cap the picture and give it the same hairline frame the artwork cards use. */ .split--narrow-media .split__media img { max-height: 520px; width: auto; margin-inline: auto; border: 1px solid var(--rule); } @media (max-width: 760px) { .split--narrow-media .split__media img { max-height: 400px; } } /* The availability badge sits on the right of the title line, not under it: the piece's name and whether you can buy it are one row of information. */ .work__row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.9rem; } .work__row .work__title { margin: 0; } .work__row .status { flex: 0 0 auto; margin: 0; } /* --- About the artist --------------------------------------------------- One text size throughout. The paragraphs were previously set at two sizes, which is what made the page read as a word processor document rather than a designed page. */ .about { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } @media (min-width: 860px) { .about { grid-template-columns: 0.8fr 1fr; } } .about__photo img, .about__slot { border: 1px solid var(--rule); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .about__slot { display: grid; place-content: center; text-align: center; gap: 0.4rem; background: var(--sand); background-image: var(--paper); background-size: var(--paper-size) var(--paper-size); color: var(--ink-muted); } .about__slot p { margin: 0; max-width: 22ch; font-family: var(--serif); font-size: 0.9rem; letter-spacing: 0.2em; text-transform: uppercase; } .about__slot-note { font-family: var(--sans) !important; font-size: 0.72rem !important; letter-spacing: 0.04em !important; text-transform: none !important; line-height: 1.7; } .about__text p { font-size: 1.06rem; line-height: 1.85; max-width: 52ch; margin: 0 0 1.5em; } .about__text .eyebrow { font-size: 0.82rem; } .about__sig { font-family: var(--serif); font-size: 0.78rem !important; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-muted); margin: 0 !important; } /* Quiet link: the one route to the unlisted commission terms. Deliberately understated. It sits below the inquiry form as a hairline-separated line, not a button, so it reads as a footnote rather than an offer. */ .quiet-link { margin: 2.25rem 0 0; padding-top: 1.15rem; border-top: 1px solid var(--rule); font-size: 0.82rem; letter-spacing: 0.04em; } .quiet-link a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; } .quiet-link a:hover, .quiet-link a:focus-visible { color: var(--ink); border-bottom-color: var(--rule-strong); } /* Commission terms page: each heading and its lines read as one unit, with a hairline between blocks so the page scans as a list of settled points. */ .terms-block { padding: 1.6rem 0; border-bottom: 1px solid var(--rule); } .terms-block:first-of-type { padding-top: 0; } .terms-block:last-of-type { border-bottom: 0; } .terms-block h2 { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 0.7rem; } .terms-block p { margin: 0 0 0.7rem; max-width: 60ch; } .terms-block p:last-child { margin-bottom: 0; } /* --- Inquiry prompts ---------------------------------------------------- */ /* The seven things worth telling him, listed under the lead on Commissions. Set in the same letterspaced uppercase as the form labels directly below, so the block and the form read as one piece of furniture rather than two. Two columns on a wide screen, one on a phone; the navy dash marker is the same mark the eyebrow labels use elsewhere on the site. */ .prompts { list-style: none; margin: 2.1rem 0 0; /* Ruled top and bottom so the block closes rather than floating in the gap above the form. */ padding: 1.35rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: grid; gap: 0.9rem 2.5rem; grid-template-columns: 1fr; } @media (min-width: 620px) { .prompts { grid-template-columns: 1fr 1fr; } } .prompts li { display: grid; grid-template-columns: 1.35rem 1fr; align-items: baseline; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } .prompts li::before { content: ""; display: block; width: 0.65rem; height: 1px; background: var(--rule-strong); transform: translateY(-0.28em); } /* When the prompt list closes the page head, the head's own bottom padding plus the list's rule leaves too much air before the first field. Pull the form up so the list reads as the form's caption. */ .page-head:has(.prompts) { padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem); } /* Sub-heads and lists inside a terms block: the What I take block needs two labelled groups, and a flat paragraph of six styles would not scan. */ /* Set in the serif, sentence case: the block's own h2 is already a small uppercase label, and a second uppercase label under it read as the louder of the two, which inverted the hierarchy. */ .terms-sub { font-family: var(--serif); font-size: 1rem; letter-spacing: 0.01em; color: var(--ink); margin: 0 0 0.45rem; } .terms-block .terms-sub + .terms-list { margin-bottom: 1.15rem; } .terms-block p + .terms-sub { margin-top: 1.15rem; } .terms-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem 2rem; grid-template-columns: 1fr; font-size: 0.93rem; } @media (min-width: 620px) { .terms-list { grid-template-columns: 1fr 1fr; } } .terms-list li { display: grid; grid-template-columns: 1.1rem 1fr; align-items: baseline; } .terms-list li::before { content: ""; display: block; width: 0.5rem; height: 1px; background: var(--rule-strong); transform: translateY(-0.3em); } /* --- Contact icons ------------------------------------------------------ Email and Instagram, drawn inline rather than loaded as images, so they arrive with the page and take the ink colour from whatever they sit on. The ring is what makes them read as something to press: bare glyphs this small look like decoration, and on a phone a 44px target is the difference between a tap that works and one that misses. */ .social { display: flex; align-items: center; gap: 1rem; } .social__link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 50%; color: var(--accent); text-decoration: none; transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease; } .social__link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; } .social__link:hover, .social__link:focus-visible { background: var(--accent); color: #FBF7F0; border-color: var(--accent); } /* On the navy commissions band the ring has to read against dark. */ .cta-band .social__link { border-color: rgba(251, 247, 240, 0.4); color: #FBF7F0; } .cta-band .social__link:hover { background: #FBF7F0; color: var(--accent); border-color: #FBF7F0; } /* --- About strip on the home page -------------------------------------- The full About page keeps the 4:5 portrait and the signature line. Here the text is the point, so it sits to the top rather than floating in the middle of a tall photo. */ /* The copy sits beside the portrait, centred against it, so the two read as one object rather than as a picture with a paragraph starting somewhere near its top corner. */ .home-about { align-items: center; } .home-about .about__text p { max-width: 46ch; } .home-about .about__text > :first-child { margin-top: 0; } /* --- Texture everywhere ------------------------------------------------- The header and footer were flat colour while the page between them carried the paper. That put a hard seam across the top and bottom of every page, which is exactly where it is most visible. Both now take the same ground. The header gives up its frosted translucency to do it: texture drawn over a blurred copy of whatever is scrolling underneath reads as smeared, not as paper. An opaque header is the cost of a continuous surface. */ /* The footer and the sand band are tints now, not fills: nothing scrolls under them, so the sheet behind can simply show through. The header cannot do that. It is sticky, so paintings pass underneath it, and anything less than opaque let them be seen sliding behind the menu. It is solid cream. Against a wash this quiet the join does not read the way a flat header over a hard tile did. */ .site-header, body.home .site-header { /* No background at all. The sheet is on the page underneath and shows straight through, which is what makes the top of the page part of the same surface as the rest of it. The cost is that the header no longer follows you down the page: a sticky bar has to be opaque, and an opaque bar cuts a rectangle out of a sheet that scrolls. */ background: transparent; backdrop-filter: none; } .site-footer { background-color: rgba(198, 183, 171, 0.42); } /* Footer copy was the worst contrast on the site at 1.74:1. */ .site-footer .muted { color: var(--ink-soft); } .footer__grid h4, .footer__grid h2 { color: var(--ink-soft); } .footer__legal { color: var(--ink-soft); } .band--sand { background-color: rgba(198, 183, 171, 0.34); } /* --- About strip: photo scale ------------------------------------------ On its own page the portrait can run tall. In the middle of a scroll it was setting the height of the whole section and pushing the copy into the middle of a lot of empty cream, so it is capped here. */ @media (min-width: 860px) { .home-about { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(2rem, 3.5vw, 3rem); } } /* Small enough to be a portrait beside the paragraph rather than a second picture competing with the paintings above it. The full About page keeps the large version. */ .home-about .about__photo { max-width: 230px; } .home-about .about__photo img { aspect-ratio: 4 / 5; } /* --- Featured row on the home page -------------------------------------- Three paintings, no heading over them, and the way through to the rest underneath rather than above. A visitor sees the work first and is offered more only once they have looked. */ .row-more { text-align: center; margin: clamp(0.5rem, 1.5vw, 1rem) 0 0; max-width: none; } /* --- About page: the full spread ---------------------------------------- Two spreads with the picture on opposite sides, the way a printed profile alternates, then the short creed on its own. */ .about--flip .about__photo { order: 2; } /* The slot is a placeholder, not the point of the section: cap it so it sits beside the list rather than setting the height of the whole band. */ .about--flip .about__photo { max-width: 380px; margin-inline: auto; } @media (min-width: 860px) { .about--flip { grid-template-columns: 1fr auto; } } @media (max-width: 859px) { .about--flip .about__photo { order: 0; } } /* Facts, not sentences. A label column that stays narrow and a value column that takes what is left, so the eye can run down either one. */ .facts { margin: 0; display: grid; gap: 0.85rem; } .facts > div { display: grid; grid-template-columns: 1fr; gap: 0.1rem 1.5rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--rule); } .facts > div:last-child { border-bottom: 0; padding-bottom: 0; } @media (min-width: 520px) { .facts > div { grid-template-columns: 8.5rem 1fr; align-items: baseline; } } .facts dt { font-family: var(--serif); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); } .facts dd { margin: 0; color: var(--ink); font-size: 0.98rem; } /* Three short promises. Set as statements with the claim in front, so each one can be read in a second and the rest is the reason for it. */ .creed { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; } .creed li { position: relative; padding-left: 1.6rem; font-size: 0.98rem; max-width: 68ch; } /* The dash is absolutely positioned rather than a grid column. As a grid item it split the sentence: the bold opener became one item and the rest of the text an anonymous one, which landed in the narrow column and set one word per line. */ .creed li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 0.65rem; height: 1px; background: var(--rule-strong); } .creed strong { font-weight: 500; color: var(--ink); } /* --- Softened corners --------------------------------------------------- Hard 90 degree corners on every image is the tell that nothing was done to them. The radius is small on purpose: enough to take the edge off, not enough to read as a rounded card. */ .work__frame, .work__frame img, .hero__hung, .hero__hung img, .about__photo img, .about__slot, .detail__images img, /* The mat around a painting gets a fraction more, so its curve sits outside the picture's rather than fighting it. */ .work__frame { border-radius: 7px; } /* iOS Safari has never handled a fixed background well: it repaints the layer on every scroll frame and stutters. Scrolling with the page is the lesser problem, and at cover size on a phone the sheet still never repeats. */ /* ========================================================================== Second pass: stacked header, full-bleed hero, columned gallery ========================================================================== */ /* --- Header: name over the pages ---------------------------------------- The name on its own line, centred, with the pages spread the full width underneath it. One wordmark on the site: it used to sit here and again in the hero, which read as the same thing said twice. */ .site-header > .wrap { display: grid; justify-items: center; gap: 1.15rem; padding-top: clamp(1.5rem, 3vw, 2.4rem); padding-bottom: clamp(1rem, 2vw, 1.5rem); } .site-header .brand { font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.5rem); } .site-header .brand small { text-align: center; } .site-header .nav { width: 100%; display: flex; justify-content: center; align-items: center; gap: clamp(1.5rem, 3.4vw, 3.25rem); max-width: 820px; border-top: 1px solid var(--rule); padding-top: 0.9rem; } .site-header .nav a { font-size: 0.78rem; letter-spacing: 0.18em; } @media (max-width: 820px) { .site-header > .wrap { gap: 0.9rem; padding-top: 1.2rem; } .site-header .nav { justify-content: flex-start; gap: 1.1rem; max-width: none; overflow-x: auto; scrollbar-width: none; margin-top: 0; } .site-header .nav::-webkit-scrollbar { display: none; } .site-header .nav a { font-size: 0.66rem; letter-spacing: 0.07em; } } /* Below about 400px the five pages needed 407px and got 350, so Contact sat off the edge of the row with nothing to say it was there. They wrap onto a second line instead of hiding: two visible rows beat one row with a secret. */ @media (max-width: 430px) { .site-header .nav { flex-wrap: wrap; justify-content: center; overflow-x: visible; row-gap: 0.5rem; column-gap: 1rem; } .site-header .nav a { font-size: 0.64rem; letter-spacing: 0.06em; } } /* --- Hero: one painting, edge to edge ----------------------------------- Sticky rather than fixed, so it holds while it is on screen and is simply gone once the page has passed it. The block after it carries the sheet, so it slides up and covers the painting rather than the painting fading. */ .hero-full { position: sticky; top: 0; z-index: 0; padding: 0; margin: 0; height: clamp(380px, 74vh, 760px); overflow: hidden; background: var(--shell); } .hero-full img { width: 100%; height: 100%; object-fit: cover; } /* A short wash at the foot of the picture. Without it the caption sat on whatever the painting happened to be doing there, which on Open Water is pale water. It covers the bottom sixth and nothing else, so the painting is untouched where anyone is actually looking. */ .hero-full::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; pointer-events: none; background: linear-gradient(to top, rgba(10, 22, 38, 0.42), rgba(10, 22, 38, 0)); } .hero-full__caption { z-index: 1; } .hero-full__caption { position: absolute; left: 0; right: 0; bottom: clamp(1.2rem, 3vw, 2.2rem); margin: 0; max-width: none; text-align: center; font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(253, 249, 246, 0.92); text-shadow: 0 1px 18px rgba(12, 27, 45, 0.55); } .after-hero { position: relative; z-index: 1; background-color: var(--linen); background-image: var(--sheet); background-size: 100% auto; background-position: top center; background-repeat: repeat-y; background-blend-mode: multiply; } /* --- Work grids: stacked columns, natural heights ------------------------ Multi-column rather than a row grid, so each painting keeps its own shape and the column heights fall where they fall. A tall piece stays tall and a wide one stays wide, which is the stacked look Lee marked. */ .grid-works { display: block; columns: 3; column-gap: clamp(1.25rem, 2.6vw, 2.25rem); } .grid-works--featured { columns: 3; } @media (max-width: 980px) { .grid-works, .grid-works--featured { columns: 2; } } @media (max-width: 620px) { .grid-works, .grid-works--featured { columns: 1; } } .grid-works .work { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: clamp(2rem, 4vw, 3.25rem); } /* The frame stops imposing a shape. The photograph decides the height. */ .grid-works .work__frame { aspect-ratio: auto; padding: clamp(0.5rem, 1.1vw, 0.9rem); background: var(--bone); } .grid-works .work__frame img { width: 100%; height: auto; object-fit: fill; } /* The staggered hang was a way of faking varied heights in an even grid. The heights are really varied now, so it would only knock the columns out of true. */ .grid-works--featured > *:nth-child(even) { transform: none; } .grid-works--featured { margin-bottom: 0; } /* --- Tagline under the hero --------------------------------------------- It used to sit on the painting. On Open Water that meant pale type on pale water, which is why Lee could not read it. On the sheet it has all the contrast it needs and the painting is left alone. */ .hero-line { margin: 0; max-width: none; text-align: center; padding-top: clamp(2rem, 4vw, 3.25rem); font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-muted); } .hero-line + section { padding-top: clamp(2rem, 4vw, 3rem); } /* The wash existed only to hold that type. Nothing sits on the picture now. */ .hero-full::after { content: none; } /* --- Commissions band --------------------------------------------------- A lighter navy with the sheet visibly across it. The page's own copy of the sheet is centred on white and multiplies, which is correct on cream and nearly invisible on navy: multiplying a dark colour by near-white barely moves it. The band uses a second file centred on mid grey and blended with hard-light, which takes its cue from the texture rather than from the colour underneath. Everything above mid grey lightens the navy and everything below it darkens, so the sheet's high points catch and its low points fall away, the way paper does under a raking light. The two files are the same photograph and the same vertical join, so the band and the page are unmistakably one surface. */ .cta-band { background-color: var(--navy); background-image: var(--relief); background-size: 100% auto; background-position: top center; background-repeat: repeat-y; background-blend-mode: hard-light; } .cta-band .btn { border-color: rgba(251, 247, 240, 0.6); } /* --- Every navy surface, one material ----------------------------------- The commissions band, the solid buttons and anything else filled navy all take the same lighter navy and the same sheet, blended the same way. The band and a button are then plainly cut from one thing rather than being a textured panel with flat chips sitting on it. Buttons size the sheet in pixels rather than to their own width. Fitting a whole sheet across a 200px button would blow the grain up to the size of the button; this shows a slice of the same surface at the same scale the band does. */ .btn--solid, .btn--solid:hover, .cta-band .btn:hover, .social__link:hover, .social__link:focus-visible { background-color: var(--navy); background-image: var(--relief); background-size: 1100px auto; background-position: center; background-repeat: repeat; background-blend-mode: hard-light; border-color: var(--navy); color: var(--white); } .btn--solid:hover { background-color: #142639; border-color: #142639; } .cta-band .btn:hover { background-color: #F3EDE6; color: var(--navy); border-color: #F3EDE6; background-image: none; } .social__link:hover, .social__link:focus-visible { color: #F3EDE6; } /* --- About page: portrait up, and room for two more pictures ------------- */ .about { align-items: start; } .about__more { display: grid; gap: clamp(1.25rem, 2.6vw, 2.25rem); grid-template-columns: 1fr; margin-top: clamp(2.5rem, 5vw, 4rem); } @media (min-width: 720px) { .about__more { grid-template-columns: 1fr 1fr; } } .about__more .about__slot { aspect-ratio: 4 / 3; border-radius: 5px; } /* --- Buttons that sit on the sheet rather than in it --------------------- An outlined button on a textured ground reads as a drawn rectangle, not as something to press: the paper runs straight through it, so nothing says the button is on top. Three things fix that and none of them is loud. A fill a shade lighter than the page, so the button is its own surface. A hairline of light along the top edge, which is what a raised thing does. And a short shadow underneath, tight and low-opacity, so it lifts a few millimetres and no more. */ .btn { background-color: #F3ECE5; border-color: var(--rule-strong); border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 7px 14px -9px rgba(10, 26, 45, 0.5), 0 1px 2px rgba(10, 26, 45, 0.08); transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease; } .btn:hover { background-color: var(--ink); color: var(--linen); border-color: var(--ink); transform: translateY(-1px); box-shadow: 0 12px 20px -10px rgba(10, 26, 45, 0.55), 0 2px 3px rgba(10, 26, 45, 0.12); } .btn:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(10, 26, 45, 0.18); } .btn:focus-visible { outline: 2px solid var(--rule-strong); outline-offset: 3px; } /* The navy one is the same object in the other material. The fill has to be restated here: the lifted .btn rule above sets a cream background and both selectors are one class deep, so whichever comes last wins. It came last, and the solid button went pale. */ .btn--solid { background-color: var(--navy); background-image: var(--relief); background-size: 1100px auto; background-position: center; background-repeat: repeat; background-blend-mode: hard-light; border-color: var(--navy); color: var(--white); border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 9px 18px -10px rgba(6, 20, 38, 0.7), 0 1px 2px rgba(6, 20, 38, 0.18); } .btn--solid:hover { transform: translateY(-1px); background-color: #142639; border-color: #142639; color: var(--white); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 24px -11px rgba(6, 20, 38, 0.75), 0 2px 4px rgba(6, 20, 38, 0.22); } /* On the navy band the same idea, inverted: a fill a shade lighter than the band rather than darker, and a shadow that still reads against navy. */ .cta-band .btn { background-color: rgba(243, 237, 230, 0.10); border-color: rgba(243, 237, 230, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 9px 18px -10px rgba(0, 0, 0, 0.55); } .cta-band .btn:hover { background-color: #F3EDE6; color: var(--navy); border-color: #F3EDE6; box-shadow: 0 14px 24px -11px rgba(0, 0, 0, 0.6); } /* --- One left edge, everywhere ------------------------------------------ Four pages set their content in a narrow centred column and two in the full one, so a heading started at 294px on some pages and 84px on others and the title jumped as you moved between them. Aligning only the headings made it worse: the head lined up and the form underneath it did not. So the narrow column stops being a narrow column. Every page now runs from the same left edge, and the things that genuinely need a short measure -- a paragraph, a form, a list of prompts -- get a width of their own instead of being centred inside a box. Left-aligned rather than centred was Lee's call, and it is the right one for a site whose headings are this large. */ .wrap--narrow { max-width: var(--max); } .lead { max-width: 62ch; } .prompts { max-width: 780px; } .form { max-width: 720px; } .terms-block, .terms-block + p { max-width: 78ch; } /* Not .split: on the contact page that class sits on the .wrap itself, and .wrap centres with auto margins, so capping its width pushed the whole column 150px to the right. The form inside it is capped instead. */ /* --- The hero fades into the sheet -------------------------------------- The sky dissolves into the paper and the water is left alone. Two reasons it is shaped this way rather than as an even veil. The top edge, where the painting met the header, was the thing that read as a photograph dropped onto the page; that is what the fade is for. And the darks in the water are what give Open Water its presence, so the ramp is finished by the horizon and everything below it is at full strength. It fades to the cream rather than to white because the painting sits directly on the page ground, which is also why the paper's tooth stays visible through the top of the sky. */ .hero-full img { -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.66) 26%, rgba(0, 0, 0, 0.95) 48%, rgba(0, 0, 0, 1) 100%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.66) 26%, rgba(0, 0, 0, 0.95) 48%, rgba(0, 0, 0, 1) 100%); }