/* ========================================================================== Japanese Canadian Artists Directory — HIGH FIDELITY stylesheet Body face: IBM Plex Sans. Display face: under review — --font-display is set from Noto Serif JP here and swapped live by hf_fontswitch.js so the client can compare six candidates in place. Any replacement stack MUST keep Noto Serif JP in the fallback chain: --font-display also renders every Japanese glyph in this design (hanko seals, tategaki rails, 日本語). Vermillion on washi paper. HF additions: hanko seals, tategaki rails, film grain, real imagery, orchestrated motion. ========================================================================== */ :root { /* Colour — washi paper, sumi ink, seal vermillion, a whisper of gold */ --paper: #F5F1E8; --paper-2: #ECE5D5; --white: #FDFBF6; --ink: #17130D; --ink-2: #453E32; --muted: #6E6554; /* darkened from #7C7362 for WCAG AA on --paper (5.1:1) */ --vermillion: #A63126; --vermillion-deep: #7C2118; --gold: #A8842F; --line: #D9D1BE; --footer-bg: #14110B; /* Type */ --font-display: "Noto Serif JP", "Hiragino Mincho ProN", Georgia, serif; --font-body: "IBM Plex Sans", "Segoe UI", sans-serif; /* Layout */ --site-max: 1240px; --gutter: clamp(1.25rem, 4vw, 3.5rem); --radius: 6px; /* Elevation */ --shadow-1: 0 1px 2px rgba(23,19,13,.06), 0 4px 14px rgba(23,19,13,.07); --shadow-2: 0 2px 4px rgba(23,19,13,.08), 0 14px 34px rgba(23,19,13,.12); /* Motion */ --ease-out: cubic-bezier(.22,.8,.36,1); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } /* clip, not hidden: hidden would make a scroll container and break the sticky header. Needed because the closed mobile drawer is parked off the right edge and its contents would otherwise widen the page. */ html { scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Film grain — fixed, whisper-quiet */ body::after { content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } img { max-width: 100%; } a { color: var(--vermillion); text-decoration-thickness: 1px; text-underline-offset: .22em; } a:hover { color: var(--vermillion-deep); } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; letter-spacing: .01em; } p { margin: 0 0 1em; } :focus-visible { outline: 2px solid var(--vermillion); outline-offset: 3px; border-radius: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--ink); color: var(--white); padding: .6rem 1rem; } .skip-link:focus { left: .5rem; top: .5rem; } .wrap { max-width: var(--site-max); margin-inline: auto; padding-inline: var(--gutter); } /* ---------- Signature: the hanko seal ---------- */ .seal { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; background: var(--vermillion); color: var(--white); font-family: var(--font-display); font-size: 1.35rem; line-height: 1; border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(253,251,246,.55), inset 0 0 0 5px var(--vermillion), var(--shadow-1); transform: rotate(-3deg); user-select: none; } .seal--sm { width: 40px; height: 40px; font-size: 1rem; border-radius: 5px; } .seal--lg { width: 84px; height: 84px; font-size: 2.1rem; border-radius: 8px; } /* Eyebrow label with seal-red tick */ .eyebrow { display: flex; align-items: center; gap: .65rem; font-size: 2rem; font-weight: 300; letter-spacing: .22em; text-transform: uppercase; color: var(--vermillion); margin-bottom: 0rem; } /*.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--vermillion); }*/ /* Vertical Japanese rail (tategaki) */ .v-rail { writing-mode: vertical-rl; font-family: var(--font-display); letter-spacing: .42em; color: var(--muted); font-size: .95rem; user-select: none; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .85rem 1.7rem; border: 1px solid var(--ink); background: var(--ink); color: var(--white); border-radius: var(--radius); cursor: pointer; text-decoration: none; transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s, color .18s; } .btn:hover { background: var(--vermillion); border-color: var(--vermillion); color: var(--white); transform: translateY(-1px); box-shadow: var(--shadow-1); } .btn:active { transform: translateY(0); } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--white); border-color: var(--ink); } .btn--accent { background: var(--vermillion); border-color: var(--vermillion); } .btn--accent:hover { background: var(--vermillion-deep); border-color: var(--vermillion-deep); } /* ---------- Media frames (img with graceful fallback) ---------- */ .media { position: relative; overflow: hidden; background: linear-gradient(135deg, #E4DCC9, #D3C9B2); } .media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out), filter .6s var(--ease-out); } .media--portrait { aspect-ratio: 4 / 5; } /* 4:5 everywhere a person is pictured — directory tiles, the profile portrait and the photo editor all crop the same way, so what you upload is what you see wherever you see it. */ .media--card { aspect-ratio: 4 / 5; } .media--wide { aspect-ratio: 16 / 9; } .media--square { aspect-ratio: 1 / 1; } /* Fallback label when an image fails (JS adds .is-broken) */ .media.is-broken { display: flex; align-items: center; justify-content: center; } .media.is-broken::after { content: attr(data-label); font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); } /* ========================================================================== Header ========================================================================== */ .site-header { background: rgba(245,241,232,.92); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 90; } /* The blur lives on .header-main, not .site-header. backdrop-filter makes an element a containing block for its position:fixed descendants, and the mobile drawer is a child of .site-header — on the header it would anchor the drawer to the header box instead of the viewport. Same look, one level down. */ .header-main { backdrop-filter: blur(10px); } .utility-bar { border-bottom: 1px solid var(--line); font-size: .82rem; background: var(--ink); color: #B9B0A0; } .utility-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; padding-block: .45rem; } .utilityleft { display: flex; align-items: center;} .utilityright { display: flex; align-items: center;} .utility-bar a { color: #D8D0BF; text-decoration: none; } .utility-bar a:hover { color: var(--white); } .site-search { display: flex; align-items: center; gap: .4rem; } .site-search label { position: absolute; left: -9999px; } .site-search input { font: inherit; font-size: .82rem; border: none; border-bottom: 1px solid #4A4438; background: transparent; color: var(--white); padding: .2rem; width: 11rem; } .site-search input::placeholder { color: #9C927F; } .site-search input:focus { outline: none; border-bottom-color: var(--vermillion); } .site-search button { border: none; background: none; cursor: pointer; color: #B9B0A0; display: inline-flex; padding: .2rem; } .site-search button:hover { color: var(--white); } /* Utility-bar links — 日本語, Contact, Artist Login */ .utility-nav { display: flex; align-items: center; gap: 1.25rem; list-style: none; margin: 0 0 0 1.6rem; padding: 0; } .utility-nav a { font-size: .74rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; } .utility-nav .lang a { font-family: var(--font-display); font-size: .82rem; letter-spacing: .06em; text-transform: none; } .utility-nav .is-cta a { border: 1px solid #4A4438; border-radius: 999px; padding: .25rem .85rem; transition: background .15s, border-color .15s, color .15s; } .utility-nav .is-cta a:hover { background: var(--vermillion); border-color: var(--vermillion); color: var(--white); } .social-icons { display: flex; gap: .7rem; list-style: none; margin: 0; padding: 0; margin-top:6px; margin-left:20px; } .social-icons a { display: inline-flex; transition: transform .15s var(--ease-out); } .social-icons a:hover { transform: translateY(-1px); } .social-icons svg { width: 15px; height: 15px; } .header-main .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: .9rem; } .brand { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--ink); } /* jcad-logo-wide.png is the horizontal lockup — mark plus wordmark, 3.5:1 — so .brand-wordmark below stays hidden or the name would appear twice. */ .brand img { width: 226px; height: auto; } .brand-wordmark {display:none;} .brand-wordmark strong { font-family: var(--font-display); font-size: 1.02rem; display: block; line-height: 1.25; } .brand-wordmark span { font-size: .72rem; color: var(--muted); letter-spacing: .14em; } .primary-nav ul { display: flex; flex-wrap: wrap; gap: .2rem 1.5rem; list-style: none; margin: 0; padding: 0; } .primary-nav a { position: relative; color: var(--ink); text-decoration: none; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding-block: .35rem; } .primary-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--vermillion); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease-out); } .primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { transform: scaleX(1); } .primary-nav a[aria-current="page"] { color: var(--vermillion); } .primary-nav .lang a { color: var(--muted); font-family: var(--font-display); } .user-chip { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; text-decoration: none; } .avatar-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--vermillion); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; } /* ========================================================================== Lightbox — selected work, opened large Built on demand by hf_lightbox.js; the page ships no markup for it. ========================================================================== */ .lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 5vw, 4rem); opacity: 0; visibility: hidden; transition: opacity .28s var(--ease-out), visibility .28s; } body.lightbox-open .lightbox { opacity: 1; visibility: visible; } .lightbox__scrim { position: absolute; inset: 0; background: rgba(12,10,7,.985); backdrop-filter: blur(4px); /* stops page text ghosting through behind the work */ cursor: zoom-out; } .lightbox__figure { position: relative; z-index: 1; margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 1rem; transform: scale(.97); transition: transform .28s var(--ease-out); } body.lightbox-open .lightbox__figure { transform: scale(1); } .lightbox__figure img { max-width: 100%; /* leave room for the caption line under the image */ max-height: calc(100vh - 10rem); width: auto; height: auto; object-fit: contain; border-radius: 2px; box-shadow: 0 24px 70px rgba(0,0,0,.55); background: var(--ink); } .lightbox__figure figcaption { display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; justify-content: center; color: #D8D0BF; font-size: .85rem; text-align: center; } .lightbox__caption { font-family: var(--font-display); font-style: italic; } .lightbox__count { font-size: .72rem; letter-spacing: .18em; color: #9C927F; font-variant-numeric: tabular-nums; } .lightbox__close, .lightbox__nav { position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(216,208,191,.28); background: rgba(23,19,13,.6); color: #EDE6D6; cursor: pointer; transition: background .16s, border-color .16s, color .16s, transform .16s var(--ease-out); } .lightbox__close:hover, .lightbox__nav:hover { background: var(--vermillion); border-color: var(--vermillion); color: var(--white); } .lightbox__close { top: 1.1rem; right: 1.1rem; width: 44px; height: 44px; border-radius: var(--radius); font-size: 1.05rem; } .lightbox__nav { top: 50%; margin-top: -26px; width: 52px; height: 52px; border-radius: 50%; font-size: 1.9rem; line-height: 1; padding-bottom: .18em; font-family: var(--font-display); } .lightbox__nav--prev { left: 1.1rem; } .lightbox__nav--next { right: 1.1rem; } .lightbox__nav:hover { transform: scale(1.06); } .lightbox.is-instant, .lightbox.is-instant * { transition: none !important; } @media (prefers-reduced-motion: reduce) { .lightbox, .lightbox__figure { transition-duration: .01ms; } } @media (max-width: 640px) { .lightbox__nav { width: 42px; height: 42px; margin-top: -21px; font-size: 1.5rem; } .lightbox__nav--prev { left: .4rem; } .lightbox__nav--next { right: .4rem; } .lightbox__close { top: .5rem; right: .5rem; } .lightbox__figure img { max-height: calc(100vh - 12rem); } } /* ========================================================================== Mobile navigation — hamburger + slide-in drawer Below 1100px the utility bar and the primary nav are replaced by a single right-aligned hamburger. The drawer repeats the utility bar contents on the ink field at the top, with the main nav stacked beneath — the order the client signed off on. Markup: header() in tools/build_pages.py. Behaviour: hf_mobilenav.js. ========================================================================== */ .nav-toggle { display: none; position: relative; margin-left: auto; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); cursor: pointer; transition: background .18s var(--ease-out), border-color .18s var(--ease-out); } .nav-toggle:hover { background: var(--paper-2); border-color: var(--muted); } .nav-toggle .bar { position: absolute; left: 50%; width: 22px; height: 2px; margin-left: -11px; background: var(--ink); border-radius: 2px; transition: transform .28s var(--ease-out), opacity .16s linear, background .18s; } .nav-toggle .bar:nth-child(1) { top: 15px; } .nav-toggle .bar:nth-child(2) { top: 22px; } .nav-toggle .bar:nth-child(3) { top: 29px; } .nav-toggle[aria-expanded="true"] { background: var(--vermillion); border-color: var(--vermillion); } .nav-toggle[aria-expanded="true"] .bar { background: var(--white); } .nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; transform: scaleX(.3); } .nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mnav-scrim { position: fixed; inset: 0; z-index: 190; background: rgba(23,19,13,.55); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-out), visibility .3s; } body.mnav-open .mnav-scrim { opacity: 1; visibility: visible; } .mnav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 200; width: min(88vw, 390px); display: flex; flex-direction: column; background: var(--paper); border-left: 1px solid var(--line); box-shadow: -18px 0 44px rgba(23,19,13,.22); transform: translateX(100%); visibility: hidden; overflow-y: auto; overscroll-behavior: contain; transition: transform .34s var(--ease-out), visibility .34s; } body.mnav-open .mnav { transform: translateX(0); visibility: visible; } /* Drawer head — logo + close control */ .mnav__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.35rem; background: var(--ink); color: #D8D0BF; } /* The mark is black-on-transparent artwork; brightness(0) flattens it to pure black and invert(1) flips that to white for the ink field. */ .mnav__logo { display: inline-flex; } .mnav__logo img { width: 96px; height: auto; display: block; filter: brightness(0) invert(1); } .mnav__close { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #4A4438; border-radius: var(--radius); background: transparent; color: #D8D0BF; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background .16s, color .16s, border-color .16s; } .mnav__close:hover { background: var(--vermillion); border-color: var(--vermillion); color: var(--white); } /* Utility block — everything from the utility bar */ .mnav__utility { background: var(--ink); color: #B9B0A0; padding: 0 1.35rem 1.35rem; } .mnav__utility a { color: #D8D0BF; text-decoration: none; } .mnav__utility a:hover { color: var(--white); } .mnav__utility .user-chip { font-size: .85rem; } .mnav__utility .site-search { display: flex; } .mnav__utility .site-search input { width: 100%; font-size: .95rem; padding: .5rem .2rem; } .mnav__utility .utility-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .75rem 1.1rem; margin: 1.1rem 0 0; } .mnav__utility .utility-nav a { font-size: .78rem; } .mnav__utility .utility-nav .is-cta { flex: 1 1 100%; } .mnav__utility .utility-nav .is-cta a { display: block; text-align: center; color: var(--white); padding: .6rem 1rem; border-color: var(--vermillion); background: var(--vermillion); } .mnav__utility .utility-nav .is-cta a:hover { background: var(--vermillion-deep); border-color: var(--vermillion-deep); } .mnav__utility .social-icons { margin: 1.1rem 0 0; } .mnav__utility .social-icons a { align-items: center; gap: .5rem; font-size: .74rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; } .mnav__utility .social-icons svg { width: 17px; height: 17px; } /* Main nav list */ .mnav__main { padding: .6rem 0 1.2rem; } .mnav__label { font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding: 1.1rem 1.35rem .5rem; margin: 0; } .mnav__main ul { list-style: none; margin: 0; padding: 0; } .mnav__main li + li { border-top: 1px solid var(--line); } .mnav__main a { display: flex; align-items: baseline; gap: .8rem; padding: .95rem 1.35rem; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; transition: background .16s var(--ease-out), padding-left .2s var(--ease-out), color .16s; } .mnav__main a .jp { font-family: var(--font-display); font-size: .78rem; color: var(--muted); font-weight: 500; display:none} .mnav__main a:hover { background: var(--white); padding-left: 1.7rem; color: var(--vermillion); } .mnav__main a[aria-current="page"] { color: var(--vermillion); box-shadow: inset 3px 0 0 var(--vermillion); } .mnav__foot { margin-top: auto; padding: 1.1rem 1.35rem 1.6rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); } @media (max-width: 1100px) { .site-header > .utility-bar { display: none; } .site-header .primary-nav { display: none; } .nav-toggle { display: block; } .header-main .wrap { gap: 1rem; padding-block: .7rem; } /* The nav is gone below this width, so the lockup keeps its full size and only gives way on narrow phones, where it yields to the hamburger rather than shrinking to an illegible strip. */ .brand img { width: min(226px, 58vw); } } @media (min-width: 1101px) { .mnav, .mnav-scrim { display: none; } } @media (prefers-reduced-motion: reduce) { .mnav, .mnav-scrim, .nav-toggle .bar, .mnav__main a { transition-duration: .01ms; } } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: var(--footer-bg); color: #EDE6D6; margin-top: 6rem; } .footer-main .wrap { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; padding-block: 4rem 3rem; } .footer-brand img { width: 216px; max-width: 100%; filter: brightness(0) invert(1) sepia(.15); margin-bottom: 1.1rem; } .footer-brand p { color: #A79C89; font-size: .85rem; max-width: 32ch; } .footer-brand .jp { font-family: var(--font-display); color: #EDE6D6; letter-spacing: .18em; font-size: 1rem; } .footer-social { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.4rem; padding: .5rem .95rem .5rem .6rem; border: 1px solid #2B2619; border-radius: 999px; color: #EDE6D6; text-decoration: none; font-size: .82rem; font-weight: 600; transition: background .15s, border-color .15s, color .15s; } .footer-social:hover { background: var(--vermillion); border-color: var(--vermillion); color: var(--white); } .footer-social svg { width: 20px; height: 20px; flex: 0 0 auto; } .footer-nav h3 { font-family: var(--font-body); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: #9C927F; margin: 0 0 1.1rem; } .footer-nav ul { list-style: none; margin: 0; padding: 0; } .footer-nav li { margin-bottom: .55rem; } .footer-nav a { color: #EDE6D6; text-decoration: none; font-size: .88rem; } .footer-nav a:hover { color: var(--vermillion); } /* ---- Supporters ---------------------------------------------------------- The band keeps its place between the links and the legal bar, but sits on sumi rather than paper — a white stripe here cut the footer in two. #100D08 is a half-step below --footer-bg, enough to read as its own plane without a hard rule doing the work. Logos are the white versions in sponsors/. */ .sponsor-band { background: #100D08; border-top: 1px solid #2B2619; } .sponsor-band .wrap { --sp-u: clamp(26px, 4.4vw, 50px); padding-block: 2.4rem; text-align: center; } .sponsor-label { font-family: var(--font-body); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: #9C927F; margin: 0 0 1.1rem; } .sponsor-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.75rem clamp(1.5rem, 4vw, 3.5rem); } /* Optical balance. All four files export at 98px tall, but the marks carry very different ink, so one shared height makes them look mismatched: JCCC is a solid block and has to sit smaller than the line-art marks, and the Powell Street brush mark reads faint, so it is given back a little height rather than a brightness filter that would blow out the texture. --sp-k is each logo against the Canada Council lockup; --sp-u above is the unit the whole group is drawn from. Fluid, so the row scales with the site width instead of jumping — it holds one line down to about 560px. */ .sponsor-logos img { height: calc(var(--sp-k) * var(--sp-u)); width: auto; max-width: 100%; transition: transform .2s var(--ease-out); } .sponsor-logos img:hover { transform: translateY(-2px); } .sponsor-logos img[data-sponsor="ccfa"] { --sp-k: 1; } .sponsor-logos img[data-sponsor="jccc"] { --sp-k: .76; } .sponsor-logos img[data-sponsor="najc"] { --sp-k: .92; } .sponsor-logos img[data-sponsor="psfs"] { --sp-k: .96; } @media (prefers-reduced-motion: reduce) { .sponsor-logos img { transition: none; } .sponsor-logos img:hover { transform: none; } } @media (max-width: 640px) { .sponsor-band .wrap { padding-block: 2rem; } } .footer-bottom { border-top: 1px solid #2B2619; font-size: .8rem; color: #A79C89; } .footer-bottom .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding-block: 1.2rem; } .footer-bottom nav ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; } .footer-bottom a { color: #A79C89; text-decoration: none; } .footer-bottom a:hover { color: #EDE6D6; } /* ========================================================================== Shared page pieces ========================================================================== */ /* Editorial hero with seal + vertical rail */ .page-hero { position: relative; overflow: hidden; padding: 4rem 0 4rem; border-bottom: 1px solid var(--line); background: radial-gradient(1200px 500px at 85% -10%, rgba(166,49,38,.06), transparent 60%), var(--paper); } .page-hero .wrap { display: flex; align-items: center; justify-content: space-between; gap: 3rem; } .page-hero h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); max-width: 15ch; } .page-hero .lede { font-size: 1.15rem; color: var(--ink-2); max-width: 54ch; margin: 0; } .page-hero .hero-seal { display: flex; align-items: center; gap: 1.4rem; flex: 0 0 auto; } .hero-kanji { position: absolute; right: -0.08em; top: -0.18em; font-family: var(--font-display); font-size: clamp(9rem, 20vw, 17rem); line-height: 1; color: rgba(166,49,38,.06); pointer-events: none; user-select: none; } /* Breadcrumbs */ .breadcrumbs { font-size: .8rem; padding-block: 1.4rem 0; } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; margin: 0; padding: 0; color: var(--muted); } .breadcrumbs li + li::before { content: "›"; margin-right: .55rem; color: var(--muted); } .breadcrumbs a { color: var(--ink-2); text-decoration: none; } .breadcrumbs a:hover { color: var(--vermillion); } .breadcrumbs [aria-current="page"] { color: var(--ink); } /* Reveal-on-scroll */ .reveal { opacity: 0; transform: translateY(22px); } .reveal.in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } .reveal.d1.in { transition-delay: .08s; } .reveal.d2.in { transition-delay: .16s; } .reveal.d3.in { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ========================================================================== §01 — Directory ========================================================================== */ .directory-layout { display: grid; grid-template-columns: 1fr 310px; gap: 3rem; padding-block: 2.75rem 4.5rem; } .filter-bar { border-bottom: 1px solid var(--line); padding-block: 1.4rem 1.5rem; background: var(--paper); } .filter-bar-inner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 2rem; } .filter-search { position: relative; flex: 1 1 280px; max-width: 420px; } .filter-search label { position: absolute; left: -9999px; } .filter-search input { width: 100%; font: inherit; padding: .75rem 2.6rem .75rem 1rem; border: 1px solid var(--ink); background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-1); } .filter-search input:focus { outline: 2px solid var(--vermillion); outline-offset: 2px; } .filter-search .search-ico { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .predictive { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--white); border: 1px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-2); list-style: none; margin: 0; padding: .4rem 0; z-index: 40; display:none; } .predictive li a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 1rem; text-decoration: none; color: var(--ink); } .predictive li a:hover { background: var(--paper); } .predictive .disc { color: var(--muted); font-size: .78rem; } .predictive mark { background: none; color: var(--vermillion); font-weight: 700; } .predictive .hint { padding: .45rem 1rem; font-size: .76rem; color: var(--muted); border-top: 1px solid var(--line); } /* Chips wrap onto as many rows as they need — no side-scrolling, so nothing is hidden off the right edge of the filter bar. */ .chip-row { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1.1rem 0 0; padding: 0 0 .4rem; } .chip { flex: 0 0 auto; } .chip button { font: inherit; font-size: .8rem; padding: .42rem .95rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s, color .15s, transform .15s var(--ease-out); } .chip button:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); } .chip button[aria-pressed="true"] { background: var(--vermillion); border-color: var(--vermillion); color: var(--white); box-shadow: var(--shadow-1); } /* Solid colours rather than opacity: the translucent count fell below 4.5:1 contrast. */ .chip .count { color: #6B6355; margin-left: .25rem; } .chip button:hover .count { color: inherit; } .chip button[aria-pressed="true"] .count { color: var(--white); } /* Grouped filters — discipline, generation, legacy */ .filter-groups { display: flex; flex-direction: column; gap: .3rem; margin-top: 1.1rem; } .filter-group { display: grid; grid-template-columns: 8.5rem 1fr; align-items: start; gap: 0 1rem; } .filter-group-label { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding-top: .58rem; } .filter-group .chip-row { margin-top: 0; } .filter-group--legacy .chip button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); } .artist-card.is-hidden { display: none; } .no-results { border: 1px dashed var(--line); border-radius: var(--radius); background: var(--white); padding: 2.5rem 2rem; text-align: center; color: var(--muted); font-size: .9rem; margin: 0; } .no-results strong { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); margin-bottom: .35rem; } .result-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem 0 1.4rem; font-size: .85rem; color: var(--muted); } .sort-control { display: flex; align-items: center; gap: .5rem; } .sort-control select { font: inherit; font-size: .82rem; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); } .artist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; list-style: none; margin: 0; padding: 0; } .artist-card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); } .artist-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } .artist-card:hover .media img { transform: scale(1.045); } .artist-card a { text-decoration: none; color: inherit; } .artist-card .media { border-bottom: 1px solid var(--line); } .artist-card-body { padding: 1.1rem 1.2rem 1.25rem; } /* Legacy marker — lives INSIDE .media, which is already position:relative, so it is anchored to the image rather than to whichever ancestor happens to be transformed at the time. */ .legacy-pill { position: absolute; top: .7rem; left: .7rem; z-index: 2; font-size: .62rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; background: var(--vermillion); color: var(--white); padding: .22rem .6rem; border-radius: 999px; box-shadow: 0 1px 6px rgba(23,19,13,.28); } .artist-card h3 { font-size: 1.2rem; margin: 0 0 .15rem; } .artist-card .disc { color: var(--vermillion); font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; display: block; } .artist-card .loc { color: var(--muted); font-size: .8rem; display: block; margin-top: .4rem; } .pagination { display: flex; align-items: center; gap: .4rem; margin-top: 2.75rem; list-style: none; padding: 0; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.35rem; height: 2.35rem; padding-inline: .65rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); text-decoration: none; font-size: .82rem; transition: border-color .15s, background .15s; } .pagination a:hover { border-color: var(--ink); } .pagination [aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--white); } .pagination .disabled { color: var(--muted); background: transparent; } /* Right rail */ .rail { display: flex; flex-direction: column; gap: 1.8rem; } .rail-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-1); } .rail-card h2 { font-size: 1.12rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); margin: 0 0 1.1rem; } .rail-card .media { border-radius: 4px; margin-bottom: 1rem; } .rail-card .who { font-size: .8rem; color: var(--muted); display: block; margin-bottom: 1.1rem; } .rail-card--join { background: var(--ink); color: #EDE6D6; border-color: var(--ink); } .rail-card--join h2 { color: var(--white); border-bottom-color: #2B2619; } .rail-card--join p { color: #A79C89; font-size: .85rem; } /* Newsletter sign-up card */ .rail-card--newsletter { background: var(--paper-2); border-color: var(--line); } .rail-card--newsletter p { font-size: .85rem; color: var(--ink-2); } .newsletter-form { display: flex; flex-direction: column; gap: .6rem; } .newsletter-form label { position: absolute; left: -9999px; } .newsletter-form input { font: inherit; font-size: .85rem; width: 100%; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); transition: border-color .15s, box-shadow .15s; } .newsletter-form input:focus { outline: none; border-color: var(--vermillion); box-shadow: 0 0 0 3px rgba(166,49,38,.14); } .newsletter-form .btn { justify-content: center; } .rail-card .privacy-note { font-size: .7rem; color: var(--muted); margin: .75rem 0 0; } /* Instagram card */ .rail-card--instagram { background: linear-gradient(160deg, rgba(166,49,38,.08), transparent 62%), var(--white); border-color: var(--vermillion); } .rail-card--instagram .ig-handle { display: flex; align-items: center; gap: .6rem; font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: .6rem; } .rail-card--instagram .ig-handle svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--vermillion); } .rail-card--instagram p { font-size: .85rem; color: var(--ink-2); } /* ========================================================================== §02 — Artist profile ========================================================================== */ .profile-hero { position: relative; overflow: hidden; padding: 3.5rem 0; border-bottom: 1px solid var(--line); background: radial-gradient(900px 420px at 90% 0%, rgba(166,49,38,.05), transparent 60%), var(--paper); } .profile-hero-grid { display: grid; grid-template-columns: 340px 1fr auto; gap: 3rem; align-items: start; } .profile-side { min-width: 0; } .profile-portrait { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-2); } .profile-portrait img { transition: transform .8s var(--ease-out); } .profile-portrait:hover img { transform: scale(1.03); } .profile-side .photo-credit { font-size: .76rem; color: var(--muted); margin: .6rem 0 0; } .profile-side .social-row { margin-top: 1.2rem; } .profile-hero h1 { font-size: clamp(2.6rem, 4.5vw, 4rem); margin-bottom: .3rem; } .profile-hero .jp-name { font-family: var(--font-display); font-size: 1.2rem; color: var(--muted); letter-spacing: .28em; display: block; margin-bottom: 1.4rem; } .profile-disc-line { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--vermillion); font-weight: 700; margin-bottom: 1.1rem; } .profile-disc-line a { color: inherit; text-decoration: none; } .profile-disc-line a:hover, .profile-disc-line a:focus-visible { text-decoration: underline; } .tag-row { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1rem 0 1.6rem; padding: 0; } .tag-row li { font-size: .76rem; border: 1px solid var(--line); background: var(--white); border-radius: 999px; padding: .28rem .85rem; color: var(--ink-2); } /* Disciplines and free tags share the strip but are not the same thing. */ .tag-row li.is-discipline { border-color: var(--vermillion); background: rgba(166,49,38,.08); color: var(--vermillion-deep); font-weight: 600; } /* Each chip links to the directory pre-filtered to itself. */ .tag-row li a { color: inherit; text-decoration: none; } .tag-row li:hover, .tag-row li:focus-within { border-color: var(--vermillion); } .tag-row li a:hover, .tag-row li a:focus-visible { color: var(--vermillion-deep); text-decoration: underline; } .bio { max-width: 62ch; } .bio .lead { font-size: 1.12rem; color: var(--ink-2); } .bio .lead::first-letter { font-family: var(--font-display); font-size: 3.4em; float: left; line-height: .82; padding-right: .12em; color: var(--vermillion); } .social-row { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 1.6rem 0 0; padding: 0; } .social-row a { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; text-decoration: none; color: var(--ink); border: 1px solid var(--ink); border-radius: 999px; padding: .5rem 1.05rem; background: var(--white); transition: background .15s, color .15s, transform .15s var(--ease-out); } .social-row a:hover { background: var(--ink); color: var(--white); transform: translateY(-1px); } .social-row svg { width: 14px; height: 14px; } .meta-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); margin: 3rem 0 0; } .meta-strip > div { padding: 1.4rem 1.6rem; border-left: 1px solid var(--line); } .meta-strip > div:first-child { border-left: none; padding-left: 0; } .meta-strip dt { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; } .meta-strip dd { margin: 0; font-family: var(--font-display); font-size: 1.15rem; } .meta-strip dd a { color: inherit; text-decoration: none; } .meta-strip dd a:hover, .meta-strip dd a:focus-visible { color: var(--vermillion); text-decoration: underline; } .gallery-section { padding-block: 3.5rem; } .gallery-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.9rem; } .gallery-head h2 { font-size: 1.9rem; margin: 0; } .gallery-head span { font-size: .8rem; color: var(--muted); } /* Photographer grid — asymmetric */ .gallery-images { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 1.1rem; list-style: none; margin: 0; padding: 0; } /* The figure must fill the cell it was given, otherwise a span-1x2 tile is only as tall as its own image and leaves a hole under itself. */ .gallery-images > li { min-height: 0; } .gallery-images figure { margin: 0; height: 100%; position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-1); } .gallery-images .media { width: 100%; height: 100%; } .gallery-images figure:hover img { transform: scale(1.05); } .gallery-images .span-2x2 { grid-column: span 2; grid-row: span 2; } .gallery-images .span-2x1 { grid-column: span 2; } .gallery-images .span-1x2 { grid-row: span 2; } .gallery-images figcaption { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; background: linear-gradient(transparent, rgba(20,17,11,.82)); color: var(--white); font-size: .8rem; padding: 2.2rem 1rem .7rem; opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); } .gallery-images figure:hover figcaption, .gallery-images figure:focus-within figcaption { opacity: 1; transform: none; } /* The whole tile is the trigger — a real button, so it is keyboard-operable and announced as one thing rather than as an image beside a control. */ .lightbox-open { display: block; width: 100%; height: 100%; padding: 0; border: none; background: none; cursor: zoom-in; color: inherit; font: inherit; } .lightbox-open::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(23,19,13,0); transition: background .25s var(--ease-out); } .gallery-images figure:hover .lightbox-open::after, .gallery-media figure:hover .lightbox-open::after, .lightbox-open:focus-visible::after { background: rgba(23,19,13,.14); } /* Musician media gallery */ .gallery-media { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; list-style: none; margin: 0 0 1.6rem; padding: 0; } .gallery-media figure { position: relative; } .gallery-media figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); } .gallery-media figure:hover img { transform: scale(1.04); } .media-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-1); } .media-card h3 { font-size: 1.12rem; margin: 0 0 .15rem; } .media-card .album { font-size: .8rem; color: var(--muted); display: block; margin-bottom: 1.1rem; } .audio-player { display: flex; align-items: center; gap: 1rem; } .play-btn { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; border: none; background: var(--vermillion); color: var(--white); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, transform .15s var(--ease-out), box-shadow .15s; } .play-btn:hover { background: var(--vermillion-deep); transform: scale(1.06); box-shadow: var(--shadow-1); } .waveform { flex: 1; display: flex; align-items: center; gap: 3px; height: 38px; } .waveform i { flex: 1; background: var(--line); border-radius: 2px; min-height: 18%; transition: background .2s; } .waveform i:nth-child(3n) { height: 55%; } .waveform i:nth-child(4n) { height: 82%; } .waveform i:nth-child(5n) { height: 42%; } .waveform i:nth-child(7n) { height: 95%; } .media-card:hover .waveform i { background: #C9BFA9; } .track-time { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; } .video-feature { border-radius: var(--radius); overflow: hidden; position: relative; margin: 0; box-shadow: var(--shadow-2); } .video-feature .video-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; } .video-badge span { width: 76px; height: 76px; border-radius: 50%; background: rgba(20,17,11,.75); color: var(--white); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); transition: transform .2s var(--ease-out), background .2s; } .video-feature:hover .video-badge span { transform: scale(1.08); background: var(--vermillion); } .video-feature figcaption { position: absolute; bottom: 0; inset-inline: 0; z-index: 2; padding: 2.5rem 1.4rem 1rem; background: linear-gradient(transparent, rgba(20,17,11,.85)); color: var(--white); font-size: .85rem; } /* Artist statement pulled straight from the record — used where a profile has a statement worth setting apart from the biography. */ .statement-feature { border-left: 3px solid var(--vermillion); padding: .35rem 0 .35rem 1.6rem; margin: 0 0 2.2rem; max-width: 62ch; } .statement-feature h2 { font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0 0 .7rem; } .statement-feature p { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.6; color: var(--ink-2); } .statement-feature p:last-child { margin-bottom: 0; } .related-section { border-top: 1px solid var(--line); padding: 3.5rem 0 4.5rem; } .related-section h2 { font-size: 1.9rem; margin-bottom: 1.75rem; } /* ========================================================================== §03 — Registration ========================================================================== */ .register-layout { display: grid; grid-template-columns: 1fr 330px; gap: 3.5rem; padding-block: 3.5rem 4.5rem; } .reg-form section, .manage-form section { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.2rem; margin-bottom: 2rem; box-shadow: var(--shadow-1); } .form-section-title { font-size: 1.45rem; margin: 0 0 .3rem; } .form-step-label { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--vermillion); display: block; margin-bottom: .45rem; font-weight: 700; } .form-section-note { font-size: .85rem; color: var(--muted); margin-bottom: 1.9rem; } .field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.35rem 1.6rem; } .field-stack { display: grid; gap: 1.35rem; } .field { display: flex; flex-direction: column; gap: .4rem; } .field--full { grid-column: 1 / -1; } .field label { font-size: .82rem; font-weight: 600; letter-spacing: .03em; } .field label .req { color: var(--vermillion); } .field .hint { font-size: .76rem; color: var(--muted); } .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"], .field input[type="password"], .field input[type="number"], .field select, .field textarea { font: inherit; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); transition: border-color .15s, box-shadow .15s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--vermillion); box-shadow: 0 0 0 3px rgba(166,49,38,.14); } .field textarea { resize: vertical; min-height: 7.5rem; } .char-count { font-size: .76rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; } .disc-pick { display: flex; flex-wrap: wrap; gap: .5rem; border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; background: var(--paper); } .disc-pick button { font: inherit; font-size: .8rem; padding: .34rem .85rem; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .disc-pick button:hover { border-color: var(--ink); } .disc-pick button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); } .repeat-row { display: grid; grid-template-columns: 180px 1fr auto; gap: .8rem; margin-bottom: .8rem; align-items: center; } .repeat-row select, .repeat-row input { font: inherit; padding: .6rem .8rem; min-width: 0; /* grid children default to min-content, which overflows narrow screens */ border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); } .row-remove { border: none; background: none; color: var(--muted); cursor: pointer; font-size: .8rem; text-decoration: underline; } .row-remove:hover { color: var(--vermillion); } .add-row { font: inherit; font-size: .82rem; font-weight: 600; color: var(--vermillion); background: none; border: 1px dashed var(--vermillion); border-radius: var(--radius); padding: .55rem 1.1rem; cursor: pointer; transition: background .15s; } .add-row:hover { background: rgba(166,49,38,.06); } .drop-zone { border: 2px dashed var(--line); border-radius: var(--radius); background: var(--paper); padding: 3rem 2rem; text-align: center; color: var(--ink-2); transition: border-color .2s, background .2s; } .drop-zone:hover { border-color: var(--vermillion); background: #FBF8F0; } .drop-zone strong { display: block; font-family: var(--font-display); font-size: 1.25rem; margin-bottom: .4rem; } .drop-zone .types { font-size: .78rem; color: var(--muted); } .drop-zone .btn { margin-top: 1.4rem; } .check-row { display: flex; align-items: flex-start; gap: .65rem; font-size: .85rem; color: var(--ink-2); margin-bottom: .8rem; } .check-row input { margin-top: .25rem; accent-color: var(--vermillion); width: 16px; height: 16px; } /* ---------- Form controls added for the Artists.json field set ---------- */ /* Standalone label for controls that aren't a single input (chip pickers, region rows) — matches .field label, but is not a