/* ===================================================== FONTS — BPA (BuyPopArt) ===================================================== */ /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/anton/v27/1Ptgg87LROyAm3K8-C8QSw.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/anton/v27/1Ptgg87LROyAm3K9-C8QSw.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/anton/v27/1Ptgg87LROyAm3Kz-C8.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* BPA canonical font tokens (match design spec) */ --font-display: 'Anton', Impact, sans-serif; --font-ui: 'Inter', -apple-system, sans-serif; /* Backward-compat aliases used by style-V1.9.css and shared templates */ --font-title: var(--font-display); --font-title-accent: var(--font-ui); --font-body: var(--font-ui); /* Layout tokens — consumed by global-style-V1.9.css via var(--site-*, fallback) */ --site-bg: #FFFFFF; --site-header-bg: #FFFFFF; --site-nav-bg: #FFFFFF; --site-nav-border: #EDEDED; --site-footer-bg: #FFFFFF; --site-footer-border: transparent; --site-copyright-bg: #F5F5F5; --site-topbar-bg: #000000; --site-link: inherit; --site-btn: #000000; --site-btn-text: #FFFFFF; } /* ===================================================== BPA — Global font application Inter for all body / UI; Anton surfaces via --font-display ===================================================== */ body { font-family: var(--font-ui); -webkit-font-smoothing: antialiased; } /* ===== viewcart — cart state tokens (BPA) ===== */ :root { --cart-placeholder-bg: #F5F5F5; --cart-placeholder-border: #DCDCDC; --cart-placeholder-icon: #BEBEBE; --cart-alert-warning-text: #2A2A2A; --cart-alert-warning-bg: #F5F5F5; --cart-alert-warning-border:#000000; --cart-alert-warning-accent:#D4004C; --cart-surface: #F7F2E1; --cart-surface-border: #DCD3BF; --cart-inset: #F3EFE6; --cart-icon-bg: #E2DAC4; --cart-summary-ink: #2A2A2A; --cart-summary-ink-2: #555555; --cart-summary-accent: var(--lc, #D4004C); --cart-th-bg: #1A1A1A; --cart-th-color: #FFFFFF; } button { font-family: var(--font-ui); } /* BuyPopArt.com — site-specific CSS overrides */ /* Loaded by base.html for dns_domain_base == 'buypopart' */ /* ===================================================== BPA — Header logo ===================================================== */ .main-header .logo img { height: 50px; width: auto; max-width: 100%; } /* ===================================================== BPA — Design tokens ===================================================== */ :root { --lc: #D4004C; /* link / hover accent — pop-art rose */ --lv: #8B0032; /* visited link colour */ } /* ===================================================== BPA — Link hover: rising-fill effect ===================================================== */ a { position: relative; z-index: 0; } a::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 0; z-index: -1; background: var(--lc); opacity: .13; transition: height .38s cubic-bezier(.22,1,.36,1); } a:hover::before { height: 110%; } a:hover { color: var(--lc); } a:visited { color: var(--lv); } /* ===================================================== mouseover_effect_texts — opt-in class for text links (nav, footer, breadcrumb anchors; not image links or buttons) ===================================================== */ a.mouseover_effect_texts { transition: color 0.25s ease, opacity 0.25s ease; } a.mouseover_effect_texts:hover { opacity: 0.8; } /* ===================================================== BPA — Image hover: contrast pop + dark veil overlay ===================================================== */ /* Dark veil pseudo-element — hidden by default */ .search_img::after, .showMainResulsImage::after, .artist_slid_box::after { content: ''; position: absolute; inset: 0; background: radial-gradient(transparent 30%, rgba(0, 0, 0, .55) 100%); opacity: 0; transition: opacity 1.1s; pointer-events: none; } /* Reveal veil on hover */ .search_img:hover::after, .showMainResulsImage:hover::after, .artist_slid_box:hover::after { opacity: 1; } /* Base transition for contrast pop */ .search_card .search_img a img, .search_card .search_img > img, .showMainResulsImage a img, .swiper-slide .artist_slid_box a img, img.mouseover_effect_images, img.mouseover_image_effect { transition: filter 0.6s ease; } /* Hover state — contrast pop */ .search_card .search_img a:hover img, .search_card .search_img:hover > img, .showMainResulsImage a:hover img, .swiper-slide .artist_slid_box a:hover img, a:hover img.mouseover_effect_images, img.mouseover_effect_images:hover, a:hover img.mouseover_image_effect, img.mouseover_image_effect:hover { filter: contrast(1.18) saturate(1.3) brightness(1.03); } /* ===================================================== BPA — Slider card title: multi-line hover-frame fix inline-block gives the a single rectangular bounding box so the rising-fill ::before pseudo-element correctly covers the full text block even when the title wraps. ===================================================== */ .view_all_art a { display: inline-block; } /* Suppress any text-link hover decoration on anchors that wrap an image */ a:has(> img)::before, a:has(> img)::after, a:has(> picture)::before, a:has(> picture)::after, a:has(> figure)::before, a:has(> figure)::after { content: none; } a:has(> img), a:has(> picture), a:has(> figure) { padding: 0; } /* ===================================================== BPA — Design Tokens (11-Step Gray Scale + Layout) Matches --BuyPopArt-- design spec v1.0 ===================================================== */ :root { --ink: #000000; /* Borders, CTAs, primary text */ --carbon: #111111; /* Primary body text */ --iron: #2A2A2A; /* Dark UI, footer, hover */ --charcoal: #555555; /* Body copy, nav links */ --pewter: #888888; /* Labels, eyebrows, kickers */ --chrome: #BEBEBE; /* Placeholders, muted text */ --mist: #DCDCDC; /* Input borders, secondary dividers */ --smoke: #EDEDED; /* Dividers, rules, card footers */ --frost: #F5F5F5; /* Card bg, section alternates */ --paper: #FAFAFA; /* Alternate page bg */ --white: #FFFFFF; /* Page bg, card surfaces */ /* BPA structural border — comic-panel feel */ --bpa-border: 2px solid #000000; --bpa-border-sm: 1px solid #DCDCDC; } /* ===================================================== BPA — UI Kit button primitives Suppress rising-fill a::before on button anchors. Token names match UI Kit verbatim (--ink, --iron, --white). ===================================================== */ a.btn-solid::before, a.btn-outline::before { content: none; } .btn-solid { background: var(--ink); color: var(--white); padding: 16px 34px; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border: var(--bpa-border); display: inline-flex; align-items: center; gap: 10px; transition: background .2s; text-decoration: none; } .btn-solid:hover { background: var(--iron); color: var(--white); } .btn-outline { background: transparent; color: var(--ink); padding: 16px 34px; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border: var(--bpa-border); display: inline-flex; align-items: center; gap: 10px; transition: background .2s, color .2s; text-decoration: none; } .btn-outline:hover { background: var(--ink); color: var(--white); } .btn-block { width: 100%; justify-content: center; } .badge-solid { background: var(--ink); color: var(--white); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; display: inline-block; } .badge-ghost { background: var(--white); border: 1px solid var(--smoke); color: var(--iron); font-size: 9px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; padding: 4px 9px; display: inline-block; } /* ===================================================== BPA — Homepage container ===================================================== */ .homepage-buypopart-widgets { font-family: var(--font-ui); background: var(--white); color: var(--carbon); } /* Zero out Bootstrap's rounded-3 inside the homepage */ .homepage-buypopart-widgets .rounded-3, .homepage-buypopart-widgets .rounded-0 { border-radius: 0 !important; } /* Uniform black 2px border on all widget containers */ .homepage-buypopart-widgets .border { border: var(--bpa-border) !important; } /* ===================================================== BPA — Widget: Artist Spotlight ===================================================== */ .widget-artist-spotlight { background: var(--frost); border: var(--bpa-border) !important; border-radius: 0 !important; box-shadow: none !important; } a.widget-artist-spotlight__portrait { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 0; box-shadow: none; } .widget-artist-spotlight__art { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; margin: 0; text-align: center; } .widget-artist-spotlight__art > a { display: block; position: relative; width: 100%; height: 100%; min-height: 0; } .widget-artist-spotlight__art-title { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; line-height: 1.3; padding: 0.35rem 0.4rem; z-index: 1; } .widget-artist-spotlight__title { font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); } .widget-artist-spotlight__bio { line-height: 1.55; font-size: 0.9rem; font-weight: 300; color: var(--charcoal); } /* ===================================================== BPA — Widget: Quiz Artist ===================================================== */ .widget-quiz-artist__card { background: var(--frost); border: var(--bpa-border) !important; border-radius: 0 !important; } .widget-quiz-artist__img { border-radius: 0; overflow: hidden; } .widget-quiz-artist__img-inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 0; } .widget-quiz-artist__title-top { z-index: 1; margin: 0; padding: 0.55rem 0.65rem 0.5rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; line-height: 1.1; text-align: left; text-transform: uppercase; letter-spacing: 0.07em; pointer-events: none; } .widget-quiz-artist__caption { z-index: 1; padding: 0.5rem 0.65rem 0.55rem; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 700; line-height: 1.3; text-align: left; pointer-events: none; } .widget-quiz-artist__btn { background: var(--ink); border: none; color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 0; transition: background 0.2s; } .widget-quiz-artist__btn:hover, .widget-quiz-artist__btn:focus { background: var(--iron); color: #fff; } .widget-quiz-artist__opt label { cursor: pointer; } .widget-quiz-artist__question { font-family: var(--font-ui); font-size: 0.95rem; font-weight: 400; color: var(--carbon); line-height: 1.5; } .widget-quiz-artist__meta { font-size: 0.82rem; font-weight: 300; color: var(--charcoal); line-height: 1.55; } /* ===================================================== BPA — Widget: Featured Artist with Fact ===================================================== */ .widget-faf { background: var(--frost) !important; color: var(--carbon) !important; border: var(--bpa-border) !important; border-radius: 0 !important; } .widget-faf__title { font-family: var(--font-ui); font-size: 10px !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--pewter); margin-bottom: 0.75rem; } .widget-faf__portrait, .widget-faf__painting { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--smoke); border-radius: 0; } .widget-faf__painting__cap { padding: 0.4rem 0.5rem; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; line-height: 1.25; text-align: left; text-shadow: 0 1px 1px rgba(0,0,0,0.4); } .widget-faf__name { text-align: center; font-family: var(--font-display); font-size: 1rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink); margin-top: 0.5rem; margin-bottom: 0; } .widget-faf__name a { color: var(--ink); } .widget-faf__meta { font-family: var(--font-ui); font-size: 0.82rem; font-weight: 300; line-height: 1.5; color: var(--charcoal); } .widget-faf__flash { margin: 0; padding-left: 1.1rem; } .widget-faf__flash li { font-family: var(--font-ui); font-size: 0.86rem; font-weight: 300; line-height: 1.5; color: var(--charcoal); margin-bottom: 0.4rem; } .widget-faf__ruler { height: 2px; background: var(--ink); margin: 0; border: 0; opacity: 1; } /* ===================================================== BPA — Widget: 10 Pop Art Artists ===================================================== */ .widget-pop10 { background: var(--white); border: var(--bpa-border) !important; border-radius: 0 !important; box-shadow: none !important; } .widget-pop10__portrait-wrap { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--iron); border-radius: 0; text-decoration: none; } .widget-pop10__portrait-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .widget-pop10__portrait-name { padding: 0.5rem 0.65rem; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 700; line-height: 1.25; color: #fff; } .widget-pop10__artist-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink); margin-bottom: 0.3rem; } .widget-pop10__artist-title a { color: var(--ink); text-decoration: none; } .widget-pop10__artist-title a:hover, .widget-pop10__artist-title a:focus { text-decoration: underline; } .widget-pop10__meta-description { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 300; color: var(--charcoal); margin-bottom: 0.75rem; line-height: 1.55; } .widget-pop10__art-tile { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 0; background: var(--smoke); text-decoration: none; } .widget-pop10__art-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .widget-pop10__art-meta { padding: 0.3rem 0.1rem 0; } .widget-pop10__art-title { font-family: var(--font-ui); font-size: 0.72rem; font-weight: 700; color: var(--ink); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .widget-pop10__art-artist { font-family: var(--font-ui); font-size: 0.7rem; font-weight: 400; color: var(--charcoal); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .widget-pop10__art-artist a { color: inherit; text-decoration: none; } .widget-pop10__art-artist a:hover, .widget-pop10__art-artist a:focus { text-decoration: underline; } /* ===================================================== BPA — Widget: Curated Choice ===================================================== */ .widget-curated-choice { border: var(--bpa-border) !important; border-radius: 0 !important; box-shadow: none !important; } .widget-curated-choice__tile { position: relative; overflow: hidden; display: block; height: 100%; min-height: 0; } .widget-curated-choice__label { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 700; line-height: 1.2; text-transform: none; padding: 0.45rem 0.65rem; } .widget-curated-choice__label--small { font-size: 0.68rem; padding: 0.3rem 0.45rem; } .widget-curated-choice__head { font-family: var(--font-display) !important; font-size: clamp(1.1rem, 2vw, 1.55rem) !important; font-weight: 400; color: var(--ink); letter-spacing: 0.07em; line-height: 1.05; text-transform: uppercase; } .widget-curated-choice__desc { font-family: var(--font-ui); font-size: 0.9rem; font-weight: 300; line-height: 1.7; color: var(--charcoal); } .widget-curated-choice__btn { background: var(--ink); color: #fff !important; border: none; text-transform: uppercase; font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.12em; font-size: 11px; padding: 9px 16px; border-radius: 0; text-decoration: none; display: inline-block; transition: opacity 0.2s; } .widget-curated-choice__btn:hover, .widget-curated-choice__btn:focus { opacity: 0.8; color: #fff !important; filter: none; } /* ===================================================== BPA — Widget: Small Translated Field ===================================================== */ .widget-small-translated-field .w-100.bg-dark { background: var(--ink) !important; font-family: var(--font-ui); font-weight: 700; font-size: 10px; letter-spacing: 0.18em; border-bottom: none; } .widget-stf__cell { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 0; background: var(--iron); } .widget-stf__label { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.4rem 0.5rem; } /* ===================================================== BPA — Widget: Reimagine Your Photo Slider ===================================================== */ .widget-reimagine-4-slider { background: var(--frost); border: var(--bpa-border) !important; border-radius: 0 !important; box-shadow: none !important; } .widget-reimagine-4-slider__title { font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 400; color: var(--ink); text-transform: uppercase; letter-spacing: 0.07em; } .widget-reimagine-4-slider__cta { display: inline-block; width: 100%; text-align: center; font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 14px 20px; border-radius: 0; background: var(--ink); color: #fff !important; text-decoration: none !important; border: var(--bpa-border); box-shadow: none; transition: opacity 0.2s; } .widget-reimagine-4-slider__cta:hover, .widget-reimagine-4-slider__cta:focus { opacity: 0.8; filter: none; color: #fff !important; } /* ===================================================== BPA — Widget: Artist Spotlight Slider (movement) ===================================================== */ .widget-artist-spotlight-slider-movement { background: var(--frost); border: var(--bpa-border) !important; border-radius: 0 !important; box-shadow: none !important; } .widget-artist-spotlight-slider-movement__portrait { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 0; } .widget-artist-spotlight-slider-movement__bio { font-family: var(--font-ui); font-size: 0.875rem; font-weight: 300; line-height: 1.55; color: var(--charcoal); } .widget-artist-spotlight-slider-movement__title { font-family: var(--font-display); font-size: 1rem; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); } /* ===================================================== BPA — Announcement Bar (top_bar) Spec §6: black bg, white text, 11px/500/uppercase/0.1em ===================================================== */ .container_content { background: var(--ink); } .top-bar { color: #fff; padding: 8px 0; font-size: 11px; } .topbar_menu a, .topright_side a { color: #fff; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; } .topbar_menu a { border-bottom: 1px solid var(--charcoal); text-decoration: none; } .topbar_menu a:hover, .topbar_menu a:focus { color: #fff; border-bottom-color: #fff; } .topright_side a:hover, .topright_side a:focus { color: #fff; } /* ===================================================== BPA — Sticky Header Spec §6: white bg, border-bottom 2px #000, sticky z-100 ===================================================== */ .header_container { background: var(--white); border-bottom: 2px solid var(--ink); position: sticky; top: 0; z-index: 1000; overflow: visible; } /* Shared horizontal rhythm — header, nav, footer, homepage content */ .container_content > .container, .header_container > .container, .header_container .navbar > .container, .footer_sec .container { max-width: 1400px; padding-left: clamp(16px, 4vw, 60px); padding-right: clamp(16px, 4vw, 60px); } section.bpa-hero, section.bpa-mood, .bpa-home { max-width: 1400px; margin-left: auto; margin-right: auto; width: 100%; } /* ===================================================== BPA — Search Bar Spec §6: 2px solid #000, no radius, Inter 13px/400, placeholder --chrome, 42×42 black submit button ===================================================== */ .main-header .search-bar { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; } .search-bar { display: flex; align-items: stretch; min-width: 0; position: static; } .search-bar form { display: flex; align-items: stretch; width: 100%; flex: 1; } .search-bar input { flex: 1; min-width: 0; background: var(--white) !important; border: 2px solid var(--ink) !important; border-right: none !important; border-radius: 0 !important; height: 42px; font-size: 13px; font-weight: 400; color: var(--carbon) !important; padding-left: 12px; } .search-bar input:focus, .search-bar input:-webkit-autofill, .search-bar input:-webkit-autofill:hover { background: var(--white) !important; box-shadow: none !important; } .search-bar input::placeholder { color: var(--chrome) !important; } .bpa-search-btn { width: 42px; min-width: 42px; height: 42px; background: var(--ink); border: 2px solid var(--ink); border-left: none; border-radius: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex-shrink: 0; } .bpa-search-btn img { filter: invert(1) !important; width: 18px !important; height: 18px !important; position: static !important; top: auto !important; left: auto !important; display: block; } .bpa-search-btn:hover, .bpa-search-btn:focus { background: var(--iron); } /* ===================================================== BPA — Navbar (sub-navigation) Spec §6: white bg, border-top 1px smoke, links charcoal ===================================================== */ .navbar { background: var(--white) !important; border-top: 1px solid var(--smoke) !important; border-bottom: none !important; } .nav-menu > li > a { color: var(--charcoal) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; } .nav-menu > li > a:hover, .nav-menu > li > a:focus, .nav-menu > li.active > a { color: var(--ink) !important; } /* Dropdown panel */ .dropdown-content.full-width { background: var(--white) !important; border: 2px solid var(--ink); border-top: none; } .column a { color: var(--charcoal) !important; font-size: 13px !important; font-weight: 400 !important; } .column a:hover, .column a:focus { color: var(--ink) !important; } /* ===================================================== BPA — FREE ART CONSULTATION CTA (header) Spec §11: outline button, Inter 700 11px +0.12em uppercase ===================================================== */ .highlight-text { margin: 0; } .highlight-text a { color: var(--ink) !important; font-family: var(--font-ui) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; border: 2px solid var(--ink) !important; padding: 8px 16px !important; text-decoration: none !important; display: inline-block !important; transition: background 0.2s, color 0.2s; } .highlight-text a:hover, .highlight-text a:focus { background: var(--ink) !important; color: var(--white) !important; } /* ===================================================== BPA — Header text labels (Account + Cart) Spec §6: 2px solid ink, no radius — matches search bar border. ===================================================== */ .header_container .icon-group { display: flex; align-items: center; gap: 8px; } .header_container .icon-group a::before { content: none; } .bpa-header-icon-label { display: inline-flex; align-items: center; justify-content: center; height: 42px; min-height: 42px; padding: 0 14px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; white-space: nowrap; transition: background 0.2s, color 0.2s; } .header_container .user-menu-wrapper { background: none !important; border-radius: 0 !important; border: none !important; width: auto !important; height: auto !important; } .header_container .user-menu-wrapper > a { /* flex (not block): an inline-flex child inside a block link adds baseline line-box space below the 42px label, pushing it off the search-bar axis */ display: flex; align-items: center; text-decoration: none; color: inherit; } .header_container .aps-user-auth-visual { position: relative; display: flex; align-items: center; justify-content: center; } .header_container .aps-user-auth-visual .aps-user-initial-overlay { position: static; transform: none; } /* Re-centre the logged-in initial: global-style's `#aps-user-auth-widget .aps-user-initial-overlay:not(.aps-header-auth--hidden)` forces display:block (id specificity), which kills the inline-flex centring. */ .header_container #aps-user-auth-widget .aps-user-initial-overlay:not(.aps-header-auth--hidden) { display: inline-flex; } .header_container .aps-user-auth-visual .bpa-header-icon-label, .header_container .aps-user-auth-visual .aps-user-initial-overlay:not(.aps-header-auth--hidden) { min-width: 42px; } .header_container .icon-group .user-menu-wrapper .aps-user-initial { display: inline-flex; align-items: center; justify-content: center; height: 42px; min-height: 42px; min-width: 42px; padding: 0 10px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; } .header_container .icon-group .user-menu-wrapper .aps-user-initial--compact { font-size: 11px; } .header_container .icon-group a:hover .bpa-header-icon-label, .header_container .icon-group a:focus .bpa-header-icon-label, .header_container .icon-group a:hover .aps-user-initial-overlay:not(.aps-header-auth--hidden), .header_container .icon-group a:focus .aps-user-initial-overlay:not(.aps-header-auth--hidden) { background: var(--ink); color: var(--white); } .header_container .aps-cart-icon-wrap { display: inline-flex; align-items: center; position: relative; } .header_container .aps-cart-icon-wrap > a { display: inline-flex; align-items: center; text-decoration: none; color: inherit; } .header_container .aps-cart-icon-wrap .aps-cart-count-badge { top: -8px; right: -6px; background: var(--ink); } /* ===================================================== BPA — Mobile menu Pop-art: white panel, 2px solid black border, bold uppercase nav links, stark close button ===================================================== */ .menu_icon { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font-size: 16px; cursor: pointer; flex-shrink: 0; transition: background 0.15s, color 0.15s; } .menu_icon:hover { background: var(--ink); color: var(--white); } .mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55); z-index: 99; opacity: 0; transition: opacity 0.25s ease; display: none; pointer-events: none; } .side_nav { position: fixed; top: 0; left: -300px; width: 300px; height: 100%; height: 100dvh; background: var(--white) !important; border-right: 2px solid var(--ink); padding: 28px 24px; transition: left 0.28s ease; z-index: 1000; overflow-y: auto; overflow-x: hidden; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12); } .side_nav.open { left: 0; } .side_nav .close_btn { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; cursor: pointer; color: var(--ink) !important; border: 2px solid var(--ink); background: var(--white); transition: background 0.15s, color 0.15s; } .side_nav .close_btn:hover { background: var(--ink); color: var(--white) !important; } .side_nav .side_inner-nav { display: block; margin-top: 52px; } .side_nav .nav-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .side_nav .nav-menu > li { border-bottom: 2px solid var(--ink); } .side_nav .nav-menu > li > a { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink) !important; padding: 14px 0; display: block; text-decoration: none; transition: color 0.15s; } .side_nav .nav-menu > li > a:hover { color: var(--iron) !important; } .side_nav .nav-menu > li > a::before, .side_nav .nav-menu > li > a::after { content: none !important; } .side_nav a::before, .side_nav a::after { content: none !important; } /* ===================================================== BPA — Footer Spec §18: white bg, border-top 2px #000, column titles Inter 10px/700/0.18em/iron, links Inter 13px/300/charcoal ===================================================== */ .footer_sec { background: var(--white) !important; color: var(--carbon) !important; border-top: 2px solid var(--ink) !important; border-bottom: none !important; padding-top: 60px; } .footer_sec .ft_heading { font-family: var(--font-display) !important; font-size: clamp(18px, 2.5vw, 26px) !important; font-weight: 400 !important; text-transform: uppercase !important; color: var(--ink) !important; line-height: 1.1 !important; } .footer_sec .ft_pera { color: var(--charcoal) !important; font-size: 13px !important; font-weight: 300 !important; line-height: 1.7 !important; } .footer_sec .consultation_btn { border: 2px solid var(--ink) !important; color: var(--ink) !important; font-family: var(--font-ui) !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; padding: 12px 24px !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; transition: background 0.2s, color 0.2s; } .footer_sec .consultation_btn:hover, .footer_sec .consultation_btn:focus { background: var(--ink) !important; color: var(--white) !important; } /* Arrow icon inside consultation btn: hide the orange arrow, keep just text */ .footer_sec .consultation_btn img { filter: invert(1) !important; } .footer_sec .social_icons a img { filter: invert(1); } .footer_sec .messaging_links a { color: var(--charcoal) !important; font-size: 13px !important; font-weight: 400 !important; } .footer_sec .messaging_links a:hover, .footer_sec .messaging_links a:focus { color: var(--ink) !important; } .links_heading { color: var(--iron) !important; font-family: var(--font-ui) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; opacity: 1 !important; } .footer_list a { color: var(--charcoal) !important; font-family: var(--font-ui) !important; font-weight: 300 !important; font-size: 13px !important; opacity: 1 !important; text-decoration: none !important; } .footer_list a:hover, .footer_list a:focus { color: var(--ink) !important; } /* ===================================================== BPA — Bottom Bar (copyright) Spec §18: frost bg, pewter text, Inter 11px/uppercase/0.06em ===================================================== */ .bpa-bottom-bar { background: var(--frost); } .bpa-bottom-bar .copyRight_sec { background: var(--frost); padding: 16px 0; } .bpa-bottom-bar .copyRight_sec, .bpa-bottom-bar .copyRight_sec a, .bpa-bottom-bar .copyRight_sec span, .bpa-bottom-bar .copyRight_text { color: var(--pewter); font-family: var(--font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } /* Improved by Saurabh */ /* Header */ @media only screen and (max-width: 991px) { .container, .container-md, .container-sm { max-width: 100% !important; } .main-header .search-bar{ display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0 !important; } } /* End Header */ /* Pages */ section.bpa-hero{ padding-top: 0; padding-bottom: 0; height: calc(100vh - 208px); min-height: 600px; display: flex; } section.bpa-hero > *{ width: 50%; } section.bpa-hero .bpa-hero-copy{ align-items: center; text-align: left; border-right: 1px solid var(--ink); border-left: 0; } section.bpa-hero .bpa-hero-art{ border-left: 1px solid var(--ink); border-right: 0; flex: 1 1 50%; align-self: stretch; min-height: 0; height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; } section.bpa-hero .bpa-hero-art-cell{ min-height: 0; height: 100%; } section.bpa-hero .bpa-hero-copy > *{ max-width: 400px; width: 100%; margin: 0 auto; } section.bpa-hero .bpa-hero-copy .bpa-hero-sub{ margin-bottom: 1rem; } .bpa-mood{ padding-top: 0; padding-bottom: 0; margin-bottom: clamp(16px, 4vw, 60px); } .bpa-mood .bpa-mood-inner{ padding-top: 0; padding-bottom: 0; height: calc(100vh - 158px); min-height: 600px; display: flex; flex-direction: row-reverse; } .bpa-mood .bpa-mood-inner > *{ width: 50%; } .bpa-mood .bpa-mood-inner .bpa-mood-copy{ align-items: center; text-align: left; border-left: 1px solid var(--ink); border-right: 0; } .bpa-mood .bpa-mood-inner .bpa-mood-grid{ border-right: 1px solid var(--ink); border-left: 0; } .bpa-mood .bpa-mood-inner .bpa-mood-copy > *{ max-width: 400px; width: 100%; margin: 0 auto; } .bpa-mood .bpa-mood-inner .bpa-mood-copy > .bpa-btn-solid{ width:auto; } .bpa-mood .bpa-mood-inner .bpa-mood-copy .bpa-mood-sub{ margin-bottom: 1rem; } .bpa-mood .bpa-mood-inner .bpa-mood-grid{ height: auto; } @media only screen and (max-width: 991px) { section.bpa-hero, .bpa-mood .bpa-mood-inner{ height: auto; min-height: 0; flex-direction: column; } section.bpa-hero > *, .bpa-mood .bpa-mood-inner > *{ width: 100%; } .bpa-mood-grid{ grid-template-rows: auto !important; } } .bpa-home{ margin-top: clamp(16px, 4vw, 60px) !important; padding-top: clamp(16px, 4vw, 60px) !important; } .bpa-widget .col-md-3, .bpa-widget .col-md-5{ align-self: center; } .bpa-spotlight__art-title{ display: block !important; height: auto; overflow: visible; } .form-check{ padding-left: 2em !important; } .form-check .form-check-input{ margin-left: -2em !important; margin-top: 0 !important; } .bpa-widget{ height: 100%; } .bpa-widget hr{ display: none; } .bpa-widget > .align-items-stretch{ height: 100%; } .bpa-spotlight__art-cell img, .bpa-pop10__art-tile img{ aspect-ratio: 1/1; object-fit: contain; } .bpa-pop10__art-title a{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .bpa-btn-solid{ align-self: self-start; } .artist_slid_box img{ aspect-ratio: 1/1; object-fit: cover; max-height: max-content; } .artist_slid_box .vincent_color{ margin-top: 0; } .artist_slid_box .view_all_art{ margin-top: 0; } .artist_slid_box .view_all_art a{ display: -webkit-box; !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; height: 62px; } .bpa-movement__portrait img{ aspect-ratio: 1 / 1; object-fit: contain; } .bpa-widget .parent_slid_box{ padding: 0 30px; } /* End Pages */ /* */ /* === HOMEPAGETEST migrated inline CSS === */ /* ── BuyPopArt Design System — inline tokens ──────────────────────────────── */ /* ── Page wrapper ── */ .bpa-home { font-family: var(--font-ui); color: var(--carbon); background: var(--white); padding-left: clamp(16px, 4vw, 60px); padding-right: clamp(16px, 4vw, 60px); padding-top: clamp(16px, 4vw, 60px); padding-bottom: 64px; } /* ── Global: zero border-radius everywhere ── */ .bpa-home *, .bpa-home *::before, .bpa-home *::after { border-radius: 0 !important; } /* ── Section dividers ── */ .bpa-home .bpa-row { margin-bottom: 48px; } /* ── Override global rose link-hover from site CSS — BPA design rule: no color in UI ── */ /* .bpa-home a:hover, .bpa-home a:focus, .bpa-hero a:hover, .bpa-hero a:focus, .bpa-mood a:hover, .bpa-mood a:focus, .bpa-newsletter a:hover, .bpa-newsletter a:focus { color: inherit !important; } */ .bpa-view-all:hover { color: var(--ink) !important; } .bpa-btn-solid:hover { background: var(--iron) !important; color: var(--white) !important; } .bpa-btn-outline:hover { background: var(--ink) !important; color: var(--white) !important; } .bpa-pop10__art-title a:hover { color: var(--ink) !important; } .bpa-pop10__art-artist a:hover { color: var(--charcoal) !important; } .bpa-faf__artist-name a:hover { color: var(--charcoal) !important; } .bpa-pop10__artist-title a:hover { color: var(--ink) !important; } .bpa-spotlight__art-title:hover { color: var(--iron) !important; } /* ── Eyebrow kicker labels ── */ .bpa-eyebrow { font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pewter); display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .bpa-eyebrow::before { content: ''; display: inline-block; width: 32px; height: 2px; background: var(--ink); flex-shrink: 0; } /* ── Display headings — Anton ── */ .bpa-home h2, .bpa-home h3, .bpa-heading { font-family: var(--font-display) !important; font-weight: 400 !important; text-transform: uppercase !important; color: var(--ink) !important; line-height: 1.05 !important; letter-spacing: 0.05em !important; } /* ── Body copy — Inter 300 ── */ .bpa-home p, .bpa-body { font-family: var(--font-ui) !important; font-weight: 300 !important; font-size: 14px !important; line-height: 1.7 !important; color: var(--charcoal) !important; } /* ── Primary CTA button ── */ .bpa-btn-solid { font-family: var(--font-ui) !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; background: var(--ink) !important; color: var(--white) !important; border: 2px solid var(--ink) !important; padding: 16px 36px !important; text-decoration: none !important; display: inline-block; cursor: pointer; transition: background 0.2s; } .bpa-btn-solid:hover, .bpa-btn-solid:focus { background: var(--iron) !important; color: var(--white) !important; } .bpa-btn-solid:focus { outline: 3px solid var(--pewter); outline-offset: 3px; } /* ── Outer widget containers — 2px comic-panel border ── */ .bpa-widget { border: 2px solid var(--ink) !important; background: var(--white); overflow: hidden; } /* ── Overlay labels on images ── */ .bpa-img-label { font-family: var(--font-ui) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--white) !important; background: linear-gradient(to top, rgba(0,0,0,0.78), transparent) !important; padding: 20px 10px 7px !important; position: absolute; bottom: 0; left: 0; right: 0; display: block; } /* ── Image hover scale ── */ .bpa-img-hover { overflow: hidden; display: block; position: relative; } .bpa-img-hover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .bpa-img-hover:hover img { transform: scale(1.04); } /* ═══════════════════════════════════════════════════════════ ROW 1 — ARTIST SPOTLIGHT ═══════════════════════════════════════════════════════════ */ /* Portrait column: position:relative + aspect-ratio gives the container an explicit height so the absolutely-positioned img (object-fit:cover) fills it. Without these two properties the column collapses to 0 and no image appears. */ .bpa-spotlight__portrait-link { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border: 2px solid var(--ink); } .bpa-spotlight__portrait-link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease, filter 0.5s ease; filter: grayscale(20%); } .bpa-spotlight__portrait-link:hover img { transform: scale(1.04); filter: grayscale(0%); } .bpa-spotlight__title { font-size: clamp(20px, 2.5vw, 32px) !important; margin-bottom: 8px !important; } .bpa-spotlight__artist-name { font-family: var(--font-ui) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--pewter) !important; margin-bottom: 12px !important; } .bpa-spotlight__bio p { font-size: 14px !important; } .bpa-spotlight__art-cell { overflow: hidden; border: 1px solid var(--smoke); } .bpa-spotlight__art-cell a { display: block; text-decoration: none; } .bpa-spotlight__art-cell a:hover img { transform: scale(1.04); } .bpa-spotlight__art-title { display: block; font-family: var(--font-display) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: var(--ink) !important; background: var(--white) !important; border-top: 1px solid var(--smoke) !important; padding: 5px 8px !important; text-align: left !important; line-height: 1.2 !important; } /* ═══════════════════════════════════════════════════════════ ROW 2 — QUIZ ARTIST ═══════════════════════════════════════════════════════════ */ .bpa-quiz__card { border: 2px solid var(--ink) !important; background: var(--frost); padding: 24px; } .bpa-quiz__title-overlay { font-family: var(--font-display) !important; font-weight: 400 !important; font-size: clamp(13px, 1.6vw, 18px) !important; text-transform: uppercase !important; color: var(--ink) !important; background: transparent !important; padding: 0 0 8px !important; margin: 0 0 8px !important; border-bottom: 2px solid var(--ink); display: block; width: 100%; } .bpa-quiz__media-row { flex-wrap: nowrap; } .bpa-quiz__img-wrap { position: relative; overflow: hidden; border: 1px solid var(--smoke); aspect-ratio: 1/1; width: clamp(96px, 28vw, 160px); } .bpa-quiz__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .bpa-quiz__img-wrap:hover img { transform: scale(1.04); } .bpa-quiz__caption { font-family: var(--font-ui) !important; font-size: 12px !important; font-weight: 400 !important; color: var(--white) !important; background: linear-gradient(to top, rgba(0,0,0,0.75), transparent) !important; padding: 20px 10px 7px !important; position: absolute; bottom: 0; left: 0; right: 0; } .bpa-quiz__question { font-family: var(--font-ui) !important; font-weight: 300 !important; font-size: 14px !important; line-height: 1.7 !important; color: var(--carbon) !important; margin-bottom: 16px !important; } .bpa-quiz__form .form-check-label { font-family: var(--font-ui); font-weight: 400; font-size: 13px; color: var(--carbon); } .bpa-quiz__form .form-check-input { accent-color: var(--ink); appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 2px solid var(--ink); background-color: var(--white); cursor: pointer; flex-shrink: 0; margin-top: 2px; } .bpa-quiz__form .form-check-input:checked { background-color: var(--ink); box-shadow: inset 0 0 0 3px var(--white); } .bpa-quiz__meta { font-family: var(--font-ui) !important; font-weight: 300 !important; font-size: 12px !important; color: var(--charcoal) !important; line-height: 1.6 !important; margin-top: 0 !important; } /* ═══════════════════════════════════════════════════════════ ROW 2 — FEATURED ARTIST WITH FACT ═══════════════════════════════════════════════════════════ */ .bpa-faf__ruler { border: none !important; border-top: 2px solid var(--ink) !important; margin: 0 0 0 0 !important; opacity: 1 !important; } .bpa-faf__col-title { font-family: var(--font-display) !important; font-weight: 400 !important; font-size: 13px !important; text-transform: uppercase !important; color: var(--ink) !important; margin-bottom: 10px !important; } .bpa-faf__cell { padding: 16px; border-right: 1px solid var(--smoke); } .bpa-faf__cell:last-child { border-right: none; } .bpa-faf__portrait, .bpa-faf__painting { display: flex; flex-direction: column; position: relative; overflow: hidden; border: 1px solid var(--smoke); } .bpa-faf__painting img { order: 1; } .bpa-faf__portrait img, .bpa-faf__painting img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; } .bpa-faf__portrait:hover img, .bpa-faf__painting:hover img { transform: scale(1.04); } .bpa-faf__painting-cap { order: 2; position: static; font-family: var(--font-display) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: var(--ink) !important; background: none !important; padding: 8px 0 4px !important; } .bpa-faf__artist-name { font-family: var(--font-ui) !important; font-size: 12px !important; font-weight: 400 !important; color: var(--charcoal) !important; margin-top: 8px !important; margin-bottom: 0 !important; } .bpa-faf__artist-name a { color: var(--charcoal) !important; text-decoration: none !important; } .bpa-faf__meta { font-family: var(--font-ui) !important; font-size: 12px !important; font-weight: 300 !important; color: var(--charcoal) !important; justify-content: flex-start !important; } .bpa-faf__flash { font-family: var(--font-ui) !important; font-size: 13px !important; font-weight: 300 !important; line-height: 1.7 !important; color: var(--charcoal) !important; padding-left: 18px !important; margin: 0 !important; list-style: disc !important; } .bpa-faf__flash li { margin-bottom: 4px; } /* ═══════════════════════════════════════════════════════════ ROW 3 — 10 POP ART ARTISTS ═══════════════════════════════════════════════════════════ */ .bpa-pop10__artist-title { font-size: 18px !important; margin-bottom: 6px !important; } .bpa-pop10__artist-title a { color: var(--ink) !important; text-decoration: none !important; } .bpa-pop10__meta { font-family: var(--font-ui) !important; font-weight: 300 !important; font-size: 12px !important; color: var(--charcoal) !important; line-height: 1.6 !important; margin: 0 !important; } .bpa-pop10__portrait { display: block; position: relative; overflow: hidden; border: 2px solid var(--ink); text-decoration: none; } .bpa-pop10__portrait img { width: 100%; height: auto; display: block; transition: transform 0.5s ease, filter 0.5s ease; filter: grayscale(20%); } .bpa-pop10__portrait:hover img { transform: scale(1.06); filter: grayscale(0%); } .bpa-pop10__portrait-name { font-family: var(--font-ui) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--white) !important; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent) !important; padding: 20px 8px 7px !important; position: absolute; bottom: 0; left: 0; right: 0; display: block; } .bpa-pop10__art-tile { display: block; position: relative; overflow: hidden; border: 1px solid var(--smoke); text-decoration: none; } .bpa-pop10__art-tile img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; } .bpa-pop10__art-tile:hover img { transform: scale(1.04); } .bpa-pop10__art-meta { padding: 8px 0 4px; } .bpa-pop10__art-title { font-family: var(--font-display) !important; font-size: 13px !important; font-weight: 400 !important; text-transform: uppercase !important; color: var(--ink) !important; line-height: 1.2 !important; } .bpa-pop10__art-title a { color: var(--ink) !important; text-decoration: none !important; } .bpa-pop10__art-artist { font-family: var(--font-ui) !important; font-size: 11px !important; font-weight: 400 !important; color: var(--charcoal) !important; margin-top: 2px; } .bpa-pop10__art-artist a { color: var(--charcoal) !important; text-decoration: none !important; } /* ═══════════════════════════════════════════════════════════ ROWS 4–8 — CURATED CHOICE ═══════════════════════════════════════════════════════════ */ .bpa-cc__head { font-size: clamp(20px, 2.5vw, 32px) !important; margin-bottom: 12px !important; } .bpa-cc__desc { font-family: var(--font-ui) !important; font-size: 14px !important; font-weight: 300 !important; line-height: 1.7 !important; color: var(--charcoal) !important; margin-bottom: 20px !important; } .bpa-cc__info-panel { border-left: 2px solid var(--smoke) !important; background: var(--white); display: flex; flex-direction: column; justify-content: center; padding: 32px !important; } .bpa-cc__tile { position: relative; overflow: hidden; display: block; } .bpa-cc__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .bpa-cc__tile:hover img { transform: scale(1.04); } .bpa-cc__tile-label, .bpa-cc__tile-label--sm { font-family: var(--font-ui) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--white) !important; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent) !important; padding: 20px 8px 7px !important; position: absolute; bottom: 0; left: 0; right: 0; display: block; text-align: center; } /* ═══════════════════════════════════════════════════════════ ROW 9 — SMALL TRANSLATED FIELD ═══════════════════════════════════════════════════════════ */ .bpa-stf { border: 2px solid var(--ink) !important; overflow: hidden; background: var(--white); } .bpa-stf__heading { font-family: var(--font-ui) !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; background: var(--ink) !important; color: var(--white) !important; padding: 10px 16px !important; display: block; width: 100%; text-align: center; margin: 0; } .bpa-stf__cell { position: relative; overflow: hidden; border: 1px solid var(--smoke); aspect-ratio: 1/1; } .bpa-stf__cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .bpa-stf__cell:hover img { transform: scale(1.04); } .bpa-stf__label { font-family: var(--font-ui) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent) !important; padding: 20px 8px 7px !important; color: var(--white) !important; position: absolute; bottom: 0; left: 0; right: 0; display: block; text-align: center; } /* ═══════════════════════════════════════════════════════════ ROW 10 — REIMAGINE YOUR PHOTO SLIDER ═══════════════════════════════════════════════════════════ */ .bpa-reimagine__title { font-size: clamp(20px, 2.5vw, 32px) !important; line-height: 1.05 !important; margin-bottom: 16px !important; } .bpa-reimagine__sub { font-family: var(--font-ui) !important; font-weight: 300 !important; font-size: 14px !important; line-height: 1.7 !important; color: var(--charcoal) !important; margin-bottom: 20px !important; } .artist_slid_box { border: 1px solid var(--smoke); overflow: hidden; background: var(--white); } .view_all_art { padding: 8px 12px; border-top: 1px solid var(--smoke); background: var(--white); } .view_all_art a { font-family: var(--font-display) !important; font-size: 13px !important; font-weight: 400 !important; text-transform: uppercase !important; color: var(--ink) !important; text-decoration: none !important; } .vincent_color { font-family: var(--font-ui) !important; font-size: 11px !important; font-weight: 400 !important; color: var(--charcoal) !important; margin-bottom: 2px; } .swp_btn { background: var(--ink) !important; border: 2px solid var(--ink) !important; opacity: 0.35; transition: opacity 0.25s; } .swp_btn:has(> img) { opacity: 1; } .swp_btn:hover { opacity: 1; } .bpa-home .artist_slider .swp_btn img { display: none !important; } .bpa-home .artist_slider .swiper-button-next::after, .bpa-home .artist_slider .swiper-button-prev::after { display: block !important; font-size: 14px !important; color: var(--white) !important; font-weight: 700 !important; } .bpa-home .artist_slider .swiper-button-prev.swp_btn { transform: none !important; } /* ═══════════════════════════════════════════════════════════ HERO — COMIC PANEL SPLIT ═══════════════════════════════════════════════════════════ */ .bpa-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; border-bottom: 2px solid var(--ink); } .bpa-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 80px clamp(16px, 4vw, 60px); border-right: 2px solid var(--ink); } .bpa-hero-kicker { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pewter); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; } .bpa-hero-kicker::before { content: ''; display: block; width: 32px; height: 2px; background: var(--ink); flex-shrink: 0; } .bpa-hero-title { font-family: var(--font-display) !important; font-size: clamp(56px, 7vw, 96px) !important; line-height: 0.95 !important; letter-spacing: 0.06em !important; color: var(--ink) !important; text-transform: uppercase !important; margin-bottom: 28px !important; } .bpa-hero-sub { font-family: var(--font-ui); font-size: 16px; font-weight: 300; color: var(--charcoal); line-height: 1.7; max-width: 400px; margin-bottom: 44px; } .bpa-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; } .bpa-btn-outline { font-family: var(--font-ui) !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; background: transparent !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; padding: 16px 36px !important; text-decoration: none !important; display: inline-block; cursor: pointer; transition: background 0.2s, color 0.2s; } .bpa-btn-outline:hover, .bpa-btn-outline:focus { background: var(--ink) !important; color: var(--white) !important; } .bpa-hero-art { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; } .bpa-hero-art-cell { overflow: hidden; position: relative; min-height: 240px; } .bpa-hero-art-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .bpa-hero-art-cell:hover img { transform: scale(1.04); } .bpa-hero-art-cell-tag { position: absolute; bottom: 0; left: 0; background: var(--ink); color: var(--white); padding: 7px 14px; font-family: var(--font-display); font-size: 13px; letter-spacing: 0.11em; text-transform: uppercase; } /* ═══════════════════════════════════════════════════════════ MOOD SELECTOR ═══════════════════════════════════════════════════════════ */ .bpa-mood { border-bottom: 2px solid var(--ink); } .bpa-mood-inner { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 460px; } .bpa-mood-grid { height: 460px; } .bpa-mood-copy { display: flex; flex-direction: column; justify-content: center; padding: 72px clamp(16px, 4vw, 60px) 72px calc(clamp(16px, 4vw, 60px) + 20px); border-right: 2px solid var(--ink); } .bpa-mood-sec-title { font-family: var(--font-display) !important; font-size: clamp(32px, 4vw, 52px) !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0.07em !important; color: var(--ink) !important; text-transform: uppercase !important; margin-bottom: 20px !important; } .bpa-mood-sub { font-family: var(--font-ui); font-size: 14px; font-weight: 300; color: var(--charcoal); line-height: 1.7; max-width: 380px; margin-bottom: 32px; } .bpa-mood-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; } .bpa-mood-card { overflow: hidden; position: relative; min-height: 120px; } .bpa-mood-card--wide { grid-column: 1 / -1; } .bpa-mood-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease, filter 0.5s ease; min-height: 120px; } .bpa-mood-card:hover img { transform: scale(1.06); filter: brightness(1.08); } .bpa-mood-label { position: absolute; bottom: 0; left: 0; background: var(--ink); color: var(--white); padding: 7px 14px; font-family: var(--font-display); font-size: 13px; letter-spacing: 0.11em; text-transform: uppercase; } /* ═══════════════════════════════════════════════════════════ SECTION HEAD ═══════════════════════════════════════════════════════════ */ .bpa-section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; padding-top: 24px; padding-bottom: 20px; border-bottom: 2px solid var(--ink); } .bpa-sec-label { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pewter); margin-bottom: 6px; } .bpa-sec-title { font-family: var(--font-display) !important; font-size: clamp(32px, 4vw, 52px) !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0.07em !important; color: var(--ink) !important; text-transform: uppercase !important; margin: 0 !important; } .bpa-view-all { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--charcoal); border-bottom: 1px solid var(--mist); padding-bottom: 2px; text-decoration: none; transition: border-color 0.2s, color 0.2s; white-space: nowrap; align-self: flex-end; } .bpa-view-all:hover { color: var(--ink); border-color: var(--ink); } /* ═══════════════════════════════════════════════════════════ NEWSLETTER ═══════════════════════════════════════════════════════════ */ .bpa-newsletter { background: var(--ink); padding: 72px clamp(16px, 4vw, 60px); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); } .bpa-nl-inner { max-width: 1400px; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .bpa-nl-title { font-family: var(--font-display) !important; font-size: clamp(28px, 3.5vw, 48px) !important; font-weight: 400 !important; color: var(--white) !important; text-transform: uppercase !important; line-height: 1 !important; margin-bottom: 12px !important; } .bpa-nl-sub { font-family: var(--font-ui) !important; font-size: 14px !important; font-weight: 300 !important; color: var(--chrome) !important; line-height: 1.6 !important; margin: 0 !important; } .bpa-nl-form { display: flex; gap: 0; border: 2px solid var(--charcoal); } .bpa-nl-input { flex: 1; background: transparent; border: none; padding: 0 20px; height: 52px; font-family: var(--font-ui); font-size: 14px; font-weight: 300; color: var(--white); outline: none; } .bpa-nl-input::placeholder { color: var(--pewter); } .bpa-nl-btn { background: var(--white); color: var(--ink); border: none; padding: 0 28px; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; height: 52px; white-space: nowrap; cursor: pointer; transition: background 0.2s; } .bpa-nl-btn:hover { background: var(--chrome); } .bpa-nl-note { font-family: var(--font-ui) !important; font-size: 11px !important; font-weight: 300 !important; color: var(--pewter) !important; margin-top: 10px !important; } /* ── Zero border-radius for new full-bleed sections ── */ .bpa-hero *, .bpa-mood *, .bpa-newsletter *, .bpa-hero *::before, .bpa-mood *::before, .bpa-newsletter *::before, .bpa-hero *::after, .bpa-mood *::after, .bpa-newsletter *::after { border-radius: 0 !important; } /* ── Responsive: stack hero / mood on mobile ── */ @media (max-width: 767px) { .bpa-hero, .bpa-mood-inner { grid-template-columns: 1fr; } .bpa-hero-copy, .bpa-mood-copy { border-right: none; border-bottom: 2px solid var(--ink); } .bpa-hero-art { min-height: 300px; } .bpa-nl-inner { grid-template-columns: 1fr; gap: 32px; } } /* ═══════════════════════════════════════════════════════════ ROW 11 — ARTIST SPOTLIGHT SLIDERS (movement) ═══════════════════════════════════════════════════════════ */ .bpa-movement__title { font-size: clamp(16px, 2vw, 24px) !important; margin-top: 12px !important; margin-bottom: 4px !important; } .bpa-movement__artist-label { font-family: var(--font-ui) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--pewter) !important; margin-bottom: 10px !important; } .bpa-movement__bio { font-family: var(--font-ui) !important; font-weight: 300 !important; font-size: 13px !important; line-height: 1.7 !important; color: var(--charcoal) !important; margin: 0 !important; } .bpa-movement__portrait { display: block; overflow: hidden; border: 2px solid var(--ink); text-decoration: none; } .bpa-movement__portrait img { width: 100%; height: auto; display: block; transition: transform 0.5s ease, filter 0.5s ease; filter: grayscale(20%); } .bpa-movement__portrait:hover img { transform: scale(1.06); filter: grayscale(0%); } /* Homepage spotlight: constrain portrait height to match artwork slider area */ .bpa-home .bpa-widget .bpa-movement__portrait { max-height: 220px; overflow: hidden; } .bpa-home .bpa-widget .bpa-movement__portrait img { width: 100%; height: 220px; object-fit: cover; object-position: top center; } /* Homepage spotlight: hover veil fires only on the image link, not the view_all_art text */ .bpa-home .bpa-widget .artist_slid_box::after { opacity: 0 !important; } .bpa-home .bpa-widget .artist_slid_box > a { position: relative; display: block; overflow: hidden; } .bpa-home .bpa-widget .artist_slid_box > a::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.18) 0%, transparent 60%); opacity: 0; transition: opacity 0.6s; pointer-events: none; } .bpa-home .bpa-widget .artist_slid_box > a:hover::after { opacity: 1; } /* Homepage movement spotlight slider — artwork thumbs ~40% larger than default Swiper sizing */ .bpa-home .bpa-widget .widget-artist-spotlight-slider-movement-swiper .swiper-slide { width: 144px !important; } .bpa-home .bpa-widget .widget-artist-spotlight-slider-movement-swiper .artist_slid_box > a img { width: 144px; height: 144px; max-width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } /* --- block --- */ .widget-artist-otd5 { border: 1px solid #c4c4c7; background: #f5f5f6; } .widget-artist-otd5__title { font-size: 1rem; font-weight: 700; margin-bottom: 0.75rem; color: #111; } .widget-artist-otd5__left { min-width: 0; } .widget-artist-otd5__media { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: #ddd; } .widget-artist-otd5__overlay { padding: 0.5rem 0.6rem; color: #fff; font-size: 0.85rem; line-height: 1.25; } .widget-artist-otd5__art { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; margin: 0; } .widget-artist-otd5__art > a { display: block; position: relative; width: 100%; height: 100%; min-height: 0; } .widget-artist-otd5__art-title { font-size: 0.72rem; line-height: 1.2; color: #fff; text-align: center; padding: 0.35rem 0.4rem; } /* === HOMEPAGETEST shared layout utilities === */ .widget-mpl__part { border-color: var(--mpl-border, var(--g400, #e0d8cc)) !important; } .widget-mpl__panel, .widget-mpl__min-h-panel { min-height: 14rem; } .widget-mpl__min-h-half { min-height: 7rem; } .widget-mpl__min-h-sm { min-height: 3.5rem; } .widget-mpl__col-quarter { width: 25%; min-width: 0; } .widget-mpl__col-half { width: 50%; min-width: 0; } .widget-stf__header-band { letter-spacing: 0.04em; } .widget-museum-6p__placeholder { min-height: 10rem; } .widget-museum-4p__title { font-weight: 700; color: #111; } .widget-museum-4p__title-line { color: #111; } .widget-museum-4p__meta { line-height: 1.5; color: #111; } .widget-dqf__question { color: #111; line-height: 1.4; } .widget-dqf__meta { color: #111; line-height: 1.45; } .mfp-section-head--raised { position: relative; z-index: 1; } .bpa-spotlight__art-link { overflow: hidden; display: block; } .bpa-spotlight__art-img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; } .bpa-text-muted { color: var(--pewter); } .bpa-cc__grid { min-height: 0; height: auto !important; gap: 3px; } .bpa-cc__grid-hero { display: none !important; } .bpa-cc__grid .flex-grow-1 { flex: 1 1 auto; width: 100%; min-width: 0; } .bpa-cc__grid-tile { min-height: 8rem; border-bottom: 1px solid var(--smoke); } .bpa-cc__grid-tile--border-r { border-right: 1px solid var(--smoke); } /* 2×2 tile grid — square aspect, small gap between images */ .bpa-cc__grid .flex-grow-1 > .row { display: grid !important; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); aspect-ratio: 1 / 1; width: 100%; flex-grow: 0 !important; height: auto !important; min-height: 0; gap: 3px !important; } .bpa-cc__grid .flex-grow-1 > .row > [class*="col"] { padding: 0 !important; width: 100% !important; max-width: none !important; min-height: 0 !important; height: 100%; border-bottom: 1px solid var(--smoke); border-right: 1px solid var(--smoke); } .bpa-cc__grid .flex-grow-1 > .row > [class*="col"]:nth-child(2n) { border-right: none; } .bpa-cc__grid .flex-grow-1 > .row > [class*="col"]:nth-child(n + 3) { border-bottom: none; } @media (max-width: 991.98px) { .widget-mpl__col-quarter, .widget-mpl__col-half { width: 100%; } .widget-mpl__panel, .widget-mpl__min-h-panel { min-height: 10rem; } .widget-mpl__min-h-half { min-height: 6rem; } .bpa-cc__grid-hero { display: none !important; } .bpa-cc__grid { flex-direction: column; min-height: 0; } } @media (max-width: 767.98px) { .homepage-site-widgets, .homepage-impressionist-widgets, .homepage-artsdot-widgets, .homepage-buypopart-widgets, .mfp-hp { padding-left: clamp(12px, 3vw, 24px); padding-right: clamp(12px, 3vw, 24px); } .widget-imp10__movement-title { font-size: clamp(18px, 5vw, 24px); } .ti-sh { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; } } /* ===================================================== */ /* MERGED FROM articles_style-V1.9.css */ /* ===================================================== */ a { color: inherit; } H1, H2, H3 { clear: both; font-size: 29px; text-align: left; line-height: 38px; margin-bottom: 32px; font-weight: 400; font-family: var(--font-title); margin-top: 55px; } H2:first-of-type { margin-top: 0; } .HTMLSectionBlock { float: right; max-width: 20vw; padding: 0 1vh 1vh 1vh; text-align: justify; clear: both; font-size: 14px; font-style: italic; font-weight: 400; color: #776E62; line-height: 21px; } .HTMLSectionBlock p { margin: 0; padding: 0; font-size: 14px; font-style: italic; font-weight: 400; color: #776E62; line-height: 21px; } .HTMLSectionBlock a { display: inline-block; color: #000000; text-align: justify; margin-bottom: 8px; } .HTMLSectionBlock img { display: block; margin: 0 auto 0.5em auto; /* Centers the image & adds space below */ max-width: 100%; max-height: 350px; margin-bottom: 8px; } /* ===================================================== */ /* MERGED FROM widget-artwork-labels.css */ /* ===================================================== */ /* * widget-artwork-labels.css — unified typography for artwork/category captions * in widgets. Loaded after site *-V1.9.css in base.html. * Typography only — does not override color, background, padding, or overlay layout. */ .widget-stf__label, .widget-stf__label a, .bpa-stf__label, .bpa-cc__tile-label, .bpa-cc__tile-label--sm, .widget-mpl__category, .widget-mpl__category a, .widget-mpl__caption, .widget-mpl__caption a, .widget-tf-static__category, .widget-tf-static__category a, .widget-recent-own-static__category, .widget-recent-own-static__category a, .widget-stock-ready-static__category, .widget-stock-ready-static__category a, .widget-museum-4p__label, .widget-museum-4__label, .widget-museum-6p__label, .widget-museum-6h__label, .widget-museum-single__caption, .widget-artist-otd5__label, .widget-artist-otd5__art-title, .widget-curated-choice__label, .widget-curated-choice__label--hero, .widget-curated-choice__label--small, .widget-artist-spotlight__art-title, .widget-imp10__art-title, .widget-pop10__art-title, .widget-famous10__art-title, .widget-quiz-artwork__caption { font-family: var(--font-title, inherit) !important; font-size: clamp(0.95rem, 1.2vw, 1.0625rem) !important; font-weight: 400 !important; letter-spacing: 0.02em !important; line-height: 1.3 !important; text-transform: none !important; font-style: normal !important; font-synthesis: none !important; } /* ===================================================== */ /* MERGED FROM userprofile-V1.9.css */ /* Re-themed to brand UI Kit (was WA palette): BPA — pop-art: white page, black panel sidebar, rose accent */ /* ===================================================== */ /* Profile: sidebar shell only — do not use * reset (zeros .sidebar_profile_section / link padding) */ .userprofile-page .sidebar-col, .userprofile-page .mobile-sidebar { box-sizing: border-box; } body.userprofile-page { font-family: var(--font-body); background: #FFFFFF; --up-profile-photo-input-bg: #ffffff; --up-profile-photo-input-border: #DCDCDC; --up-profile-photo-input-ink: #000000; --up-profile-photo-input-radius: 4px; --up-profile-photo-input-padding: 10px; --up-profile-photo-input-font-size: 14px; } .userprofile-page .sidebar-col a, .userprofile-page .mobile-sidebar a { text-decoration: none; } .userprofile-page .sidebar_menu_link ul, .userprofile-page .mobile-sidebar .sidebar_menu_link ul { padding-left: 0px; margin-bottom: 0px; } .userprofile-page .sidebar_menu_link li, .userprofile-page .mobile-sidebar .sidebar_menu_link li { list-style-type: none; } .header_box { background: #FFFFFF; padding: 15px 20px; box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 10%); -webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 10%); -moz-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 10%); margin-left: 320px; } h3.user_heading_text { color: #000000; font-weight: 400; font-size: 20px; line-height: 30px; font-family: var(--font-title); margin-bottom: 0px; } p.user_title_text { color: #000000; font-size: 14px; font-weight: 400; opacity: 0.6; line-height: 22px; margin-bottom: 0px; } .sidebar_box { background: #000000; margin-bottom:0 !important; border:0 !important; height:100%; } .sidebar_menu_link { /* height: 100vh; */ } .sidebar_profile_section { padding: 15px 30px; border-bottom: 1px solid #FFFFFF33; display: flex; gap: 10px; align-items: center; } aside::-webkit-scrollbar { width: 8px; } aside::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } aside::-webkit-scrollbar-thumb { background: #000000; border-radius: 10px; } aside::-webkit-scrollbar-thumb:hover { background: #D4004C; } aside { scrollbar-width: thin; scrollbar-color: #DCDCDC #000000; } .image_letter { width: 50px; height: 50px; line-height: 50px; text-align: center; background: #FFFFFF26; border-radius: 50%; color: #FFFFFF; font-weight: 500; font-size: 19.43px; } .profile_name { color: #FFFFFF; font-weight: 500; font-size: 18px; line-height: 26px; } .profile_email { color: #FFFFFF; opacity: 0.6; font-size: 16px; font-weight: 400; line-height: 16px; } .sidebar_menu_link ul li { cursor: pointer; } .sidebar_menu_link li.active { background: rgba(212, 0, 76, 0.12); border-left: 4px solid var(--bpa-accent, #D4004C); } .sidebar_menu_link li.active a span { color: var(--bpa-accent, #D4004C); } /* .sidebar_menu_link li.active a svg { color: var(--bpa-accent, #D4004C) !important; } */ .sidebar_menu_link li a { padding: 22px 30px; } .sidebar_menu_link li { transition: background-color 0.3s ease, color 0.3s ease; } .sidebar_menu_link li:hover , .logout_section ul li:hover{ background: rgba(212, 0, 76, 0.12); } /* .sidebar_menu_link li:hover a svg, */ .sidebar_menu_link li:hover a span, .logout_section ul li:hover a span, .logout_section ul li:hover a svg { color: var(--bpa-accent, #D4004C); } .sidebar_menu_link ul li a { display: flex; align-items: center; gap: 15px; } .sidebar_menu_link li span, .logout_section ul li span{ color: #FFFFFF; text-transform: uppercase; font-weight: 500; font-size: 16px; } .sidebar_menu_link li a svg , .logout_section ul li a svg { color: #FFFFFF ; } .main_section { } .favorite_img_card { border-right: 1px solid #DCDCDC; border-bottom: 1px solid #DCDCDC; padding: 42px 33px; width: 20%; } .fav_img { max-width: 250px; height: 233px; margin: auto; } .fav_img img{ width: 100%; height: 100%; object-fit: contain; } .fav-artist h2 { font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 20px; text-transform: uppercase; color: var(--bpa-accent, #D4004C); } .fav-artist h2 a{ color: var(--bpa-accent, #D4004C); } .favCard_body { margin-top: 30px; max-width: 250px; margin: auto; margin-top: 30px; } .fav-title { font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 20px; color: #000000; margin: 6px 0px 11px; min-height: 38px; } .fav-title a{ color: #000000; } .button-dash { width: 100%; border: 1px solid var(--ink); border-radius: 0; padding: 11px 15px; color: var(--ink); font-size: 14px; font-weight: 500; text-transform: uppercase; background: transparent; } .favorite_img_section { display: flex; flex-wrap: wrap; } .favorite_img_section:nth-child(-n+5) { border-top: 1px solid #DCDCDC; } .logout_section { width: 100%; z-index: 99; background: #000000; } .logout_section ul li { cursor: pointer; } .logout_section ul li a { display: flex; align-items: center; padding: 22px 30px; gap: 15px; } .logout_section ul li span{ color: #FFFFFF; text-transform: uppercase; font-weight: 500; font-size: 14px; } .main_gap { padding: 16px; } .top_order_section { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; } .order_count { color: #000000; font-size: 14px; font-weight: 400; opacity: 0.8; } .purchase_top { display: flex; align-items: center; justify-content: space-between; padding: 11px 18px 12px 18px; border-bottom: 1px solid #DCDCDC; } .date_amount h6 { color: #000000; font-size: 14px; opacity: 0.6; font-weight: 400; text-transform: uppercase; margin-bottom: 0px; } .date_amount p { color: #000000; font-weight: 500; font-size: 15px; margin-bottom: 0px; } .pur_top_box { display: flex; gap: 17px; } .purchase_section { margin-top: 11px; box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 10%); -webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 10%); -moz-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 10%); background: #FFFFFF; } .purchase-bottom { padding: 15px 18px 15px 18px; } .purchase-bottom ul { display: flex; gap: 15px; } .purchase-bottom ul li { width: 90px; height: 90px; } .purchase-bottom ul li img{ width: 100%; height: 100%; } table { border-color: #DCDCDC !important; } table thead th { background: #F5F5F5 !important; color: #000000 !important; opacity: 0.6; font-weight: 400; text-transform: uppercase; font-size: 14px; padding: 9px 12px !important; } /* Cart table keeps the global rhythm: the generic table theme below carries !important (needed against Bootstrap elsewhere), so the cart scope must re-assert the global-custom cart paddings that used to win via !important. */ .cart_table_box .table > :not(caption) > * > * { padding: 20px 0 !important; } table tbody td { background: #FFFFFF !important; color: #000000 !important; padding: 12px 14px !important; font-family: var(--font-body); font-weight: 400; font-style: Regular; font-size: 16px; leading-trim: NONE; line-height: 24px; letter-spacing: 0%; } .red_box { color: #B0312E; display: inline; font-weight: 500; background: #F0DFCF; padding: 4px 10px; border-radius: 4px; } .green_box { color: #389544; display: inline; font-weight: 500; background: #E4E9D1; padding: 4px 10px; border-radius: 4px; } .yellow_box { color: #D08608; display: inline; font-weight: 500; background: #F3E7CB; padding: 4px 10px; border-radius: 4px; } .table_type_datail { display: flex; align-items: center; gap: 9px; } .table_img { width: 18px; height: 18px; position: relative; top: -3px; } .table_img img { width: 100%; height: 100%; } .img_date_box { position: relative; top: -2px; left: -3px; } /*message_us form css*/ .message-bg { background-color:#F5F5F5; } .message_section { } .message_form { max-width: 630px; /* background: #F5F5F5; */ margin: auto; } textarea.form-control:focus { background-color:#FFFFFF; } .message_image img { width: 100%; height: 100%; object-fit: cover; /* Image ko crop karke fill karega */ display: block; max-height: 800px; } .text-center.sendmsg_textt { /* padding-top: 120px; */ } .text-center.sendmsg_textt h1 { font-size: 48px; font-weight: 400; font-family: var(--font-title); line-height: 56px; color: #000000; } .text-center.sendmsg_textt p { font-size: 16px; line-height: 24px; opacity:0.8; font-weight: 400; font-family: var(--font-body); color: #000000; } .mesg_textarea textarea { width: 100%; height: 280px; margin-top:36px; margin-bottom:30px; padding: 10px; font-size: 16px; font-family: var(--font-body); border: 1px solid #FFFFFF; resize: vertical; background: #FFFFFF; border-radius:0; } .mesg_textarea textarea:focus { border: 1px solid #ccc; box-shadow: none; } .mesg_textarea { } .sendmsg_textt button { padding: 14px; border: none; background: #000000; font-family: var(--font-body); font-weight: 500; font-style: Medium; font-size: 16px; leading-trim: CAP_HEIGHT; line-height: 20px; width:100%; letter-spacing: 6%; text-align: center; text-transform: uppercase; color:#FFFFFF; } .sendmsg_textt button:hover { border: none !important; color:#FFFFFF !important; background: #000000 !important; } /* When textarea is focused, change button color */ .mesg_textarea textarea:focus ~ button { background: var(--ink); } .mesg_textarea textarea:focus { outline: none; /* Remove the blue glow */ border: none; /* Remove the border */ box-shadow: none; /* Ensure no shadow */ } /*succesfull msg */ .text-center.suceesfulmsg_textt{ padding-top: 230px; } .text-center.suceesfulmsg_textt img { padding-bottom: 30px; } .text-center.suceesfulmsg_textt h1 { font-size: 45px; font-weight: 400; font-family: var(--font-title); line-height: 66px; color: #000000; } .text-center.suceesfulmsg_textt p { font-size: 16px; line-height: 24px; font-weight: 400; font-family: var(--font-body); color: #000000; } .suceesfulmsg_textt button { padding: 10px 120px; border: none; background: var(--ink); font-size: 16px; line-height: 24px; font-family: var(--font-body); font-weight: 500; color: #FFFFFF; text-transform: uppercase; } /* Sidebar Default */ aside { width: 100%; background: #F5F5F5; height: 100%; overflow-y: auto; overflow-x: hidden; transition: transform 0.3s ease-in-out; z-index: 999; } /* Toggle Button */ .sidebar-toggle { background: #000000; color: white; border: none; padding: 8px 12px; font-size: 18px; cursor: pointer; z-index: 1000; } .mobile-sidebar { position: fixed; top: 0; left: -270px; height: 100vh; width: 260px; background-color: #000000; z-index: 1050; transition: left 0.3s ease-in-out; box-shadow: 2px 0 5px rgba(0,0,0,0.5); } .mobile-sidebar.active { left: 0; } .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1040; display: none; } .sidebar-overlay.active { display: block; } .sidebar-toggle-btn { position: absolute; top: 1rem; right: 1rem; z-index: 1060; width: 40px !important; } .sidebar_box .sidebar_menu_link li img { height: clamp(20px , 1.25vw , 24px); width: clamp(20px , 1.25vw , 24px); filter: brightness(0) invert(1); transition: filter 0.3s ease; } @media (min-width: 768px) { .sidebar-toggle-btn { display: none; } .profile_picture_top_header_initiales { font-size: 15.43px; } .message_form { padding: 0px 60px; } .message_image { padding:0; } .upload_img_form { display: flex; flex-direction: row-reverse; text-align: left; gap: 12px; } /* .main-grid-row { display: flex; } */ /* .sidebar-col { flex-basis: 25%; max-width: 25%; } .main-content-col { flex-basis: 75%; max-width: 75%; padding-left: 2rem; } */ .mobile-sidebar { display: none; } /* .logout_section { position: absolute; bottom: 0; } */ .sidebar_box { position: relative; } } /* Responsive */ @media (max-width: 768px) { .profile-photo-section .profile-photo-upload .form-control { background-color: #FFFFFF !important; border-radius: 0 !important; padding: 12px !important; border: 1px solid #888888 !important; } .e_card_form { padding: 24px; margin: 24px auto; } .profile-photo-section { padding: 15px; } .profile-photo-circle { width: 120px; height: 120px; border-width: 3px; } .btn-delete-photo { padding: 8px 16px; font-size: 12px; } .form-container input , .main-grid-row input { font-size: 14px; width: 100%; padding: 9px; margin-bottom: 8px; } .purchase-card .btn-prev { font-size: 14px !important; padding: 10px !important; width: auto; } .puchase-card-content { padding: 14px; gap: 14px; } .purchase-card-head { padding: 14px; } .sidebar_profile_section { padding: 15px 15px;}.profile_name{ font-size: 15px;} .profile_email {font-size: 12px;}.sidebar_menu_link li span {font-size: 12px;}.sidebar_menu_link ul li img {width: 20px;height:20px; object-fit:contain;} .text-center.sendmsg_textt h1 {font-size: 35px;line-height: 42px;}.text-center.suceesfulmsg_textt h1 { font-size: 30px;line-height: 38px;} .text-center.suceesfulmsg_textt p {font-size: 13px;line-height: 20px;} .suceesfulmsg_textt button {padding: 10px 80px;font-size: 14px;} .text-center.sendmsg_textt p { font-size: 14px; line-height: 14px; } aside { height: 100%; } .message_image img { height: 339px !important; } .sidebar_box .text-center.mb-20 img{ } .sidebar_box { width:auto !important; } aside {transform: translateX(0%);}aside.active { transform: translateX(0); }.sidebar-toggle {display: block;}#sidebar { display: block; } .main_section { margin-left: 0px;margin-top: 20px;}.sidebar-toggle { display: block;}.header_box {margin-left:0px;padding: 10px 20px;position: fixed; top: 0; left: 0;width: 100%;z-index: 999;} .date_amount h6 {font-size: 12px;}p.user_title_text {font-size: 12px;}.date_amount p {font-size: 12px;}.button-dash {padding: 5px 8px; font-size: 12px;}.purchase-bottom ul li img { object-fit: cover;} .fav_img {height: auto;}.favorite_img_card {padding: 40px 0px; width: 100%;}table thead th {font-size: 12px; white-space: nowrap;} table tbody td { font-size: 12px;white-space: nowrap;}.table_img img {width: 80%; height: 80%;object-fit: contain;}.img_date_box {position: relative;top: 0px;left: 0px;} .message_form {width: 100%;}.sendmsg_textt button {padding: 10px 60px}.message_image {width: 100%;order: -1;padding-top:50px;} .text-center.sendmsg_textt {padding-top: 60px;padding-bottom: 60px;}.text-center.suceesfulmsg_textt {padding-top: 50px; padding-bottom: 50px;} } /* Tablet Portrait to Tablet Landscape */ @media (min-width: 768px) and (max-width: 1023px) { /* Tablet styles */ } /* Small Desktop / Laptop */ @media (min-width: 1024px) and (max-width: 1199px) { } /* Large Desktop */ @media (min-width: 1200px) and (max-width: 1365px) { } /* Extra Large Desktop */ @media (min-width: 1366px) and (max-width: 1919px) { } /* Full HD (1920px) to Ultra-wide */ @media (min-width: 1920px) and (max-width: 2499px) { } /* Ultra-wide 2K/4K */ @media (min-width: 2500px) { } .profile_picture img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } /* Profile Photo Edit Section */ .profile-photo-section { margin-bottom: 25px; padding: 20px; background: #FFFFFF; border-radius: 0px; } .profile-photo-section > label { display: block; color: #000000; position: relative; font-weight: 500; padding: 0; font-size: 16px; margin-bottom: 15px; text-transform: uppercase; }.profile-photo-section > label { display: block; color: #000000; font-weight: 500; font-size: 16px; margin-bottom: 15px; text-transform: uppercase; } .profile-photo-display { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; padding: 20px; background: #F5F5F5; border-radius: 0; } .profile-photo-circle { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 4px solid var(--mist); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); margin-bottom: 15px; } .profile-photo-path { margin-bottom: 10px; text-align: center; } .profile-photo-path small { color: #000000; opacity: 0.7; font-size: 13px; word-break: break-all; } .profile-photo-actions { margin-top: 10px; } .btn-delete-photo { background: var(--bpa-accent, #D4004C); color: #FFFFFF; border: none; padding: 10px 20px; font-size: 14px; font-weight: 500; text-transform: uppercase; border-radius: 4px; cursor: pointer; transition: background 0.3s ease; } .btn-delete-photo:hover { background: #8B2222; } .profile-photo-upload { margin-top: 15px; } .profile-photo-upload input[type="file"] { display: block; width: 100%; padding: 10px; background: #FFFFFF; border: 1px solid #DCDCDC; border-radius: 4px; font-size: 14px; color: #000000; } .profile-photo-upload .form-text { display: block; margin-top: 8px; color: #000000 !important; opacity: 0.6; } /* user interaction-card */ .interaction-card { /* background-color:#DCDCDC; */ border-radius: 0; /* background-color: #DCDCDC; */ padding: 0; border: 0; } .header-section { background-color: #FFFFFF; padding: 12px 20px; margin-bottom: 20px; width: -webkit-fill-available; box-shadow: 0px 0px 10px 0px #0000001A; } .header-section h3 { font-family: var(--font-title); font-weight: 400; font-style: Regular; font-size: 26px; leading-trim: NONE; line-height: 36px; letter-spacing: 0%; color:#000000; } .header-section p { color:#000000; font-family: var(--font-body); font-weight: 400; font-style: Regular; font-size: 16px; leading-trim: NONE; line-height: 24px; letter-spacing: 0%; } .profile_picture { width: 50px; height:50px; border-radius:50%; } .purchase-card { background-color:#FFFFFF; border:1px solid #DCDCDC; padding:0; } .purchase-card-head { padding:20px; border-bottom:1px solid #DCDCDC; } .puchase-card-content { padding:20px; flex-wrap: wrap; gap:20px; } .puchase-card-content img { height:120px; width:120px; } .purchase-card .btn-prev { color: var(--ink); font-family: var(--font-body); font-weight: 500; font-style: Medium; font-size: 16px; leading-trim: CAP_HEIGHT; line-height: 20px; letter-spacing: 6%; text-align: center; text-transform: uppercase; padding:20px; width: auto; } /* Form-floating: always use "focused" style (label above, reduced padding) on account forms */ .e_card_form .form-floating > .form-control, .e_card_form .form-floating > .form-select { padding-top: 1.2rem !important; padding-bottom: 8px; } .e_card_form .form-floating > .form-control ~ label, .e_card_form .form-floating > .form-control-plaintext ~ label, .e_card_form .form-floating > .form-select ~ label { color: #7b7b7b !important; opacity: 0.8; transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); font-size: 12px !important; } /* ═══════════════════════════════════════ BuyPopArt — Infinite Scroll (/art/infinite_scroll/) Scoped via .ais-hero-banner; brand tokens only. ═══════════════════════════════════════ */ body:has(.ais-hero-banner) { --ais-page: var(--paper); --ais-surface: var(--white); --ais-surface-2: var(--frost); --ais-border: var(--mist); --ais-divider: var(--smoke); --ais-frame-bg: var(--smoke); --ais-ink: var(--carbon); --ais-ink-2: var(--iron); --ais-ink-3: var(--charcoal); --ais-faint: var(--pewter); --ais-accent: var(--lc); --ais-accent-dark: var(--lv); --ais-label-accent: var(--lc); --ais-on-accent: var(--white); --ais-shadow-rgb: 17 17 17; --ais-accent-rgb: 212 0 76; --ais-f-heading: var(--font-display); --ais-f-title: var(--font-ui); --ais-f-body: var(--font-ui); --ais-f-label: var(--font-ui); --ais-f-mono: var(--font-ui); --ais-heading-weight: 400; --ais-radius: 2px; --ais-max-w: 1380px; --ais-gutter: clamp(20px, 4vw, 64px); background: var(--ais-page); color: var(--ais-ink); font-family: var(--ais-f-body); -webkit-font-smoothing: antialiased; min-height: 100vh; } body:has(.ais-hero-banner) .rake { position: fixed; inset: -20vh -30vw; z-index: 3; pointer-events: none; background: linear-gradient( 105deg, transparent 38%, rgb(255 255 255 / 45%) 48%, rgb(var(--ais-accent-rgb) / 7%) 52%, transparent 64% ); mix-blend-mode: soft-light; transform: translateX(calc((var(--rake, .2) - .5) * 60vw)); transition: transform .4s ease-out; opacity: .75; } body:has(.ais-hero-banner) .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 1001; pointer-events: none; background: linear-gradient(90deg, var(--ais-accent-dark), var(--ais-accent)); box-shadow: 0 0 8px -1px rgb(var(--ais-accent-rgb) / 45%); transition: width .12s linear; } body:has(.ais-hero-banner) .reveal-up { opacity: 0; transform: translateY(24px); animation: bpa-ais-reveal-up .9s cubic-bezier(.16, 1, .3, 1) forwards; } @keyframes bpa-ais-reveal-up { to { opacity: 1; transform: none; } } body:has(.ais-hero-banner) .feed-head { position: relative; } body:has(.ais-hero-banner) .feed-head::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--ais-accent); animation: bpa-ais-draw-line 1.1s 1s cubic-bezier(.16, 1, .3, 1) forwards; } @keyframes bpa-ais-draw-line { to { width: 64px; } } body:has(.ais-hero-banner) .ais-intro { background: var(--ais-surface); border-bottom: 1px solid var(--ais-border); } body:has(.ais-hero-banner) .ais-intro-inner { max-width: var(--ais-max-w); margin: 0 auto; padding: 36px var(--ais-gutter) 32px; text-align: center; } body:has(.ais-hero-banner) .ais-intro-title { font-family: var(--ais-f-heading); font-size: clamp(22px, 2.4vw, 34px); font-weight: var(--ais-heading-weight); color: var(--ais-ink); margin-bottom: 14px; letter-spacing: .01em; } body:has(.ais-hero-banner) .ais-intro-desc { font-family: var(--ais-f-body); font-size: clamp(15px, 1.4vw, 18px); font-style: italic; line-height: 1.75; color: var(--ais-ink-3); max-width: 760px; margin: 0 auto; } body:has(.ais-hero-banner) .stage { position: relative; z-index: 2; max-width: var(--ais-max-w); margin: 0 auto; padding: 24px var(--ais-gutter) 120px; display: grid; grid-template-columns: 1fr; gap: 56px; transition: grid-template-columns .65s cubic-bezier(.45, .05, .2, 1); } body:has(.ais-hero-banner) .stage.pinned { grid-template-columns: 0.92fr 1.08fr; } body:has(.ais-hero-banner) .pinned-col { display: none; position: sticky; top: 80px; align-self: start; height: fit-content; } body:has(.ais-hero-banner) .stage.pinned .pinned-col { display: block; animation: bpa-ais-pin-in .8s cubic-bezier(.16, 1, .3, 1) both; } @keyframes bpa-ais-pin-in { from { opacity: 0; transform: translateY(34px) scale(.94); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } } body:has(.ais-hero-banner) .plate.grand .frame img { animation: bpa-ais-breathe 14s ease-in-out infinite alternate; } @keyframes bpa-ais-breathe { from { transform: scale(1); } to { transform: scale(1.035); } } body:has(.ais-hero-banner) .plate { background: var(--ais-surface); border: 1px solid var(--ais-border); border-radius: var(--ais-radius); position: relative; overflow: hidden; } body:has(.ais-hero-banner) .plate.grand { box-shadow: 0 30px 60px -20px rgb(var(--ais-shadow-rgb) / 14%); } body:has(.ais-hero-banner) .plate .top { display: flex; align-items: flex-start; } body:has(.ais-hero-banner) .plate .mat { padding: 22px; position: relative; flex: 0 0 auto; width: 46%; max-width: 340px; } body:has(.ais-hero-banner) .plate .frame { position: relative; background: var(--ais-frame-bg); outline: 1px solid var(--ais-divider); outline-offset: -1px; overflow: hidden; width: 100%; } body:has(.ais-hero-banner) .plate .frame img { display: block; width: 100%; height: auto; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1), opacity .9s ease, filter .9s ease; opacity: 0; filter: blur(10px); } body:has(.ais-hero-banner) .plate .frame img.loaded { opacity: 1; filter: blur(0); } body:has(.ais-hero-banner) .plate-no { position: absolute; top: 14px; left: 14px; z-index: 3; background: var(--ais-ink); color: var(--ais-on-accent); font-family: var(--ais-f-mono); font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 5px 9px; border-radius: var(--ais-radius); } body:has(.ais-hero-banner) .plate .caption { flex: 1 1 auto; min-width: 0; padding: 26px 26px 22px 8px; display: flex; flex-direction: column; justify-content: center; } body:has(.ais-hero-banner) .plate .caption .artist { font-family: var(--ais-f-label); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ais-ink); margin-bottom: 8px; } body:has(.ais-hero-banner) .plate .caption .title { font-family: var(--ais-f-title); font-style: italic; font-size: 26px; line-height: 1.2; color: var(--ais-ink-2); } body:has(.ais-hero-banner) .plate .caption .facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ais-divider); } body:has(.ais-hero-banner) .fact { display: inline-block; padding: 8px 13px; background: var(--ais-surface-2); border: 1px solid var(--ais-border); border-radius: var(--ais-radius); font-family: var(--ais-f-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ais-ink-2); opacity: 0; transform: translateY(8px) scale(.96); animation: bpa-ais-fact-in .5s cubic-bezier(.16, 1, .3, 1) forwards; } @keyframes bpa-ais-fact-in { to { opacity: 1; transform: none; } } body:has(.ais-hero-banner) a.fact { text-decoration: none; color: var(--ais-ink-2); cursor: pointer; transition: border-color .3s ease, color .3s ease, background .3s ease, transform .3s ease; } body:has(.ais-hero-banner) a.fact:hover { border-color: var(--ais-accent); color: var(--ais-ink); background: var(--ais-surface); transform: translateY(-1px); } body:has(.ais-hero-banner) .plate .mat a.frame { display: block; cursor: pointer; } body:has(.ais-hero-banner) .plate .below { padding: 0 26px 26px; border-top: 1px solid var(--ais-divider); margin-top: 0; } body:has(.ais-hero-banner) .plate .below .desc { font-family: var(--ais-f-body); font-size: 17px; line-height: 1.7; color: var(--ais-ink-3); padding-top: 20px; } body:has(.ais-hero-banner) .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; } body:has(.ais-hero-banner) .fav-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ais-f-label); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ais-ink-2); background: var(--ais-surface); border: 1px solid var(--ais-border); border-radius: var(--ais-radius); padding: 11px 18px; cursor: pointer; transition: transform .3s ease, border-color .3s ease, color .3s ease, background .3s ease, box-shadow .3s ease; } body:has(.ais-hero-banner) .fav-btn .heart { position: relative; width: 14px; height: 14px; display: inline-block; } body:has(.ais-hero-banner) .fav-btn .heart svg { width: 14px; height: 14px; display: block; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); } body:has(.ais-hero-banner) .fav-btn .heart svg path { fill: none; stroke: var(--ais-ink-2); stroke-width: 1.4; transition: fill .35s ease, stroke .35s ease; } body:has(.ais-hero-banner) .fav-btn:hover { border-color: var(--ais-accent); color: var(--ais-ink); transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgb(var(--ais-shadow-rgb) / 22%); } body:has(.ais-hero-banner) .fav-btn:hover .heart svg path { stroke: var(--ais-accent); } body:has(.ais-hero-banner) .fav-btn.saved { background: var(--ais-accent); border-color: var(--ais-accent); color: var(--ais-on-accent); } body:has(.ais-hero-banner) .fav-btn.saved .heart svg path { fill: var(--ais-on-accent); stroke: var(--ais-on-accent); } body:has(.ais-hero-banner) .fav-btn.saved .heart svg { animation: bpa-ais-heart-pop .45s cubic-bezier(.34, 1.56, .64, 1); } @keyframes bpa-ais-heart-pop { 0% { transform: scale(.6); } 55% { transform: scale(1.35); } 100% { transform: scale(1); } } body:has(.ais-hero-banner) .buy-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ais-f-label); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; border-radius: var(--ais-radius); padding: 11px 18px; cursor: pointer; border: 1px solid var(--ais-ink); text-decoration: none; transition: transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease; } body:has(.ais-hero-banner) .buy-btn .arrow { display: inline-block; transition: transform .35s cubic-bezier(.2, .8, .2, 1); } body:has(.ais-hero-banner) .buy-btn:hover .arrow { transform: translateX(3px); } body:has(.ais-hero-banner) .buy-btn.print { background: var(--ais-surface); color: var(--ais-ink-2); border-color: var(--ais-border); } body:has(.ais-hero-banner) .buy-btn.print:hover { border-color: var(--ais-accent); color: var(--ais-ink); transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgb(var(--ais-shadow-rgb) / 22%); } body:has(.ais-hero-banner) .buy-btn.painting { background: var(--ais-accent); color: var(--ais-on-accent); border-color: var(--ais-accent); } body:has(.ais-hero-banner) .buy-btn.painting:hover { background: var(--ais-accent-dark); border-color: var(--ais-accent-dark); transform: translateY(-1px); box-shadow: 0 10px 26px -10px rgb(var(--ais-accent-rgb) / 45%); } body:has(.ais-hero-banner) .feed-col { min-width: 0; } body:has(.ais-hero-banner) .feed-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--ais-border); } body:has(.ais-hero-banner) .feed-head .label { font-family: var(--ais-f-label); font-size: 10px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--ais-label-accent); } body:has(.ais-hero-banner) .feed-head .count { font-family: var(--ais-f-mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ais-faint); } body:has(.ais-hero-banner) .work-col { display: flex; } body:has(.ais-hero-banner) .work { position: relative; display: flex; align-items: stretch; width: 100%; height: 100%; background: var(--ais-surface); border: 1px solid var(--ais-border); border-radius: var(--ais-radius); cursor: pointer; overflow: hidden; box-shadow: 0 2px 10px -6px rgb(var(--ais-shadow-rgb) / 10%); will-change: opacity, transform; opacity: 0; transform: translateY(40px) scale(.82); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease; } body:has(.ais-hero-banner) .work.in-view { opacity: 1; transform: translateY(0) scale(1); } body:has(.ais-hero-banner) .work:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 14px 36px -16px rgb(var(--ais-shadow-rgb) / 16%); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .9s ease; } body:has(.ais-hero-banner) .work.clicked { transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease, opacity .22s ease; transform: scale(1.05) translateY(-4px); box-shadow: 0 30px 70px -18px rgb(var(--ais-shadow-rgb) / 24%); z-index: 5; } body:has(.ais-hero-banner) .work.clicked .frame img { transform: scale(1.06); } body:has(.ais-hero-banner) .work.clicked .frame::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(120deg, transparent 30%, rgb(var(--ais-accent-rgb) / 35%) 50%, transparent 70%); background-size: 280% 100%; animation: bpa-ais-shine .55s ease-out forwards; } @keyframes bpa-ais-shine { from { background-position: 140% 0; } to { background-position: -140% 0; } } body:has(.ais-hero-banner) .work .badge { position: absolute; top: 10px; left: 10px; z-index: 3; background: var(--ais-surface); border: 1px solid var(--ais-border); font-family: var(--ais-f-mono); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ais-label-accent); padding: 3px 7px; border-radius: var(--ais-radius); opacity: 0; transform: translateY(-4px); transition: opacity .45s ease, transform .45s ease; } body:has(.ais-hero-banner) .work:hover .badge { opacity: 1; transform: none; } body:has(.ais-hero-banner) .work .mat { padding: 14px; position: relative; flex: 0 0 auto; width: 40%; max-width: 170px; display: flex; align-items: center; } body:has(.ais-hero-banner) .work .frame { position: relative; background: var(--ais-frame-bg); outline: 1px solid var(--ais-divider); outline-offset: -1px; overflow: hidden; width: 100%; transition: transform .35s cubic-bezier(.2, .8, .2, 1); transform-style: preserve-3d; } body:has(.ais-hero-banner) .work .frame img { display: block; width: 100%; height: auto; transition: transform 1.3s cubic-bezier(.2, .8, .2, 1), filter .6s ease, opacity .9s ease; opacity: 0; filter: blur(8px); } body:has(.ais-hero-banner) .work .frame img.loaded { opacity: 1; filter: blur(0); } body:has(.ais-hero-banner) .work:hover .frame img { transform: scale(1.04); } body:has(.ais-hero-banner) .work .frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 120%, rgb(var(--ais-accent-rgb) / 8%), transparent 60%); opacity: 0; transition: opacity .6s ease; } body:has(.ais-hero-banner) .work:hover .frame::after { opacity: 1; } body:has(.ais-hero-banner) .work .body { flex: 1 1 auto; min-width: 0; padding: 16px 18px 16px 6px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--ais-divider); } body:has(.ais-hero-banner) .work .body .artist { font-family: var(--ais-f-label); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ais-ink); margin-bottom: 6px; } body:has(.ais-hero-banner) .work .body .title { font-family: var(--ais-f-title); font-style: italic; font-size: 17px; line-height: 1.25; color: var(--ais-ink-2); } body:has(.ais-hero-banner) .work .body .meta { font-family: var(--ais-f-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ais-faint); margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--ais-divider); } body:has(.ais-hero-banner) .sentinel { width: 100%; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } body:has(.ais-hero-banner) .feed.swapping { animation: bpa-ais-feed-out .35s ease forwards; } @keyframes bpa-ais-feed-out { to { opacity: 0; transform: translateY(10px); } } body:has(.ais-hero-banner) .feed.swap-in { animation: bpa-ais-feed-in .5s cubic-bezier(.2, .8, .2, 1); } @keyframes bpa-ais-feed-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (min-width: 992px) { body:has(.ais-hero-banner) .stage.pinned .feed > .work-col { flex: 0 0 50%; max-width: 50%; } } @media (max-width: 1100px) { body:has(.ais-hero-banner) .stage.pinned { grid-template-columns: 1fr; } body:has(.ais-hero-banner) .pinned-col { position: relative; top: 0; } } @media (max-width: 991px) { body:has(.ais-hero-banner) .stage.pinned .feed > .work-col { flex: 0 0 100%; max-width: 100%; } } @media (max-width: 640px) { body:has(.ais-hero-banner) .work { flex-direction: column; } body:has(.ais-hero-banner) .work .mat { width: 100%; max-width: none; } body:has(.ais-hero-banner) .work .body { border-left: none; border-top: 1px solid var(--ais-divider); padding: 16px 18px; } body:has(.ais-hero-banner) .plate .top { flex-direction: column; } body:has(.ais-hero-banner) .plate .mat { width: 100%; max-width: none; } body:has(.ais-hero-banner) .plate .caption { padding: 0 26px 22px; } } /* ===== artwork_info.html — BPA (pop-art/bold) ===== */ .art_info_section .historicle_box, .art_info_section .historicle_box a { color: var(--charcoal, #555555); } .art_info_section .historicle_box h1, .art_info_section .historicle_box h2, .art_info_section .historicle_box h3 { color: var(--ink, #000000); font-family: var(--font-title); } .artinfo_top h4, .historicle_box.artwork-info-infobox .art-info-page-title { color: var(--ink, #000000); font-family: var(--font-title); } .art_info_details, .historicle_box.artwork-info-infobox { background: var(--white, #ffffff); border: 2px solid var(--ink, #000000); box-shadow: none; } .art_info_inner { background: var(--frost, #F5F5F5); border: 1px solid var(--mist, #DCDCDC); } .art_info_inner h4 { color: var(--lc, #D4004C); text-transform: uppercase; font-family: var(--font-title); } .art_info_inner p { color: var(--charcoal, #555555); } .artwork-info-meta-link { color: var(--charcoal, #555555); } .artwork-info-meta-link:hover { color: var(--lc, #D4004C); } .art_info_box .artwork-info-infobox a:hover, .art_info_box .historicle_box a:hover, .art_info_box .artinfo_top h4 a:hover, .art_info_box .art_info_inner h4 a:hover, .art_info_box .details_reproducton a:hover, .art_info_box .fav-icon-artwork a:hover { color: var(--lc, #D4004C); } /* ═══════════════════════════════════════════════════════════════════ BPA — BuyPopArt — Similar artworks browse (/art/similar//) Scoped to .artwork-similar-page — gallery-minimal tokens ═══════════════════════════════════════════════════════════════════ */ .search_sec.artwork-similar-page { --bpa-bg: #ffffff; --bpa-ink: #161616; --bpa-ink-2: #555555; --bpa-ink-3: #888888; --bpa-line: #e6e6e6; --bpa-line-2: #d6d6d6; --bpa-band: #f5f5f5; --bpa-slot: #eeeeee; --bpa-accent: #D4004C; --bpa-accent-dark: #8B0032; --bpa-body: var(--font-body); } /* Page chrome — breadcrumb, title row, sort */ .search_sec.artwork-similar-page .nav-list li, .search_sec.artwork-similar-page .nav-list a, .search_sec.artwork-similar-page .main-heading, .search_sec.artwork-similar-page .Showing_text, .search_sec.artwork-similar-page .sorting_content, .search_sec.artwork-similar-page .sort_by { color: var(--bpa-ink); font-family: var(--bpa-body); } .search_sec.artwork-similar-page .Showing_text .form-control, .search_sec.artwork-similar-page .sorting_content select.custom-select { background-color: var(--bpa-bg) !important; border: 1px solid var(--bpa-line-2) !important; color: var(--bpa-ink) !important; border-radius: 2px; } /* Criteria sidebar */ .search_sec.artwork-similar-page .filter-panel { background-color: var(--bpa-band); border: 1px solid var(--bpa-line); border-radius: 2px; font-family: var(--bpa-body); } .search_sec.artwork-similar-page .filter-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 12px 16px; min-height: 44px; box-sizing: border-box; } .search_sec.artwork-similar-page .filter-title span { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--bpa-body); font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bpa-ink); } .search_sec.artwork-similar-page .filter-title span img { display: block; width: 16px; height: 16px; flex-shrink: 0; } .search_sec.artwork-similar-page .colors_list { padding: 16px !important; } .search_sec.artwork-similar-page .colors_list li { background: transparent !important; border: none !important; color: var(--bpa-ink); } .search_sec.artwork-similar-page .colors_list li a { display: block; padding: 10px 12px !important; font-family: var(--bpa-body); font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--bpa-ink-2) !important; text-decoration: none; border-radius: 2px; transition: color 0.15s ease, background-color 0.15s ease; } .search_sec.artwork-similar-page .colors_list li a:hover { color: var(--bpa-accent) !important; background-color: var(--bpa-slot); } .search_sec.artwork-similar-page .colors_list li a.active { color: var(--bpa-accent) !important; font-weight: 600; background-color: var(--bpa-slot); } /* Grid — catalog cards */ .search_sec.artwork-similar-page .custom_search .row > [class*="col-"] { border-color: var(--bpa-line) !important; } .search_sec.artwork-similar-page .custom_search .search_card { background-color: var(--bpa-bg); border-color: var(--bpa-line) !important; transition: background-color 0.2s ease; } .search_sec.artwork-similar-page .search_card:hover { background-color: var(--bpa-band) !important; } .search_sec.artwork-similar-page .hover_visible { background: var(--bpa-band) !important; border-bottom-color: var(--bpa-line) !important; } .search_sec.artwork-similar-page .search_card .art-artist { align-items: center; gap: 0.5rem; } .search_sec.artwork-similar-page .search_card .art-artist h2 { margin: 0; flex: 1 1 auto; min-width: 0; } .search_sec.artwork-similar-page .search_card .art-artist h2, .search_sec.artwork-similar-page .search_card .art-artist h2 a { font-family: var(--bpa-body); font-size: 12px; font-weight: 600; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; color: var(--bpa-accent) !important; text-decoration: none; transition: color 0.15s ease; } .search_sec.artwork-similar-page .search_card .art-artist h2 a:hover { color: var(--bpa-accent-dark) !important; } .search_sec.artwork-similar-page .search_card .art-artist span, .search_sec.artwork-similar-page .search_card .art-artist span a { font-family: var(--bpa-body); font-size: 12px; font-weight: 400; line-height: 1.35; text-align: right; flex-shrink: 0; opacity: 1; color: var(--bpa-ink-3) !important; } .search_sec.artwork-similar-page .search_card .art-title, .search_sec.artwork-similar-page .search_card .art-title a { font-family: var(--bpa-body); font-size: 14px; font-weight: 400; line-height: 1.4; text-align: left; color: var(--bpa-ink) !important; text-decoration: none; transition: color 0.15s ease; } .search_sec.artwork-similar-page .search_card .art-title a:hover { color: var(--bpa-accent) !important; } .search_sec.artwork-similar-page .search_card .hover_visible p { font-family: var(--bpa-body); font-size: 13px; font-weight: 300; font-style: normal; line-height: 1.55; text-align: left; color: var(--bpa-ink-2) !important; opacity: 1; margin-bottom: 24px; } .search_sec.artwork-similar-page .search_card .hover_visible p a { color: var(--bpa-accent) !important; } .search_sec.artwork-similar-page .search_card .addToCart, .search_sec.artwork-similar-page .search_card .addToCart.added { background: var(--bpa-ink) !important; color: #ffffff !important; font-family: var(--bpa-body); font-size: 13px; font-weight: 600; line-height: 1.35; letter-spacing: 0.04em; text-transform: none; border-radius: 999px; padding: 10px 20px; width: auto; min-width: 0; transition: background-color 0.15s ease, color 0.15s ease; } .search_sec.artwork-similar-page .search_card .addToCart:hover { background: var(--bpa-accent) !important; color: #ffffff !important; } .search_sec.artwork-similar-page .custom_search .cartbtn_group a.addToCart { color: #ffffff !important; } .search_sec.artwork-similar-page .search_card .fav_group { background: var(--bpa-bg); border: 1px solid var(--bpa-line-2) !important; border-radius: 999px; padding: 7px 10px; transition: border-color 0.15s ease, background-color 0.15s ease; } .search_sec.artwork-similar-page .search_card .fav_group:hover, .search_sec.artwork-similar-page .search_card .fav_group.active { background: var(--bpa-slot) !important; border-color: var(--bpa-accent) !important; } /* =================================================================== Ecard (artworks/artwork_ecard.html) — BPA BuyPopArt Pop-art: hard 2px black frames, zero radius, Anton display, rose CTA. =================================================================== */ .ecard-page .e_card_section .e_card_form, .ecard-page .e_card_form { background: var(--white, #ffffff) !important; border: 2px solid var(--ink, #000000) !important; border-radius: 0; } .ecard-page .e_card_form .form_heading { font-family: var(--font-display, 'Anton', sans-serif); color: var(--ink, #000000); text-transform: uppercase; letter-spacing: .01em; } .ecard-page .e_card_form .form_content { color: var(--charcoal, #555555); } .ecard-page .e_card_form .form-control { background: var(--white, #ffffff); border: 2px solid var(--ink, #000000); color: var(--carbon, #111111); border-radius: 0; } .ecard-page .e_card_form .form-control:focus { border-color: var(--lc, #D4004C); box-shadow: none; } .ecard-page .form-top_heading { background: var(--frost, #F5F5F5) !important; border: 2px solid var(--ink, #000000); } .ecard-page .floating_right_heading h5, .ecard-page .floating_right_heading p { color: var(--ink, #000000); } .ecard-page .add_tocart_btn button { background: var(--ink, #000000); color: var(--white, #ffffff); border: 2px solid var(--ink, #000000); border-radius: 0; font-family: var(--font-ui, 'Inter', sans-serif); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .ecard-page .add_tocart_btn button:hover { background: var(--lc, #D4004C); border-color: var(--lc, #D4004C); color: var(--white, #ffffff); } .ecard-page .e-card_img_upload_section { background: var(--frost, #F5F5F5) !important; border: 2px solid var(--ink, #000000) !important; } .ecard-page .e-card_img_upload_section h5 { font-family: var(--font-display, 'Anton', sans-serif); color: var(--ink, #000000); text-transform: uppercase; } /* ===================================================== PrintReproduction & DigitalImage buy pages — article (historicle_box) typography Structure lives in global-custom-V1.9.css; brand ink/links here. ===================================================== */ .reproduction_main_page .historicle_box, .reproduction_main_page .historicle_box p, .reproduction_main_page .historicle_box h1, .reproduction_main_page .historicle_box h2, .reproduction_main_page .historicle_box h3, .adc-buy-page-section .historicle_box, .adc-buy-page-section .historicle_box p, .adc-buy-page-section .historicle_box h1, .adc-buy-page-section .historicle_box h2, .adc-buy-page-section .historicle_box h3 { color: var(--bpa-ink, #161616); } .reproduction_main_page .historicle_box a, .adc-buy-page-section .historicle_box a { color: var(--bpa-accent, #D4004C); } /* ===== Artwork catalog list card — BuyPopArt (UI Kit aligned) ===== */ /* Scope: .search_sec.catalog-list-page and .search_sec.artwork-list-page — mirrors the .artwork-similar-page pattern already in this file. Every selector is double-prefixed with both page-wrapper classes so rules never bleed into the ~95 other pages that also use .search_card. No HTML or class names were changed; pure CSS overrides only. */ /* ── 1. Page-scoped design tokens ──────────────────────────────────────── */ .search_sec.catalog-list-page, .search_sec.artwork-list-page { --bpa-bg: #ffffff; --bpa-ink: #000000; --bpa-ink-2: #2A2A2A; --bpa-ink-3: #888888; --bpa-line: #000000; /* hard black border — comic-panel feel */ --bpa-line-2: #DCDCDC; --bpa-band: #F5F5F5; --bpa-slot: #EDEDED; --bpa-accent: #D4004C; /* BPA rose — primary CTA */ --bpa-accent-dark: #8B0032; /* visited / pressed */ --bpa-body: var(--font-ui); --bpa-display: var(--font-display); } /* ── 2. Page chrome — breadcrumb, title row, sort ──────────────────────── */ .search_sec.catalog-list-page .nav-list li, .search_sec.catalog-list-page .nav-list a, .search_sec.catalog-list-page .main-heading, .search_sec.catalog-list-page .Showing_text, .search_sec.catalog-list-page .sorting_content, .search_sec.catalog-list-page .sort_by, .search_sec.artwork-list-page .nav-list li, .search_sec.artwork-list-page .nav-list a, .search_sec.artwork-list-page .main-heading, .search_sec.artwork-list-page .Showing_text, .search_sec.artwork-list-page .sorting_content, .search_sec.artwork-list-page .sort_by { color: var(--bpa-ink); font-family: var(--bpa-body); } .search_sec.catalog-list-page .Showing_text .form-control, .search_sec.catalog-list-page .sorting_content select.custom-select, .search_sec.artwork-list-page .Showing_text .form-control, .search_sec.artwork-list-page .sorting_content select.custom-select { background-color: var(--bpa-bg) !important; border: 2px solid var(--bpa-ink) !important; color: var(--bpa-ink) !important; border-radius: 0; font-family: var(--bpa-body); font-size: 13px; } /* ── 3. Column gutter border — removed for clean card-only look ─────────── */ .search_sec.catalog-list-page .custom_search .row > [class*="col-"], .search_sec.artwork-list-page .custom_search .row > [class*="col-"], .search_sec.museum-list-page .custom_search .row > [class*="col-"], .search_sec.artist-list-page .custom_search .row > [class*="col-"], .search_sec.article-list-page .custom_search .row > [class*="col-"] { border: none !important; } /* ── 4. Card surface — white ground, hard 2px black frame, zero radius ─── */ .search_sec.catalog-list-page .custom_search .search_card, .search_sec.artwork-list-page .custom_search .search_card { background-color: var(--bpa-bg); border: 2px solid var(--bpa-ink) !important; border-radius: 0 !important; box-shadow: none; overflow: visible; position: relative; transition: background-color 0.15s ease, box-shadow 0.15s ease; } /* Card hover — strong drop-shadow lifts the card off the grid */ .search_sec.catalog-list-page .custom_search .search_card:hover, .search_sec.artwork-list-page .custom_search .search_card:hover { background-color: var(--bpa-band) !important; box-shadow: 6px 6px 0 0 var(--bpa-ink) !important; border-bottom-color: transparent !important; z-index: 20; } /* ── 5. Image block ────────────────────────────────────────────────────── */ .search_sec.catalog-list-page .custom_search .search_card .search_img, .search_sec.artwork-list-page .custom_search .search_card .search_img { border-radius: 0; overflow: hidden; } /* ── 6. Card body — tight, flush, separated by 2px black rule ─────────── */ .search_sec.catalog-list-page .custom_search .search_card .searchCard_body, .search_sec.artwork-list-page .custom_search .search_card .searchCard_body { padding: 10px 12px 8px; border-top: 2px solid var(--bpa-ink); } /* ── 7. Artist row layout ─────────────────────────────────────────────── */ .search_sec.catalog-list-page .custom_search .search_card .art-artist, .search_sec.artwork-list-page .custom_search .search_card .art-artist { display: flex; align-items: center; gap: 0.4rem; } .search_sec.catalog-list-page .custom_search .search_card .art-artist h2, .search_sec.artwork-list-page .custom_search .search_card .art-artist h2 { margin: 0; flex: 1 1 auto; min-width: 0; } /* Artist name — Anton display, uppercase, BPA rose */ .search_sec.catalog-list-page .custom_search .search_card .art-artist h2, .search_sec.catalog-list-page .custom_search .search_card .art-artist h2 a, .search_sec.artwork-list-page .custom_search .search_card .art-artist h2, .search_sec.artwork-list-page .custom_search .search_card .art-artist h2 a { font-family: var(--bpa-display) !important; font-size: 13px !important; font-weight: 400 !important; /* Anton is single-weight */ line-height: 1.2 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; text-align: left; color: var(--bpa-accent) !important; text-decoration: none; transition: color 0.15s ease; } .search_sec.catalog-list-page .custom_search .search_card .art-artist h2 a:hover, .search_sec.artwork-list-page .custom_search .search_card .art-artist h2 a:hover { color: var(--bpa-accent-dark) !important; } /* Year / date — muted Inter, right-aligned */ .search_sec.catalog-list-page .custom_search .search_card .art-artist span, .search_sec.catalog-list-page .custom_search .search_card .art-artist span a, .search_sec.artwork-list-page .custom_search .search_card .art-artist span, .search_sec.artwork-list-page .custom_search .search_card .art-artist span a { font-family: var(--bpa-body) !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.35; text-align: right; flex-shrink: 0; color: var(--bpa-ink-3) !important; } /* ── 8. Artwork title — Inter medium, dark ink ──────────────────────────── */ .search_sec.catalog-list-page .custom_search .search_card .art-title, .search_sec.catalog-list-page .custom_search .search_card .art-title a, .search_sec.artwork-list-page .custom_search .search_card .art-title, .search_sec.artwork-list-page .custom_search .search_card .art-title a { font-family: var(--bpa-body) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.4; text-align: left; color: var(--bpa-ink-2) !important; text-decoration: none; transition: color 0.15s ease; } .search_sec.catalog-list-page .custom_search .search_card .art-title a:hover, .search_sec.artwork-list-page .custom_search .search_card .art-title a:hover { color: var(--bpa-accent) !important; } /* ── 9. Hover panel — .hover_visible reveal ───────────────────────────── Global base keeps display:none / display:block toggle untouched. White panel matches card surface; dark ink text for legibility. ──────────────────────────────────────────────────────────────────────── */ .search_sec.catalog-list-page .custom_search .search_card .hover_visible, .search_sec.artwork-list-page .custom_search .search_card .hover_visible { position: absolute; top: 100%; left: -2px; width: calc(100% + 4px); box-sizing: border-box; margin-top: 0 !important; z-index: 1; background: var(--bpa-bg) !important; /* white — match card surface */ border: 2px solid var(--bpa-ink); border-top: 2px solid var(--bpa-ink); padding: 10px 14px 12px; } /* Snippet text — dark ink on white */ .search_sec.catalog-list-page .custom_search .search_card .hover_visible p, .search_sec.artwork-list-page .custom_search .search_card .hover_visible p { font-family: var(--bpa-body) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.55; text-align: left; color: var(--bpa-ink-2) !important; opacity: 1; margin-bottom: 16px; } .search_sec.catalog-list-page .custom_search .search_card .hover_visible p a, .search_sec.artwork-list-page .custom_search .search_card .hover_visible p a { color: var(--bpa-accent) !important; } .search_sec.catalog-list-page .custom_search .search_card .hover_visible p a:hover, .search_sec.artwork-list-page .custom_search .search_card .hover_visible p a:hover { color: #ff4d8a !important; } /* ── 10. Add-to-cart CTA — BPA primary button (rose fill, white text) ───── */ .search_sec.catalog-list-page .custom_search .search_card .addToCart, .search_sec.catalog-list-page .custom_search .search_card .addToCart.added, .search_sec.artwork-list-page .custom_search .search_card .addToCart, .search_sec.artwork-list-page .custom_search .search_card .addToCart.added { background: var(--bpa-accent) !important; color: #ffffff !important; font-family: var(--bpa-body) !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.2; letter-spacing: 0.1em !important; text-transform: uppercase !important; border: 2px solid var(--bpa-accent) !important; border-radius: 0 !important; /* chunky geometric — not pill */ padding: 10px 18px !important; width: auto; min-width: 0; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } /* Price display inside the button */ .search_sec.catalog-list-page .custom_search .search_card .addToCart .product-price-display, .search_sec.artwork-list-page .custom_search .search_card .addToCart .product-price-display { color: #ffffff !important; font-family: var(--bpa-body) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; } /* Explicit colour for anchor wrapping the button */ .search_sec.catalog-list-page .custom_search .cartbtn_group a.addToCart, .search_sec.artwork-list-page .custom_search .cartbtn_group a.addToCart { color: #ffffff !important; } /* Hover — black fill, rose border */ .search_sec.catalog-list-page .custom_search .search_card .addToCart:hover, .search_sec.catalog-list-page .custom_search .cartbtn_group a.addToCart:hover, .search_sec.artwork-list-page .custom_search .search_card .addToCart:hover, .search_sec.artwork-list-page .custom_search .cartbtn_group a.addToCart:hover { background: var(--bpa-ink) !important; border-color: var(--bpa-ink) !important; color: #ffffff !important; } /* ── 11. Fav toggle — hard-edge ghost box, rose on hover/active ──────────── */ .search_sec.catalog-list-page .custom_search .search_card .fav_group, .search_sec.artwork-list-page .custom_search .search_card .fav_group { background: transparent; border: 2px solid var(--bpa-ink) !important; border-radius: 0 !important; /* hard edge — on-brand */ padding: 7px 10px; transition: border-color 0.15s ease, background-color 0.15s ease; } .search_sec.catalog-list-page .custom_search .search_card .fav_group:hover, .search_sec.catalog-list-page .custom_search .search_card .fav_group.active, .search_sec.artwork-list-page .custom_search .search_card .fav_group:hover, .search_sec.artwork-list-page .custom_search .search_card .fav_group.active { background: var(--bpa-accent) !important; border-color: var(--bpa-accent) !important; } /* Icon tint — dark on white panel; invert on rose hover/active */ .search_sec.catalog-list-page .custom_search .search_card .fav_group .unfav_icon, .search_sec.catalog-list-page .custom_search .search_card .fav_group .fav_icon, .search_sec.artwork-list-page .custom_search .search_card .fav_group .unfav_icon, .search_sec.artwork-list-page .custom_search .search_card .fav_group .fav_icon { filter: brightness(0); opacity: 0.75; transition: opacity 0.15s ease, filter 0.15s ease; } .search_sec.catalog-list-page .custom_search .search_card .fav_group:hover .unfav_icon, .search_sec.catalog-list-page .custom_search .search_card .fav_group:hover .fav_icon, .search_sec.catalog-list-page .custom_search .search_card .fav_group.active .fav_icon, .search_sec.artwork-list-page .custom_search .search_card .fav_group:hover .unfav_icon, .search_sec.artwork-list-page .custom_search .search_card .fav_group:hover .fav_icon, .search_sec.artwork-list-page .custom_search .search_card .fav_group.active .fav_icon { opacity: 1; filter: brightness(0) invert(1); } /* ── 12. card_bottom layout — price/CTA left, fav right ─────────────────── */ .search_sec.catalog-list-page .custom_search .search_card .card_bottom, .search_sec.artwork-list-page .custom_search .search_card .card_bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* ===== END Artwork catalog list card — BuyPopArt ===== */ /* ============================================================ Article detail page (article_detail.html) — BuyPopArt Overrides the brand-neutral beige structure in global-custom with BPA tokens: stark black/white, pop-art rose accent, Anton display over Inter. Scoped under .article_main_page. ============================================================ */ /* Keyword tag pills — solid black label, pop-art style */ .article_main_page .art_his_text { background: var(--ink, #000000); color: var(--white, #FFFFFF); font-family: var(--font-ui, "Inter", sans-serif); font-weight: 700; letter-spacing: 0.06em; } .article_main_page .art_his_text a { color: inherit; } /* Hero title + subtitle */ .article_main_page .art_history_wrapper .heading_text, .article_main_page .heading_text { color: var(--ink, #000000); font-family: var(--font-display, "Anton", sans-serif); text-transform: uppercase; } .article_main_page .taggart { color: var(--charcoal, #555555); } /* Body copy + headings + links */ .article_main_page .historicle_box, .article_main_page .historicle_box p { color: var(--charcoal, #555555); font-family: var(--font-ui, "Inter", sans-serif); } .article_main_page .historicle_box h1, .article_main_page .historicle_box h2, .article_main_page .historicle_box h3, .article_main_page .historicle_box .heading_text { color: var(--ink, #000000); font-family: var(--font-display, "Anton", sans-serif); text-transform: uppercase; } .article_main_page .historicle_box a { color: var(--lc, #D4004C); } .article_main_page .historicle_box a:hover { color: var(--lv, #8B0032); } /* Sidebar section headings */ .article_main_page .side_headings { color: var(--ink, #000000); } /* Table of contents links */ .article_main_page .tableContent .nav-link { color: var(--charcoal, #555555); } .article_main_page .tableContent li.nav-item { border-left-color: var(--mist, #DCDCDC); } .article_main_page .tableContent .nav-pills .nav-link.active, .article_main_page .tableContent .nav-pills .show > .nav-link { color: var(--ink, #000000); border-left: 2px solid var(--ink, #000000) !important; } /* Related-artworks sidebar */ .article_main_page .related_artwork_box .vincent_color, .article_main_page .related_artwork_box .vincent_color a { color: var(--lc, #D4004C); } .article_main_page .related_artwork_box p a { color: var(--charcoal, #555555); } .article_main_page .related_artwork_box p a:hover { color: var(--ink, #000000); } /* Related-articles list */ .article_main_page .related_aricle_box { border-bottom-color: var(--mist, #DCDCDC); } .article_main_page .related_aricle_box h4, .article_main_page .related_aricle_box h4 a { color: var(--ink, #000000); } .article_main_page .related_aricle_box p { color: var(--charcoal, #555555); } .article_main_page .explore_techniques, .article_main_page .explore_techniques a { color: var(--lc, #D4004C); } /* ===== END Article detail page — BuyPopArt ===== */ /* ===== TOP 100 PAGES (artists / artworks / museums / articles) ===== */ /* BuyPopArt identity: Anton display caps, Inter UI, pop-art rose (--lc #D4004C) accent, 0px radius comic-panel borders (2px black), hard hover lifts. Tokens below feed the structural base in global-custom; visual overrides below them push each component to the bold BPA look. */ /* --- Brand token mapping (inherited by all three component roots) --- */ .top100-artist-grid, .top100-artwork-list, .top100-listing { --top100-card-bg: var(--white); --top100-card-border: var(--ink); /* comic-panel black outline */ --top100-ink: var(--carbon); /* primary text */ --top100-muted: var(--charcoal);/* clamped descriptions */ --top100-accent: var(--lc); /* pop-art rose */ --top100-rank-color: var(--smoke); /* giant ghost rank number */ --top100-card-radius: 0; /* sharp BPA edges */ } /* ========================================================= A) ARTISTS — portrait card grid ========================================================= */ .top100-artist-grid .top100-artist-card { background: var(--white); border: var(--bpa-border); /* 2px solid black */ border-radius: 0; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .top100-artist-grid .top100-artist-card:hover { transform: translateY(-3px); border-color: var(--lc); box-shadow: 8px 8px 0 0 var(--lc); /* hard pop-art offset shadow */ } .top100-artist-grid .top100-artist-card__photo { border: var(--bpa-border); border-radius: 50%; transition: border-color .2s ease; } .top100-artist-grid .top100-artist-card:hover .top100-artist-card__photo { border-color: var(--lc); } .top100-artist-grid .top100-artist-card__name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .07em; line-height: 1.05; } .top100-artist-grid .top100-artist-card__name a { color: var(--ink); text-decoration: none; } .top100-artist-grid .top100-artist-card:hover .top100-artist-card__name a { color: var(--lc); } .top100-artist-grid .top100-artist-card__desc { color: var(--charcoal); font-family: var(--font-ui); line-height: 1.5; } /* ========================================================= B) ARTWORKS — zigzag tilt gallery ========================================================= */ .top100-artwork-list .top100-artwork-card__rank { font-family: var(--font-display); color: var(--smoke); /* faint ghost number... */ -webkit-text-stroke: 2px var(--mist); transition: color .4s ease, -webkit-text-stroke-color .4s ease; } .top100-artwork-list .top100-artwork-card:hover .top100-artwork-card__rank { color: var(--lc); /* ...ignites rose on hover */ -webkit-text-stroke-color: var(--lc); } .top100-artwork-list .top100-artwork-card__inner { border-radius: 0; } .top100-artwork-list .top100-artwork-card:hover .top100-artwork-card__inner { border: var(--bpa-border); /* 2px black comic panel */ background: var(--frost); box-shadow: 10px 10px 0 0 var(--lc); /* hard offset pop shadow */ } .top100-artwork-list .top100-artwork-card__photo { border-radius: 0; /* sharp BPA edges */ } .top100-artwork-list .top100-artwork-card__meta p { font-family: var(--font-ui); color: var(--carbon); } .top100-artwork-list .top100-artwork-card__artist a { font-family: var(--font-ui); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lc); /* pop-art rose artist label */ } .top100-artwork-list .top100-artwork-card__title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; } .top100-artwork-list .top100-artwork-card__title a { color: var(--ink); } .top100-artwork-list .top100-artwork-card:hover .top100-artwork-card__title a { color: var(--lc); } /* ========================================================= C) MUSEUMS + ARTICLES — .search_card listing Scoped under .top100-listing only; bare .search_card untouched. ========================================================= */ .top100-listing .search_card { background: var(--white); border: var(--bpa-border); border-radius: 0; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .top100-listing .search_card:hover { transform: translateY(-3px); border-color: var(--lc); box-shadow: 8px 8px 0 0 var(--lc); /* signature hard pop shadow */ } .top100-listing .search_img { border-bottom: var(--bpa-border); } .top100-listing .search_img img { border-radius: 0; } .top100-listing__card .art-title, .top100-listing__card .art-title a { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); text-decoration: none; } .top100-listing__card .art-title a:hover { color: var(--lc); } .top100-listing .art-artist h2, .top100-listing .art-artist h2 a { font-family: var(--font-ui); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lc); /* pop-art rose eyebrow */ text-decoration: none; line-height: normal; } .top100-listing .art-artist h2 a:hover { color: var(--iron); } /* .addToCart — BPA UI-Kit solid button (black fill, sharp, uppercase) */ .top100-listing .addToCart { background: var(--ink); color: var(--white); border: var(--bpa-border); border-radius: 0; font-family: var(--font-ui); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: background .2s ease, color .2s ease; } .top100-listing .addToCart:hover { background: var(--lc); /* pop-art rose on hover */ color: var(--white); border-color: var(--lc); } /* Hover panel — white comic-panel box below card (matches article_list cards) */ .top100-listing .search_card.top100-listing__card .hover_visible { background: var(--white); border: var(--bpa-border); border-top: var(--bpa-border); left: -2px; width: calc(100% + 4px); padding: 0; } .top100-listing .search_card.top100-listing__card .hover_visible .card_content { padding: 14px 18px 16px; } .top100-listing .search_card.top100-listing__card .hover_visible p { font-family: var(--font-ui); font-size: 13px; line-height: 1.55; color: var(--charcoal); margin: 0 0 12px; } /* ===== END TOP 100 PAGES — BuyPopArt ===== */ /* ===== fts_search — model type badge (BPA) ===== */ /* Overrides the brown/cream global default. Modeled on the BPA UI Kit .badge-solid (solid black chip, white text, Anton display, square, uppercase, tight letter-spacing). Position/top/left stay inherited from the global absolute placement inside .search_img. */ .search_sec.fts-search-page .search_card_model_badge { background: var(--ink); /* solid black brutalist chip */ color: var(--white); /* contrasting text */ font-family: var(--font-display); /* Anton — pop/display surface */ border-radius: var(--radius); /* 0px — square edges */ padding: 5px 10px; /* kit badge-solid padding */ font-size: 11px; font-weight: 700; letter-spacing: .12em; /* kit badge tracking */ text-transform: uppercase; } .search_sec.fts-search-page .search_card_model_badge a { color: var(--white); /* keep chip text white if linked */ } /* ===== END fts_search — model type badge (BPA) ===== */ /* ===== article_list.html — article list cards (article-list-card) ===== */ /* BPA pop-art identity: comic-panel black borders, square edges (radius 0), hard offset shadow on hover-lift, Anton display titles, pop-rose (--lc) accent eyebrows, brutalist solid-black PRIMARY "Read" button. Scoped under .article-list-page; selectors chain page+grid+long class to match/exceed global specificity. */ /* Grid — layout comes from the Bootstrap .row>col-* in the markup (same as the sibling artwork/museum/artist catalog lists). Do NOT set display:grid here: the grid's direct child is the .row wrapper, so a grid container would squeeze every card into one track. Only set the row's vertical gutter so wrapped rows breathe. */ .article-list-page .article-list-grid > .row { --bs-gutter-y: 22px; } /* Card — comic panel */ .article-list-page .article-list-grid .article-list-card { background: var(--white); border: var(--bpa-border); /* 2px solid black */ border-radius: 0; /* blocky pop edges */ box-shadow: none; transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s cubic-bezier(.22,1,.36,1); overflow: visible; } .article-list-page .article-list-grid .article-list-card__inner { height: 100%; display: flex; flex-direction: column; } /* Hover lift — hard pop-art offset shadow */ .article-list-page .article-list-grid .article-list-card:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 0 var(--lc); /* punchy rose drop */ } /* Media + image zoom */ .article-list-page .article-list-grid .article-list-card__media { position: relative; overflow: hidden; border-bottom: var(--bpa-border); } .article-list-page .article-list-grid .article-list-card__img { display: block; width: 100%; height: auto; transition: transform .5s cubic-bezier(.22,1,.36,1); } .article-list-page .article-list-grid .article-list-card__media:hover .article-list-card__img { transform: scale(1.07); } /* Body */ .article-list-page .article-list-grid .article-list-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; } /* Meta — uppercase pop-rose eyebrow (category) + year span */ .article-list-page .article-list-grid .article-list-card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .article-list-page .article-list-grid .article-list-card__meta h2, .article-list-page .article-list-grid .article-list-card__meta h2 a { margin: 0; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lc) !important; /* beat 0,5,2 global eyebrow rule */ line-height: 1.2; } .article-list-page .article-list-grid .article-list-card__meta h2 a:hover { color: var(--lv) !important; } .article-list-page .article-list-grid .article-list-card__meta span { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--pewter); } /* Title — Anton display, ink, pop-rose on hover */ .article-list-page .article-list-grid .article-list-card__title a { font-family: var(--font-display); /* Anton */ font-size: 19px; font-weight: 400; line-height: 1.1; letter-spacing: .06em; color: var(--ink); text-transform: uppercase; text-decoration: none; transition: color .2s ease; } .article-list-page .article-list-grid .article-list-card__title a:hover { color: var(--lc); } /* Hover excerpt typography */ .article-list-page .article-list-grid .article-list-card__hover { border: var(--bpa-border); border-top: var(--bpa-border); background: var(--white); } .article-list-page .article-list-grid .article-list-card__content { padding: 14px 18px 16px; } .article-list-page .article-list-grid .article-list-card__hover .article-list-card__content p { font-family: var(--font-ui); font-size: 13px; line-height: 1.55; color: var(--charcoal); margin: 8px 0 0; } /* Footer + actions */ .article-list-page .article-list-grid .article-list-card__footer { margin-top: 14px; } .article-list-page .article-list-grid .article-list-card__actions { display: flex; } /* Read button — BPA PRIMARY (btn-solid model): solid ink, comic border, square, Inter uppercase, hover to rose */ .article-list-page .article-list-grid .article-list-card__read-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--white); border: var(--bpa-border); border-radius: 0; padding: 11px 22px; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: background .2s ease, color .2s ease; } .article-list-page .article-list-grid .article-list-card__read-btn:hover { background: var(--lc); /* pop-rose primary hover */ color: var(--white); border-color: var(--lc); } .article-list-page .article-list-grid .article-list-card__read-btn::before { content: none; /* suppress global rising-fill */ } /* ===== END article_list.html — article list cards (BPA) ===== */ /* ===== artwork-catalog-card (catalog list grid card) ===== */ /* BPA pop-art identity: achromatic surface, 2px comic-panel border, zero radius, Anton for price/title, Inter for UI, pop-rose (--lc) reserved for interactive hover. Scoped under .custom_search + long classes to win the cascade over the shared .search_card rules. */ .custom_search .artwork-catalog-card { position: relative; background: var(--white); border: var(--bpa-border); /* 2px solid black panel */ border-radius: 0; /* zero radius */ box-shadow: none; overflow: visible; /* let the hover panel float BELOW the card; __media clips the zoom */ display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; } .custom_search .artwork-catalog-card:hover { transform: translateY(-3px); z-index: 20; /* keep the hovered card (and its below-card hover panel) above later cards — the transform makes it a stacking context */ box-shadow: 8px 8px 0 0 var(--ink); /* hard comic-panel drop */ } /* ---- Media / image ---- */ .custom_search .artwork-catalog-card .artwork-catalog-card__media { position: relative; overflow: hidden; background: var(--frost); border-bottom: var(--bpa-border); /* panel divider under art */ } .custom_search .artwork-catalog-card .artwork-catalog-card__media-link { display: block; overflow: hidden; } .custom_search .artwork-catalog-card .artwork-catalog-card__media-link::before, .custom_search .artwork-catalog-card .artwork-catalog-card__media-link::after { content: none; /* kill global rising-fill */ } .custom_search .artwork-catalog-card .artwork-catalog-card__image { display: block; width: 100%; height: auto; transition: transform .5s ease, filter .5s ease; } .custom_search .artwork-catalog-card:hover .artwork-catalog-card__image { transform: scale(1.06); /* hover zoom */ filter: contrast(1.18) saturate(1.3) brightness(1.03); /* pop contrast */ } /* ---- Body: artist + title ---- */ .custom_search .artwork-catalog-card .artwork-catalog-card__body { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--white); } .custom_search .artwork-catalog-card .artwork-catalog-card__artist { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; } .custom_search .artwork-catalog-card .artwork-catalog-card__artist h2, .custom_search .artwork-catalog-card .artwork-catalog-card__artist h2 a { margin: 0; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--carbon); line-height: 1.3; } .custom_search .artwork-catalog-card .artwork-catalog-card__artist h2 a:hover { color: var(--lc); /* pop-rose accent */ } .custom_search .artwork-catalog-card .artwork-catalog-card__artist span, .custom_search .artwork-catalog-card .artwork-catalog-card__artist span a { font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pewter); /* muted year label */ } .custom_search .artwork-catalog-card .artwork-catalog-card__artist span a:hover { color: var(--ink); } .custom_search .artwork-catalog-card .artwork-catalog-card__title a { font-family: var(--font-display); /* Anton — display title */ font-size: 18px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; line-height: 1.05; color: var(--ink); transition: color .2s ease; } .custom_search .artwork-catalog-card .artwork-catalog-card__title a:hover { color: var(--lc); /* pop-rose accent on title */ } .custom_search .artwork-catalog-card .artwork-catalog-card__title a::before, .custom_search .artwork-catalog-card .artwork-catalog-card__title a::after { content: none; /* suppress global rising-fill */ } /* ---- Hover overlay — floats absolutely BELOW the card (top:100% = card's bottom edge) so it overlays the row beneath instead of pushing it down. top:100% is explicit because, on a column-flex card, an absolute child with top:auto would pin to the flex start (= over the image). Reveal = global display toggle. ---- */ .custom_search .artwork-catalog-card .artwork-catalog-card__hover { position: absolute; top: 100%; left: -2px; width: calc(100% + 4px); margin: 0; box-sizing: border-box; background: var(--white); /* match card surface */ color: var(--ink); border: var(--bpa-border); border-top: var(--bpa-border); } .custom_search .artwork-catalog-card .artwork-catalog-card__content { padding: 14px 16px; } .custom_search .artwork-catalog-card .artwork-catalog-card__content p { margin: 0; font-family: var(--font-ui); font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--carbon); /* dark ink — legible on white panel */ } /* ---- Footer: cart + favorite ---- */ .custom_search .artwork-catalog-card .artwork-catalog-card__footer { display: flex; align-items: stretch; gap: 0; margin-top: auto; } .custom_search .artwork-catalog-card .artwork-catalog-card__cart-group { flex: 1 1 auto; display: flex; } /* Buy / price button — solid black CTA, Anton price */ .custom_search .artwork-catalog-card .artwork-catalog-card__buy-btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 16px; background: var(--ink); color: var(--white); border: none; border-radius: 0; font-family: var(--font-ui); font-size: 11px; font-weight: 700; line-height: 1.25; letter-spacing: .12em; text-transform: uppercase; text-align: center; white-space: normal; /* allow the label to wrap onto a second line */ text-decoration: none; transition: background .2s ease, color .2s ease; } .custom_search .artwork-catalog-card .artwork-catalog-card__buy-btn:hover { background: var(--lc); /* pop-rose primary hover */ color: var(--white); } .custom_search .artwork-catalog-card .artwork-catalog-card__buy-btn::before, .custom_search .artwork-catalog-card .artwork-catalog-card__buy-btn::after { content: none; /* suppress global rising-fill */ } .custom_search .artwork-catalog-card .artwork-catalog-card__price { font-family: var(--font-display); /* Anton display price */ font-size: 16px; font-weight: 400; letter-spacing: .07em; color: inherit; } /* Favorite toggle — outlined square panel cell */ .custom_search .artwork-catalog-card .artwork-catalog-card__fav-group { flex: 0 0 auto; display: flex; border-left: var(--bpa-border); /* comic-panel divider */ } .custom_search .artwork-catalog-card .artwork-catalog-card__fav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 50px; background: var(--white); color: var(--ink); transition: background .2s ease; } .custom_search .artwork-catalog-card .artwork-catalog-card__fav-toggle:hover { background: var(--frost); } .custom_search .artwork-catalog-card .artwork-catalog-card__fav-toggle::before, .custom_search .artwork-catalog-card .artwork-catalog-card__fav-toggle::after { content: none; /* suppress global rising-fill */ } .custom_search .artwork-catalog-card .artwork-catalog-card__fav-toggle img { display: block; width: 20px; height: 20px; } /* ===== END artwork-catalog-card (catalog list grid card) ===== */ /* ===== article_list.html — specificity lift over artwork-list base rules (title display face) ===== */ .search_sec.catalog-list-page.article-list-page .custom_search .search_card .article-list-card__title a { font-family: var(--font-display) !important; letter-spacing: .06em !important; color: var(--ink) !important; } .search_sec.catalog-list-page.article-list-page .custom_search .search_card .article-list-card__title a:hover { color: var(--lc) !important; } /* ===== article_list.html — specificity lift over artwork-list base rules (hover panel) ===== */ .search_sec.catalog-list-page.article-list-page .custom_search .search_card .article-list-card__hover, .search_sec.artwork-list-page.article-list-page .custom_search .search_card .article-list-card__hover { background: var(--white) !important; border-top: var(--bpa-border); padding: 0; } .search_sec.catalog-list-page.article-list-page .custom_search .search_card .article-list-card__hover p, .search_sec.artwork-list-page.article-list-page .custom_search .search_card .article-list-card__hover p { color: var(--charcoal) !important; opacity: 1; } .search_sec.catalog-list-page.article-list-page .custom_search .search_card .article-list-card__hover p a, .search_sec.artwork-list-page.article-list-page .custom_search .search_card .article-list-card__hover p a { color: var(--lc) !important; } /* ===== list-page filter sidebar + sort (artwork-list-page scope, shared by art/article/artist/museum lists) — BPA ===== */ /* Beats the off-brand beige global default. Reuses the page-scoped tokens declared on `.search_sec.artwork-list-page` (--bpa-bg #fff, --bpa-ink #000, --bpa-line #000, --bpa-line-2 #DCDCDC, --bpa-band #F5F5F5, --bpa-accent #D4004C, --bpa-accent-dark #8B0032, --bpa-body Inter, --bpa-display Anton). BPA = pop/brutalist: black ink, hard square edges (radius 0), high-contrast rose accent. */ /* ── Sort chrome ───────────────────────────────────────────────────────── */ .search_sec.artwork-list-page .sorting_content, .search_sec.artwork-list-page .sort_by { color: var(--bpa-ink, #000000) !important; font-family: var(--bpa-body) !important; } .search_sec.artwork-list-page .sorting_content select.custom-select { background-color: var(--bpa-bg, #ffffff) !important; border: 1px solid var(--bpa-line, #000000) !important; color: var(--bpa-ink, #000000) !important; border-radius: 0 !important; font-family: var(--bpa-body) !important; font-size: 13px !important; } /* ── Filter panel shell ────────────────────────────────────────────────── */ .search_sec.artwork-list-page .filter-panel { background-color: var(--bpa-bg, #ffffff) !important; border: 1px solid var(--bpa-line, #000000) !important; border-radius: 0 !important; font-family: var(--bpa-body) !important; } /* Filter title + CLEAR ALL link */ .search_sec.artwork-list-page .filter-title span { color: var(--bpa-ink, #000000) !important; font-family: var(--bpa-display) !important; font-weight: 400 !important; /* Anton is single-weight */ letter-spacing: .04em !important; text-transform: uppercase !important; } .search_sec.artwork-list-page .filter-title a { color: var(--bpa-accent, #D4004C) !important; font-family: var(--bpa-body) !important; } .search_sec.artwork-list-page .filter-title a:hover { color: var(--bpa-accent-dark, #8B0032) !important; } /* ── Active-filter badge list ──────────────────────────────────────────── */ .search_sec.artwork-list-page .badge_list { border-bottom: 1px solid var(--bpa-line, #000000) !important; } .search_sec.artwork-list-page .badge-filter { background-color: var(--bpa-ink, #000000) !important; /* solid black BPA chip */ color: var(--bpa-bg, #ffffff) !important; border: 1px solid var(--bpa-ink, #000000) !important; border-radius: 0 !important; font-family: var(--bpa-body) !important; font-size: 13px !important; } /* ── Accordion groups ──────────────────────────────────────────────────── */ .search_sec.artwork-list-page .accordion-item { background-color: var(--bpa-bg, #ffffff) !important; border: 1px solid var(--bpa-line, #000000) !important; } .search_sec.artwork-list-page button.accordion-button, .search_sec.artwork-list-page .accordion-button:not(.collapsed) { background-color: var(--bpa-bg, #ffffff) !important; color: var(--bpa-ink, #000000) !important; font-family: var(--bpa-body) !important; box-shadow: none !important; } .search_sec.artwork-list-page .accordion-body { color: var(--bpa-ink, #000000) !important; font-family: var(--bpa-body) !important; } /* ── Colour filter list ────────────────────────────────────────────────── */ /* Category value links (filter sidebar) — chip styling consistent with group-by Sidebar_tags + list_category. */ .search_sec.artwork-list-page .filter-panel .colors_list li:has(> a.filter-value-link) { width: auto !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; cursor: default !important; } .search_sec.artwork-list-page .filter-panel .colors_list li a.filter-value-link { display: inline-block !important; width: auto !important; padding: 4px 9px !important; background: var(--bpa-gb-slot, #EDEDED) !important; color: var(--bpa-gb-ink-2, #2A2A2A) !important; border: 1px solid var(--bpa-gb-ink, #000000) !important; border-radius: 0 !important; font-family: var(--font-ui, "Inter", system-ui, sans-serif) !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: .08em !important; text-transform: uppercase !important; text-decoration: none !important; } .search_sec.artwork-list-page .filter-panel .colors_list li a.filter-value-link:hover { color: var(--bpa-gb-accent, #D4004C) !important; border-color: var(--bpa-gb-ink, #000000) !important; text-decoration: none !important; } .search_sec.artwork-list-page .filter-panel .colors_list li.active:has(> a.filter-value-link) { background: transparent !important; border: none !important; } .search_sec.artwork-list-page .filter-panel .colors_list li.active:has(> a.filter-value-link) a.filter-value-link { background: var(--bpa-ink, #000000) !important; color: #ffffff !important; border-color: var(--bpa-ink, #000000) !important; } .search_sec.artwork-list-page .filter-panel .colors_list li { color: var(--bpa-ink, #000000) !important; font-family: var(--bpa-body) !important; background: transparent !important; /* kill global beige fill */ border: none !important; } .search_sec.artwork-list-page .filter-panel .colors_list li span { color: var(--bpa-ink, #000000) !important; } .search_sec.artwork-list-page .filter-panel .colors_list li:hover, .search_sec.artwork-list-page .filter-panel .colors_list li:hover span { color: var(--bpa-accent, #D4004C) !important; } .search_sec.artwork-list-page .filter-panel .colors_list li.active { background: var(--bpa-ink, #000000) !important; /* BPA pop-art: solid black fill — matches pill.on in UI Kit */ color: #ffffff !important; font-weight: 700 !important; } .search_sec.artwork-list-page .filter-panel .colors_list li.active span { color: #ffffff !important; } /* ── Checkboxes / radios / text inputs / tags ──────────────────────────── */ .search_sec.artwork-list-page .form-check input, .search_sec.artwork-list-page .form-check input:checked { accent-color: var(--bpa-accent, #D4004C) !important; } .search_sec.artwork-list-page .artist_input { background-color: var(--bpa-bg, #ffffff) !important; border: 1px solid var(--bpa-line, #000000) !important; color: var(--bpa-ink, #000000) !important; border-radius: 0 !important; font-family: var(--bpa-body) !important; } .search_sec.artwork-list-page .artist_input::placeholder { color: var(--bpa-ink-3, #888888) !important; } .search_sec.artwork-list-page .tag-btn { background-color: var(--bpa-band, #F5F5F5) !important; color: var(--bpa-ink, #000000) !important; border: 1px solid var(--bpa-line-2, #DCDCDC) !important; border-radius: 0 !important; font-family: var(--bpa-body) !important; } /* ── noUiSlider price range ─────────────────────────────────────────────── */ .search_sec.artwork-list-page .noUi-target { background: var(--bpa-line-2, #DCDCDC) !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } .search_sec.artwork-list-page .noUi-connect { background: var(--bpa-accent, #D4004C) !important; /* BPA rose fill */ } .search_sec.artwork-list-page .noUi-horizontal .noUi-handle { background: var(--bpa-ink, #000000) !important; border: 1px solid var(--bpa-ink, #000000) !important; border-radius: 0 !important; /* square handle */ box-shadow: none !important; } /* ===== END list-page filter sidebar + sort — BPA ===== */ /* ===== BPA — Artists alphabet (group_by_alphabet / start_by_letter) ===== */ /* * Scope: every rule is under .art_info_section to avoid bleeding into * start_by_letter.html shared classes and the user sidebar .profile_name. * Tokens: --ink #000 | --carbon #111 | --charcoal #555 | --pewter #888 | * --mist #dcdcdc | --smoke #ededed | --frost #f5f5f5 | * --lc #D4004C (rose accent) | --font-display Anton | --font-ui Inter * --bpa-border 2px solid #000 */ /* ── 1. Alphabet nav bar ──────────────────────────────────────────────────── */ .art_info_section .alphabet_box .alpha_letter { border-color: var(--ink, #000000); color: var(--ink, #000000); font-family: var(--font-display, 'Anton', Impact, sans-serif); font-size: 22px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; } .art_info_section .alphabet_box .alpha_letter:last-child { border-right-color: var(--ink, #000000); } .art_info_section .alphabet_box .alpha_letter a { color: var(--ink, #000000); text-decoration: none; } .art_info_section .alphabet_box .alpha_letter:hover { background: var(--ink, #000000); color: var(--white, #ffffff); } .art_info_section .alphabet_box .alpha_letter:hover a { color: var(--white, #ffffff); } /* ── 2. Section letter heading ───────────────────────────────────────────── */ .art_info_section .alphabet_indv h4 { font-family: var(--font-display, 'Anton', Impact, sans-serif); font-size: clamp(32px, 4vw, 48px); font-weight: 400; line-height: 1; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink, #000000); border-bottom: var(--bpa-border, 2px solid #000000); padding-bottom: 8px; margin-bottom: 20px; } /* ── 3. Profile card: image, name, year ──────────────────────────────────── */ /* Square crop — BPA uses geometric/pop-art shapes, not circles */ .art_info_section .profile_img img { border-radius: 0; border: var(--bpa-border, 2px solid #000000); width: 64px; height: 64px; object-fit: cover; display: block; transition: filter 0.2s ease; } .art_info_section .profile_img a:hover img { filter: contrast(1.15) saturate(1.2); } /* Suppress global rising-fill on portrait-wrapping anchors */ .art_info_section .profile_img a::before, .art_info_section .profile_img a::after { content: none; } /* Artist name link */ .art_info_section .profile_name a { font-family: var(--font-ui, 'Inter', -apple-system, sans-serif); font-size: 14px; font-weight: 700; color: var(--carbon, #111111); text-decoration: none; letter-spacing: 0.01em; transition: color 0.2s ease; } .art_info_section .profile_name a:hover, .art_info_section .profile_name a:focus { color: var(--lc, #D4004C); } /* Suppress global rising-fill on name anchor (it's inline text, not an image) */ .art_info_section .profile_name a::before { content: none; } /* Birth–death year muted label */ .art_info_section .profile_year { font-family: var(--font-ui, 'Inter', -apple-system, sans-serif); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pewter, #888888); } /* ── 4. "View more" link ─────────────────────────────────────────────────── */ .art_info_section .view_more_alpha a { font-family: var(--font-ui, 'Inter', -apple-system, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--charcoal, #555555); text-decoration: none; border-bottom: 1px solid var(--mist, #dcdcdc); padding-bottom: 2px; transition: color 0.2s ease, border-color 0.2s ease; display: inline-flex; align-items: center; gap: 0.35em; } .art_info_section .view_more_alpha a:hover, .art_info_section .view_more_alpha a:focus { color: var(--lc, #D4004C); border-color: var(--lc, #D4004C); } /* Suppress global rising-fill on "View more" anchor */ .art_info_section .view_more_alpha a::before { content: none; } /* Icon size */ .art_info_section .view_more_alpha a .fa-angle-right { font-size: 14px; line-height: 1; } /* ── 5. Responsive tweaks ────────────────────────────────────────────────── */ @media (max-width: 576px) { .art_info_section .alphabet_box { width: 100%; flex-wrap: wrap; } .art_info_section .alphabet_box .alpha_letter { font-size: 18px; width: 36px; height: 36px; } .art_info_section .alphabet_indv h4 { font-size: 32px; } } /* ===== END BPA — Artists alphabet ===== */ /* ===== artist_group_by_attribute / group-by browse — BPA ===== */ /* ── Token block ─────────────────────────────────────────────────────────── */ .search_sec.catalog-groupby-page, .search_sec.artwork-groupby-page, .search_sec.artist-groupby-page, .search_sec.museum-groupby-page, .search_sec.article-groupby-page { /* BPA palette tokens — pop-art graphic identity */ --bpa-gb-bg: #FFFFFF; /* page / card background */ --bpa-gb-ink: #000000; /* primary text / borders */ --bpa-gb-ink-2: #2A2A2A; /* secondary text (iron) */ --bpa-gb-ink-3: #888888; /* muted text (pewter) */ --bpa-gb-line: #DCDCDC; /* light border (mist) */ --bpa-gb-line-2: #000000; /* bold border on active/focus */ --bpa-gb-band: #F5F5F5; /* surface tint (frost) */ --bpa-gb-slot: #EDEDED; /* chip / tag bg (smoke) */ --bpa-gb-accent: #D4004C; /* hover accent — pop-art rose */ --bpa-gb-display: var(--font-display); /* Anton — uppercase headings */ --bpa-gb-body: var(--font-ui); /* Inter — body / UI */ } /* ── Nav-list + heading + showing-text ──────────────────────────────────── */ .search_sec.artwork-groupby-page .nav-list li, .search_sec.artwork-groupby-page .nav-list a, .search_sec.artwork-groupby-page .main-heading, .search_sec.artwork-groupby-page .Showing_text, .search_sec.artwork-groupby-page .sortABC, .search_sec.artwork-groupby-page .sortABC a, .search_sec.artwork-groupby-page .sortABC span, .search_sec.artist-groupby-page .nav-list li, .search_sec.artist-groupby-page .nav-list a, .search_sec.artist-groupby-page .main-heading, .search_sec.artist-groupby-page .Showing_text, .search_sec.artist-groupby-page .sortABC, .search_sec.artist-groupby-page .sortABC a, .search_sec.artist-groupby-page .sortABC span { color: var(--bpa-gb-ink); font-family: var(--bpa-gb-body); } .search_sec.artwork-groupby-page .Showing_text, .search_sec.artist-groupby-page .Showing_text { font-size: 14px; line-height: 1.5; } /* .main-heading — Anton uppercase stamp */ .search_sec.artwork-groupby-page .main-heading, .search_sec.artist-groupby-page .main-heading { font-family: var(--bpa-gb-display); font-size: 18px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bpa-gb-ink); } /* ── Groupby selector / search input ────────────────────────────────────── */ .search_sec.catalog-groupby-page #groupby-selector, .search_sec.catalog-groupby-page #fieldSelector, .search_sec.catalog-groupby-page .Showing_text .form-control, .search_sec.artwork-groupby-page #groupby-selector, .search_sec.artwork-groupby-page .Showing_text .form-control, .search_sec.artist-groupby-page #groupby-selector, .search_sec.artist-groupby-page .Showing_text .form-control, .search_sec.museum-groupby-page #groupby-selector, .search_sec.museum-groupby-page #fieldSelector, .search_sec.museum-groupby-page .Showing_text .form-control, .search_sec.article-groupby-page #groupby-selector, .search_sec.article-groupby-page .Showing_text .form-control, .search_sec.catalog-groupby-page form.countrySearchForm input[type="text"], .search_sec.artwork-groupby-page form.countrySearchForm input[type="text"], .search_sec.artist-groupby-page form.countrySearchForm input[type="text"], .search_sec.museum-groupby-page form.countrySearchForm input[type="text"], .search_sec.article-groupby-page form.countrySearchForm input[type="text"] { background-color: var(--bpa-gb-bg) !important; border: 2px solid var(--bpa-gb-ink) !important; color: var(--bpa-gb-ink) !important; border-radius: 0; font-family: var(--bpa-gb-body); font-size: 13px; font-weight: 500; } .search_sec.catalog-groupby-page form.countrySearchForm input[type="text"]::placeholder, .search_sec.artwork-groupby-page form.countrySearchForm input[type="text"]::placeholder, .search_sec.artist-groupby-page form.countrySearchForm input[type="text"]::placeholder, .search_sec.museum-groupby-page form.countrySearchForm input[type="text"]::placeholder, .search_sec.article-groupby-page form.countrySearchForm input[type="text"]::placeholder { color: var(--bpa-gb-ink-3); } .search_sec.artwork-groupby-page form.countrySearchForm i.fa.fa-search, .search_sec.artist-groupby-page form.countrySearchForm i.fa.fa-search { color: var(--bpa-gb-ink-2); } /* ── Badge filters ───────────────────────────────────────────────────────── */ .search_sec.artwork-groupby-page .badge_list, .search_sec.artist-groupby-page .badge_list { border-bottom: 2px solid var(--bpa-gb-ink); } .search_sec.artwork-groupby-page .badge-filter, .search_sec.artist-groupby-page .badge-filter { background: var(--bpa-gb-slot) !important; color: var(--bpa-gb-ink) !important; border: 2px solid var(--bpa-gb-ink); border-radius: 0; font-family: var(--bpa-gb-body); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } /* ── sortABC strip ───────────────────────────────────────────────────────── */ .search_sec.artwork-groupby-page .sortABC span.active a, .search_sec.artist-groupby-page .sortABC span.active a { background: var(--bpa-gb-ink) !important; color: var(--bpa-gb-bg) !important; font-family: var(--bpa-gb-display); text-transform: uppercase; letter-spacing: 0.04em; } .search_sec.artwork-groupby-page .sortABC span.disabled, .search_sec.artist-groupby-page .sortABC span.disabled { color: var(--bpa-gb-ink-3) !important; opacity: 0.5; } /* ── Sidebar boxes ───────────────────────────────────────────────────────── */ .search_sec.catalog-groupby-page .sidebar .sidebar_box, .search_sec.artwork-groupby-page .sidebar .sidebar_box, .search_sec.artist-groupby-page .sidebar .sidebar_box, .search_sec.museum-groupby-page .sidebar .sidebar_box, .search_sec.article-groupby-page .sidebar .sidebar_box { background: var(--bpa-gb-band) !important; border: 2px solid var(--bpa-gb-line) !important; color: var(--bpa-gb-ink) !important; border-radius: 0; font-family: var(--bpa-gb-body); } .search_sec.catalog-groupby-page .sidebar .sidebar_box:hover, .search_sec.artwork-groupby-page .sidebar .sidebar_box:hover, .search_sec.artist-groupby-page .sidebar .sidebar_box:hover, .search_sec.museum-groupby-page .sidebar .sidebar_box:hover, .search_sec.article-groupby-page .sidebar .sidebar_box:hover { background: var(--bpa-gb-band) !important; border-color: var(--bpa-gb-line-2) !important; } /* ===== catalog left sidebars (filter / categories / group-by) — UI Kit alignment ===== */ /* Group-by active box: mirror UI Kit .sbk-box.is-active — inset surface + rose-accent border + heavier accent left-rule (kit uses border-left:3px accent; BPA's box base is 2px hard, so the active left rule steps up to 4px). */ .search_sec.catalog-groupby-page .sidebar .sidebar_box.active, .search_sec.artwork-groupby-page .sidebar .sidebar_box.active, .search_sec.artist-groupby-page .sidebar .sidebar_box.active, .search_sec.museum-groupby-page .sidebar .sidebar_box.active, .search_sec.article-groupby-page .sidebar .sidebar_box.active { background: var(--bpa-gb-slot) !important; /* --SB-inset */ border: 2px solid var(--bpa-gb-accent) !important; /* --SB-accent */ border-left: 4px solid var(--bpa-gb-accent) !important; /* accent left-rule */ } /* ── Sidebar titles + descriptions ──────────────────────────────────────── */ .search_sec.artwork-groupby-page h3.sidebar_box_title, .search_sec.artwork-groupby-page h3.sidebar_box_title a, .search_sec.artist-groupby-page h3.sidebar_box_title, .search_sec.artist-groupby-page h3.sidebar_box_title a, .search_sec.catalog-groupby-page h3.sidebar_box_title, .search_sec.catalog-groupby-page h3.sidebar_box_title a, .search_sec.museum-groupby-page h3.sidebar_box_title, .search_sec.museum-groupby-page h3.sidebar_box_title a, .search_sec.article-groupby-page h3.sidebar_box_title, .search_sec.article-groupby-page h3.sidebar_box_title a { color: var(--bpa-gb-ink, #000000) !important; font-family: var(--bpa-gb-body); font-size: 13px; line-height: 1.4; font-weight: 400; text-transform: none; letter-spacing: normal; } /* description uses softer ink-2 — full black is too heavy for body-level copy */ .search_sec.artwork-groupby-page p.sidebar_box_description, .search_sec.artwork-groupby-page p.sidebar_box_description a, .search_sec.artist-groupby-page p.sidebar_box_description, .search_sec.artist-groupby-page p.sidebar_box_description a, .search_sec.catalog-groupby-page p.sidebar_box_description, .search_sec.catalog-groupby-page p.sidebar_box_description a, .search_sec.museum-groupby-page p.sidebar_box_description, .search_sec.museum-groupby-page p.sidebar_box_description a, .search_sec.article-groupby-page p.sidebar_box_description, .search_sec.article-groupby-page p.sidebar_box_description a { color: var(--bpa-gb-ink-2, #2A2A2A) !important; /* softer than full black — --bpa-gb-ink-2 iron */ font-family: var(--bpa-gb-body); font-size: 13px; line-height: 1.4; font-weight: 400; text-transform: none; letter-spacing: normal; } /* sidebar title uses Anton for pop-art stamp — all groupby pages */ .search_sec.artwork-groupby-page h3.sidebar_box_title, .search_sec.artwork-groupby-page h3.sidebar_box_title a, .search_sec.artist-groupby-page h3.sidebar_box_title, .search_sec.artist-groupby-page h3.sidebar_box_title a, .search_sec.catalog-groupby-page h3.sidebar_box_title, .search_sec.catalog-groupby-page h3.sidebar_box_title a, .search_sec.museum-groupby-page h3.sidebar_box_title, .search_sec.museum-groupby-page h3.sidebar_box_title a, .search_sec.article-groupby-page h3.sidebar_box_title, .search_sec.article-groupby-page h3.sidebar_box_title a { font-family: var(--bpa-gb-display); font-size: 15px; font-weight: 400; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; } .search_sec.artwork-groupby-page h3.sidebar_box_title a:hover, .search_sec.artist-groupby-page h3.sidebar_box_title a:hover, .search_sec.catalog-groupby-page h3.sidebar_box_title a:hover, .search_sec.museum-groupby-page h3.sidebar_box_title a:hover, .search_sec.article-groupby-page h3.sidebar_box_title a:hover { color: var(--bpa-gb-accent) !important; } /* ── Sidebar tags (chips) ────────────────────────────────────────────────── */ .search_sec.artwork-groupby-page ul.Sidebar_tags, .search_sec.artist-groupby-page ul.Sidebar_tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; padding: 0; list-style: none; } .search_sec.artwork-groupby-page ul.Sidebar_tags a, .search_sec.artwork-groupby-page ul.Sidebar_tags li button.catalog-nav-btn, .search_sec.artist-groupby-page ul.Sidebar_tags a, .search_sec.artist-groupby-page ul.Sidebar_tags li button.catalog-nav-btn { display: inline-block; padding: 4px 9px; background: var(--bpa-gb-slot) !important; color: var(--bpa-gb-ink-2) !important; border: 1px solid var(--bpa-gb-ink); border-radius: 0; font-family: var(--bpa-gb-body); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4; text-decoration: none; } .search_sec.artwork-groupby-page ul.Sidebar_tags a:hover, .search_sec.artist-groupby-page ul.Sidebar_tags a:hover { color: var(--bpa-gb-accent) !important; border-color: var(--bpa-gb-accent); } /* ── Main results area ───────────────────────────────────────────────────── */ .search_sec.artwork-groupby-page .showMainResuls, .search_sec.artist-groupby-page .showMainResuls { font-family: var(--bpa-gb-body); } /* Group heading — Anton uppercase */ .search_sec.artwork-groupby-page .showMainResulsTitle h3, .search_sec.artwork-groupby-page .showMainResulsTitle h3 a, .search_sec.artist-groupby-page .showMainResulsTitle h3, .search_sec.artist-groupby-page .showMainResulsTitle h3 a { color: var(--bpa-gb-ink) !important; font-family: var(--bpa-gb-display); font-size: 20px; font-weight: 400; line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; } .search_sec.artwork-groupby-page .showMainResulsTitle h3 a:hover, .search_sec.artist-groupby-page .showMainResulsTitle h3 a:hover { color: var(--bpa-gb-accent) !important; } /* Count badge */ .search_sec.artwork-groupby-page .showMainResulsTitle h3 span, .search_sec.artist-groupby-page .showMainResulsTitle h3 span { background: var(--bpa-gb-ink) !important; color: var(--bpa-gb-bg) !important; font-family: var(--bpa-gb-body); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.4; padding: 3px 7px; border-radius: 0; } /* "See All" link */ .search_sec.artwork-groupby-page .showMainResulsTitle > a, .search_sec.artwork-groupby-page .showMainResulsTitle > button.catalog-nav-btn, .search_sec.artist-groupby-page .showMainResulsTitle > a, .search_sec.artist-groupby-page .showMainResulsTitle > button.catalog-nav-btn { color: var(--bpa-gb-ink) !important; font-family: var(--bpa-gb-body); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.4; text-decoration: none; } .search_sec.artwork-groupby-page .showMainResulsTitle > a:hover, .search_sec.artwork-groupby-page .showMainResulsTitle > button.catalog-nav-btn:hover, .search_sec.artist-groupby-page .showMainResulsTitle > a:hover, .search_sec.artist-groupby-page .showMainResulsTitle > button.catalog-nav-btn:hover { color: var(--bpa-gb-accent) !important; } /* ── Result box ──────────────────────────────────────────────────────────── */ .search_sec.artwork-groupby-page .showMainResulsBox, .search_sec.artist-groupby-page .showMainResulsBox { background: var(--bpa-gb-band) !important; color: var(--bpa-gb-ink) !important; border: 2px solid var(--bpa-gb-ink); border-radius: 0; font-family: var(--bpa-gb-body); } /* ── Hero image overlay (showMainResulsImage) ────────────────────────────── */ .search_sec.artwork-groupby-page .showMainResulsImage h3, .search_sec.artwork-groupby-page .showMainResulsImage h3 a, .search_sec.artist-groupby-page .showMainResulsImage h3, .search_sec.artist-groupby-page .showMainResulsImage h3 a { background: rgb(0 0 0 / 80%) !important; color: var(--bpa-gb-bg) !important; font-family: var(--bpa-gb-display); font-size: 13px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; } .search_sec.artwork-groupby-page .showMainResulsImage p, .search_sec.artwork-groupby-page .showMainResulsImage p a, .search_sec.artist-groupby-page .showMainResulsImage p, .search_sec.artist-groupby-page .showMainResulsImage p a { color: var(--bpa-gb-bg) !important; font-family: var(--bpa-gb-body); font-size: 12px; font-weight: 400; font-style: normal; line-height: 1.4; } /* ── Result item cards ───────────────────────────────────────────────────── */ .search_sec.artwork-groupby-page .showResultsItems h3 a, .search_sec.artwork-groupby-page .showResultsItems h3, .search_sec.artwork-groupby-page .showResultsItems h4, .search_sec.artwork-groupby-page .showResultsItems h4 a, .search_sec.artwork-groupby-page .showResultsItems p, .search_sec.artwork-groupby-page .showResultsItems p a, .search_sec.artwork-groupby-page .artwork_list_additional_values h3, .search_sec.artwork-groupby-page .artwork_list_additional_values h3 a, .search_sec.artist-groupby-page .showResultsItems h3 a, .search_sec.artist-groupby-page .showResultsItems h3, .search_sec.artist-groupby-page .showResultsItems h4, .search_sec.artist-groupby-page .showResultsItems h4 a, .search_sec.artist-groupby-page .showResultsItems p, .search_sec.artist-groupby-page .showResultsItems p a { color: var(--bpa-gb-ink) !important; font-family: var(--bpa-gb-body); font-size: 13px; line-height: 1.4; font-weight: 400; text-transform: none; white-space: normal; } .search_sec.artwork-groupby-page .showResultsItems h3 a, .search_sec.artwork-groupby-page .showResultsItems h4 a, .search_sec.artist-groupby-page .showResultsItems h3 a, .search_sec.artist-groupby-page .showResultsItems h4 a { font-weight: 700; } .search_sec.artwork-groupby-page .showResultsItems h4, .search_sec.artist-groupby-page .showResultsItems h4 { font-family: var(--bpa-gb-body); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bpa-gb-ink-3) !important; } .search_sec.artwork-groupby-page .showResultsItems h4 a:hover, .search_sec.artwork-groupby-page .showResultsItems h3 a:hover, .search_sec.artwork-groupby-page .showResultsItems p a:hover, .search_sec.artist-groupby-page .showResultsItems h4 a:hover, .search_sec.artist-groupby-page .showResultsItems h3 a:hover, .search_sec.artist-groupby-page .showResultsItems p a:hover { color: var(--bpa-gb-accent) !important; } /* ===== END BPA — artist_group_by_attribute / group-by browse ===== */ /* ===================================================== photo_to_restyled_masterpiece BPA (BuyPopArt) — bold pop-art, hard comic-panel borders, zero radius, Anton display + Inter UI, black ink, rose accent (#D4004C), offset hard shadow. All selectors scoped under body.custom-repro-page. Reuses brand tokens: --ink, --carbon, --charcoal, --pewter, --chrome, --mist, --smoke, --frost, --white, --bpa-accent (rose), --bpa-accent-dark, --font-display, --font-ui. ===================================================== */ /* --- Shared structural tokens (read by global-custom) --- */ body.custom-repro-page { --pr-spinner-overlay: rgba(255, 255, 255, 0.92); --pr-remove-bg: var(--ink); --pr-remove-bg-hover: var(--bpa-accent, #D4004C); --pr-muted-text: var(--pewter); } /* --- Hero caption --------------------------------------- */ body.custom-repro-page .consultation_content h6 { font-family: var(--font-ui) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--bpa-accent, #D4004C) !important; margin-bottom: 8px !important; } body.custom-repro-page .consultation_content h1 { font-family: var(--font-display) !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; line-height: 1.02 !important; color: var(--white, #FFFFFF) !important; } /* --- Intro paragraphs ----------------------------------- */ body.custom-repro-page .consultation_bottom p { font-family: var(--font-ui) !important; font-weight: 300 !important; font-size: 15px !important; line-height: 1.7 !important; color: var(--paper, #FAFAFA) !important; } /* --- Step blocks (comic panels) ------------------------- */ body.custom-repro-page .production_form .form_produc { background: var(--white); border: 2px solid var(--ink); border-radius: 0; box-shadow: 6px 6px 0 0 var(--ink); padding: 28px 28px 32px; margin-bottom: 44px; position: relative; } body.custom-repro-page .steps_count span { display: inline-block; font-family: var(--font-ui) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: var(--white) !important; background: var(--bpa-accent, #D4004C) !important; border: 2px solid var(--ink); padding: 6px 14px !important; margin-bottom: 14px; line-height: 1; } body.custom-repro-page .form_heading { font-family: var(--font-display) !important; font-weight: 400 !important; font-size: clamp(20px, 2.6vw, 30px) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; line-height: 1.06 !important; color: var(--ink) !important; margin-bottom: 10px !important; } body.custom-repro-page .form_content { font-family: var(--font-ui) !important; font-weight: 300 !important; font-size: 14px !important; line-height: 1.65 !important; color: var(--charcoal) !important; } body.custom-repro-page .img_extention { font-family: var(--font-ui) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--pewter) !important; margin-bottom: 12px; } /* --- Upload box ----------------------------------------- */ body.custom-repro-page .image-upload-box#add-image { background: var(--frost); border: 2px dashed var(--ink); border-radius: 0; color: var(--ink); transition: background 0.18s ease, border-color 0.18s ease; } body.custom-repro-page .image-upload-box#add-image:hover { background: var(--white); border-color: var(--bpa-accent, #D4004C); } body.custom-repro-page #upload-icon img { transition: transform 0.18s ease; } body.custom-repro-page .image-upload-box#add-image:hover #upload-icon img { transform: scale(1.12); } body.custom-repro-page #uploaded-image-preview-container { border: 2px solid var(--ink); } body.custom-repro-page #remove-image-btn { border: 2px solid var(--ink); border-radius: 0; font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; transition: background 0.18s ease; } /* --- Edit-request textarea ------------------------------ */ body.custom-repro-page #image_edit_requests.form-control, body.custom-repro-page .form-control#image_edit_requests { background: var(--white); border: 2px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; font-family: var(--font-ui); font-size: 14px; font-weight: 400; color: var(--carbon); } body.custom-repro-page #image_edit_requests.form-control:focus { border-color: var(--bpa-accent, #D4004C) !important; box-shadow: 4px 4px 0 0 var(--bpa-accent, #D4004C) !important; } body.custom-repro-page #image_edit_requests::placeholder { color: var(--chrome); } body.custom-repro-page .form-floating > label[for="image_edit_requests"] { font-family: var(--font-ui); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pewter); } body.custom-repro-page .edit-request-examples-intro { font-family: var(--font-ui) !important; font-weight: 600 !important; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pewter) !important; } /* --- Chips: edit-request examples + category filters ---- */ body.custom-repro-page .Sidebar_tags { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 14px 0 0; } body.custom-repro-page .Sidebar_tags li { margin: 0; } body.custom-repro-page .Sidebar_tags a, body.custom-repro-page a.edit-request-example, body.custom-repro-page a.category-filter-link { display: inline-block; font-family: var(--font-ui) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--ink) !important; background: var(--white) !important; border: 2px solid var(--ink) !important; border-radius: 0 !important; padding: 8px 14px !important; text-decoration: none !important; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } /* Kill the global rising-fill pseudo on these chips */ body.custom-repro-page .Sidebar_tags a::before, body.custom-repro-page a.edit-request-example::before, body.custom-repro-page a.category-filter-link::before { content: none !important; } body.custom-repro-page .Sidebar_tags a:hover, body.custom-repro-page a.edit-request-example:hover, body.custom-repro-page a.category-filter-link:hover { background: var(--ink) !important; color: var(--white) !important; box-shadow: 3px 3px 0 0 var(--bpa-accent, #D4004C) !important; } /* Active category chip — rose fill, pop-art emphasis */ body.custom-repro-page a.category-filter-link.active { background: var(--bpa-accent, #D4004C) !important; color: var(--white) !important; border-color: var(--ink) !important; box-shadow: 3px 3px 0 0 var(--ink) !important; } body.custom-repro-page a.category-filter-link.active:hover { background: var(--bpa-accent-dark, #8B0032) !important; color: var(--white) !important; } /* --- Style cards (Step 04) — comic panels --------------- */ body.custom-repro-page .search_card { background: var(--white); border: 2px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none; overflow: hidden; transition: box-shadow 0.15s ease, transform 0.15s ease; } body.custom-repro-page .style-card:hover .search_card { box-shadow: 6px 6px 0 0 var(--bpa-accent, #D4004C) !important; transform: translate(-2px, -2px); } body.custom-repro-page .search_card .search_img { border-radius: 0; overflow: hidden; border-bottom: 2px solid var(--ink); } body.custom-repro-page .search_card .searchCard_body { padding: 12px 14px 14px; } body.custom-repro-page .search_card .art-artist h2 { font-family: var(--font-display) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; color: var(--bpa-accent, #D4004C) !important; margin: 0 0 4px !important; text-align: left; } body.custom-repro-page .search_card .art-title span { font-family: var(--font-ui) !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--ink) !important; text-transform: uppercase; letter-spacing: 0.01em; } body.custom-repro-page .search_card .card_content p { font-family: var(--font-ui) !important; font-size: 12.5px !important; font-weight: 300 !important; line-height: 1.6 !important; color: var(--charcoal) !important; margin: 6px 0 0; } /* --- Responsive ----------------------------------------- */ @media (max-width: 576px) { body.custom-repro-page .production_form .form_produc { padding: 20px 18px 24px; box-shadow: 4px 4px 0 0 var(--ink); margin-bottom: 32px; } } /* --- RIGHT column: order summary + checkout ------------- */ /* Maps the UI Kit "ORDER SUMMARY" + "ACCORDION" blocks onto the live .summery_checkout markup. Hard black comic-panel frames, zero radius, Anton display, Inter UI, rose (#D4004C) CTA, ink total band. Tokens only. */ /* Card shell — override global-custom beige (#F7F2E1 / #DCD3BF) */ body.custom-repro-page .summery_checkout { background: var(--white) !important; border: 2px solid var(--ink) !important; border-radius: 0 !important; box-shadow: 6px 6px 0 0 var(--ink) !important; padding: 20px 18px 24px; } /* Left column inner panels — faces, size, customization (global beige leak) */ body.custom-repro-page .production_form .repro-faces__option, body.custom-repro-page .production_form .repro-styles__option { background: var(--frost) !important; border: 2px solid var(--ink) !important; border-radius: 0 !important; } body.custom-repro-page .production_form .repro-faces__option.checked_box, body.custom-repro-page .production_form .repro-styles__option.checked_box { border-color: var(--rose) !important; box-shadow: inset 0 0 0 1px var(--rose); } body.custom-repro-page .production_form .repro-customization__section { background: var(--frost) !important; border: 2px solid var(--ink); border-radius: 0; } body.custom-repro-page .production_form .custom_detail { background: var(--white); border: 2px solid var(--ink); border-radius: 0; } body.custom-repro-page .production_form .switches-container { background: var(--smoke) !important; border-radius: 0; } body.custom-repro-page .production_form .switch { background: var(--rose) !important; border-radius: 0; } body.custom-repro-page .production_form .form-floating .form-control, body.custom-repro-page .production_form .select_size select { background: var(--white) !important; border: 2px solid var(--ink) !important; border-radius: 0 !important; color: var(--ink) !important; } /* Section titles ("Order Summary", "Summary & Checkout") */ body.custom-repro-page .summery_checkout .sum_chek_text { font-family: var(--font-display) !important; font-weight: 400 !important; font-size: clamp(20px, 2.4vw, 28px) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; line-height: 1.06 !important; color: var(--ink) !important; margin-bottom: 14px !important; } /* Accordion shell — comic panel */ body.custom-repro-page .summery_checkout .collapse_inner_box { background: var(--white) !important; border: 2px solid var(--ink) !important; border-radius: 0 !important; box-shadow: 6px 6px 0 0 var(--ink) !important; overflow: hidden; margin-bottom: 28px; } body.custom-repro-page .summery_checkout .accordion, body.custom-repro-page .summery_checkout .accordion-item { background: transparent !important; border: 0 !important; border-radius: 0 !important; } body.custom-repro-page .summery_checkout .accordion-button { font-family: var(--font-ui) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--ink) !important; background: var(--frost) !important; border: 0 !important; border-bottom: 2px solid var(--ink) !important; border-radius: 0 !important; padding: 16px 18px !important; box-shadow: none !important; } body.custom-repro-page .summery_checkout .accordion-button:not(.collapsed) { color: var(--ink) !important; background: var(--frost) !important; box-shadow: none !important; } /* Kill default bootstrap blue focus ring */ body.custom-repro-page .summery_checkout .accordion-button:focus { border-color: var(--ink) !important; box-shadow: none !important; outline: none !important; } body.custom-repro-page .summery_checkout .accordion-button::after { filter: grayscale(1) brightness(0) !important; /* black chevron */ } body.custom-repro-page .summery_checkout .accordion-body { background: var(--white) !important; padding: 6px 18px 8px !important; color: var(--charcoal) !important; } /* Summary rows */ body.custom-repro-page .summery_checkout .repro-summary__row { border-bottom: 1px solid var(--smoke) !important; } body.custom-repro-page .summery_checkout .repro-summary__row:last-child { border-bottom: 0 !important; } body.custom-repro-page .summery_checkout .repro-summary__row .dtl_con h4 { font-family: var(--font-ui) !important; font-size: 12px !important; font-weight: 600 !important; color: var(--carbon) !important; } body.custom-repro-page .summery_checkout .repro-summary__row .dtl_con p { font-family: var(--font-ui) !important; font-size: 11px !important; font-weight: 300 !important; line-height: 1.5 !important; color: var(--charcoal) !important; } body.custom-repro-page .summery_checkout .repro-summary__row .detail_cont_right h4 { font-family: var(--font-display) !important; font-weight: 400 !important; font-size: 15px !important; color: var(--ink) !important; } /* Total band — ink fill, white text (UI Kit .summary-total) */ body.custom-repro-page .summery_checkout .total_price_box { background: var(--ink) !important; border: 2px solid var(--ink) !important; border-radius: 0 !important; box-shadow: 6px 6px 0 0 var(--bpa-accent, #D4004C) !important; padding: 16px 18px !important; margin-bottom: 22px; } body.custom-repro-page .summery_checkout .total_price_box .dtl_con h4 { font-family: var(--font-ui) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--white) !important; } body.custom-repro-page .summery_checkout .total_price_box .dtl_con h4.total_price, body.custom-repro-page .summery_checkout .total_price_box .total_price, body.custom-repro-page .summery_checkout .total_price { font-family: var(--font-display) !important; font-weight: 400 !important; font-size: 30px !important; line-height: 1 !important; letter-spacing: 0.06em !important; color: var(--bpa-accent, #D4004C) !important; /* rose pop on ink */ } /* Checkout buttons */ body.custom-repro-page .summery_checkout .add_tocart_btn { display: flex; gap: 0; } /* PRIMARY CTA — rose fill (NOT default brown) */ body.custom-repro-page .summery_checkout .add_tocart_btn #addToCartButton { flex: 1; font-family: var(--font-ui) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--white) !important; background: var(--bpa-accent, #D4004C) !important; border: 2px solid var(--ink) !important; border-radius: 0 !important; padding: 16px 24px !important; box-shadow: none !important; transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } body.custom-repro-page .summery_checkout .add_tocart_btn #addToCartButton:hover { background: var(--bpa-accent-dark, #8B0032) !important; color: var(--white) !important; box-shadow: 4px 4px 0 0 var(--ink) !important; transform: translate(-2px, -2px); } /* SEND — secondary / ghost */ body.custom-repro-page .summery_checkout .add_tocart_btn #emailConfigButton { flex: 0 0 34%; font-family: var(--font-ui) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--ink) !important; background: var(--white) !important; border: 2px solid var(--ink) !important; border-right: 0 !important; border-radius: 0 !important; padding: 16px 18px !important; box-shadow: none !important; transition: background 0.18s ease, color 0.18s ease; } body.custom-repro-page .summery_checkout .add_tocart_btn #emailConfigButton:hover { background: var(--ink) !important; color: var(--white) !important; } /* Confirmation notices */ body.custom-repro-page .summery_checkout .confirmation_notice, body.custom-repro-page .summery_checkout .---confirmation_notice { background: var(--frost) !important; border: 2px solid var(--ink) !important; border-left: 6px solid var(--bpa-accent, #D4004C) !important; border-radius: 0 !important; margin-top: 16px; } body.custom-repro-page .summery_checkout .confirmation_notice p, body.custom-repro-page .summery_checkout .---confirmation_notice p { font-family: var(--font-ui) !important; font-size: 12.5px !important; font-weight: 300 !important; line-height: 1.6 !important; color: var(--charcoal) !important; } /* Read-more accent link */ body.custom-repro-page .summery_checkout .yellow_cont a { color: var(--bpa-accent, #D4004C) !important; font-family: var(--font-ui) !important; font-weight: 600 !important; text-decoration: none !important; } body.custom-repro-page .summery_checkout .yellow_cont a:hover { color: var(--bpa-accent-dark, #8B0032) !important; text-decoration: underline !important; } /* ===== END photo_to_restyled_masterpiece ===== */ /* ===== BPA — Catalog categories browse (list_category) ===== Scope: .search_sec.catalog-categories-page AND .search_sec.artwork-categories-page Structural reference: ADC "Catalog categories browse". All values translated to BPA pop-art identity — hard 2px black frames, zero radius, Inter body / Anton display, rose (#D4004C) accent. Tokens only (--bpa-*); no hard-coded colours. Card grid mirrors the BPA artwork-list card 1:1 via duplicated rules. ─────────────────────────────────────────────────────────────────────────── */ /* ── 1. Page-scoped design tokens ──────────────────────────────────────── */ .search_sec.catalog-categories-page, .search_sec.artwork-categories-page { --bpa-bg: #ffffff; --bpa-ink: #000000; --bpa-ink-2: #2A2A2A; --bpa-ink-3: #888888; --bpa-line: #000000; /* hard black border — comic-panel feel */ --bpa-line-2: #DCDCDC; --bpa-band: #F5F5F5; --bpa-slot: #EDEDED; --bpa-accent: #D4004C; /* BPA rose — primary accent */ --bpa-accent-dark: #8B0032; /* visited / pressed */ --bpa-body: var(--font-ui); --bpa-display: var(--font-display); } /* ── 2. Page chrome — breadcrumb, title row, sort ──────────────────────── */ .search_sec.catalog-categories-page .nav-list li, .search_sec.catalog-categories-page .nav-list a, .search_sec.catalog-categories-page .main-heading, .search_sec.catalog-categories-page .Showing_text, .search_sec.catalog-categories-page .sorting_content, .search_sec.catalog-categories-page .sort_by, .search_sec.artwork-categories-page .nav-list li, .search_sec.artwork-categories-page .nav-list a, .search_sec.artwork-categories-page .main-heading, .search_sec.artwork-categories-page .Showing_text, .search_sec.artwork-categories-page .sorting_content, .search_sec.artwork-categories-page .sort_by { color: var(--bpa-ink); font-family: var(--bpa-body); } .search_sec.catalog-categories-page .Showing_text .form-control, .search_sec.catalog-categories-page .sorting_content select.custom-select, .search_sec.artwork-categories-page .Showing_text .form-control, .search_sec.artwork-categories-page .sorting_content select.custom-select { background-color: var(--bpa-bg) !important; border: 1px solid var(--bpa-ink) !important; color: var(--bpa-ink) !important; border-radius: 0; font-family: var(--bpa-body); font-size: 13px; } /* ── 3. Filter panel — band ground, hard 1px frame ─────────────────────── */ .search_sec.catalog-categories-page .filter-panel, .search_sec.artwork-categories-page .filter-panel { background-color: var(--bpa-band); border: 1px solid var(--bpa-line); border-radius: 0; font-family: var(--bpa-body); } /* ── 4. Filter title row ───────────────────────────────────────────────── */ .search_sec.catalog-categories-page .filter-title, .search_sec.artwork-categories-page .filter-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; min-height: 44px; box-sizing: border-box; } .search_sec.catalog-categories-page .filter-title span, .search_sec.artwork-categories-page .filter-title span { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--bpa-display); /* Anton display — pop-art heading */ font-size: 14px; font-weight: 400; /* Anton is single-weight */ line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bpa-ink); } .search_sec.catalog-categories-page .filter-title span img, .search_sec.artwork-categories-page .filter-title span img { display: block; width: 16px; height: 16px; flex-shrink: 0; } /* ── 4b. Accordion shell inside the filter panel ───────────────────────── */ .search_sec.catalog-categories-page .filter-panel .accordion-item, .search_sec.artwork-categories-page .filter-panel .accordion-item { background-color: var(--bpa-band) !important; border: none !important; border-bottom: 1px solid var(--bpa-line) !important; border-radius: 0 !important; color: var(--bpa-ink); font-family: var(--bpa-body); } .search_sec.catalog-categories-page .filter-panel .accordion-button, .search_sec.catalog-categories-page .filter-panel .accordion-button:not(.collapsed), .search_sec.artwork-categories-page .filter-panel .accordion-button, .search_sec.artwork-categories-page .filter-panel .accordion-button:not(.collapsed) { background-color: var(--bpa-band) !important; color: var(--bpa-ink) !important; font-family: var(--bpa-display); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: none !important; border-radius: 0 !important; } /* ── 5. Badge list / applied filters ───────────────────────────────────── */ .search_sec.catalog-categories-page .badge_list, .search_sec.artwork-categories-page .badge_list { border-bottom: 1px solid var(--bpa-line); } .search_sec.catalog-categories-page .badge-filter, .search_sec.artwork-categories-page .badge-filter { background: var(--bpa-ink, #000000) !important; /* solid black chip — BPA pop-art identity; consistent with list-page */ color: var(--bpa-bg, #ffffff) !important; border: 1px solid var(--bpa-ink, #000000); border-radius: 0; font-family: var(--bpa-body); font-size: 13px; } /* ── 6. Core category links — .colors_list ─────────────────────────────── */ .search_sec.catalog-categories-page .colors_list, .search_sec.artwork-categories-page .colors_list { padding: 16px !important; display: flex !important; flex-wrap: wrap; gap: 10px; text-align: left !important; list-style: none; } .search_sec.catalog-categories-page .colors_list li, .search_sec.artwork-categories-page .colors_list li { width: auto !important; display: inline-block !important; margin: 0; padding: 0; background: transparent !important; border: none !important; } .search_sec.catalog-categories-page .colors_list li a, .search_sec.artwork-categories-page .colors_list li a { display: inline-block !important; padding: 4px 9px !important; width: auto !important; font-family: var(--font-ui, "Inter", system-ui, sans-serif); font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--bpa-gb-ink-2, #2A2A2A) !important; text-decoration: none !important; background: var(--bpa-gb-slot, #EDEDED) !important; border: 1px solid var(--bpa-gb-ink, #000000) !important; border-radius: 0; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .search_sec.catalog-categories-page .colors_list li a:hover, .search_sec.artwork-categories-page .colors_list li a:hover { color: var(--bpa-gb-accent, #D4004C) !important; border-color: var(--bpa-gb-ink, #000000) !important; } .search_sec.catalog-categories-page .colors_list li a.active, .search_sec.artwork-categories-page .colors_list li a.active { color: #ffffff !important; font-weight: 700; background: var(--bpa-ink, #000000) !important; /* BPA pop-art: solid black fill — matches pill.on in UI Kit */ border-color: var(--bpa-ink, #000000) !important; } /* ── 7. Card grid — mirrors BPA artwork-list card 1:1 ──────────────────── */ .search_sec.catalog-categories-page .custom_search .row > [class*="col-"], .search_sec.artwork-categories-page .custom_search .row > [class*="col-"] { border-color: var(--bpa-line) !important; } .search_sec.catalog-categories-page .custom_search .search_card, .search_sec.artwork-categories-page .custom_search .search_card { background-color: var(--bpa-bg); border: 2px solid var(--bpa-ink) !important; border-radius: 0 !important; box-shadow: none; transition: background-color 0.15s ease, box-shadow 0.15s ease; } .search_sec.catalog-categories-page .custom_search .search_card:hover, .search_sec.artwork-categories-page .custom_search .search_card:hover { background-color: var(--bpa-band) !important; box-shadow: 6px 6px 0 0 var(--bpa-ink) !important; } .search_sec.catalog-categories-page .custom_search .search_card .search_img, .search_sec.artwork-categories-page .custom_search .search_card .search_img { border-radius: 0; overflow: hidden; } .search_sec.catalog-categories-page .custom_search .search_card .searchCard_body, .search_sec.artwork-categories-page .custom_search .search_card .searchCard_body { padding: 10px 12px 8px; border-top: 2px solid var(--bpa-ink); } .search_sec.catalog-categories-page .custom_search .search_card .art-artist, .search_sec.artwork-categories-page .custom_search .search_card .art-artist { display: flex; align-items: center; gap: 0.4rem; } .search_sec.catalog-categories-page .custom_search .search_card .art-artist h2, .search_sec.artwork-categories-page .custom_search .search_card .art-artist h2 { margin: 0; flex: 1 1 auto; min-width: 0; } .search_sec.catalog-categories-page .custom_search .search_card .art-artist h2, .search_sec.catalog-categories-page .custom_search .search_card .art-artist h2 a, .search_sec.artwork-categories-page .custom_search .search_card .art-artist h2, .search_sec.artwork-categories-page .custom_search .search_card .art-artist h2 a { font-family: var(--bpa-display) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; text-align: left; color: var(--bpa-accent) !important; text-decoration: none; transition: color 0.15s ease; } .search_sec.catalog-categories-page .custom_search .search_card .art-artist h2 a:hover, .search_sec.artwork-categories-page .custom_search .search_card .art-artist h2 a:hover { color: var(--bpa-accent-dark) !important; } .search_sec.catalog-categories-page .custom_search .search_card .art-artist span, .search_sec.catalog-categories-page .custom_search .search_card .art-artist span a, .search_sec.artwork-categories-page .custom_search .search_card .art-artist span, .search_sec.artwork-categories-page .custom_search .search_card .art-artist span a { font-family: var(--bpa-body) !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.35; text-align: right; flex-shrink: 0; color: var(--bpa-ink-3) !important; } .search_sec.catalog-categories-page .custom_search .search_card .art-title, .search_sec.catalog-categories-page .custom_search .search_card .art-title a, .search_sec.artwork-categories-page .custom_search .search_card .art-title, .search_sec.artwork-categories-page .custom_search .search_card .art-title a { font-family: var(--bpa-body) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.4; text-align: left; color: var(--bpa-ink-2) !important; text-decoration: none; transition: color 0.15s ease; } .search_sec.catalog-categories-page .custom_search .search_card .art-title a:hover, .search_sec.artwork-categories-page .custom_search .search_card .art-title a:hover { color: var(--bpa-accent) !important; } .search_sec.catalog-categories-page .custom_search .search_card .hover_visible, .search_sec.artwork-categories-page .custom_search .search_card .hover_visible { background: var(--bpa-band) !important; /* match card :hover surface (panel only shows on hover) */ border-top: 2px solid var(--bpa-ink); padding: 10px 14px 12px; } .search_sec.catalog-categories-page .custom_search .search_card .hover_visible p, .search_sec.artwork-categories-page .custom_search .search_card .hover_visible p { font-family: var(--bpa-body) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.55; text-align: left; color: var(--carbon) !important; /* dark ink — legible on white panel */ opacity: 1; margin-bottom: 16px; } .search_sec.catalog-categories-page .custom_search .search_card .hover_visible p a, .search_sec.artwork-categories-page .custom_search .search_card .hover_visible p a { color: var(--bpa-accent) !important; } .search_sec.catalog-categories-page .custom_search .search_card .hover_visible p a:hover, .search_sec.artwork-categories-page .custom_search .search_card .hover_visible p a:hover { color: #ff4d8a !important; } .search_sec.catalog-categories-page .custom_search .search_card .addToCart, .search_sec.catalog-categories-page .custom_search .search_card .addToCart.added, .search_sec.artwork-categories-page .custom_search .search_card .addToCart, .search_sec.artwork-categories-page .custom_search .search_card .addToCart.added { background: var(--bpa-accent) !important; color: #ffffff !important; font-family: var(--bpa-body) !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.2; letter-spacing: 0.1em !important; text-transform: uppercase !important; border: 2px solid var(--bpa-accent) !important; border-radius: 0 !important; padding: 10px 18px !important; width: auto; min-width: 0; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .search_sec.catalog-categories-page .custom_search .search_card .addToCart .product-price-display, .search_sec.artwork-categories-page .custom_search .search_card .addToCart .product-price-display { color: #ffffff !important; font-family: var(--bpa-body) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; } .search_sec.catalog-categories-page .custom_search .cartbtn_group a.addToCart, .search_sec.artwork-categories-page .custom_search .cartbtn_group a.addToCart { color: #ffffff !important; } .search_sec.catalog-categories-page .custom_search .search_card .addToCart:hover, .search_sec.catalog-categories-page .custom_search .cartbtn_group a.addToCart:hover, .search_sec.artwork-categories-page .custom_search .search_card .addToCart:hover, .search_sec.artwork-categories-page .custom_search .cartbtn_group a.addToCart:hover { background: var(--bpa-ink) !important; border-color: var(--bpa-ink) !important; color: #ffffff !important; } .search_sec.catalog-categories-page .custom_search .search_card .card_bottom, .search_sec.artwork-categories-page .custom_search .search_card .card_bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* ── 8. Pagination — overrides global brown #875D2A ── */ .search_sec.catalog-categories-page .pagination .page-link, .search_sec.artwork-categories-page .pagination .page-link { color: var(--bpa-ink, #000000) !important; background: var(--bpa-bg, #ffffff) !important; border: 2px solid var(--bpa-line, #000000) !important; border-radius: 0 !important; font-family: var(--bpa-body, var(--font-ui)) !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; box-shadow: none !important; } .search_sec.catalog-categories-page .pagination .page-link:hover, .search_sec.artwork-categories-page .pagination .page-link:hover { background: var(--bpa-band, #F5F5F5) !important; border-color: var(--bpa-line, #000000) !important; color: var(--bpa-ink, #000000) !important; } .search_sec.catalog-categories-page .pagination .page-item.active .page-link, .search_sec.artwork-categories-page .pagination .page-item.active .page-link, .search_sec.catalog-categories-page .pagination .page-item.active .page-link:hover, .search_sec.artwork-categories-page .pagination .page-item.active .page-link:hover, .search_sec.catalog-categories-page .pagination .page-item.active .page-link:focus, .search_sec.artwork-categories-page .pagination .page-item.active .page-link:focus { background-color: var(--bpa-accent, #D4004C) !important; border-color: var(--bpa-accent, #D4004C) !important; color: #ffffff !important; } .search_sec.catalog-categories-page .pagination .page-item.disabled .page-link, .search_sec.artwork-categories-page .pagination .page-item.disabled .page-link { background: var(--bpa-bg, #ffffff) !important; border-color: var(--bpa-line-2, #DCDCDC) !important; color: var(--bpa-ink-3, #888888) !important; } /* ===== END BPA — Catalog categories browse ===== */ /* ===== museum_list (restyle8) — pagination active pill = brand accent ===== Overrides the generic global default (brown #875D2A) and the :first-child grey (#858585). Scoped to .museum-list-page only; matches the card CTA. */ .search_sec.museum-list-page .pagination .page-item.active .page-link, .search_sec.museum-list-page .pagination .page-item.active .page-link:hover, .search_sec.museum-list-page .pagination .page-item.active .page-link:focus { background-color: var(--lc, #D4004C) !important; border-color: var(--lc, #D4004C) !important; color: var(--white, #ffffff) !important; } /* ===================================================== DigitalImage buy page — "Included in Every Digital Image Order" premium benefits band — BuyPopArt tokens (overrides the ADC-gold default in global-custom-V1.9.css). Layout mirrors ADC/OUA/WK. ===================================================== */ .premium_service { margin-bottom: 44px; } .premium_service .why_choose_right, .premium_service .why_choose_right.black_back { height: auto !important; min-height: 0; padding: 32px 44px 48px !important; background: var(--bpa-ink, #161616); overflow: visible; } .premium_service .why_choose_right h3 { margin: 0 0 10px; padding: 0; font-family: var(--font-title-accent); font-size: clamp(22px, 2.5vw, 28px); font-weight: 600; line-height: 1.25; letter-spacing: 0.02em; text-align: center; color: var(--bpa-accent, #D4004C); } .premium_service .why_choose_right .heading_text { margin: 0 0 12px; font-family: var(--font-title-accent); font-size: clamp(20px, 2.2vw, 26px); font-weight: 400; line-height: 1.3; text-align: center; color: var(--bpa-band, #f5f5f5); } .premium_service .why_choose_right .heading_paragrap { margin: 0 auto; max-width: 52rem; text-align: center; color: var(--bpa-ink-3, #888888); } .premium_service .why_choose_box { margin-top: 28px; padding-bottom: 4px; } .premium_service .why_choose_box .row { row-gap: 28px; margin-bottom: 8px; } .premium_service .why_choose_box .row > [class*="col-"] { display: flex; flex-direction: column; } .premium_service .why_choose_box_inner { align-items: flex-start; gap: 14px; margin-bottom: 0; height: auto; min-height: 0; flex: 1 1 auto; } .premium_service .why_choose_icon { margin-top: 2px; flex-shrink: 0; } .premium_service .why_choose_info { min-width: 0; flex: 1; } .premium_service .why_choose_info h5 { margin: 0 0 8px; font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--bpa-band, #f5f5f5); } .premium_service .why_choose_info p { width: 100%; margin: 0; font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--bpa-ink-3, #888888); overflow: visible; } .premium_service .why_choose_icon img { background: transparent !important; outline: none !important; outline-offset: 0; filter: brightness(0) invert(1); opacity: 0.92; } .premium_service .why_choose_box_inner:hover .why_choose_icon img { opacity: 1; } /* ===== search_by_color ===== */ .color-search-page .search-form { margin-top: 24px; } .color-search-page .color-search-intro { font-size: 1.05em; color: var(--bpa-ink-2, #555555); line-height: 1.65; max-width: 52em; } .color-search-page .filter-row { display: flex; gap: 18px; align-items: flex-start; border-bottom: 1px solid var(--bpa-line, #e6e6e6); padding: 14px 0; } .color-search-page .filter-row-label { min-width: 280px; font-weight: 600; color: var(--bpa-ink, #161616); } .color-search-page .filter-row-description { margin-top: 6px; font-size: 0.95em; line-height: 1.5; color: var(--bpa-ink-2, #555555); font-weight: 400; max-width: 360px; } .color-search-page .filter-row-options { display: flex; flex-wrap: wrap; gap: 10px 18px; flex: 1; } .color-search-page .filter-row-options-stacked { display: block; } .color-search-page .filter-option { display: inline-flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--bpa-ink-2, #555555); max-width: 100%; } .color-search-page .filter-option span { white-space: normal; word-break: break-word; line-height: 1.35; } .color-search-page .main-color-list { list-style: none; padding: 0; margin: 0; display: block; } .color-search-page .main-color-list li { margin-bottom: 8px; padding: 6px 10px; background: var(--bpa-band, #f5f5f5); border: 1px solid var(--bpa-line-2, #d6d6d6); border-radius: 4px; } .color-search-page .main-color-list label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; width: 100%; } .color-search-page .main-color-list input[type="checkbox"] { position: static; opacity: 1; width: 1.1em; height: 1.1em; flex-shrink: 0; margin: 0; cursor: pointer; accent-color: var(--bpa-accent, #D4004C); } .color-search-page .hue-gradient-list { list-style: none; padding: 0; margin: 0; } .color-search-page .hue-gradient-list li { margin-bottom: 8px; } .color-search-page .hue-gradient-list label { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; } .color-search-page .hue-gradient-swatch { display: inline-block; flex-shrink: 0; width: 56px; height: 18px; border-radius: 4px; border: 1px solid var(--bpa-line-2, #d6d6d6); vertical-align: middle; margin-right: 4px; } .color-search-page .color-dot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--bpa-line-2, #d6d6d6); vertical-align: middle; flex-shrink: 0; } .color-search-page .filter-actions { margin-top: 24px; } .color-search-page #artworks-results { margin-top: 40px; } @media (max-width: 768px) { .color-search-page .filter-row { flex-direction: column; gap: 8px; } .color-search-page .filter-row-label { min-width: auto; } } /* BPA pop-art identity: rose accent on all checkboxes + accent-border hover on color rows */ .color-search-page input[type="checkbox"] { accent-color: var(--bpa-accent, #D4004C); } .color-search-page .main-color-list li:hover { border-color: var(--bpa-accent, #D4004C); } /* ===== orders/art_consultation.html — step image offset shadow ===== */ /* BuyPopArt: pop-rose wash of the brand accent (#D4004C). */ .step .step-image { --step-image-shadow: rgb(var(--ais-accent-rgb, 212 0 76) / 0.16); } /* ===== orders/art_consultation.html — BuyPopArt brand colours ===== */ /* Pure ink/white · pop-art rose accent · achromatic surfaces */ body.art-consultation-page .consultation_bottom { background: var(--ink, #000000); } body.art-consultation-page .consultation_bottom p, body.art-consultation-page .consultation_bottom p.consultation_text { font-family: var(--font-body) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 25px !important; letter-spacing: normal !important; color: var(--paper, #FAFAFA) !important; opacity: 1 !important; } body.art-consultation-page span.line { background: var(--mist, #DCDCDC); } body.art-consultation-page .step-title { background: var(--ink, #000000); color: var(--white, #FFFFFF); } body.art-consultation-page .step-heading { color: var(--ink, #000000); } body.art-consultation-page .step-header small { color: var(--lc, #D4004C); } body.art-consultation-page .step-header h4 { color: var(--ink, #000000); } body.art-consultation-page .step-content p, body.art-consultation-page .step li, body.art-consultation-page ul.step_list li { color: var(--charcoal, #555555); } body.art-consultation-page .step-number-box { background: var(--frost, #F5F5F5); border-color: var(--mist, #DCDCDC); color: var(--lc, #D4004C); } body.art-consultation-page .contactfull_width_hero_banner_with_background_image { background: var(--smoke, #EDEDED); } body.art-consultation-page .consultant_right { color: var(--paper, #FAFAFA); } body.art-consultation-page .consultant_right .overlay_img { background: rgba(0, 0, 0, 0.55) !important; opacity: 1 !important; } body.art-consultation-page .consultant_right h1 { font-family: var(--font-title) !important; font-weight: 400 !important; font-size: 55px !important; line-height: 60px !important; color: var(--paper, #FAFAFA) !important; } body.art-consultation-page .consultant_right p { font-family: var(--font-body) !important; font-weight: 400 !important; font-size: 14px !important; line-height: 26px !important; color: var(--paper, #FAFAFA) !important; } body.art-consultation-page .consultant_content h6 { font-family: var(--font-title) !important; font-weight: 400 !important; font-size: 25px !important; line-height: 20px !important; color: var(--paper, #FAFAFA) !important; } body.art-consultation-page .consultant_content span { font-family: var(--font-body) !important; font-weight: 400 !important; font-size: 14px !important; line-height: 19px !important; letter-spacing: 1px !important; color: var(--paper, #FAFAFA) !important; } body.art-consultation-page .form-container input { background: var(--frost, #F5F5F5) !important; color: var(--carbon, #111111) !important; } body.art-consultation-page .form-floating > label { color: var(--charcoal, #555555) !important; } body.art-consultation-page .form-floating > .form-control:focus ~ label::after, body.art-consultation-page .form-floating > .form-control:not(:placeholder-shown) ~ label::after { background-color: var(--frost, #F5F5F5); } body.art-consultation-page .consultation-dropdown, body.art-consultation-page .consultation-dropdown-header { background: var(--frost, #F5F5F5) !important; color: var(--carbon, #111111) !important; } body.art-consultation-page .consultation-dropdown-list { background: var(--frost, #F5F5F5); } body.art-consultation-page .consultation-dropdown-list li { color: var(--carbon, #111111); } body.art-consultation-page .consultation-dropdown-list li:hover { background: var(--smoke, #EDEDED); } body.art-consultation-page .image-upload-box { background: var(--frost, #F5F5F5); border-color: var(--mist, #DCDCDC); } body.art-consultation-page .btn-prev { color: var(--iron, #2A2A2A) !important; border-color: var(--mist, #DCDCDC) !important; } body.art-consultation-page .btn-next { background: var(--ink, #000000) !important; border-color: var(--ink, #000000) !important; color: var(--white, #FFFFFF) !important; } /* ===== /orders/art_consultation.html — BuyPopArt ===== */ /* ===== start_selling_* step-image shadow tint — BPA · pop-art rose tint ===== */ .start-selling-steps .step .step-image { --step-image-shadow: #F4C4D4; } /* ===== collectible sell/edit — image upload + sales channels (restyle8) ===== */ /* BuyPopArt pop-art identity: hard black border on the upload/preview boxes, light band surface, rose accent (#D4004C) remove button + spinner. Color map vs old cream values: preview border #DCD3BF -> --bpa-ink (#161616, hard black panel edge) surfaces #F7F2E1/#F7F1E0 -> --bpa-band (#f5f5f5) dashed border #877F76 -> --bpa-ink (#161616, crisp comic-panel dash) loader bg rgba(247,241,224,.9) -> rgba(245,245,245,.9) (band, translucent) spinner #ccc -> --bpa-ink-3 (#888888, muted ring) spinner top #333 -> --bpa-accent (#D4004C, rose) remove-btn rgba(0,0,0,.7) -> --bpa-accent (#D4004C, rose) */ body.userprofile-page .image-upload-container { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } body.userprofile-page .image-preview-list-box { display:none; flex-wrap:wrap; gap:10px; } body.userprofile-page .image-preview { width:57px; height:57px; overflow:hidden; position:relative; border:1px solid var(--bpa-ink, #161616); background:var(--bpa-band, #f5f5f5); } body.userprofile-page .image-preview img { width:100%; height:100%; object-fit:cover; } body.userprofile-page .image-upload-box { text-align:center; width:54px; height:54px; background:var(--bpa-band, #f5f5f5); border:1px dashed var(--bpa-ink, #161616); display:flex; justify-content:center; align-items:center; cursor:pointer; color:var(--bpa-ink, #161616); } body.userprofile-page .image-upload-box.disabled { opacity:.5; cursor:not-allowed; } body.userprofile-page .image-preview .loader { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(245,245,245,.9); } body.userprofile-page .image-preview .loader::after { content:""; border:3px solid var(--bpa-ink-3, #888888); border-top:3px solid var(--bpa-accent, #D4004C); border-radius:50%; width:24px; height:24px; animation:r8spin-bpa 1s linear infinite; } @keyframes r8spin-bpa { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} } body.userprofile-page .image-preview .remove-btn { position:absolute; top:5px; right:5px; background:var(--bpa-accent, #D4004C); color:#fff; border:none; border-radius:50%; width:20px; height:20px; cursor:pointer; font-size:16px; line-height:1; padding:0; } body.userprofile-page .channel-checkbox-group { display:flex; flex-direction:column; gap:10px; margin-top:10px; } body.userprofile-page .channel-checkbox-item { display:flex; align-items:center; gap:8px; } /* ===== customers_reviews — BPA brand tokens (structure lives in global-custom) ===== */ .customers-reviews-page { --cr-font: var(--font-ui, 'Inter', -apple-system, sans-serif); /* UI Kit body/UI font */ --cr-card-bg: #FFFFFF; /* UI Kit --white card surface */ --cr-card-border: 2px solid #000000; /* UI Kit --border (2px solid --ink) crisp pop-art edge */ --cr-card-radius: 0; /* BPA = hard edges */ --cr-card-shadow: none; /* pop-art flat, no soft shadow at rest */ --cr-card-shadow-hover: 0 6px 20px rgba(0,0,0,.1); /* UI Kit .optcard/.styletile hover lift */ --cr-text-color: #2A2A2A; /* UI Kit --iron body text */ --cr-name-color: #000000; /* UI Kit --ink strong reviewer name */ --cr-meta-color: #888888; /* UI Kit --pewter muted meta/date */ --cr-divider-color: #DCDCDC; /* UI Kit --mist subtle divider */ } /* ===== Art Appraisal (body.art-appraisal-page) — BPA ===== */ /* Re-colours the shared (ADC-palette) Art Appraisal page to the BuyPopArt pop-art identity: high-contrast black/white, Anton/Inter type (already flowing from --font-* tokens), rose accent #D4004C. Layout/spacing kept. */ body.art-appraisal-page{ --appraisal-step-shadow: rgb(212 0 76 / 0.16); /* pop-rose wash */ --appraisal-required: #D4004C; /* brand rose asterisk */ --appraisal-surface: #FFFFFF; /* dropdown panel */ --appraisal-input-border: #000000; /* comic-panel 2px ink */ --appraisal-input-divider: #EDEDED; /* --smoke divider */ --appraisal-hover: #F5F5F5; /* --frost row hover */ --appraisal-selected: #EDEDED; /* --smoke selected row */ --appraisal-help-text: var(--charcoal, #555555); /* was global warm-brown #3E342A */ --appraisal-panel-bg: #FFFFFF; /* was global beige #E8E2CD */ --appraisal-panel-border: #000000; /* comic-panel ink frame */ } /* 1. Hero caption (light over dark video) */ body.art-appraisal-page .consultation_content h6, body.art-appraisal-page .consultation_content h1, body.art-appraisal-page .consultation_content p{ color: #FFFFFF; } /* 2. Intro band */ body.art-appraisal-page .consultation_bottom{ background: #111111; } body.art-appraisal-page .consultation_bottom p{ color: #F5F5F5; } /* 3. Vertical connector line */ body.art-appraisal-page span.line{ background: #000000; } /* 4. Step pill */ body.art-appraisal-page .step-title{ background: #000000; color: #FFFFFF; } /* 5. Step headings / copy */ body.art-appraisal-page .step-heading{ color: #000000; } body.art-appraisal-page .step-content p, body.art-appraisal-page .step li, body.art-appraisal-page ul.step_list li{ color: #2A2A2A; } /* 6. Step image shadow (token consumed by global) */ body.art-appraisal-page .step .step-image{ --step-image-shadow: var(--appraisal-step-shadow); } /* 7. Comparative table */ body.art-appraisal-page .appraisel_main_section{ background: #F5F5F5; } body.art-appraisal-page .table > :not(caption) > * > *{ background: #FFFFFF !important; } body.art-appraisal-page table tbody, body.art-appraisal-page table td, body.art-appraisal-page table th, body.art-appraisal-page table tr{ border-color: #000000; } body.art-appraisal-page table th, body.art-appraisal-page table thead th{ color: #000000 !important; } body.art-appraisal-page table td h4, body.art-appraisal-page table td p, body.art-appraisal-page .usd_heading, body.art-appraisal-page table td b{ color: #2A2A2A; } body.art-appraisal-page .table_price_color{ color: #D4004C; } body.art-appraisal-page input[type="checkbox"]{ accent-color: #D4004C; } /* 8. Valuation form */ body.art-appraisal-page .valuation_request h4, body.art-appraisal-page .valuation_form_box label, body.art-appraisal-page .form_heading{ color: #000000; } body.art-appraisal-page .steps_count span{ background: #000000; color: #FFFFFF; } body.art-appraisal-page .input_box input, body.art-appraisal-page .input_box textarea, body.art-appraisal-page .input_label_text, body.art-appraisal-page .input_label_text input{ background: #FFFFFF; color: #111111; border-color: #000000; } body.art-appraisal-page .required-asterisk{ color: var(--appraisal-required); } /* Submit CTA — pop-art black/white (was global warm-brown #875D2A) */ body.art-appraisal-page .valuation_request .add_tocart_btn button{ background: #000000; color: #FFFFFF; } body.art-appraisal-page .valuation_request .add_tocart_btn button:hover{ background: #D4004C; color: #FFFFFF; } /* 9. Plan dropdown — align with form surfaces */ body.art-appraisal-page .custom-dropdown .dropdown-header, body.art-appraisal-page .custom-dropdown .dropdown-list{ background: var(--appraisal-surface); border-color: var(--appraisal-input-border); } body.art-appraisal-page .custom-dropdown .dropdown-list li{ border-bottom-color: var(--appraisal-input-divider); color: #111111; } body.art-appraisal-page .custom-dropdown .dropdown-list li:hover{ background: var(--appraisal-hover); } body.art-appraisal-page .custom-dropdown .dropdown-list li.selected{ background: var(--appraisal-selected); } /* ===== orders/checkout ===== */ /* BPA pop-art identity: achromatic comic-panel — 2px black frames, zero radius, #000 (--ink) dark headers, Anton (--font-display) titles, and the single pop accent --lc (#D4004C) reserved for the shipping-address left rule. */ .checkout-page .checkout_subtitle { color: var(--charcoal, #555555); font-size: 1.1rem; } .checkout-page .card { border: var(--bpa-border, 2px solid #000000); border-radius: 0; box-shadow: 0 6px 20px rgba(0, 0, 0, .1); } .checkout-page .card-header { border-bottom: none; padding: 1rem 1.5rem; } .checkout-page .card-header.bg-dark { background-color: var(--ink, #000000) !important; } .checkout-page .card-header h5 { font-family: var(--font-display, 'Anton', Impact, sans-serif); font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; } .checkout-page .checkout-thumb-col { width: 100px; } .checkout-page .checkout-thumb-cell { width: 100px; text-align: center; } .checkout-page .checkout-thumb-img { max-width: 80px; } .checkout-page .checkout-amount-cell { white-space: nowrap; } .checkout-page .shipping-address-display { background-color: var(--frost, #F5F5F5); padding: 20px; border-radius: 0; border-left: 4px solid var(--lc, #D4004C); } .checkout-page .shipping-address-display p { color: var(--carbon, #111111); line-height: 1.6; } .checkout-page .checkout-summary { top: 20px; } .checkout-page .checkout-total-label { opacity: 0.8; } .checkout-page .why_choose_box_inner { margin-bottom: 1rem; } .checkout-page .why_choose_box_inner h6 { font-size: 0.9rem; margin-bottom: 0.25rem; } /* ===== apr-thanks (art project request thank-you) ===== */ /* Page section wrapper */ .apr-thanks-page { padding-top: 60px; padding-bottom: 60px; background: var(--white); } /* Grid row spacing */ .apr-thanks-page .apr-thanks-grid { margin-bottom: 40px; } /* ── Card surface — pop-art: hard 3px ink border + hard offset shadow ── */ .apr-thanks-page .apr-thanks-card { background: var(--white); border: 3px solid var(--ink) !important; border-radius: 0 !important; box-shadow: 6px 6px 0 var(--ink); margin-bottom: 28px; height: auto; } /* Intro card: white on white with accent top stripe */ .apr-thanks-page .apr-thanks-card--intro { border-top: 6px solid var(--lc) !important; } /* Steps card: frost surface with ink left stripe for contrast */ .apr-thanks-page .apr-thanks-card--steps { background: var(--frost); border-left: 6px solid var(--lc) !important; } /* ── Card body padding ── */ .apr-thanks-page .apr-thanks-card__body { padding: 36px 32px; } /* Intro card body: centred */ .apr-thanks-page .apr-thanks-card--intro .apr-thanks-card__body { text-align: center; } /* ── Card title — Anton display, uppercase, BPA ink ── */ .apr-thanks-page .apr-thanks-card .apr-thanks-card__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.05; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); margin-bottom: 20px; } /* ── Body copy — Inter, charcoal ── */ .apr-thanks-page .apr-thanks-card__text { font-family: var(--font-ui); font-size: 1rem; font-weight: 300; line-height: 1.7; color: var(--charcoal); margin: 0; } /* ── Steps list — remove bullets; bold pop-art numbered markers ── */ .apr-thanks-page .apr-thanks-steps { list-style: none; padding: 0; margin: 0; counter-reset: steps-counter; } .apr-thanks-page .apr-thanks-steps__item { counter-increment: steps-counter; display: flex; align-items: flex-start; gap: 16px; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 400; line-height: 1.5; color: var(--carbon); padding: 14px 0; border-bottom: 1px solid var(--mist); } .apr-thanks-page .apr-thanks-steps__item:last-child { border-bottom: none; } /* Pop-art numbered marker: bold ink box with rose counter */ .apr-thanks-page .apr-thanks-steps__item::before { content: counter(steps-counter); font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; line-height: 1; color: var(--white); background: var(--lc); border: 2px solid var(--ink); min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } /* ── Contact prompt ── */ .apr-thanks-contact { text-align: center; padding: 8px 0 16px; } .apr-thanks-contact .apr-thanks-contact__text { font-family: var(--font-ui); font-size: 0.9rem; font-weight: 400; color: var(--pewter); margin: 0; } /* Contact link: branded pop-art rose, beats .text-muted a (0,1,0) */ .apr-thanks-contact .apr-thanks-contact__link { color: var(--lc); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.2s, color 0.2s; } .apr-thanks-contact .apr-thanks-contact__link:hover, .apr-thanks-contact .apr-thanks-contact__link:focus { color: var(--lv); border-bottom-color: var(--lv); } /* ── Responsive: stack on mobile ── */ @media (max-width: 767px) { .apr-thanks-page { padding-top: 36px; padding-bottom: 36px; } .apr-thanks-page .apr-thanks-card { box-shadow: 4px 4px 0 var(--ink); } .apr-thanks-page .apr-thanks-card__body { padding: 24px 20px; } } /* ===== start_selling_* (body.start-selling-page) — BPA · BuyPopArt ===== */ /* --- right CTA card "Start selling today" — comic-panel feel --- */ body.start-selling-page .contactForm_sec { display: flex; align-items: center; padding: 48px 70px; } body.start-selling-page .form-step.step-dark { position: relative; width: 100%; background: var(--bpa-bg, #ffffff); border: 2px solid var(--bpa-line, #000000); border-radius: 0; padding: 44px 44px 100px; box-shadow: 8px 8px 0 var(--bpa-ink, #000000); } body.start-selling-page .form-container h3 { margin-bottom: 20px; } body.start-selling-page .form-container h3 p { font-family: var(--font-title) !important; font-weight: 800 !important; font-size: 30px !important; line-height: 1.1 !important; letter-spacing: 0.01em !important; text-transform: uppercase !important; color: var(--bpa-ink, #000000) !important; opacity: 1 !important; margin: 0 !important; } body.start-selling-page .form-container .row p { font-family: var(--font-body) !important; font-weight: 400 !important; font-size: 15px !important; line-height: 26px !important; text-transform: none !important; color: var(--bpa-ink-2, #2A2A2A) !important; opacity: 1 !important; margin: 0 0 12px !important; } body.start-selling-page .floating_footer { position: absolute; right: 44px; bottom: 44px; width: auto; margin: 0; } body.start-selling-page .floating_footer .btn-dark { background: var(--bpa-accent, #D4004C); border: 2px solid var(--bpa-ink, #000000); color: #fff; border-radius: 0; padding: 10px 28px; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; transition: background .15s ease; } body.start-selling-page .floating_footer .btn-dark:hover { background: var(--bpa-accent-dark, #8B0032); border-color: var(--bpa-ink, #000000); color: #fff; } body.start-selling-page .consultation_bottom { background: #000000; } body.start-selling-page .consultation_bottom p, body.start-selling-page .consultation_bottom p.consultation_text { font-family: var(--font-body) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 25px !important; letter-spacing: normal !important; color: #F5F5F5 !important; opacity: 1 !important; } body.start-selling-page .consultant_right { color: #F5F5F5; } body.start-selling-page .consultant_right .overlay_img { background: rgba(0, 0, 0, 0.55) !important; opacity: 1 !important; } body.start-selling-page .consultant_right h1 { font-family: var(--font-title) !important; font-weight: 400 !important; font-size: 55px !important; line-height: 60px !important; color: #F5F5F5 !important; } body.start-selling-page .consultant_right p { font-family: var(--font-body) !important; font-weight: 400 !important; font-size: 14px !important; line-height: 26px !important; color: #F5F5F5 !important; } body.start-selling-page .consultant_content h6 { font-family: var(--font-title) !important; font-weight: 400 !important; font-size: 25px !important; line-height: 20px !important; color: #F5F5F5 !important; } body.start-selling-page .consultant_content span { font-family: var(--font-body) !important; font-weight: 400 !important; font-size: 14px !important; line-height: 19px !important; letter-spacing: 1px !important; color: #F5F5F5 !important; } body.start-selling-page .step-title { background: #000000; color: #FFFFFF; } body.start-selling-page .step-heading { color: #000000; } body.start-selling-page .step-header small { color: #D4004C; } body.start-selling-page .step-header h4 { color: #000000; } body.start-selling-page span.line { background: #D4004C; } body.start-selling-page .step-content p, body.start-selling-page ul.step_list li { color: #2A2A2A; } body.start-selling-page .contactfull_width_hero_banner_with_background_image { background: #F5F5F5; } /* ===== Artwork Not Found Page ===== */ /* BPA BuyPopArt — pop-art: hard 2px black frames, zero radius, Anton display, rose/magenta CTA */ /* ── Breadcrumb nav-list ── */ .artwork-not-found-page .nav-list { list-style: none; padding: 0; margin: 0 0 1.5rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-family: var(--font-ui, 'Inter', sans-serif); font-size: 13px; font-weight: 400; color: var(--charcoal, #555555); } .artwork-not-found-page .nav-list a { color: var(--lc, #D4004C); text-decoration: none; font-weight: 500; transition: color 0.2s; } .artwork-not-found-page .nav-list a:hover, .artwork-not-found-page .nav-list a:focus { color: var(--lv, #8B0032); text-decoration: underline; } .artwork-not-found-page .nav-list .main-heading { color: var(--pewter, #888888); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; } /* ── Card form container ── */ .artwork-not-found-page .e_card_form { background: var(--white, #ffffff); border: 2px solid var(--ink, #000000); border-radius: 0 !important; padding: 2.5rem 2rem; } /* ── Form heading — Anton display font, large, black ── */ .artwork-not-found-page .form_heading { font-family: var(--font-display, 'Anton', Impact, sans-serif); font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.05; color: var(--ink, #000000); } /* ── Form content — body text ── */ .artwork-not-found-page .form_content { font-family: var(--font-ui, 'Inter', sans-serif); font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--carbon, #111111); } .artwork-not-found-page .form_content p { margin-bottom: 0; color: var(--carbon, #111111); } /* ── Primary button — rose/magenta BPA CTA ── */ .artwork-not-found-page .btn-primary { background: var(--lc, #D4004C) !important; border: 2px solid var(--lc, #D4004C) !important; border-radius: 0 !important; color: var(--white, #ffffff) !important; font-family: var(--font-ui, 'Inter', sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 14px 32px; transition: background 0.2s, border-color 0.2s; } .artwork-not-found-page .btn-primary:hover, .artwork-not-found-page .btn-primary:focus { background: var(--lv, #8B0032) !important; border-color: var(--lv, #8B0032) !important; color: var(--white, #ffffff) !important; box-shadow: none !important; } /* ── Secondary button — ghost/outline style ── */ .artwork-not-found-page .btn-secondary { background: transparent !important; border: 2px solid var(--ink, #000000) !important; border-radius: 0 !important; color: var(--ink, #000000) !important; font-family: var(--font-ui, 'Inter', sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 14px 32px; transition: background 0.2s, color 0.2s; } .artwork-not-found-page .btn-secondary:hover, .artwork-not-found-page .btn-secondary:focus { background: var(--ink, #000000) !important; color: var(--white, #ffffff) !important; box-shadow: none !important; } /* ── Responsive: tighten padding on small screens ── */ @media (max-width: 575px) { .artwork-not-found-page .e_card_form { padding: 1.75rem 1.25rem; } .artwork-not-found-page .btn-primary, .artwork-not-found-page .btn-secondary { width: 100%; justify-content: center; } } /* ===================================================== BPA — Artwork buy / reproduction page (artwork_buy_ArtistReproduction) Structure in global-custom; brand colours/identity here. Scoped to .reproduction_main_page. BuyPopArt = comic-panel: Anton display, Inter UI, hard 2px black borders, zero radius, rose #D4004C accent (price/active text), black checked states. ===================================================== */ .reproduction_main_page { --bpa-radius: 0px; --bpa-line: #000000; /* hard black comic-panel rule */ --bpa-line-2: #DCDCDC; /* soft inner divider */ --bpa-band: #F5F5F5; --bpa-slot: #EDEDED; --bpa-bg: #FFFFFF; --bpa-ink: #000000; --bpa-ink-2: #555555; --bpa-ink-3: #888888; --bpa-accent: #D4004C; --bpa-accent-dark: #8B0032; --bpa-body: var(--font-ui, 'Inter', -apple-system, sans-serif); --bpa-display: var(--font-display, 'Anton', Impact, sans-serif); font-family: var(--bpa-body, var(--font-body)); color: var(--bpa-ink, #000000); background-color: var(--bpa-bg, #ffffff); } /* Academic block — same horizontal width as reproduction_section */ .reproduction_main_page > .container { max-width: none; width: 100%; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } .reproduction_main_page .article_main_page, .reproduction_main_page .article_main_page.p-0 { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; width: 100% !important; } .reproduction_main_page .academicism_wrapper, .reproduction_main_page .acadamic_inner_box { padding-left: 0; padding-right: 0; max-width: none; width: 100%; } /* Custom width/height fields — neutral slot */ .reproduction_main_page .input_label_text, .reproduction_main_page .manual_cstm__box .input_label_text { background: var(--bpa-slot, #EDEDED); } /* ---- Action bar + cross-channel links ---- */ .reproduction_main_page .fav-icon-artwork, .reproduction_main_page .buy_sale_channel_heading_alternate_buy { border-bottom-color: var(--bpa-line, #000000); } .reproduction_main_page .buy_sale_channel_heading_alternate_buy { gap: 20px; padding-bottom: 16px; } .reproduction_main_page .fav-icon-artwork a, .reproduction_main_page .fav-icon-artwork .artwork-share-trigger, .reproduction_main_page .buy_sale_channel_heading_alternate_buy a { font-family: var(--bpa-body, var(--font-body)); font-size: 11px; font-weight: 600; line-height: 1.35; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bpa-ink-2, #555555) !important; transition: color 0.15s ease; } .reproduction_main_page .fav-icon-artwork a:hover, .reproduction_main_page .fav-icon-artwork .artwork-share-trigger:hover, .reproduction_main_page .buy_sale_channel_heading_alternate_buy a:hover { color: var(--bpa-accent, #D4004C) !important; } .reproduction_main_page .fav-icon-artwork a img, .reproduction_main_page .fav-icon-artwork .artwork-share-trigger img, .reproduction_main_page .buy_sale_channel_heading_alternate_buy a img { width: 18px; height: 18px; flex-shrink: 0; filter: brightness(0) saturate(100%); opacity: 0.55; transition: opacity 0.15s ease, filter 0.15s ease; } .reproduction_main_page .fav-icon-artwork a:hover img, .reproduction_main_page .fav-icon-artwork .artwork-share-trigger:hover img, .reproduction_main_page .buy_sale_channel_heading_alternate_buy a:hover img { opacity: 1; /* recolour mono icon -> BPA rose #D4004C */ filter: brightness(0) saturate(100%) invert(13%) sepia(98%) saturate(6800%) hue-rotate(330deg) brightness(95%) contrast(108%); } .reproduction_main_page .fav-icon-artwork a.fav_toggle .fav_icon { filter: brightness(0) saturate(100%) invert(13%) sepia(98%) saturate(6800%) hue-rotate(330deg) brightness(95%) contrast(108%); opacity: 1; } /* ---- Metadata chips ---- */ .reproduction_main_page .details_reproducton li { font-family: var(--bpa-body, var(--font-body)); font-size: 13px; font-weight: 400; color: var(--bpa-ink-2, #555555); } .reproduction_main_page .details_reproducton li img { width: 16px; height: 16px; opacity: 0.7; } /* ---- PDP titles — Anton display, uppercase ---- */ .reproduction_main_page .repro_heading, .reproduction_main_page .buy_sale_channel_heading, .reproduction_main_page .buy_sale_channel_heading a { font-family: var(--bpa-display, var(--font-title)); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; color: var(--bpa-ink, #000000); } .reproduction_main_page .buy_sale_channel_short_description { font-family: var(--bpa-body, var(--font-body)); font-size: 14px; font-weight: 300; color: var(--bpa-ink-2, #555555); } /* ---- Accordions — white panel, hard 2px black frame ---- */ .reproduction_main_page .reproduc_tabs .accordion-item, .reproduction_main_page .reproduction_image_detail .accordion-item, .reproduction_main_page .repruct_content_collapse .accordion-item, .reproduction_main_page #summary_checkout .accordion-item, .reproduction_main_page #summary_checkout .collapse_inner_box .accordion-item { background-color: var(--bpa-bg, #ffffff) !important; border: 2px solid var(--bpa-line, #000000) !important; border-radius: var(--bpa-radius, 0px); overflow: hidden; padding-bottom: 0 !important; } .reproduction_main_page .repruct_content_collapse .accordion-item + .accordion-item { margin-top: 10px; } .reproduction_main_page .reproduction_image_detail .repruct_content_collapse + .repruct_content_collapse { margin-top: 10px; } .reproduction_main_page .reproduc_tabs .accordion-item + .accordion-item, .reproduction_main_page .reproduction_image_detail .reproduc_tabs .accordion-item + .accordion-item { margin-top: 8px; } .reproduction_main_page .reproduc_tabs .accordion-collapse, .reproduction_main_page .reproduction_image_detail .accordion-collapse, .reproduction_main_page .repruct_content_collapse .accordion-collapse { background-color: var(--bpa-bg, #ffffff); } .reproduction_main_page .reproduc_tabs button.accordion-button, .reproduction_main_page .reproduc_tabs button.accordion-button:not(.collapsed), .reproduction_main_page .reproduction_image_detail .accordion-item button.accordion-button, .reproduction_main_page .reproduction_image_detail .accordion-item button.accordion-button:not(.collapsed), .reproduction_main_page .repruct_content_collapse button.accordion-button, .reproduction_main_page .repruct_content_collapse button.accordion-button:not(.collapsed), .reproduction_main_page #summary_checkout button.accordion-button, .reproduction_main_page #summary_checkout button.accordion-button:not(.collapsed) { font-family: var(--bpa-display, var(--font-title)) !important; font-size: 16px !important; font-weight: 400 !important; letter-spacing: 0.03em; text-transform: uppercase !important; color: var(--bpa-ink, #000000) !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; } .reproduction_main_page .reproduc_tabs button.accordion-button { padding: 12px 20px; } .reproduction_main_page .repruct_content_collapse button.accordion-button { padding: 12px 20px; } .reproduction_main_page .reproduc_tabs .accordion-body, .reproduction_main_page .reproduction_image_detail .accordion-body, .reproduction_main_page .repruct_content_collapse .accordion-body, .reproduction_main_page #summary_checkout .accordion-body { font-family: var(--bpa-body, var(--font-body)); font-size: 14px; font-weight: 300; color: var(--bpa-ink-2, #555555); background: transparent !important; background-color: transparent !important; } .reproduction_main_page #summary_checkout .accordion-body { padding: 0 16px 16px !important; } .reproduction_main_page .reproduc_tabs .accordion-body { padding: 0 20px 16px !important; } .reproduction_main_page .repruct_content_collapse .accordion-body { padding: 0 20px 16px !important; } .reproduction_main_page .repruct_content_collapse { border-top-color: var(--bpa-line-2, #DCDCDC); border-bottom-color: var(--bpa-line-2, #DCDCDC); } .reproduction_main_page .repruct_content_collapse .accordion-body span { color: var(--bpa-accent, #D4004C); } /* Configurator tabs + radios */ .reproduction_main_page .reproduc_tabs .nav-pills .nav-link { font-family: var(--bpa-body, var(--font-body)); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bpa-ink-3, #888888); border-bottom-color: transparent; } .reproduction_main_page .reproduc_tabs .nav-pills .nav-link.active, .reproduction_main_page .reproduc_tabs .nav-pills .show > .nav-link { color: var(--bpa-ink, #000000); border-bottom-color: var(--bpa-accent, #D4004C); } .article_main_page .repro_radio label, .article_main_page .ques_box .repro_radio label, .reproduction_main_page .repro_radio label, .reproduction_main_page .article_main_page .repro_radio label, .reproduction_main_page .ques_box .repro_radio label, .reproduction_main_page .article_main_page .ques_box .repro_radio label { font-family: var(--bpa-body, var(--font-body)); font-size: 14px !important; font-weight: 400; line-height: 1.45 !important; color: var(--bpa-ink, #000000) !important; } .article_main_page .repro_radio input[type="radio"], .reproduction_main_page .repro_radio input[type="radio"], .reproduction_main_page .article_main_page .repro_radio input[type="radio"] { background: var(--bpa-bg, #ffffff); } .article_main_page .repro_radio input[type="radio"]:after, .article_main_page .question_option .repro_radio input[type="radio"]:after, .reproduction_main_page .repro_radio input[type="radio"]:after, .reproduction_main_page .article_main_page .repro_radio input[type="radio"]:after, .reproduction_main_page .question_option .repro_radio input[type="radio"]:after, .reproduction_main_page .article_main_page .question_option .repro_radio input[type="radio"]:after { background-color: var(--bpa-bg, #ffffff) !important; border: 2px solid var(--bpa-ink, #000000) !important; } .article_main_page .repro_radio input[type="radio"]:checked:after, .article_main_page .question_option .repro_radio input[type="radio"]:checked:after, .reproduction_main_page .repro_radio input[type="radio"]:checked:after, .reproduction_main_page .article_main_page .repro_radio input[type="radio"]:checked:after, .reproduction_main_page .question_option .repro_radio input[type="radio"]:checked:after, .reproduction_main_page .article_main_page .question_option .repro_radio input[type="radio"]:checked:after { background-color: var(--bpa-ink, #000000) !important; border-color: var(--bpa-ink, #000000) !important; outline: 2px solid var(--bpa-ink, #000000) !important; outline-offset: 2px; } /* CTA buttons — solid black comic panel, white text, iron hover */ .reproduction_main_page .add_tocart_btn button, .reproduction_main_page .reproduction_button_box .add_tocart_btn button { font-family: var(--bpa-body, var(--font-body)); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; background: var(--bpa-ink, #000000); border: 2px solid var(--bpa-ink, #000000); border-radius: var(--bpa-radius, 0px); transition: background 0.15s ease, border-color 0.15s ease; } .reproduction_main_page .add_tocart_btn button:hover:not(:disabled), .reproduction_main_page .reproduction_button_box .add_tocart_btn button:hover:not(:disabled) { background: var(--bpa-accent, #D4004C); border-color: var(--bpa-accent, #D4004C); color: #ffffff; } /* ---- Price spans — BPA rose ---- */ .reproduction_main_page .face_color_red, .reproduction_main_page .aps-price-amount, .reproduction_main_page .summery_total .face_color_red { color: var(--bpa-accent, #D4004C) !important; } /* ---- Academic / story block ---- */ .article_main_page .artwork_section, .reproduction_main_page .artwork_section, .reproduction_main_page .article_main_page .artwork_section, .bpa-buy-page-section.artwork_section { background: transparent !important; padding-top: 24px; padding-bottom: 8px; padding-left: 0 !important; padding-right: 0 !important; } /* Section headings — Anton uppercase, black underline */ .article_main_page .art_heading, .article_main_page .art_heading.art_heading--quick-facts, .article_main_page .quick_facts_section h4, .article_main_page .art_quize_section .art_header h4, .article_main_page .side_headings, .reproduction_main_page .art_heading, .reproduction_main_page .article_main_page .art_heading, .bpa-buy-page-section .art_heading, .reproduction_main_page .art_heading.art_heading--quick-facts, .reproduction_main_page .article_main_page .art_heading.art_heading--quick-facts, .bpa-buy-page-section .art_heading.art_heading--quick-facts, .reproduction_main_page .quick_facts_section h4, .reproduction_main_page .article_main_page .quick_facts_section h4, .bpa-buy-page-section .quick_facts_section h4, .reproduction_main_page .quick_facts_section h4.art_heading, .reproduction_main_page .article_main_page .quick_facts_section h4.art_heading, .bpa-buy-page-section .quick_facts_section h4.art_heading, .reproduction_main_page .art_quize_section .art_header h4, .reproduction_main_page .article_main_page .art_quize_section .art_header h4, .bpa-buy-page-section .art_quize_section .art_header h4, .reproduction_main_page .side_headings, .reproduction_main_page .article_main_page .side_headings, .bpa-buy-page-section .side_headings { font-family: var(--bpa-display, var(--font-title)) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.1 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; color: var(--bpa-ink, #000000) !important; margin-top: 0 !important; margin-bottom: 18px !important; padding-top: 0 !important; padding-bottom: 10px !important; border-bottom: 2px solid var(--bpa-ink, #000000) !important; opacity: 1; } .article_main_page .art_quize_section .art_header h4.art_heading { font-family: var(--bpa-display, var(--font-title)) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.1 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; color: var(--bpa-ink, #000000) !important; } .reproduction_main_page .art_heading.art_heading--section-spaced, .bpa-buy-page-section .art_heading.art_heading--section-spaced, .article_main_page .art_heading.art_heading--section-spaced { margin-top: 36px !important; } .bpa-buy-page-section .parent_slid_box.bpa-related-slider { border: none; border-bottom: none; padding: 0 0 28px; margin: 0; } .reproduction_main_page .art_text, .reproduction_main_page .art_detail, .article_main_page .box_facts ul li, .reproduction_main_page .box_facts ul li, .reproduction_main_page .article_main_page .box_facts ul li { font-family: var(--bpa-body, var(--font-body)); font-weight: 300; color: var(--bpa-ink-2, #555555); } .article_main_page .box_facts ul li b, .reproduction_main_page .box_facts ul li b, .reproduction_main_page .article_main_page .box_facts ul li b { font-weight: 600; color: var(--bpa-ink, #000000); } .article_main_page .box_facts ul li a, .reproduction_main_page .box_facts ul li a, .reproduction_main_page .article_main_page .box_facts ul li a, .article_main_page .qf-more-trigger, .reproduction_main_page .qf-more-trigger { color: var(--bpa-accent, #D4004C); } .article_main_page .box_facts ul li a:hover, .article_main_page .qf-more-trigger:hover, .reproduction_main_page .box_facts ul li a:hover, .reproduction_main_page .qf-more-trigger:hover { color: var(--bpa-accent-dark, #8B0032); } /* Quick Facts cards — soft slot panel, hard black frame */ .article_main_page .quick_facts_section, .reproduction_main_page .quick_facts_section, .reproduction_main_page .article_main_page .quick_facts_section, .bpa-buy-page-section .quick_facts_section { background-color: var(--bpa-band, #F5F5F5) !important; border: 2px solid var(--bpa-ink, #000000); border-radius: var(--bpa-radius, 0px); padding: 20px; } .article_main_page .art_quize_section, .reproduction_main_page .art_quize_section, .reproduction_main_page .article_main_page .art_quize_section, .bpa-buy-page-section .art_quize_section { margin-top: 0; background: var(--bpa-bg, #ffffff) !important; border: 2px solid var(--bpa-ink, #000000); border-radius: var(--bpa-radius, 0px); padding: 20px; } .article_main_page .listOf_artwork_section { background: var(--bpa-bg, #ffffff) !important; background-color: var(--bpa-bg, #ffffff) !important; } .article_main_page .listOf_artwork_section .view_all_art { margin-top: clamp(24px, 3vw, 32px); } .article_main_page .listOf_artwork_section .view_all_art a { display: inline-block; font-family: var(--bpa-body, var(--font-body)); font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bpa-ink, #000000) !important; text-decoration: none; transition: color 0.15s ease; } .article_main_page .listOf_artwork_section .view_all_art a:hover, .article_main_page .listOf_artwork_section .view_all_art a:focus { color: var(--bpa-accent, #D4004C) !important; } /* ===== BPA — artist_detail.html — artistPage_Slider_section (corpus/popular/medium sliders) ===== */ /* Background — clean frost white matching BPA card surfaces */ .article_main_page .artistPage_Slider_section { background: var(--frost, #F5F5F5) !important; padding: 32px var(--bpa-pad, 44px); text-align: center; } .article_main_page .artistPage_Slider_section .swiper-wrapper { height: 360px; } .article_main_page .artistPage_Slider_section .swiper-slide { height: 360px; box-sizing: border-box; } .article_main_page .artistPage_Slider_section .artist_slid_box a img { max-height: 300px; width: 100%; height: auto; object-fit: contain; object-position: center; } .article_main_page .parent_slid_box { border-bottom: 2px solid var(--mist, #DCDCDC); padding: 28px 0; } .article_main_page .artistPage_Slider_section .parent_slid_box:last-child { border-bottom: none; padding-bottom: 0; } .article_main_page .parent_slid_box h4 { margin: 0; font-family: var(--font-display, "Anton", sans-serif); font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 400; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink, #161616); } .article_main_page .parent_slid_box h4 a { color: inherit; text-decoration: none; transition: color 0.15s ease; } .article_main_page .parent_slid_box h4 a:hover { color: var(--bpa-accent, #D4004C); } /* view_all_art tag links — bold uppercase pop-art style */ .article_main_page .artistPage_Slider_section .view_all_art { margin-top: 8px; padding: 4px 0; } .article_main_page .artistPage_Slider_section .view_all_art a { display: inline-block; font-family: var(--font-body, "Inter", sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.3; text-transform: uppercase; color: var(--ink, #161616); text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .article_main_page .artistPage_Slider_section .view_all_art a:hover { color: var(--bpa-accent, #D4004C) !important; border-bottom-color: var(--bpa-accent, #D4004C) !important; } /* Disable the box-level veil (inset:0 would cover the text area below the image) */ .article_main_page .artistPage_Slider_section .artist_slid_box::after { display: none !important; } /* Veil reattached to the image — covers only the artwork thumbnail */ .article_main_page .artistPage_Slider_section .artist_slid_box > a { position: relative; } .article_main_page .artistPage_Slider_section .artist_slid_box > a::after { content: ''; position: absolute; inset: 0; background: radial-gradient(transparent 30%, rgba(0, 0, 0, .55) 100%); opacity: 0; transition: opacity 1.1s; pointer-events: none; } .article_main_page .artistPage_Slider_section .artist_slid_box > a:hover::after { opacity: 1; } /* Image contrast pop: only direct image hover */ .article_main_page .artistPage_Slider_section .artist_slid_box a img.mouseover_effect_images { transition: filter 0.6s ease; } .article_main_page .artistPage_Slider_section .artist_slid_box a:hover img.mouseover_effect_images { filter: contrast(1.18) saturate(1.3) brightness(1.03); } /* ===== BPA — artworksimilarslider (artwork_similar_slider_section.html) ===== */ /* Disable the box-level veil (inset:0 would cover the text area below the image) */ .artworksimilarslider .artist_slid_box::after { display: none !important; } /* Veil reattached to the image — covers only the artwork thumbnail */ .artworksimilarslider .artist_slid_box > a::after { content: ''; position: absolute; inset: 0; background: radial-gradient(transparent 30%, rgba(0, 0, 0, .55) 100%); opacity: 0; transition: opacity 1.1s; pointer-events: none; } .artworksimilarslider .artist_slid_box > a:hover::after { opacity: 1; } /* Artist name kicker hover color */ .artworksimilarslider .view_all_art .vincent_color:hover { color: var(--bpa-accent, #D4004C); opacity: 1; } /* Artwork title link hover color */ .artworksimilarslider .view_all_art a:hover { color: var(--bpa-accent, #D4004C) !important; } /* ===== END BPA — artworksimilarslider ===== */ /* ===== END BPA — artist_detail.html artistPage_Slider_section ===== */ /* Table of Contents — white card, hard black frame */ .article_main_page .table_of_contents_section, .reproduction_main_page .table_of_contents_section, .reproduction_main_page .article_main_page .table_of_contents_section, .bpa-buy-page-section .table_of_contents_section { margin-top: 0; background: var(--bpa-bg, #ffffff) !important; border: 2px solid var(--bpa-ink, #000000); border-radius: var(--bpa-radius, 0px); padding: 20px; } .article_main_page .tableContent .table_of_contents_section { background: transparent !important; background-color: transparent !important; border: none; border-radius: 0; padding: 0; } .article_main_page .tableContent .quick_facts_section, .article_main_page .tableContent .quick_facts_section#facts { background-color: var(--bpa-band, #F5F5F5) !important; border: 2px solid var(--bpa-ink, #000000) !important; border-radius: var(--bpa-radius, 0px); padding: 20px !important; width: 100%; box-sizing: border-box; } .article_main_page .tableContent .art_quize_section, .article_main_page .tableContent .art_quize_section#quiz { margin-top: 16px !important; background: var(--bpa-bg, #ffffff) !important; border: 2px solid var(--bpa-ink, #000000) !important; border-radius: var(--bpa-radius, 0px); padding: 20px !important; width: 100%; box-sizing: border-box; } .article_main_page .tableContent .artist_sidebar_links > .side_headings, .article_main_page .tableContent .table_of_contents_section > .side_headings, .article_main_page .tableContent .table_of_contents_section > .art_heading { margin-bottom: 8px !important; padding-bottom: 6px !important; } .article_main_page .tableContent .quick_facts_section > h4.art_heading.art_heading--quick-facts, .article_main_page .tableContent .quick_facts_section#facts > h4.art_heading.art_heading--quick-facts { font-family: var(--bpa-display, var(--font-title)) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 33px !important; min-height: 33px !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; color: var(--bpa-ink, #000000) !important; margin-top: 0 !important; margin-bottom: 14px !important; padding-top: 0 !important; padding-bottom: 10px !important; border-bottom: 2px solid var(--bpa-ink, #000000) !important; box-sizing: border-box; } .article_main_page .tableContent .art_quize_section .art_header h4.art_heading.art_heading--quick-facts, .article_main_page .tableContent .art_quize_section#quiz .art_header h4.art_heading.art_heading--quick-facts { font-family: var(--bpa-display, var(--font-title)) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 33px !important; min-height: 33px !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; color: var(--bpa-ink, #000000) !important; margin-top: 0 !important; margin-bottom: 14px !important; padding-top: 0 !important; padding-bottom: 10px !important; border-bottom: 2px solid var(--bpa-ink, #000000) !important; box-sizing: border-box; } .article_main_page .quick_facts_section + .art_quize_section, .reproduction_main_page .quick_facts_section + .art_quize_section, .reproduction_main_page .article_main_page .quick_facts_section + .art_quize_section, .bpa-buy-page-section .quick_facts_section + .art_quize_section { margin-top: 16px; } .article_main_page .art_quize_section .art_header p, .reproduction_main_page .art_quize_section .art_header p, .reproduction_main_page .article_main_page .art_quize_section .art_header p, .bpa-buy-page-section .art_quize_section .art_header p { font-family: var(--bpa-body, var(--font-body)); font-size: 12px; font-weight: 300; line-height: 1.45; color: var(--bpa-ink-2, #555555) !important; margin-bottom: 12px; } .article_main_page .ques_heading, .reproduction_main_page .ques_heading, .reproduction_main_page .article_main_page .ques_heading, .bpa-buy-page-section .ques_heading { font-family: var(--bpa-body, var(--font-body)); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bpa-accent, #D4004C) !important; } .article_main_page .ques_text, .reproduction_main_page .ques_text, .reproduction_main_page .article_main_page .ques_text, .bpa-buy-page-section .ques_text { font-family: var(--bpa-body, var(--font-body)); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--bpa-ink, #000000) !important; margin: 8px 0 12px; } .reproduction_main_page .ques_box, .bpa-buy-page-section .ques_box { margin-bottom: 14px; } .article_main_page .art_quize_section .submit_quiz .add_tocart_btn button, .reproduction_main_page .art_quize_section .submit_quiz .add_tocart_btn button, .bpa-buy-page-section .art_quize_section .submit_quiz .add_tocart_btn button { font-family: var(--bpa-body, var(--font-body)); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff !important; background: var(--bpa-ink, #000000) !important; border: 2px solid var(--bpa-ink, #000000) !important; border-radius: var(--bpa-radius, 0px); } .article_main_page .art_quize_section .submit_quiz .add_tocart_btn button:hover:not(:disabled), .reproduction_main_page .art_quize_section .submit_quiz .add_tocart_btn button:hover:not(:disabled), .bpa-buy-page-section .art_quize_section .submit_quiz .add_tocart_btn button:hover:not(:disabled) { background: var(--bpa-accent, #D4004C) !important; border-color: var(--bpa-accent, #D4004C) !important; } .article_main_page .art_quize_section .submit_quiz .add_tocart_btn button.disabled_button, .reproduction_main_page .art_quize_section .submit_quiz .add_tocart_btn button.disabled_button, .bpa-buy-page-section .art_quize_section .submit_quiz .add_tocart_btn button.disabled_button { opacity: 0.45; cursor: not-allowed; } .reproduction_main_page .art_quize_section .quiz_result_text, .bpa-buy-page-section .art_quize_section .quiz_result_text { font-family: var(--bpa-body, var(--font-body)); font-size: 14px; line-height: 1.45; color: var(--bpa-ink, #000000) !important; border: 2px solid var(--bpa-ink, #000000); background: var(--bpa-band, #F5F5F5); } .reproduction_main_page .art_quize_section .repro_radio.mark_wrong_answer, .bpa-buy-page-section .art_quize_section .repro_radio.mark_wrong_answer { border-color: #D4004C; } .reproduction_main_page .art_quize_section .repro_radio.mark_right_answer, .bpa-buy-page-section .art_quize_section .repro_radio.mark_right_answer { border-color: #1A8917; } /* Collections band at bottom of buy page */ .reproduction_main_page .full_collection_section { background: var(--bpa-band, #F5F5F5); color: var(--bpa-ink, #000000); } .reproduction_main_page .collec_heading, .reproduction_main_page .collec_heading a { font-family: var(--bpa-display, var(--font-title)); font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; color: var(--bpa-ink, #000000); } .reproduction_main_page .collec_text { font-family: var(--bpa-body, var(--font-body)); font-weight: 300; color: var(--bpa-ink-2, #555555); } .reproduction_main_page .collection_tabs .nav-pills .nav-link { font-family: var(--bpa-body, var(--font-body)); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bpa-ink-2, #555555); border: 2px solid var(--bpa-ink, #000000); border-radius: var(--bpa-radius, 0px); } .reproduction_main_page .collection_tabs .nav-pills .nav-link.active, .reproduction_main_page .collection_tabs .nav-pills .show > .nav-link { color: #ffffff; background-color: var(--bpa-ink, #000000); border-color: var(--bpa-ink, #000000); } .reproduction_main_page .collection_details h4 { color: var(--bpa-ink, #000000); } /* Optional extras row */ .reproduction_main_page .optional_box .optional_add { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; } .reproduction_main_page .optional_box .option_text { width: 100%; } .reproduction_main_page .optional_box .optional_add > .yellow_cont, .reproduction_main_page .optional_box .optional_add > span.yellow_cont { margin-top: 10px; margin-left: 0; padding-left: 0; align-self: flex-start; } /* Read more — BPA text CTA (rose) */ .reproduction_main_page .yellow_cont, .reproduction_main_page span.yellow_cont { display: block; margin-top: 12px; } .reproduction_main_page .repruct_content_collapse .accordion-body .yellow_cont, .reproduction_main_page .reproduc_tabs .accordion-body .yellow_cont { margin-top: 12px; } .reproduction_main_page .repruct_content_collapse .accordion-collapse > .yellow_cont, .reproduction_main_page .repruct_content_collapse .accordion-collapse > span.yellow_cont { padding-left: 16px; padding-right: 16px; margin-top: 0; margin-bottom: 4px; } .reproduction_main_page .yellow_cont a, .reproduction_main_page span.yellow_cont a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--bpa-body, var(--font-body)); font-size: 11px; font-weight: 700; line-height: 1.35; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bpa-accent, #D4004C) !important; text-decoration: none; transition: color 0.15s ease; } .reproduction_main_page .yellow_cont a:hover, .reproduction_main_page span.yellow_cont a:hover { color: var(--bpa-accent-dark, #8B0032) !important; } .reproduction_main_page .yellow_cont a .yellow_cont__icon, .reproduction_main_page .yellow_cont a img, .reproduction_main_page span.yellow_cont a .yellow_cont__icon, .reproduction_main_page span.yellow_cont a img { width: 14px; height: 14px; max-height: 14px; margin: 0 !important; flex-shrink: 0; /* recolour mono icon -> BPA rose #D4004C */ filter: brightness(0) saturate(100%) invert(13%) sepia(98%) saturate(6800%) hue-rotate(330deg) brightness(95%) contrast(108%); opacity: 0.95; transition: opacity 0.15s ease, transform 0.15s ease, filter 0.15s ease; } .reproduction_main_page .yellow_cont a:hover .yellow_cont__icon, .reproduction_main_page .yellow_cont a:hover img, .reproduction_main_page span.yellow_cont a:hover .yellow_cont__icon, .reproduction_main_page span.yellow_cont a:hover img { opacity: 1; transform: translateX(2px); } /* Related articles — « Explore Article » CTA */ .reproduction_main_page .related_articles .explore_techniques, .reproduction_main_page .article_main_page .related_articles .explore_techniques { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-family: var(--bpa-body, var(--font-body)); font-size: 11px; font-weight: 700; line-height: 1.35; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bpa-accent, #D4004C) !important; cursor: pointer; } .reproduction_main_page .related_articles .explore_techniques a, .reproduction_main_page .article_main_page .related_articles .explore_techniques a { font: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; text-transform: inherit; color: var(--bpa-accent, #D4004C) !important; text-decoration: none; transition: color 0.15s ease; } .reproduction_main_page .related_articles .explore_techniques:hover, .reproduction_main_page .related_articles .explore_techniques a:hover, .reproduction_main_page .article_main_page .related_articles .explore_techniques:hover, .reproduction_main_page .article_main_page .related_articles .explore_techniques a:hover { color: var(--bpa-accent-dark, #8B0032) !important; } .reproduction_main_page .related_articles .explore_techniques span, .reproduction_main_page .article_main_page .related_articles .explore_techniques span { display: inline-flex; align-items: center; line-height: 0; } .reproduction_main_page .related_articles .explore_techniques span img, .reproduction_main_page .article_main_page .related_articles .explore_techniques span img { width: 14px; height: 14px; margin: 0 !important; /* recolour mono icon -> BPA rose #D4004C */ filter: brightness(0) saturate(100%) invert(13%) sepia(98%) saturate(6800%) hue-rotate(330deg) brightness(95%) contrast(108%); opacity: 0.95; transition: opacity 0.15s ease, transform 0.15s ease, filter 0.15s ease; } .reproduction_main_page .related_articles .explore_techniques:hover span img, .reproduction_main_page .article_main_page .related_articles .explore_techniques:hover span img { opacity: 1; transform: translateX(2px); } /* Academic block — Related Artworks */ .reproduction_main_page .container-fluid.bpa-buy-page-section { padding-top: 32px !important; border-top: 2px solid var(--bpa-ink, #000000); } .reproduction_main_page .container-fluid.bpa-buy-page-section .art_heading.art_heading--section-spaced, .reproduction_main_page .article_main_page .container-fluid.bpa-buy-page-section .art_heading.art_heading--section-spaced { margin-top: 33px !important; } .reproduction_main_page .article_main_page hr { margin: 0; border: none; border-top: 1px solid var(--bpa-line-2, #DCDCDC); } /* Related artworks slider — swiper prev/next */ .reproduction_main_page .parent_slid_box .artist_slider .swp_btn, .bpa-buy-page-section .parent_slid_box .artist_slider .swp_btn, .article_main_page .artistPage_Slider_section .parent_slid_box .artist_slider .swp_btn { width: 44px; height: 44px; margin: 0; background: var(--bpa-bg, #ffffff) !important; border: 2px solid var(--bpa-ink, #000000) !important; border-radius: var(--bpa-radius, 0px); box-shadow: none !important; opacity: 1; transition: background-color 0.2s ease, color 0.2s ease; } .reproduction_main_page .parent_slid_box .artist_slider .swp_btn:hover, .bpa-buy-page-section .parent_slid_box .artist_slider .swp_btn:hover, .article_main_page .artistPage_Slider_section .parent_slid_box .artist_slider .swp_btn:hover { background: var(--bpa-ink, #000000) !important; border-color: var(--bpa-ink, #000000) !important; } .reproduction_main_page .parent_slid_box .artist_slider .swiper-button-next.swp_btn.swiper-button-disabled, .reproduction_main_page .parent_slid_box .artist_slider .swiper-button-prev.swp_btn.swiper-button-disabled, .bpa-buy-page-section .parent_slid_box .artist_slider .swiper-button-next.swp_btn.swiper-button-disabled, .bpa-buy-page-section .parent_slid_box .artist_slider .swiper-button-prev.swp_btn.swiper-button-disabled { opacity: 0.3 !important; pointer-events: none; } main > .container-fluid.bpa-buy-page-section { padding-top: 32px !important; border-top: 2px solid var(--bpa-ink, #000000); } /* Digital Image — benefits band (dark) */ .premium_service .why_choose_right h3 { font-family: var(--bpa-display, var(--font-title)); text-transform: uppercase; letter-spacing: 0.02em; color: var(--bpa-band, #F5F5F5); } .premium_service .why_choose_right .heading_text { font-family: var(--bpa-display, var(--font-title)); text-transform: uppercase; color: var(--bpa-band, #F5F5F5); } .premium_service .why_choose_right .heading_paragrap { color: var(--bpa-ink-3, #888888); } .premium_service .why_choose_info h5 { font-family: var(--bpa-body, var(--font-body)); color: var(--bpa-band, #F5F5F5); } .premium_service .why_choose_info p { color: var(--bpa-ink-3, #888888); } /* Buy academic — override global cream/quiz panels */ .article_main_page .artwork_section, .reproduction_main_page .article_main_page .artwork_section { background: transparent !important; } .article_main_page .art_quize_section .ques_box .repro_radio label, .reproduction_main_page .article_main_page .art_quize_section .ques_box .repro_radio label { color: var(--bpa-ink, #000000) !important; } .article_main_page .art_quize_section .question_option .repro_radio input[type="radio"]:after, .reproduction_main_page .article_main_page .art_quize_section .question_option .repro_radio input[type="radio"]:after { background-color: var(--bpa-bg, #ffffff) !important; border: 2px solid var(--bpa-ink, #000000) !important; } .article_main_page .art_quize_section .question_option .repro_radio input[type="radio"]:checked:after, .reproduction_main_page .article_main_page .art_quize_section .question_option .repro_radio input[type="radio"]:checked:after { background-color: var(--bpa-ink, #000000) !important; border-color: var(--bpa-ink, #000000) !important; } .article_main_page .art_quize_section .art_header h4, .reproduction_main_page .article_main_page .art_quize_section .art_header h4 { color: var(--bpa-ink, #000000) !important; } /* Buy page story row — shared heading box (beats global .art_heading) */ main .reproduction_main_page.container .article_main_page .artwork_section #artwork-description > h4.art_heading, main .reproduction_main_page.container .article_main_page .artwork_section .quick_facts_section#facts > h4.art_heading.art_heading--quick-facts, main .reproduction_main_page.container .article_main_page .artwork_section .quick_facts_section > h4.art_heading.art_heading--quick-facts { font-family: var(--bpa-display, var(--font-title)) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 33px !important; min-height: 33px !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; color: var(--bpa-ink, #000000) !important; margin-top: 0 !important; margin-bottom: 18px !important; padding-top: 0 !important; padding-bottom: 10px !important; border-bottom: 2px solid var(--bpa-ink, #000000) !important; box-sizing: border-box; } main .reproduction_main_page.container .article_main_page .artwork_section #artwork-description > h4.art_heading { margin-bottom: 18px !important; } main .reproduction_main_page.container .article_main_page .artwork_section .quick_facts_section > h4.art_heading.art_heading--quick-facts, main .reproduction_main_page.container .article_main_page .artwork_section .quick_facts_section#facts > h4.art_heading.art_heading--quick-facts { margin-bottom: 14px !important; } /* ===================================================== BPA — Pagination (site-wide, UI Kit aligned) Overrides the legacy brown/beige defaults in global-custom-V1.9.css (.page-link #875D2A !important, .page-item:first-child brown fill). Kit conventions: square cells, 2px ink border, radius 0, uppercase; idle = white/ink, hover & active = ink/white (pill pattern). Museum-list keeps its accent-rose active pill via the more specific .museum-list-page block. ===================================================== */ .pagination .page-link, .pagination a.page-link { background-color: var(--white, #FFFFFF) !important; border: 2px solid var(--ink, #000000) !important; border-radius: 0 !important; color: var(--ink, #000000) !important; font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; transition: background-color .2s, color .2s; } .pagination .page-link:visited { color: var(--ink, #000000) !important; } .pagination .page-link:hover, .pagination .page-link:focus, .pagination .page-item.active .page-link, .pagination .page-item.active .page-link:hover { background-color: var(--ink, #000000) !important; border-color: var(--ink, #000000) !important; color: var(--white, #FFFFFF) !important; } /* neutralise the legacy brown :first-child fill */ .pagination .page-item:first-child .page-link { background-color: var(--white, #FFFFFF) !important; color: var(--ink, #000000) !important; } .pagination .page-item:first-child .page-link:hover, .pagination .page-item:first-child.active .page-link { background-color: var(--ink, #000000) !important; color: var(--white, #FFFFFF) !important; } /* no rising-fill link effect inside the pager */ .pagination .page-link::before { content: none; } /* ===== plate-of-affinities (similar artworks study plate) ===== BPA identity: white gallery, hard black frames, pop-art rose accent on the centered work, Inter UI text. Structure in global-custom-V1.9.css. */ .plate-of-affinities-page-shell { --poa-serif-font: var(--font-ui, "Inter", -apple-system, sans-serif); --poa-ink: #000000; --poa-ink-muted: #555555; --poa-ink-faint: rgba(0, 0, 0, 0.35); --poa-hairline: #DCDCDC; --poa-plate-bg: var(--bpa-band, #F5F5F5); --poa-plate-border: #000000; --poa-work-frame: #D9D9D9; --poa-work-frame-hover: var(--bpa-accent, #D4004C); --poa-work-frame-width: 3px; --poa-work-mat: #FFFFFF; --poa-accent: var(--bpa-accent, #D4004C); --poa-card-bg: #FFFFFF; --poa-bar-track: #E5E5E5; --poa-bar-fill: #000000; --poa-shelf-line: rgba(0, 0, 0, 0.3); } /* ===== artwork_info — action bar (Buy print, Send, Share, Favorites, Download, Similars, X-Ray, Diaporama) ===== */ .art_info_box .artwork-info-actions-bar .fav-icon-artwork { border-bottom: 1px solid var(--bpa-line, #000000); padding-bottom: 14px; gap: 12px 24px; } .art_info_box .fav-icon-artwork > a, .art_info_box .fav-icon-artwork > .artwork-share-wrapper { font-size: 11px; line-height: 1.35; margin: 0; } .art_info_box .fav-icon-artwork a, .art_info_box .fav-icon-artwork .artwork-share-trigger { font-family: var(--bpa-body, var(--font-body)); font-size: 11px; font-weight: 600; line-height: 1.35; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bpa-ink-2, #555555) !important; gap: 8px; transition: color 0.15s ease; } .art_info_box .fav-icon-artwork a img, .art_info_box .fav-icon-artwork .artwork-share-trigger img { width: 18px; height: 18px; flex-shrink: 0; filter: brightness(0) saturate(100%); opacity: 0.55; transition: opacity 0.15s ease, filter 0.15s ease; } .art_info_box .fav-icon-artwork a:hover, .art_info_box .fav-icon-artwork .artwork-share-trigger:hover { color: var(--bpa-accent, #D4004C) !important; } /* hover/active icon recolour → BPA rose #D4004C */ .art_info_box .fav-icon-artwork a:hover img, .art_info_box .fav-icon-artwork .artwork-share-trigger:hover img { opacity: 1; filter: brightness(0) saturate(100%) invert(13%) sepia(98%) saturate(6800%) hue-rotate(330deg) brightness(95%) contrast(108%); } .art_info_box .fav-icon-artwork a.fav_toggle .fav_icon { filter: brightness(0) saturate(100%) invert(13%) sepia(98%) saturate(6800%) hue-rotate(330deg) brightness(95%) contrast(108%); opacity: 1; } /* ===== Catalog hover panel — align snippet + buy with the card body text ===== Card padding is reset globally; match __body 16px inset. BPA keeps 2px frame bleed. */ .custom_search .search_card.artwork-catalog-card .hover_visible.artwork-catalog-card__hover { left: -2px; width: calc(100% + 4px); border: var(--bpa-border); border-top: var(--bpa-border); padding-left: 16px; padding-right: 16px; padding-top: 14px; padding-bottom: 14px; } .custom_search .search_card.artwork-catalog-card .hover_visible.artwork-catalog-card__hover .artwork-catalog-card__content, .custom_search .search_card.artwork-catalog-card .hover_visible.artwork-catalog-card__hover .artwork-catalog-card__footer { padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; }