/* ===================================================== FONTS — BPA (BuyPopArt) ===================================================== */ /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter/inter-w100-900-normal-latin-ext.1ad231aac0a8.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("../fonts/inter/inter-w100-900-normal-latin.260c81a4759b.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("../fonts/anton/anton-w400-normal-vietnamese.9613c1c3c8e2.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("../fonts/anton/anton-w400-normal-latin-ext.ab8365836d69.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("../fonts/anton/anton-w400-normal-latin.912c3c9f2621.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-V2.0.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-V2.1.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 ===================================================== */ /* ===================================================== 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) ===================================================== */ /* ===================================================== BPA — Image hover: contrast pop + dark veil overlay ===================================================== */ /* Dark veil pseudo-element — hidden by default */ .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 */ .artist_slid_box:hover::after { opacity: 1; } /* Base transition for contrast pop */ .swiper-slide .artist_slid_box a img, img.mouseover_effect_images, img.mouseover_image_effect { transition: filter 0.6s ease; } /* Hover state — contrast pop */ .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 ===================================================== */ /* ===================================================== BPA — Widget: Quiz Artist ===================================================== */ /* ===================================================== BPA — Widget: Featured Artist with Fact ===================================================== */ /* ===================================================== BPA — Widget: 10 Pop Art Artists ===================================================== */ /* ===================================================== BPA — Widget: Curated Choice ===================================================== */ /* ===================================================== BPA — Widget: Small Translated Field ===================================================== */ /* ===================================================== BPA — Widget: Reimagine Your Photo Slider ===================================================== */ /* ===================================================== BPA — Widget: Artist Spotlight Slider (movement) ===================================================== */ /* ===================================================== BPA — Announcement Bar (top_bar) Spec §6: black bg, white text, 11px/500/uppercase/0.1em ===================================================== */ /* ===================================================== BPA — Sticky Header Spec §6: white bg, border-bottom 2px #000, sticky z-100 ===================================================== */ /* Shared horizontal rhythm — header, nav, footer, homepage content */ /* ===================================================== BPA — Search Bar Spec §6: 2px solid #000, no radius, Inter 13px/400, placeholder --chrome, 42×42 black submit button ===================================================== */ /* ===================================================== BPA — Navbar (sub-navigation) Spec §6: white bg, border-top 1px smoke, links charcoal ===================================================== */ /* Dropdown panel */ /* ===================================================== 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. ===================================================== */ /* 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. */ /* ===================================================== BPA — Mobile menu Pop-art: white panel, 2px solid black border, bold uppercase nav links, stark close button ===================================================== */ /* ===================================================== BPA — Footer Spec §18: white bg, border-top 2px #000, column titles Inter 10px/700/0.18em/iron, links Inter 13px/300/charcoal ===================================================== */ /* Arrow icon inside consultation btn: hide the orange arrow, keep just text */ /* ===================================================== BPA — Bottom Bar (copyright) Spec §18: frost bg, pewter text, Inter 11px/uppercase/0.06em ===================================================== */ /* Improved by Saurabh */ /* Header */ @media only screen and (max-width: 991px) { .container, .container-md, .container-sm { max-width: 100% !important; } } /* End Header */ /* Pages */ @media only screen and (max-width: 991px) { } .form-check{ padding-left: 2em !important; } .form-check .form-check-input{ margin-left: -2em !important; margin-top: 0 !important; } .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; } /* End Pages */ /* */ /* === HOMEPAGETEST migrated inline CSS === */ /* ── BuyPopArt Design System — inline tokens ──────────────────────────────── */ /* ── Page wrapper ── */ /* ── Global: zero border-radius everywhere ── */ /* ── Section dividers ── */ /* ── 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; } */ /* ── Eyebrow kicker labels ── */ /* ── Display headings — Anton ── */ .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-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 ── */ /* ── Outer widget containers — 2px comic-panel border ── */ /* ── 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. */ /* ═══════════════════════════════════════════════════════════ ROW 2 — QUIZ ARTIST ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ ROW 2 — FEATURED ARTIST WITH FACT ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ ROW 3 — 10 POP ART ARTISTS ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ ROWS 4–8 — CURATED CHOICE ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ ROW 9 — SMALL TRANSLATED FIELD ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ ROW 10 — REIMAGINE YOUR PHOTO SLIDER ═══════════════════════════════════════════════════════════ */ .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; } /* ═══════════════════════════════════════════════════════════ HERO — COMIC PANEL SPLIT ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ MOOD SELECTOR ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ SECTION HEAD ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ NEWSLETTER ═══════════════════════════════════════════════════════════ */ /* ── Zero border-radius for new full-bleed sections ── */ /* ── Responsive: stack hero / mood on mobile ── */ @media (max-width: 767px) { } /* ═══════════════════════════════════════════════════════════ ROW 11 — ARTIST SPOTLIGHT SLIDERS (movement) ═══════════════════════════════════════════════════════════ */ /* Homepage spotlight: constrain portrait height to match artwork slider area */ /* Homepage spotlight: hover veil fires only on the image link, not the view_all_art text */ /* Homepage movement spotlight slider — artwork thumbs ~40% larger than default Swiper sizing */ /* --- block --- */ /* === HOMEPAGETEST shared layout utilities === */ /* 2×2 tile grid — square aspect, small gap between images */ @media (max-width: 991.98px) { } @media (max-width: 767.98px) { .homepage-impressionist-widgets, .homepage-buypopart-widgets { padding-left: clamp(12px, 3vw, 24px); padding-right: clamp(12px, 3vw, 24px); } .ti-sh { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; } } /* ===================================================== */ /* MERGED FROM articles_style-V2.0.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 *-V2.0.css in base.html. * Typography only — does not override color, background, padding, or overlay layout. */ /* ===================================================== */ /* MERGED FROM userprofile-V2.0.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) */ .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%; } 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; } .profile_name { color: #FFFFFF; font-weight: 500; font-size: 18px; line-height: 26px; } /* .sidebar_menu_link li.active a svg { color: var(--bpa-accent, #D4004C) !important; } */ /* .sidebar_menu_link li:hover a svg, */ .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; } .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*/ textarea.form-control:focus { background-color:#FFFFFF; } /* When textarea is focused, change button color */ /*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; } @media (min-width: 768px) { .profile_picture_top_header_initiales { font-size: 15.43px; } .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; } */ /* .logout_section { position: absolute; bottom: 0; } */ .sidebar_box { position: relative; } } /* Responsive */ @media (max-width: 768px) { .form-container input { font-size: 14px; width: 100%; padding: 9px; margin-bottom: 8px; } .puchase-card-content { padding: 14px; gap: 14px; } .profile_name{ font-size: 15px;} .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;} aside { height: 100%; } .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; } .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;} .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 Photo Edit Section */ /* user interaction-card */ .puchase-card-content { padding:20px; flex-wrap: wrap; gap:20px; } .puchase-card-content img { height:120px; width:120px; } /* Form-floating: always use "focused" style (label above, reduced padding) on account forms */ /* ═══════════════════════════════════════ 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) .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) ===== */ .artinfo_top h4 { color: var(--ink, #000000); font-family: var(--font-title); } .art_info_details { 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); } /* ═══════════════════════════════════════════════════════════════════ BPA — BuyPopArt — Similar artworks browse (/art/similar//) Scoped to .artwork-similar-page — gallery-minimal tokens ═══════════════════════════════════════════════════════════════════ */ /* Page chrome — breadcrumb, title row, sort */ /* Criteria sidebar */ /* Grid — catalog cards */ /* =================================================================== Ecard (artworks/artwork_ecard.html) — BPA BuyPopArt Pop-art: hard 2px black frames, zero radius, Anton display, rose CTA. =================================================================== */ /* ===================================================== PrintReproduction & DigitalImage buy pages — article (historicle_box) typography Structure lives in global-custom-V2.1.css; brand ink/links here. ===================================================== */ /* ===== 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 ──────────────────────────────────────── */ /* ── 2. Page chrome — breadcrumb, title row, sort ──────────────────────── */ /* ── 3. Column gutter border — removed for clean card-only look ─────────── */ /* ── 4. Card surface — white ground, hard 2px black frame, zero radius ─── */ /* Card hover — strong drop-shadow lifts the card off the grid */ /* ── 5. Image block ────────────────────────────────────────────────────── */ /* ── 6. Card body — tight, flush, separated by 2px black rule ─────────── */ /* ── 7. Artist row layout ─────────────────────────────────────────────── */ /* Artist name — Anton display, uppercase, BPA rose */ /* Year / date — muted Inter, right-aligned */ /* ── 8. Artwork title — Inter medium, dark ink ──────────────────────────── */ /* ── 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. ──────────────────────────────────────────────────────────────────────── */ /* Snippet text — dark ink on white */ /* ── 10. Add-to-cart CTA — BPA primary button (rose fill, white text) ───── */ /* Price display inside the button */ /* Explicit colour for anchor wrapping the button */ /* Hover — black fill, rose border */ /* ── 11. Fav toggle — hard-edge ghost box, rose on hover/active ──────────── */ /* Icon tint — dark on white panel; invert on rose hover/active */ /* ── 12. card_bottom layout — price/CTA left, fav right ─────────────────── */ /* ===== 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 */ /* Hero title + subtitle */ /* Body copy + headings + links */ /* Sidebar section headings */ /* Table of contents links */ /* Related-artworks sidebar */ /* Related-articles list */ /* ===== 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-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. ========================================================= */ /* .addToCart — BPA UI-Kit solid button (black fill, sharp, uppercase) */ /* Hover panel — white comic-panel box below card (matches article_list cards) */ /* ===== 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. */ /* ===== 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. */ /* Card — comic panel */ /* Hover lift — hard pop-art offset shadow */ /* Media + image zoom */ /* Body */ /* Meta — uppercase pop-rose eyebrow (category) + year span */ /* Title — Anton display, ink, pop-rose on hover */ /* Hover excerpt typography */ /* Footer + actions */ /* Read button — BPA PRIMARY (btn-solid model): solid ink, comic border, square, Inter uppercase, hover to rose */ /* ===== 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. */ /* ---- Media / image ---- */ /* ---- Body: artist + title ---- */ /* ---- 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. ---- */ /* ---- Footer: cart + favorite ---- */ /* Buy / price button — solid black CTA, Anton price */ /* Favorite toggle — outlined square panel cell */ /* ===== END artwork-catalog-card (catalog list grid card) ===== */ /* ===== article_list.html — specificity lift over artwork-list base rules (title display face) ===== */ /* ===== article_list.html — specificity lift over artwork-list base rules (hover panel) ===== */ /* ===== 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 ───────────────────────────────────────────────────────── */ /* ── Filter panel shell ────────────────────────────────────────────────── */ /* Filter title + CLEAR ALL link */ /* ── Active-filter badge list ──────────────────────────────────────────── */ /* ── Accordion groups ──────────────────────────────────────────────────── */ /* ── Colour filter list ────────────────────────────────────────────────── */ /* Category value links (filter sidebar) — chip styling consistent with group-by Sidebar_tags + list_category. */ /* ── Checkboxes / radios / text inputs / tags ──────────────────────────── */ /* ── noUiSlider price range ─────────────────────────────────────────────── */ /* ===== 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 ──────────────────────────────────────────────────── */ /* ── 2. Section letter heading ───────────────────────────────────────────── */ /* ── 3. Profile card: image, name, year ──────────────────────────────────── */ /* Square crop — BPA uses geometric/pop-art shapes, not circles */ /* Suppress global rising-fill on portrait-wrapping anchors */ /* Artist name link */ /* Suppress global rising-fill on name anchor (it's inline text, not an image) */ /* Birth–death year muted label */ /* ── 4. "View more" link ─────────────────────────────────────────────────── */ /* Suppress global rising-fill on "View more" anchor */ /* Icon size */ /* ── 5. Responsive tweaks ────────────────────────────────────────────────── */ @media (max-width: 576px) { } /* ===== END BPA — Artists alphabet ===== */ /* ===== artist_group_by_attribute / group-by browse — BPA ===== */ /* ── Token block ─────────────────────────────────────────────────────────── */ /* ── Nav-list + heading + showing-text ──────────────────────────────────── */ /* .breadcrumb-current-page-item — Anton uppercase stamp */ /* ── Groupby selector / search input ────────────────────────────────────── */ /* ── Badge filters ───────────────────────────────────────────────────────── */ /* ── sortABC strip ───────────────────────────────────────────────────────── */ /* ── Sidebar boxes ───────────────────────────────────────────────────────── */ /* ===== 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). */ /* ── Sidebar titles + descriptions ──────────────────────────────────────── */ /* description uses softer ink-2 — full black is too heavy for body-level copy */ /* sidebar title uses Anton for pop-art stamp — all groupby pages */ /* ── Sidebar tags (chips) ────────────────────────────────────────────────── */ /* ── Main results area ───────────────────────────────────────────────────── */ /* Group heading — Anton uppercase */ /* Count badge */ /* "See All" link */ /* ── Result box ──────────────────────────────────────────────────────────── */ /* ── Hero image overlay (showMainResulsImage) ────────────────────────────── */ /* ── Result item cards ───────────────────────────────────────────────────── */ /* ===== 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) --- */ /* --- Hero caption --------------------------------------- */ /* --- Intro paragraphs ----------------------------------- */ /* --- Step blocks (comic panels) ------------------------- */ /* --- Upload box ----------------------------------------- */ /* --- Edit-request textarea ------------------------------ */ /* --- Chips: edit-request examples + category filters ---- */ /* Kill the global rising-fill pseudo on these chips */ /* Active category chip — rose fill, pop-art emphasis */ /* --- Style cards (Step 04) — comic panels --------------- */ /* --- Responsive ----------------------------------------- */ @media (max-width: 576px) { } /* --- 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) */ /* Left column inner panels — faces, size, customization (global beige leak) */ /* Section titles ("Order Summary", "Summary & Checkout") */ /* Accordion shell — comic panel */ /* Kill default bootstrap blue focus ring */ /* Summary rows */ /* Total band — ink fill, white text (UI Kit .summary-total) */ /* Checkout buttons */ /* PRIMARY CTA — rose fill (NOT default brown) */ /* SEND — secondary / ghost */ /* Confirmation notices */ /* Read-more accent link */ /* ===== 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 ──────────────────────────────────────── */ /* ── 2. Page chrome — breadcrumb, title row, sort ──────────────────────── */ /* ── 3. Filter panel — band ground, hard 1px frame ─────────────────────── */ /* ── 4. Filter title row ───────────────────────────────────────────────── */ /* ── 4b. Accordion shell inside the filter panel ───────────────────────── */ /* ── 5. Badge list / applied filters ───────────────────────────────────── */ /* ── 6. Core category links — .catalog-sidebar-values-list ─────────────────────────────── */ /* ── 7. Card grid — mirrors BPA artwork-list card 1:1 ──────────────────── */ /* ── 8. Pagination — overrides global brown #875D2A ── */ /* ===== 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. */ /* ===================================================== DigitalImage buy page — "Included in Every Digital Image Order" premium benefits band — BuyPopArt tokens (overrides the ADC-gold default in global-custom-V2.1.css). Layout mirrors ADC/OUA/WK. ===================================================== */ /* ===== search_by_color ===== */ @media (max-width: 768px) { } /* BPA pop-art identity: rose accent on all checkboxes + accent-border hover on color rows */ /* ===== 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 */ /* ===== /orders/art_consultation.html — BuyPopArt ===== */ /* ===== start_selling_* step-image shadow tint — BPA · pop-art rose tint ===== */ /* ===== 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) */ @keyframes r8spin-bpa { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} } /* ===== customers_reviews — BPA brand tokens (structure lives in global-custom) ===== */ /* ===== 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. */ /* 1. Hero caption (light over dark video) */ /* 2. Intro band */ /* 3. Vertical connector line */ /* 4. Step pill */ /* 5. Step headings / copy */ /* 6. Step image shadow (token consumed by global) */ /* 7. Comparative table */ /* 8. Valuation form */ /* Submit CTA — pop-art black/white (was global warm-brown #875D2A) */ /* 9. Plan dropdown — align with form surfaces */ /* ===== 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. */ /* ===== apr-thanks (art project request thank-you) ===== */ /* Page section wrapper */ /* Grid row spacing */ /* ── Card surface — pop-art: hard 3px ink border + hard offset shadow ── */ /* Intro card: white on white with accent top stripe */ /* Steps card: frost surface with ink left stripe for contrast */ /* ── Card body padding ── */ /* Intro card body: centred */ /* ── Card title — Anton display, uppercase, BPA ink ── */ /* ── Body copy — Inter, charcoal ── */ /* ── Steps list — remove bullets; bold pop-art numbered markers ── */ /* Pop-art numbered marker: bold ink box with rose counter */ /* ── Contact prompt ── */ /* Contact link: branded pop-art rose, beats .text-muted a (0,1,0) */ /* ── Responsive: stack on mobile ── */ @media (max-width: 767px) { } /* ===== start_selling_* (body.start-selling-page) — BPA · BuyPopArt ===== */ /* --- right CTA card "Start selling today" — comic-panel feel --- */ /* ===== Artwork Not Found Page ===== */ /* BPA BuyPopArt — pop-art: hard 2px black frames, zero radius, Anton display, rose/magenta CTA */ /* ── Breadcrumb breadcrumb-navigation-list ── */ /* ── Card form container ── */ /* ── Form heading — Anton display font, large, black ── */ /* ── Form content — body text ── */ /* ── Primary button — rose/magenta BPA CTA ── */ /* ── Secondary button — ghost/outline style ── */ /* ── Responsive: tighten padding on small screens ── */ @media (max-width: 575px) { } /* ===================================================== 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. ===================================================== */ /* Academic block — same horizontal width as reproduction_section */ /* Custom width/height fields — neutral slot */ /* ---- Action bar + cross-channel links ---- */ /* ---- Metadata chips ---- */ /* ---- PDP titles — Anton display, uppercase ---- */ /* ---- Accordions — white panel, hard 2px black frame ---- */ /* Configurator tabs + radios */ /* CTA buttons — solid black comic panel, white text, iron hover */ /* ---- Price spans — BPA rose ---- */ /* ---- Academic / story block ---- */ /* Section headings — Anton uppercase, black underline */ /* Quick Facts cards — soft slot panel, hard black frame */ /* ===== BPA — artist_detail.html — artistPage_Slider_section (corpus/popular/medium sliders) ===== */ /* Background — clean frost white matching BPA card surfaces */ /* view_all_art tag links — bold uppercase pop-art style */ /* Disable the box-level veil (inset:0 would cover the text area below the image) */ /* Veil reattached to the image — covers only the artwork thumbnail */ /* Image contrast pop: only direct image hover */ /* ===== BPA — artworksimilarslider (artwork_similar_slider_section.html) ===== */ /* Disable the box-level veil (inset:0 would cover the text area below the image) */ /* Veil reattached to the image — covers only the artwork thumbnail */ /* Artist name kicker hover color */ /* Artwork title link hover color */ /* ===== END BPA — artworksimilarslider ===== */ /* ===== END BPA — artist_detail.html artistPage_Slider_section ===== */ /* Table of Contents — white card, hard black frame */ /* Collections band at bottom of buy page */ /* Optional extras row */ /* Read more — BPA text CTA (rose) */ /* Related articles — « Explore Article » CTA */ /* Academic block — Related Artworks */ /* Related artworks slider — swiper prev/next */ /* Digital Image — benefits band (dark) */ /* Buy academic — override global cream/quiz panels */ /* Buy page story row — shared heading box (beats global .art_heading) */ /* ===================================================== BPA — Pagination (site-wide, UI Kit aligned) Overrides the legacy brown/beige defaults in global-custom-V2.1.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. ===================================================== */ /* neutralise the legacy brown :first-child fill */ /* no rising-fill link effect inside the pager */ /* ===== wheel-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-V2.1.css. */ /* ===== artwork_info — action bar (Buy print, Send, Share, Favorites, Download, Similars, X-Ray, Diaporama) ===== */ /* hover/active icon recolour → BPA rose #D4004C */ /* ===== 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. */ /* ===== error_404.html + error_general.html — BuyPopArt ===== */ /* Tokens: --lc #D4004C (pop-art rose) --ink #000000 --iron #2A2A2A --mist #DCDCDC --white #FFFFFF */ /* ===== /error_404.html + error_general.html — BuyPopArt ===== */ /* ===== Native Stripe checkout + payment received — BPA brand tokens ===== */ /* ===== artwork_preview_in_interior_room — BuyPopArt tokens (structure in global-custom) ===== */ /* ===== artwork_buy_ProductAuction — auction tokens ===== */ :root { --auction-accent: var(--bpa-accent, #D4004C); --auction-accent-dark: #a80038; --auction-accent-text: #ffffff; --auction-ink: var(--bpa-ink, #161616); --auction-ink-mute: var(--bpa-ink-3, #888888); --auction-radius: 0; } /* ===== /artwork_buy_ProductAuction ===== */ /* ===================================================== Dashboard feature spotlight — BuyPopArt tokens (bold pop-art: black/white, hard corners, offset shadow) ===================================================== */