/* ========================================================================= Peter Perch Fish Art Studio A naturalist field-guide identity: river-green ink, muted brass, specimen-tag labels, artwork presented like plates on paper. ========================================================================= */ /* Noto Sans for Latin scripts, plus Noto Sans JP / KR / SC so Japanese, Korean and Chinese also render in Noto (the right regional variant is chosen per language below via html:lang()). */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans+KR:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif:ital,wght@0,400;0,500;1,400;1,500&family=Noto+Serif+JP:wght@400;500&family=Noto+Serif+KR:wght@400;500&family=Noto+Serif+SC:wght@400;500&display=swap'); :root { /* Palette — pulled from water and reel, not warm clay */ --paper: #EFF0E8; /* cool riverstone paper */ --paper-deep: #E5E7DC; /* recessed paper */ --ink: #16211C; /* green-black ink */ --river: #1F3D36; /* deep water — primary */ --river-2: #37584E; /* mid water */ --reed: #5E6B60; /* muted secondary text */ --brass: #A9803F; /* fishing brass — the accent */ --brass-deep: #83612F; --line: #CBCDBF; /* hairline on paper */ --line-soft: #D9DBCF; /* Type — Noto Sans for headings, wordmark and labels; Noto Serif for the reading text and tagline. --cjk / --cjk-serif list the CJK fallbacks; the active language reorders them (see html:lang() rules below) so Han characters use the correct regional glyphs. */ --cjk: 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC'; --cjk-serif: 'Noto Serif JP', 'Noto Serif KR', 'Noto Serif SC'; --font-display: 'Noto Sans', var(--cjk), system-ui, -apple-system, sans-serif; --font-label: 'Noto Sans', var(--cjk), system-ui, -apple-system, sans-serif; --font-serif: 'Noto Serif', var(--cjk-serif), Georgia, 'Times New Roman', serif; --font-body: var(--font-serif); /* Scale */ --measure: 62ch; --gutter: clamp(1.25rem, 4vw, 3.5rem); --edge: clamp(1.25rem, 5vw, 5rem); } *, *::before, *::after { box-sizing: border-box; } /* Put the matching regional Noto CJK font first for the active language, so shared Han characters render with the right (Japanese / Korean / Chinese) glyph shapes. Set by in js/i18n.js. */ html:lang(ja) { --cjk: 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC'; --cjk-serif: 'Noto Serif JP', 'Noto Serif KR', 'Noto Serif SC'; } html:lang(ko) { --cjk: 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans SC'; --cjk-serif: 'Noto Serif KR', 'Noto Serif JP', 'Noto Serif SC'; } html:lang(zh) { --cjk: 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR'; --cjk-serif: 'Noto Serif SC', 'Noto Serif JP', 'Noto Serif KR'; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); line-height: 1.6; font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } /* ---- Specimen label: the signature small-type treatment ---------------- */ .tag { font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-deep); font-weight: 500; } /* ========================================================================= Masthead ========================================================================= */ .masthead { padding: clamp(1.75rem, 4vw, 2.75rem) var(--edge) 0; } .masthead__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); } .wordmark { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1; letter-spacing: -0.01em; color: var(--river); text-decoration: none; } /* Decorative "Peter Perch" logo to the left of the wordmark text. Sized to 1em so it matches the text height and scales with it. */ .wordmark::before { content: ""; display: inline-block; vertical-align: middle; height: 1.8em; aspect-ratio: 1453 / 1284; margin-right: 0.45rem; background: url("/images/peter-perch-text-logo.svg") no-repeat center / contain; } /* Logo-only header mark: no text beside it, so drop the trailing gap. */ .wordmark--mark::before { margin-right: 0; } .wordmark em { font-style: italic; color: var(--brass-deep); } .nav { display: flex; flex-wrap: wrap; gap: 0.6rem clamp(1rem, 2.5vw, 2rem); align-items: baseline; } .nav a { font-family: var(--font-label); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--river-2); padding-bottom: 2px; border-bottom: 1.5px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; } .nav a:hover, .nav a[aria-current="page"] { color: var(--river); border-color: var(--brass); } /* Language dropdown (🌐) — a native select styled to match the nav labels. */ .langswitch { display: inline-flex; align-items: center; align-self: center; } .langswitch::before { content: "🌐"; font-size: 0.85rem; margin-right: 0.35rem; opacity: 0.75; } .langswitch__select { font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--river-2); background-color: transparent; border: 1px solid var(--line); border-radius: 0; padding: 0.28rem 1.5rem 0.28rem 0.5rem; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2337584E' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 0.6rem; transition: border-color 0.2s ease, color 0.2s ease; } .langswitch__select:hover, .langswitch__select:focus { color: var(--river); border-color: var(--brass); outline: none; } /* Visually hidden, but read by screen readers (e.g. the dropdown's label). */ .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; } /* Tagline row */ .masthead__lede { display: flex; align-items: baseline; gap: 0.9rem; padding: 1.1rem 0 0; } .masthead__lede .rule { flex: 0 0 auto; width: clamp(1.5rem, 5vw, 3.5rem); height: 1px; background: var(--brass); transform: translateY(-0.35em); } .tagline { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem); color: var(--river-2); margin: 0; } /* Studio name now leads the tagline line: shown upright in the display sans, with the tagline itself staying serif italic after the dash. */ .tagline__studio { font-family: var(--font-display); font-style: normal; font-weight: 500; color: var(--river); } .tagline__studio em { font-style: italic; color: var(--brass-deep); } .tagline__sep { font-style: normal; color: var(--brass); padding: 0 0.1em; } /* ========================================================================= Plate gallery (Work) ========================================================================= */ .gallery { padding: clamp(2rem, 5vw, 3.5rem) var(--edge) 4rem; } .plate-grid { columns: 3 300px; column-gap: var(--gutter); } @media (max-width: 900px) { .plate-grid { columns: 2 280px; } } @media (max-width: 560px) { .plate-grid { columns: 1; } } .plate { break-inside: avoid; margin-bottom: var(--gutter); display: block; text-decoration: none; color: inherit; } .plate__frame { background: #fff; padding: 0.75rem; border: 1px solid var(--line-soft); box-shadow: 0 1px 0 rgba(22,33,28,0.03); transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s ease; overflow: hidden; } .plate__frame img { width: 100%; transition: transform 0.6s cubic-bezier(.2,.7,.2,1); } .plate:hover .plate__frame { transform: translateY(-4px); box-shadow: 0 14px 30px -18px rgba(22,33,28,0.4); } .plate:hover .plate__frame img { transform: scale(1.03); } .plate__label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.15rem 0; } .plate__title { font-family: var(--font-display); font-weight: 500; font-size: 1.08rem; color: var(--ink); line-height: 1.2; } .plate__count { font-family: var(--font-label); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--reed); white-space: nowrap; } /* Empty state */ .empty { max-width: var(--measure); margin: 2rem 0; padding: 2rem; border: 1px dashed var(--line); background: var(--paper-deep); } .empty h2 { font-family: var(--font-display); margin: 0 0 0.5rem; color: var(--river); } .empty p { margin: 0.35rem 0; color: var(--reed); } .empty code { font-family: var(--font-label); font-size: 0.85em; background: #fff; padding: 0.1em 0.4em; border: 1px solid var(--line); } /* ========================================================================= Project detail ========================================================================= */ .project { padding: clamp(2rem, 5vw, 3.5rem) var(--edge) 5rem; } .project__head { max-width: var(--measure); margin-bottom: clamp(1.75rem, 4vw, 2.75rem); } .project__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); line-height: 1.05; color: var(--river); margin: 0.5rem 0 0; letter-spacing: -0.015em; } .project__desc { font-family: var(--font-serif); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.22rem); line-height: 1.7; color: var(--river-2); margin: 1.1rem 0 0; max-width: var(--measure); } .project__desc p { margin: 0 0 1rem; } .plates { display: flex; flex-direction: column; gap: clamp(1.5rem, 4vw, 2.75rem); max-width: 1100px; } .project__img { background: #fff; padding: clamp(0.6rem, 1.5vw, 1rem); border: 1px solid var(--line-soft); width: 100%; } /* Video */ .video { max-width: 1100px; margin-top: clamp(1.5rem, 4vw, 2.75rem); } .video__frame { position: relative; padding-top: 56.25%; background: var(--ink); border: 1px solid var(--line-soft); } .video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .backlink { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-label); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--river-2); text-decoration: none; } .backlink:hover { color: var(--brass-deep); } .backlink::before { content: "←"; } /* ========================================================================= About ========================================================================= */ .about { padding: clamp(2rem, 5vw, 3.5rem) var(--edge) 5rem; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; } @media (max-width: 760px) { .about { grid-template-columns: 1fr; } } .about__body { max-width: var(--measure); } .about__body h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); color: var(--river); margin: 0.4rem 0 1.2rem; line-height: 1.1; } .about__body p { font-family: var(--font-serif); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); line-height: 1.75; color: var(--river-2); margin: 0 0 1.1rem; } .about__portrait { background: #fff; padding: 0.75rem; border: 1px solid var(--line-soft); position: sticky; top: 2rem; } /* ========================================================================= Contact ========================================================================= */ .contact { padding: clamp(2rem, 5vw, 3.5rem) var(--edge) 5rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; } @media (max-width: 760px) { .contact { grid-template-columns: 1fr; } } .contact__intro { max-width: 42ch; } .contact__intro h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); color: var(--river); margin: 0.4rem 0 1rem; line-height: 1.1; } .contact__intro p { font-family: var(--font-display); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); line-height: 1.7; color: var(--river-2); margin: 0 0 1rem; } .contact__intro a { color: var(--brass-deep); } .form { background: #fff; border: 1px solid var(--line-soft); padding: clamp(1.25rem, 3vw, 2rem); } .field-row { margin-bottom: 1.25rem; } .field-row label { display: block; font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-deep); margin-bottom: 0.45rem; } .field-row input, .field-row textarea { width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 0; padding: 0.7rem 0.8rem; } .field-row textarea { min-height: 150px; resize: vertical; line-height: 1.6; } .field-row input:focus, .field-row textarea:focus { outline: none; border-color: var(--brass); background: #fff; } .form__submit { font-family: var(--font-label); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--river); color: var(--paper); border: 1px solid var(--river); border-radius: 0; padding: 0.8rem 1.5rem; cursor: pointer; transition: background 0.2s ease, transform 0.05s ease; } .form__submit:hover { background: var(--brass); border-color: var(--brass); } .form__submit:active { transform: translateY(1px); } .form__submit:disabled { opacity: 0.55; cursor: default; } .form__note { font-family: var(--font-body); font-size: 0.85rem; color: var(--reed); margin: 0.9rem 0 0; } .form__msg { margin-top: 1rem; font-size: 0.92rem; display: none; } .form__msg.show { display: block; } .form__msg.ok { color: var(--river); } .form__msg.err { color: #9B3B2E; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ========================================================================= Footer ========================================================================= */ .footer { padding: 2.25rem var(--edge) 3rem; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .footer a { color: var(--river-2); text-decoration: none; border-bottom: 1px solid transparent; } .footer a:hover { border-color: var(--brass); color: var(--river); } .footer .tag { color: var(--reed); } /* ========================================================================= Motion / a11y ========================================================================= */ :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } .reveal { opacity: 0; transform: translateY(14px); } .reveal.in { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } }