/* ===================================================== FONTS ===================================================== */ /* latin-ext */ @font-face { font-family: 'Baskervville SC'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/baskervville-sc/baskervville-sc-w400-700-normal-latin-ext.dc883927fc40.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: 'Baskervville SC'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/baskervville-sc/baskervville-sc-w400-700-normal-latin.d4cf9ac0dd02.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; } /* latin-ext */ @font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 100 1000; font-display: swap; src: url("../fonts/dm-sans/dm-sans-w100-1000-italic-latin-ext.d93ac2aeec14.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: 'DM Sans'; font-style: italic; font-weight: 100 1000; font-display: swap; src: url("../fonts/dm-sans/dm-sans-w100-1000-italic-latin.9b61b1969e6e.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; } /* latin-ext */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("../fonts/dm-sans/dm-sans-w100-1000-normal-latin-ext.58de3348c8d4.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: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("../fonts/dm-sans/dm-sans-w100-1000-normal-latin.837efc959fe4.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: 'Italianno'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/italianno/italianno-w400-normal-vietnamese.12b12c09ab31.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: 'Italianno'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/italianno/italianno-w400-normal-latin-ext.39edb26dc88b.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: 'Italianno'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/italianno/italianno-w400-normal-latin.19a17c462672.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; } /* latin-ext */ @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 600; font-display: swap; src: url("../fonts/cormorant-garamond/cormorant-garamond-w300-600-italic-latin-ext.61d59919981f.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: 'Cormorant Garamond'; font-style: italic; font-weight: 300 600; font-display: swap; src: url("../fonts/cormorant-garamond/cormorant-garamond-w300-600-italic-latin.3e2c4175a96d.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; } /* latin-ext */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/cormorant-garamond/cormorant-garamond-w300-600-normal-latin-ext.acc46a2a7785.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: 'Cormorant Garamond'; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/cormorant-garamond/cormorant-garamond-w300-600-normal-latin.c47ff12887a3.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; } /* latin-ext — Inter (UI sans per MFP UI kit --sans) */ @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 — Inter */ @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; } :root { --font-title-accent: 'Italianno', cursive; --font-title: 'Baskervville SC', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; /* Layout tokens — consumed by global-style-V2.1.css via var(--site-*, fallback) */ --site-bg: var(--mfp-sand, #F5F1E8); --site-header-bg: var(--mfp-sand, #F5F1E8); /* UI-kit: light sand header */ --site-nav-bg: transparent; /* nav-pill carries its own surface */ --site-nav-border: transparent; /* nav-pill carries its own border */ --site-topbar-bg: var(--mfp-ink, #1A1814); /* dark utility strip above the light header */ --site-footer-bg: var(--mfp-ink, #1A1814); --site-footer-border: rgba(253, 250, 244, 0.08); --site-copyright-bg: transparent; } /* Most-Famous-Paintings.com — site-specific CSS overrides */ /* Loaded by base.html for dns_domain_base == 'most-famous-paintings' */ /* ===================================================== MFP — Design tokens ===================================================== */ :root { --lc: #c8a96e; /* link hover / glow colour — antique gold */ --lv: #8b6f47; /* visited link colour — warm umber */ } /* ===================================================== MFP — Header logo ===================================================== */ /* ===================================================== MFP — Top bar (container_content) ===================================================== */ /* Top bar — ink background with animated glow (same family as hero gallery) */ /* Left nav links: About Us · Contact / Help */ /* Pipe divider between left links */ /* Right-side selector group: pipe-separated */ /* Dropdown toggle buttons (language / country / currency) */ /* Dropdown menu list */ /* ===================================================== MFP — Header dark-bar override ===================================================== */ /* Top bar (logo · search · action pill) — the header itself is the pinned strip. It is a direct child of , so it STAYS pinned for the whole page. The nav menu is rendered OUTSIDE this header, so it scrolls away. */ /* Scroll-shrink + gild frost (toggled by the inline script on .scrolled) */ /* Navbar — transparent track in normal flow, below the pinned header; scrolls away */ /* Search bar — override global/responsive fixed widths so it fills the flex row */ @media only screen and (min-width: 992px) and (max-width: 1268px) { } @media only screen and (max-width: 991px) { } /* Search bar — light paper pill on the sand header (UI-kit .header-search) */ /* Search-icon SVG reads dark on the light field */ /* ===================================================== MFP — Header action pill (Account · Lang · Currency · Wishlist · Cart) UI-kit .action-bar — one joined pill, divided segments ===================================================== */ /* Each segment (account widget / dropdown / link) */ /* The clickable inside each segment */ /* Seller-onboarding "Sell Your Art" pill — match the search input / action-bar height (52px, 44px scrolled). The shared partial sets inline styles, so the height + vertical padding are overridden here with !important (MFP only). */ /* Round the two pill ends onto the first / last segment */ /* Icons — dark on the light pill */ /* Account segment — strip the global 44px circle backdrop so the label shows */ /* Re-centre 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 inline-flex centring. */ /* Language / currency dropdown toggles inside the pill */ /* Dropdown menu — light paper panel, right-aligned under the segment */ /* Cart segment — filled ink, inverted (light) icon */ /* Cart count badge — gild, tucked into the dark cart segment */ /* FREE ART CONSULTATION — gold on dark */ /* Desktop nav — paper pill container, plain-text uppercase items (UI-kit .nav-pill) */ /* Neutralise the global hit-area negative margins so items sit inside the pill */ /* Small caret on dropdown items (UI-kit nav-pill) */ /* Anchor the mega-menu just under the nav-pill (not 60px below the centred item). Stretch the dropdown item to full pill height so top:100% sits at the pill's bottom edge. */ /* Dropdown / sub-menu — light paper panel */ .sub-menu { background-color: var(--mfp-ivory); border-color: var(--mfp-rule); box-shadow: var(--sh-card); } .sub-menu a { color: var(--mfp-ink-2); font-family: var(--mfp-sans); } .sub-menu a:hover { color: var(--mfp-gold); background-color: rgba(28, 26, 23, .05); } /* Mobile menu toggle — ink button on the light header */ /* Site CSS loads after global-responsive, so re-assert the mobile reveal here */ @media only screen and (max-width: 991px) { } /* ===================================================== MFP — Footer overrides ===================================================== */ /* Dark ink background — mirrors the header chrome */ /* Footer logo */ /* CTA heading — Cormorant Garamond, editorial weight */ /* Tagline paragraph */ /* FREE CONSULTATION button — MFP gold */ /* Section headings (EXPLORE, INSPIRATION…) — gold kicker style */ /* Footer list links — readable ivory, gold on hover */ /* Messaging links (Email, WhatsApp, Telegram, Viber) */ .messaging_links a { font-family: var(--mfp-sans); font-size: 12.5px; color: rgba(253,250,244,.50) !important; transition: color .25s; } .messaging_links a:hover { color: var(--mfp-gold-lt) !important; } /* Bottom copyright bar — ink background with animated glow */ /* ===================================================== MFP — Chrome bar drift glow (mirrors hero gallery, 25-30% strength) All 4 elements share the same two keyframe tracks; staggered delays distribute their phases so the glow feels coordinated, not identical. ===================================================== */ /* Horizontal drift for bar-shaped elements (tall ellipse fills bar height) */ @keyframes mfp-bar-glow-a { 0% { transform: scale(1.8) translate(-18%, 0); } 100% { transform: scale(1.8) translate( 18%, 0); } } @keyframes mfp-bar-glow-b { 0% { transform: scale(1.5) translate( 15%, 0); opacity: .55; } 100% { transform: scale(1.5) translate(-15%, 0); opacity: .80; } } /* 2D drift for tall ink panels (hero gallery, footer, quiz, quality banner) */ @keyframes mfp-gallery-bg-a { 0% { transform: scale(1.12) translate(-12%, -10%); } 100% { transform: scale(1.12) translate( 12%, 10%); } } @keyframes mfp-gallery-bg-b { 0% { transform: scale(1.08) translate( 11%, 10%); opacity: .55; } 100% { transform: scale(1.08) translate(-11%, -10%); opacity: .75; } } /* Lift content above animation pseudo-layers */ /* ::before — primary warm amber glow (dark strips only) */ /* ::after — secondary warm accent (dark strips only) */ /* Stagger phases: evenly distributed across the 18s/22s cycles */ /* ===================================================== MFP — Masterpiece Ken Burns gallery (footer, quiz, quality banner) Three of the most famous paintings of all time (Van Gogh's Starry Night, the Mona Lisa, Vermeer's Girl with a Pearl Earring) slowly pan/zoom behind the panel content. TWO stacked layers (::before + ::after) cross-fade in antiphase, so during each transition BOTH paintings are visible at once (a true overlapping cross-fade). Each layer swaps its image only while it is invisible, and carries its own dark wash so text stays legible whichever painting is on screen. A shared pan/zoom animation gives the Ken Burns drift. ===================================================== */ /* Both photo layers share geometry + the slow pan/zoom; layer A = ::before */ /* Layer B = ::after — same pan, opposite-phase cross-fade schedule */ /* Stagger panels so they aren't all showing the same painting at once */ /* Shared continuous Ken Burns zoom + gentle HORIZONTAL drift only (no vertical translate) so framed faces stay put. Anchored at 50% 30% via transform-origin above. Returns to start for a seamless loop. */ @keyframes mfp-kb-pan { 0% { transform: scale(1.06) translateX(-2%); } 50% { transform: scale(1.13) translateX( 2%); } 100% { transform: scale(1.06) translateX(-2%); } } /* 6 segments x 7s = 42s loop. Shown order: Starry, Mona, Girl, Starry, Mona, Girl. Layer A holds the odd segments, layer B the even ones; each ~2.5s boundary is an overlapping cross-fade (both layers partly visible). The dark wash is baked into each layer's background so legibility is constant. WASH = linear-gradient(rgba(26,24,20,.42), rgba(26,24,20,.56)). */ @keyframes mfp-kb-layer-a { 0% { opacity: .5; background-image: linear-gradient(rgba(26,24,20,.42), rgba(26,24,20,.56)), url("../images/mfp/gallery/starry-night.c12609bfbcc5.jpg"); background-position: center, center 50%; } 13% { opacity: .5; } 19% { opacity: 0; background-image: linear-gradient(rgba(26,24,20,.42), rgba(26,24,20,.56)), url("../images/mfp/gallery/starry-night.c12609bfbcc5.jpg"); background-position: center, center 50%; } 25% { background-image: linear-gradient(rgba(26,24,20,.42), rgba(26,24,20,.56)), url("../images/mfp/gallery/girl-pearl-earring.555783a48c51.jpg"); background-position: center, center; } 30% { opacity: 0; } 36% { opacity: .5; } 47% { opacity: .5; } 52% { opacity: 0; background-image: linear-gradient(rgba(26,24,20,.42), rgba(26,24,20,.56)), url("../images/mfp/gallery/girl-pearl-earring.555783a48c51.jpg"); background-position: center, center; } 58% { background-image: linear-gradient(rgba(26,24,20,.42), rgba(26,24,20,.56)), url("../images/mfp/gallery/mona-lisa.b545ca1dca3b.jpg"); background-position: center, center 25%; } 63% { opacity: 0; } 69% { opacity: .5; } 80% { opacity: .5; } 85% { background-image: linear-gradient(rgba(26,24,20,.42), rgba(26,24,20,.56)), url("../images/mfp/gallery/mona-lisa.b545ca1dca3b.jpg"); background-position: center, center 25%; } 86% { opacity: 0; } 91% { background-image: linear-gradient(rgba(26,24,20,.42), rgba(26,24,20,.56)), url("../images/mfp/gallery/starry-night.c12609bfbcc5.jpg"); background-position: center, center 50%; } 97% { opacity: 0; } 100% { opacity: .5; background-image: linear-gradient(rgba(26,24,20,.42), rgba(26,24,20,.56)), url("../images/mfp/gallery/starry-night.c12609bfbcc5.jpg"); background-position: center, center 50%; } } @keyframes mfp-kb-layer-b { 0% { opacity: 0; background-image: linear-gradient(rgba(26,24,20,.42), rgba(26,24,20,.56)), url("../images/mfp/gallery/girl-pearl-earring.555783a48c51.jpg"); background-position: center, center; } 6% { background-image: linear-gradient(rgba(26,24,20,.42), rgba(26,24,20,.56)), url("../images/mfp/gallery/mona-lisa.b545ca1dca3b.jpg"); background-position: center, center 25%; } 13% { opacity: 0; } 19% { opacity: .5; } 30% { opacity: .5; background-image: linear-gradient(rgba(26,24,20,.42), rgba(26,24,20,.56)), url("../images/mfp/gallery/mona-lisa.b545ca1dca3b.jpg"); background-position: center, center 25%; } 36% { opacity: 0; } 42% { background-image: linear-gradient(rgba(26,24,20,.42), rgba(26,24,20,.56)), url("../images/mfp/gallery/starry-night.c12609bfbcc5.jpg"); background-position: center, center 50%; } 47% { opacity: 0; } 52% { opacity: .5; } 63% { opacity: .5; background-image: linear-gradient(rgba(26,24,20,.42), rgba(26,24,20,.56)), url("../images/mfp/gallery/starry-night.c12609bfbcc5.jpg"); background-position: center, center 50%; } 69% { opacity: 0; } 75% { background-image: linear-gradient(rgba(26,24,20,.42), rgba(26,24,20,.56)), url("../images/mfp/gallery/girl-pearl-earring.555783a48c51.jpg"); background-position: center, center; } 80% { opacity: 0; } 86% { opacity: .5; } 97% { opacity: .5; background-image: linear-gradient(rgba(26,24,20,.42), rgba(26,24,20,.56)), url("../images/mfp/gallery/girl-pearl-earring.555783a48c51.jpg"); background-position: center, center; } 100% { opacity: 0; background-image: linear-gradient(rgba(26,24,20,.42), rgba(26,24,20,.56)), url("../images/mfp/gallery/girl-pearl-earring.555783a48c51.jpg"); background-position: center, center; } } @media (prefers-reduced-motion: reduce) { } /* ===================================================== MFP — Link hover glow effect ===================================================== */ a { transition: text-shadow .45s, color .45s, opacity 0.25s ease; } a:hover { color: var(--lc); text-shadow: 0 0 6px color-mix(in srgb, var(--lc) 45%, transparent), 0 0 18px color-mix(in srgb, var(--lc) 22%, transparent), 0 0 40px color-mix(in srgb, var(--lc) 8%, transparent); } a:visited { color: var(--lv); } /* ===================================================== MFP — Image hover: 3D tilt ===================================================== */ /* perspective must be on the parent of the transformed element */ .artist_slid_box { perspective: 600px; } /* Base transition */ .swiper-slide .artist_slid_box a img, img.mouseover_effect_images, img.mouseover_image_effect { transition: transform 0.6s ease; } /* Hover state — 3D tilt */ .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 { transform: rotateY(-7deg) rotateX(3deg) scale(1.04); } /* ===================================================== MFP — Slider card title: multi-line hover-frame fix inline-block gives the a single rectangular bounding box so the text-shadow glow effect 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; } /* ===================================================== MFP EDITORIAL HOMEPAGE — scoped to .mfp-hp ===================================================== */ :root { --mfp-ink: #1A1814; /* MFP UI kit --ink */ --mfp-ink-2: #4A4438; /* MFP UI kit --ink-soft */ --mfp-ink-3: #8A8273; /* MFP UI kit --ink-mute */ --mfp-sand: #F5F1E8; --mfp-sand-2: #EDE7D9; --mfp-sand-3: #DDD5C0; --mfp-gold: #8B6914; --mfp-gold-lt: #C49A2A; --mfp-ivory: #FDFAF4; --mfp-white: #FFFFFF; --mfp-rule: rgba(28,26,23,.12); --mfp-rule-strong: rgba(28,26,23,.28); --mfp-serif: "Cormorant Garamond","EB Garamond",Georgia,serif; --mfp-sans: "Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --mfp-max: 1380px; /* Spacing scale (8pt base) — MFP UI kit */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; /* Radius — MFP UI kit */ --r-sm:2px; --r-md:4px; --r-pill:999px; /* Shadow — MFP UI kit */ --sh-card:0 12px 24px -12px rgba(26,24,20,0.18); --sh-frame:0 30px 60px -20px rgba(26,24,20,0.35), 0 8px 20px -8px rgba(26,24,20,0.2); } /* --- Utilities --- */ /* --- Section heads --- */ /* ===================================================== MFP — UI Kit production components Translated from kit generic tokens to --mfp-* tokens ===================================================== */ /* Suppress link glow on button anchors */ a.btn-primary:hover, a.btn-gild:hover, a.btn-ghost:hover { text-shadow: none; } .btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; border-radius: var(--r-sm); transition: background .15s, color .15s; background: var(--mfp-ink); color: var(--mfp-ivory); text-decoration: none; } .btn-primary:hover { background: var(--mfp-gold); color: var(--mfp-ivory); text-shadow: none; } .btn-gild { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; border-radius: var(--r-sm); transition: background .15s, color .15s; background: var(--mfp-gold-lt); color: var(--mfp-ink); text-decoration: none; } .btn-gild:hover { background: var(--mfp-ink); color: var(--mfp-ivory); text-shadow: none; } .btn-ghost, .btn.btn-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 14px 16px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: var(--mfp-ink-2); line-height: inherit; transition: color .15s, background .15s; text-decoration: none; } .btn-ghost:hover, .btn.btn-ghost:hover { color: var(--mfp-ink); background: rgba(26, 24, 20, 0.06); border-color: transparent; text-shadow: none; } .btn-primary svg, .btn-gild svg, .btn-ghost svg { width: 14px; height: 14px; } .btn-sm { padding: 10px 16px !important; font-size: 11px !important; } /* Card badge */ .card-badge { background: var(--mfp-ivory); color: var(--mfp-ink); padding: 5px 9px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; border: 1px solid var(--mfp-rule-strong); } .card-badge.gild { background: var(--mfp-gold-lt); color: var(--mfp-ivory); border-color: var(--mfp-gold-lt); } .card-badge.dark { background: var(--mfp-ink); color: var(--mfp-ivory); border-color: var(--mfp-ink); } /* Movement / genre filter pill */ .movement { padding: 9px 16px; border: 1px solid var(--mfp-rule-strong); border-radius: var(--r-pill); font-size: 12px; letter-spacing: .04em; color: var(--mfp-ink-2); background: var(--mfp-ivory); transition: all .15s; display: inline-flex; align-items: center; } .movement:hover { border-color: var(--mfp-ink); color: var(--mfp-ink); } .movement.active { background: var(--mfp-ink); color: var(--mfp-ivory); border-color: var(--mfp-ink); } /* Announce bar */ .announce { background: var(--mfp-ink); color: var(--mfp-sand); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 9px 18px; text-align: center; font-weight: 500; width: 100%; } .announce .dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--mfp-gold-lt); margin: 0 14px; vertical-align: middle; } /* --- Buttons --- */ /* --- Hero --- */ /* --- Painting frame (dark wood — museum aesthetic) --- */ /* Inner accent line — thin gold filament typical of museum frames */ /* --- Artwork meta: right of frame for portrait, below for landscape --- */ /* Landscape orientation: meta stacks below the frame */ /* --- Artwork of the day --- */ .mfp-aotd { background:var(--mfp-ink); } .mfp-aotd-inner { display:flex; align-items:center; gap:clamp(40px,5vw,72px); padding:clamp(48px,6.5vw,88px) 0; } .mfp-aotd-img-col { flex-shrink:0; } .mfp-aotd-img-link { display:block; line-height:0; } .mfp-aotd-img { width:clamp(140px,16vw,200px); height:clamp(180px,21vw,260px); object-fit:cover; display:block; border:1px solid rgba(200,173,122,.30); box-shadow:0 8px 40px rgba(0,0,0,.55); transition:opacity .25s,transform .35s; } .mfp-aotd-img-link:hover .mfp-aotd-img { opacity:.88; transform:scale(1.015); } .mfp-aotd-body { flex:1; min-width:0; } .mfp-aotd-meta { display:flex; align-items:center; gap:10px; margin-bottom:18px; } .mfp-aotd-lbl { font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--mfp-gold-lt); font-family:var(--mfp-sans); font-weight:500; } .mfp-aotd-sep { color:rgba(253,250,244,.25); font-size:10px; } .mfp-aotd-date { font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(253,250,244,.38); font-family:var(--mfp-sans); } .mfp-aotd-rule { width:40px; height:1px; background:linear-gradient(90deg,var(--mfp-gold) 0%,transparent 100%); margin-bottom:20px; } .mfp-aotd-title { font-family:var(--mfp-serif); font-size:clamp(24px,3.2vw,44px); font-weight:300; line-height:1.15; letter-spacing:-.01em; color:var(--mfp-ivory); margin:0 0 14px; } .mfp-aotd-title a { color:inherit; text-decoration:none; } .mfp-aotd-title a:hover { color:var(--mfp-gold-lt); } .mfp-aotd-artist { font-family:var(--mfp-sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mfp-gold-lt); margin-bottom:32px; } .mfp-aotd-artist a { color:inherit; text-decoration:none; } .mfp-aotd-artist a:hover { color:var(--mfp-ivory); } .mfp-aotd-cta { display:inline-block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mfp-ivory) !important; border:1px solid rgba(253,250,244,.30); padding:12px 28px; font-family:var(--mfp-sans); transition:background .2s,border-color .2s; white-space:nowrap; } .mfp-aotd-cta:hover { background:var(--mfp-gold); border-color:var(--mfp-gold); } /* --- Featured artists --- */ /* Keep bright on visited — prevent visited umber from darkening text on dark panels */ /* --- Quality banner --- */ /* --- Artworks by period --- */ /* --- Art movements --- */ /* --- Three pillars --- */ /* --- Scroll reveal --- */ /* --- Responsive --- */ @media (max-width:1080px) { } @media (max-width:768px) { } @media (max-width:480px) { } /* === HOMEPAGETEST migrated inline CSS === */ /* ===================================================== MFP HOMEPAGE TEST — hero frame override (border-image) ===================================================== */ /* Remove the CSS-gradient/shadow wooden frame; replace with border-image */ /* ===================================================== MFP HOMEPAGE TEST — museums, journal, quiz sections ===================================================== */ /* --- Museums grid --- */ @media (max-width: 1080px) { } @media (max-width: 600px) { } /* --- Journal grid --- */ @media (max-width: 900px) { } @media (max-width: 600px) { } /* --- Quiz section --- */ @media (max-width: 900px) { } @media (max-width: 600px) { } /* === HOMEPAGETEST shared layout utilities === */ @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): MFP — ivory page, dark-gallery ink sidebar, antique gold 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(26 24 20 / 10%); -webkit-box-shadow: 0px 0px 10px 0px rgb(26 24 20 / 10%); -moz-box-shadow: 0px 0px 10px 0px rgb(26 24 20 / 10%); margin-left: 320px; } h3.user_heading_text { color: var(--mfp-ink, #1A1814); font-weight: 400; font-size: 20px; line-height: 30px; font-family: var(--font-title); margin-bottom: 0px; } p.user_title_text { color: var(--mfp-ink, #1A1814); font-size: 14px; font-weight: 400; opacity: 0.6; line-height: 22px; margin-bottom: 0px; } .sidebar_box { background: var(--mfp-ink, #1A1814); 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: #8B6914; border-radius: 10px; } aside::-webkit-scrollbar-thumb:hover { background: #C49A2A; } aside { scrollbar-width: thin; scrollbar-color: var(--mfp-sand-3, #DDD5C0) var(--mfp-ink, #1A1814); } .profile_name { color: var(--mfp-ivory, #FDFAF4); font-weight: 500; font-size: 18px; line-height: 26px; } /* .sidebar_menu_link li.active a svg { color: var(--mfp-gold-lt, #C49A2A) !important; } */ /* .sidebar_menu_link li:hover a svg, */ .favorite_img_card { border-right: 1px solid var(--mfp-sand-3, #DDD5C0); border-bottom: 1px solid var(--mfp-sand-3, #DDD5C0); 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(--mfp-gold, #8B6914); } .fav-artist h2 a{ color: var(--mfp-gold, #8B6914); } .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: var(--mfp-ink, #1A1814); margin: 6px 0px 11px; min-height: 38px; } .fav-title a{ color: var(--mfp-ink, #1A1814); } .button-dash { width: 100%; border: 1px solid var(--mfp-gold); border-radius: 0; padding: 11px 15px; color: var(--mfp-gold); 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 var(--mfp-sand-3, #DDD5C0); } .main_gap { padding: 16px; } .top_order_section { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; } .order_count { color: var(--mfp-ink, #1A1814); 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 var(--mfp-sand-3, #DDD5C0); } .date_amount h6 { color: var(--mfp-ink, #1A1814); font-size: 14px; opacity: 0.6; font-weight: 400; text-transform: uppercase; margin-bottom: 0px; } .date_amount p { color: var(--mfp-ink, #1A1814); 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(26 24 20 / 10%); -webkit-box-shadow: 0px 0px 10px 0px rgb(26 24 20 / 10%); -moz-box-shadow: 0px 0px 10px 0px rgb(26 24 20 / 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: var(--mfp-sand-3, #DDD5C0) !important; } table thead th { background: var(--mfp-sand, #F5F1E8) !important; color: var(--mfp-ink, #1A1814) !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: var(--mfp-ink, #1A1814) !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: var(--mfp-ink, #1A1814); } .text-center.suceesfulmsg_textt p { font-size: 16px; line-height: 24px; font-weight: 400; font-family: var(--font-body); color: var(--mfp-ink, #1A1814); } .suceesfulmsg_textt button { padding: 10px 120px; border: none; background: var(--mfp-gold); font-size: 16px; line-height: 24px; font-family: var(--font-body); font-weight: 500; color: var(--mfp-ivory, #FDFAF4); text-transform: uppercase; } /* Sidebar Default */ aside { width: 100%; background: var(--mfp-sand, #F5F1E8); height: 100%; overflow-y: auto; overflow-x: hidden; transition: transform 0.3s ease-in-out; z-index: 999; } /* Toggle Button */ .sidebar-toggle { background: var(--mfp-gold, #8B6914); 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 */ /* ═══════════════════════════════════════ Most-Famous-Paintings — Infinite Scroll (/art/infinite_scroll/) Scoped via .ais-hero-banner; brand tokens only. ═══════════════════════════════════════ */ body:has(.ais-hero-banner) { --ais-page: var(--mfp-sand); --ais-surface: var(--mfp-white); --ais-surface-2: var(--mfp-ivory); --ais-border: var(--mfp-sand-3); --ais-divider: var(--mfp-rule); --ais-frame-bg: var(--mfp-sand-2); --ais-ink: var(--mfp-ink); --ais-ink-2: var(--mfp-ink-2); --ais-ink-3: var(--mfp-ink-3); --ais-faint: var(--mfp-ink-3); --ais-accent: var(--mfp-gold); --ais-accent-dark: var(--mfp-ink); --ais-label-accent: var(--mfp-gold); --ais-on-accent: var(--mfp-white); --ais-shadow-rgb: 26 24 20; --ais-accent-rgb: 139 105 20; --ais-f-heading: var(--font-title); --ais-f-title: var(--font-title); --ais-f-body: var(--font-body); --ais-f-label: var(--font-body); --ais-f-mono: var(--font-body); --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: mfp-ais-reveal-up .9s cubic-bezier(.16, 1, .3, 1) forwards; } @keyframes mfp-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: mfp-ais-draw-line 1.1s 1s cubic-bezier(.16, 1, .3, 1) forwards; } @keyframes mfp-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: mfp-ais-pin-in .8s cubic-bezier(.16, 1, .3, 1) both; } @keyframes mfp-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: mfp-ais-breathe 14s ease-in-out infinite alternate; } @keyframes mfp-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: mfp-ais-fact-in .5s cubic-bezier(.16, 1, .3, 1) forwards; } @keyframes mfp-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: mfp-ais-heart-pop .45s cubic-bezier(.34, 1.56, .64, 1); } @keyframes mfp-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: mfp-ais-shine .55s ease-out forwards; } @keyframes mfp-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: mfp-ais-feed-out .35s ease forwards; } @keyframes mfp-ais-feed-out { to { opacity: 0; transform: translateY(10px); } } body:has(.ais-hero-banner) .feed.swap-in { animation: mfp-ais-feed-in .5s cubic-bezier(.2, .8, .2, 1); } @keyframes mfp-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 — MFP (dark gallery/gold) ===== */ .artinfo_top h4 { color: var(--mfp-ink, #1A1814); font-family: var(--font-title); } .art_info_details { background: var(--mfp-sand-2, #EDE7D9); border-color: var(--mfp-sand-3, #DDD5C0); box-shadow: var(--sh-card, 0 12px 24px -12px rgba(26,24,20,0.18)); } .art_info_inner { background: var(--mfp-sand, #F5F1E8); } .art_info_inner h4 { color: var(--mfp-gold-lt, #C49A2A); text-transform: none; } .art_info_inner p { color: var(--mfp-ink-2, #4A4438); } .artwork-info-meta-link { color: var(--mfp-ink-2, #4A4438); } .artwork-info-meta-link:hover { color: var(--lc, #c8a96e); } /* ═══════════════════════════════════════════════════════════════════ MFP — MostFamousPaintings — 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) — MFP Most-Famous-Paintings Museum: sand surfaces, gold accent, Baskervville SC serif headings. =================================================================== */ /* ===================================================== PrintReproduction & DigitalImage buy pages — article (historicle_box) typography Structure lives in global-custom-V2.1.css; brand ink/links here. ===================================================== */ /* ===== Artwork catalog list card — MostFamousPaintings (UI Kit aligned) ===== */ /* Scope: .search_sec.catalog-list-page and .search_sec.artwork-list-page Every selector is prefixed with both page wrappers to avoid bleeding into the ~95 other pages that share .search_card. Tokens used: --mfp-ink #1A1814 text / CTA bg --mfp-ink-2 #4A4438 body / artist text --mfp-ink-3 #8A8273 year / muted --mfp-sand #F5F1E8 page bg / hover panel fill --mfp-sand-2 #EDE7D9 card hover surface / deeper tone --mfp-sand-3 #DDD5C0 border / rule color --mfp-gold #8B6914 CTA hover bg / accent --mfp-ivory #FDFAF4 card resting surface --mfp-serif Cormorant Garamond — artwork title (italic) --font-title Baskervville SC — artist name (small-caps) --mfp-sans Inter — body / price / CTA label */ /* ----- Page-level token scope ----- */ /* ----- Card shell ----- */ /* ----- Image area ----- */ /* Image gentle zoom on card hover */ /* ----- Card body (resting label area) ----- */ /* ----- Artist name — Baskervville SC small-caps, ink ----- */ /* ----- Year / date span — Inter, muted ----- */ /* ----- Artwork title — Cormorant Garamond italic ----- */ /* ----- Hover panel — reveal on hover (display:none preserved globally) ----- */ /* Snippet text inside hover panel */ /* ----- Card bottom: CTA + fav row ----- */ /* ----- addToCart — Museum primary CTA: ink bg, Baskervville SC label, gold hover ----- */ /* Price display inside the CTA — uses serif for editorial weight */ /* CTA hover — antique gold ground */ /* ----- Favourite / wishlist toggle ----- */ /* ===== END Artwork catalog list card — MostFamousPaintings ===== */ /* ============================================================ Article detail page (article_detail.html) — MostFamousPaintings Overrides the brand-neutral beige structure in global-custom with MFP tokens: warm sand surfaces, antique-gold accent, Baskervville SC titles over Inter body. Scoped under .article_main_page so other page types are unaffected. ============================================================ */ /* Keyword tag pills */ /* Hero title + subtitle */ /* Body copy + headings + links */ /* Sidebar section headings */ /* Table of contents links */ /* Related-artworks sidebar */ /* Related-articles list */ /* ===== END Article detail page — MostFamousPaintings ===== */ /* ===== TOP 100 PAGES (artists / artworks / museums / articles) ===== */ /* MFP identity: cream/sand surfaces, gold accent (#8B6914), ink #1A1814, Cormorant Garamond italic display titles, Inter uppercase micro-labels, sharp 2–4px corners, thin gold/line rules, restrained museum shadows. Only --top100-* tokens + brand visual overrides — layout lives in global-custom-V2.1.css and loads before this file. */ /* --- Brand tokens fed to the global base --- */ .top100-artist-grid, .top100-artwork-list { --top100-card-bg: var(--mfp-ivory, #FDFAF4); --top100-card-border: var(--mfp-sand-3, #DDD5C0); --top100-ink: var(--mfp-ink, #1A1814); --top100-muted: var(--mfp-ink-3, #8A8273); --top100-accent: var(--mfp-gold, #8B6914); --top100-rank-color: var(--mfp-sand-2, #EDE7D9); --top100-card-radius: var(--r-sm, 2px); } /* ========================================================= A) ARTISTS portrait grid (/en/mfp/artists/top100/) ========================================================= */ .top100-artist-card { background: var(--mfp-ivory, #FDFAF4); border: 1px solid var(--mfp-sand-3, #DDD5C0); border-radius: var(--r-sm, 2px); box-shadow: var(--sh-card, 0 12px 24px -12px rgba(26,24,20,0.18)); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .top100-artist-card:hover { transform: translateY(-4px); border-color: var(--mfp-gold, #8B6914); box-shadow: 0 20px 40px -18px rgba(26,24,20,0.32); } .top100-artist-card__photo { border: 1px solid var(--mfp-sand-3, #DDD5C0); box-shadow: 0 0 0 4px var(--mfp-ivory, #FDFAF4), 0 0 0 5px var(--mfp-rule, rgba(28,26,23,.12)); transition: box-shadow .2s ease, filter .3s ease; filter: saturate(.92); } .top100-artist-card:hover .top100-artist-card__photo { box-shadow: 0 0 0 4px var(--mfp-ivory, #FDFAF4), 0 0 0 5px var(--mfp-gold, #8B6914); filter: saturate(1); } .top100-artist-card__name, .top100-artist-card__name a { font-family: var(--mfp-serif, "Cormorant Garamond", Georgia, serif); font-style: italic; font-weight: 500; color: var(--mfp-ink, #1A1814); letter-spacing: -0.005em; text-decoration: none; transition: color .15s ease; } .top100-artist-card__name a:hover { color: var(--mfp-gold, #8B6914); } .top100-artist-card__desc { font-family: var(--mfp-sans, "Inter", sans-serif); font-weight: 300; color: var(--mfp-ink-3, #8A8273); line-height: 1.55; } /* ========================================================= B) ARTWORKS zigzag gallery (/en/mfp/art/top100/) ========================================================= */ .top100-artwork-card__rank { font-family: var(--mfp-serif, "Cormorant Garamond", Georgia, serif); font-weight: 600; font-style: italic; color: var(--mfp-sand-2, #EDE7D9); opacity: .85; } .top100-artwork-card__inner { background: var(--mfp-ivory, #FDFAF4); border: 1px solid var(--mfp-sand-3, #DDD5C0); border-radius: var(--r-sm, 2px); box-shadow: var(--sh-card, 0 12px 24px -12px rgba(26,24,20,0.18)); transition: box-shadow .25s ease, border-color .25s ease; } .top100-artwork-card:hover .top100-artwork-card__inner { border-color: var(--mfp-gold, #8B6914); box-shadow: var(--sh-frame, 0 30px 60px -20px rgba(26,24,20,0.35), 0 8px 20px -8px rgba(26,24,20,0.2)); } .top100-artwork-card__photo { border-radius: var(--r-sm, 2px); box-shadow: 0 10px 22px -12px rgba(26,24,20,0.4); } .top100-artwork-card__photo--framed { border: 6px solid var(--mfp-ivory, #FDFAF4); outline: 1px solid var(--mfp-sand-3, #DDD5C0); box-shadow: var(--sh-frame, 0 30px 60px -20px rgba(26,24,20,0.35), 0 8px 20px -8px rgba(26,24,20,0.2)); } .top100-artwork-card__meta { font-family: var(--mfp-sans, "Inter", sans-serif); } .top100-artwork-card__artist { font-family: var(--mfp-sans, "Inter", sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mfp-gold, #8B6914); } .top100-artwork-card__year { font-family: var(--mfp-sans, "Inter", sans-serif); color: var(--mfp-ink-3, #8A8273); letter-spacing: 0.04em; } .top100-artwork-card__title { font-family: var(--mfp-serif, "Cormorant Garamond", Georgia, serif); font-style: italic; font-weight: 500; color: var(--mfp-ink, #1A1814); line-height: 1.15; } /* ========================================================= C) MUSEUMS + ARTICLES listing (.top100-listing reusing .search_card) Scoped overrides only — never touch the bare .search_card rules. ========================================================= */ /* .addToCart — MFP ink pill that flips to gold on hover */ /* hover panel: fill full card so VIEW is always reachable, even with no text */ /* ===== END TOP 100 PAGES — MostFamousPaintings ===== */ /* ===== fts_search — model type badge (MFP) ===== */ /* ===== article_list.html — article list cards (article-list-card) ===== */ /* MFP classical/museum identity: ivory cards, gold eyebrow, serif italic titles, ink->gold primary pill. Scoped under .article-list-page and chained page+grid+long-class to beat 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: the grid's direct child is the .row wrapper, so a grid container squeezes every card into one track. Only set the row's vertical gutter. */ /* Card shell */ /* Media — refined zoom on hover */ /* Body */ /* Meta — gold uppercase eyebrow with rule prefix; muted year */ /* Title — serif italic, ink, gold on hover */ /* Hover excerpt */ /* Footer / actions */ /* Read button — MFP primary ink pill that flips to gold */ /* ===== artwork-catalog-card (catalog list grid card) ===== MostFamousPaintings — dedicated styling via the new long companion classes that sit beside the old shared .search_card classes. Aligned to the MFP UI Kit: warm cream/sand surfaces, antique-gold accent, ink ground for the CTA, Cormorant Garamond italic titles, Baskervville SC small-caps artist names, Inter micro-labels, near-square 2px corners and soft warm museum shadows. Scoped under .custom_search and using the long classes so these rules win the cascade over the shared .search_card rules (incl. compound ones like .custom_search .search_card .addToCart). Tokens (all from the MFP :root block above — no hardcoded colors): --mfp-ink #1A1814 · --mfp-ink-2 #4A4438 · --mfp-ink-3 #8A8273 --mfp-sand #F5F1E8 · --mfp-sand-2 #EDE7D9 · --mfp-sand-3 #DDD5C0 --mfp-gold #8B6914 · --mfp-gold-lt #C49A2A · --mfp-ivory #FDFAF4 --mfp-serif (Cormorant Garamond) · --font-title (Baskervville SC) --mfp-sans (Inter) · --r-sm/--r-md radii · --sh-card/--sh-frame shadows */ /* ----- Card shell ----- */ /* ----- Image area — gallery crop on a sand mat with a hairline rule ----- */ /* Slow museum zoom on card hover */ /* ----- Body: artist + title label block ----- */ /* Artist name — Baskervville SC small-caps, ink */ /* Year / date span — Inter, muted */ /* Artwork title — Cormorant Garamond italic, curatorial voice */ /* ----- Hover overlay — sand panel revealed on card hover ----- */ /* Snippet text inside the overlay */ /* ----- Footer: buy CTA + favourite toggle row ----- */ /* Buy / price button — museum primary CTA: ink ground, gold on hover */ /* Price inside the CTA — serif for editorial weight */ /* ----- Favourite / wishlist toggle ----- */ /* ===== END artwork-catalog-card — MostFamousPaintings ===== */ /* ===== article_list.html — specificity lift over artwork-list base rules (eyebrow accent) ===== */ /* ===== list-page filter sidebar + sort (artwork-list-page scope, shared by art/article/artist/museum lists) — MFP ===== */ /* --- Sort chrome --- */ /* --- Filter panel shell --- */ /* --- Filter title + CLEAR ALL --- */ /* --- Active-filter badge list --- */ /* --- Accordion --- */ /* --- Colors list --- */ /* Category value links (filter sidebar) — chip styling consistent with group-by Sidebar_tags + list_category. */ /* ===== catalog left sidebars (filter / categories / group-by) — UI Kit alignment ===== */ /* Active filter item — MFP UI Kit sbk-opt.is-sel: accent text on sand slot tint, NOT an inverted dark fill (matches --SB-active-fill / --SB-active-text). */ /* --- Checkboxes, text input, tag buttons --- */ /* --- noUiSlider price range --- */ /* ===== MFP — Artists alphabet (group_by_alphabet / start_by_letter) ===== */ /* All rules scoped under .art_info_section to avoid bleeding into user sidebar (.profile_name) and start_by_letter shared classes. Specificity floor: 0-1-1 minimum so global-custom brown values (#CCC2AE, #3E342A, #875D2A) are cleanly overridden. */ /* 1. Alphabet nav bar — letter tiles */ /* 2. Per-letter section heading (A, B, C…) */ /* 3. Artist profile card — image, name, dates */ /* 4. "View more" link with chevron icon */ /* ===== END MFP — Artists alphabet ===== */ /* ===== artist_group_by_attribute / group-by browse — MFP ===== */ /* ── Local design tokens (warm parchment + antique gold palette) ── */ /* ── Nav list / main heading / Showing text / sortABC base ink ── */ /* ── groupby-selector / form selects / search input ── */ /* ── Search input placeholder + icon ── */ /* ── sortABC active / disabled ── */ /* ── Badge filter chips ── */ /* ── Sidebar box ── */ /* Active sidebar_box — gild border accent to distinguish from hover */ /* ── Sidebar title + description ── */ /* sidebar_box_description — secondary/muted ink per MFP design */ /* ── Sidebar_tags chips ── */ /* ── showMainResuls font root ── */ /* ── Group heading (showMainResulsTitle h3) ── */ /* ── Count badge (span inside h3) ── */ /* ── "See All" link ── */ /* ── showMainResulsBox (group card wrapper) ── */ /* ── showMainResulsImage overlay title + subtitle ── */ /* ── Result item text (cards in grid) ── */ /* ===== END MFP — artist_group_by_attribute / group-by browse ===== */ /* ===================================================== photo_to_restyled_masterpiece — MFP brand styling All selectors scoped under body.custom-repro-page. Reuses MFP tokens (--mfp-*) defined above; classic/museum aesthetic. Kit map: --gild ≈ --mfp-gold-lt, --gild-deep ≈ --mfp-gold, --line ≈ --mfp-sand-3, --paper ≈ --mfp-ivory, --bg-deep ≈ --mfp-sand-2. ===================================================== */ /* --- Brand tokens consumed by global-custom shared structure --- */ /* --- Hero caption (shared chrome) --- */ /* --- Intro paragraphs --- */ /* --- Step blocks --- */ /* Step kicker chip — ink box, gold uppercase label (kit .step-head .num/.st-label feel) */ /* Step heading — Cormorant Garamond editorial, left-aligned */ /* Step body copy */ /* File-types hint line */ /* --- Step 01: upload box (kit .upload — dashed line, gold on hover) --- */ /* Plus icon */ /* Spinner ring — gold accent */ /* Preview frame */ /* Upload error message */ /* --- Step 02: edit-request textarea (kit field aesthetic) --- */ /* --- Chips: edit-request examples + category filters (kit .movement pill) --- */ /* Active category filter — solid ink fill */ /* --- Step 04: style cards (.search_card) — MFP museum card --- */ /* Category label — Baskervville SC small-caps */ /* Style title — Cormorant Garamond italic */ /* Description snippet */ /* Step 04 count line */ /* ===================================================== RIGHT column — .summery_checkout (order summary + checkout) Same --mfp-* tokens / museum aesthetic as the left column. ===================================================== */ /* Card shell — override global-custom beige (#F7F2E1 / #DCD3BF) */ /* Left column inner panels — faces, size, customization (global beige leak) */ /* Section titles ("Order Details" / "Summary & Checkout") */ /* Collapse / accordion shell */ /* Accordion header button */ /* Kill default bootstrap blue focus ring */ /* Recolor the chevron to ink */ /* Summary rows */ /* Per-row price (right column) */ /* Total price box */ /* Checkout buttons */ /* SEND — secondary / ghost */ /* Confirmation / validation notices */ /* Read-more accent link */ /* ===== END .summery_checkout ===== */ /* ===== END photo_to_restyled_masterpiece ===== */ /* ===== MFP — Catalog categories browse (list_category) ===== */ /* Page wrapper: .search_sec.same-space-card.catalog-categories-page.artwork-categories-page Scope every rule to BOTH .catalog-categories-page AND .artwork-categories-page. Tokens (MFP UI Kit): band -> --mfp-sand (#F5F1E8) panel/band fill slot -> --mfp-sand-2 (#EDE7D9) inset/pill fill line -> --mfp-sand-3 (#DDD5C0) borders/rules ink -> --mfp-ink (#1A1814) primary text ink-2 -> --mfp-ink-2 (#4A4438) soft ink (pill text) ink-3 -> --mfp-ink-3 (#8A8273) muted accent-> --mfp-gold (#8B6914) accent / hover / active bg -> --mfp-ivory (#FDFAF4) control bg serif -> Cormorant Garamond | sans -> Inter */ /* ----- 1. Page chrome: breadcrumb, heading, showing/sort ----- */ /* ----- 2. Filter panel shell ----- */ /* ----- 3. Filter title row ----- */ /* ----- 4. Active-filter badge list ----- */ /* ----- 5. CORE category links (pills) ----- */ /* Active category chip — MFP UI Kit sbk-chip.is-active: accent text on sand slot tint with accent border, NOT an inverted dark fill (matches --SB-active-fill / --SB-active-text / --SB-accent border). */ /* ----- 6. Card grid — identical to MFP artwork LIST card ----- */ /* Page-level card token scope (mirrors artwork-list-page) */ /* ── Pagination — SITE-WIDE, overrides global brown #875D2A (every paginated template: list, categories, search, color search). Ivory cell, parchment hover, gold hairline; active = inverted ink pill. ── */ /* ===== END MFP — Pagination (site-wide) ===== */ /* ===== 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 — MostFamousPaintings tokens (overrides the ADC-gold default in global-custom-V2.1.css). Layout mirrors ADC/OUA/WK. ===================================================== */ /* ===== search_by_color ===== */ @media (max-width: 768px) { } /* ===== orders/art_consultation.html — step image offset shadow ===== */ /* MostFamousPaintings: muted antique-gold wash of the brand accent (#8B6914). */ .step .step-image { --step-image-shadow: rgb(var(--ais-accent-rgb, 139 105 20) / 0.18); } /* ===== orders/art_consultation.html — MostFamousPaintings brand colours ===== */ /* Near-black ink · antique gold accent · warm ivory/sand surfaces */ /* ===== /orders/art_consultation.html — MostFamousPaintings ===== */ /* ===== start_selling_* step-image shadow tint — MFP · antique gold (on dark) ===== */ /* ===== viewcart — cart state tokens (MFP) ===== */ :root { --cart-placeholder-bg: var(--mfp-sand-2, #EDE7D9); --cart-placeholder-border: var(--mfp-rule, rgba(28,26,23,.12)); --cart-placeholder-icon: var(--mfp-ink-3, #8A8273); --cart-alert-warning-text: #6E5310; --cart-alert-warning-bg: #FBF3DC; --cart-alert-warning-border: #E4C873; --cart-alert-warning-accent: var(--mfp-gold, #8B6914); --cart-surface: var(--mfp-sand, #F5F1E8); --cart-surface-border: var(--mfp-sand-3, #DDD5C0); --cart-inset: var(--mfp-sand-2, #EDE7D9); --cart-icon-bg: #E2DAC4; --cart-summary-ink: var(--mfp-ink, #1C1A17); --cart-summary-ink-2: var(--mfp-ink-2, #4A4438); --cart-summary-accent: var(--mfp-gold, #8B6914); --cart-th-bg: var(--mfp-sand-3, #DDD5C0); --cart-th-color: var(--mfp-ink, #1C1A17); } /* ===== collectible sell/edit — image upload + sales channels (restyle8) ===== */ @keyframes r8spin-mfp { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} } /* ===== orders/checkout ===== */ /* ===== Art Appraisal (body.art-appraisal-page) — MFP ===== */ /* 1. Hero caption (light over dark video) */ /* 2. Intro band */ /* 3. Vertical connector */ /* 4. Step pill */ /* 5. Step headings + content */ /* 6. Step image shadow (token) */ /* 7. Table */ /* 8. Form */ /* step chip: ink chip + gold (was warm-brown #3E342A bg leak) */ /* Submit CTA — brand gold (was global warm-brown #875D2A) */ /* 9. Plan dropdown surfaces */ /* ===== start_selling_* (body.start-selling-page) — MFP · MostFamousPaintings ===== */ /* --- right CTA card "Start selling today" --- */ /* ===== apr-thanks (art project request thank-you) — MFP · MostFamousPaintings ===== */ /* Section vertical rhythm */ /* Card surface — overrides global-custom .col-md-6 .card cream defaults (0,2,0; wins by load order) */ /* Intro card: centered surface with slightly warmer bg */ /* Steps card: parchment tone to visually pair with intro */ /* Card body padding */ /* Intro card body: centered */ /* Card title — overrides global-custom .col-md-6 .card .card-title (0,3,0; wins by load order) */ /* Intro card title: centered */ /* Before the intro title: a gilded decorative rule */ /* Body copy */ /* Steps list — remove default bullets and reset spacing */ /* Each step item — gilded counter via CSS counter */ /* Contact prompt */ /* Contact link — overrides global-custom .text-muted a (0,2,0; wins by load order) */ /* ===== Artwork Not Found Page ===== */ /* Page wrapper — canvas background matching gallery-wall neutral */ /* Breadcrumb breadcrumb-navigation-list */ /* Card surface — ivory paper on parchment base, squared museum aesthetic */ /* Decorative rule above heading — gilded accent line */ /* Heading — Baskervville SC (MFP title font), museum/gallery weight */ /* Body text */ /* Primary CTA button — ink background, ivory text, gold on hover */ /* Secondary button — outlined, soft border, gold on hover */ /* Responsive — compress padding on small screens */ @media (max-width: 576px) { } /* ===================================================== MFP — Artwork buy / reproduction page (artwork_buy_ArtistReproduction) Structure in global-custom; brand colours/identity here. Scoped to .reproduction_main_page. Museum/masterpiece identity: sand/ivory surfaces, warm ink, gold accent, Cormorant Garamond display + Inter body. Mirrors ADC reference block. ===================================================== */ /* Academic block — same horizontal width as reproduction_section */ /* Custom width/height fields — sand tint */ /* ---- Action bar + cross-channel links ---- */ /* Monochrome icons — neutral warm ink */ /* ---- Metadata chips ---- */ /* ---- PDP titles — serif display ---- */ /* ---- Accordions — sand band on full panel ---- */ /* Configurator tabs + radios */ /* CTA buttons */ /* ---- Academic / story block ---- */ /* Unified section headings */ /* Quick Facts cards */ /* ===== MFP — artist_detail.html — artistPage_Slider_section (corpus/popular/medium sliders) ===== */ /* Background — warm sandy band matching MFP page surface */ /* view_all_art tag links — documentary serif style */ /* Image hover: 3D tilt only on image, not full card */ /* ===== END MFP — artist_detail.html artistPage_Slider_section ===== */ /* Table of Contents — white card surface */ /* Collections band */ /* Optional extras */ /* Read more — gold text CTA */ /* 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 band */ /* Buy page story row — shared heading box (beats global .art_heading) */ /* Price spans — gold accent */ /* Order summary — sand surface */ /* Size / frame selectors — brand surface + border */ /* Historicle / academic typography (pre-existing MFP block uses .historicle_box) */ /* ===== customers_reviews — MFP brand tokens (structure lives in global-custom) ===== */ /* ===== wheel-of-affinities (similar artworks study plate) ===== MFP identity: ivory plate, museum-gold frames and accent, Cormorant Garamond captions, sand card. 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 → MFP museum gold #8B6914 */ /* ===== Catalog hover panel — align snippet + buy with the card body text ===== Card padding is reset globally; match __body 14px inset. */ /* ===== MFP — artworksimilarslider (artwork_similar_slider_section.html) ===== */ /* Artist name kicker hover color */ /* Artwork title link hover color */ /* ===== END MFP — artworksimilarslider ===== */ /* ============================================================ MFP HOMEPAGE — 3 promo sections (2026-06-17) 02 Oversized Type · 01 Mosaic · 03 Style Strips ============================================================ */ /* ---------- 02 — Oversized Type ---------- */ @media (max-width: 1080px) { } @media (max-width: 640px) { } /* ---------- 01 — Mosaic ---------- */ @keyframes mfp-mosaic-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes mfp-mosaic-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } @media (max-width: 640px) { } /* ---------- 03 — Style Strips ---------- */ @media (max-width: 768px) { } /* ===== END MFP — promo sections ===== */ /* ===== error_404.html + error_general.html — MostFamousPaintings ===== */ /* Tokens: --lc #c8a96e (antique gold) --mfp-accent #8B6914 --mfp-ink #1A1814 --mfp-ink-2 #4A4438 --font-body Inter sans */ /* ===== /error_404.html + error_general.html — MostFamousPaintings ===== */ /* ===== Native Stripe checkout + payment received — MFP brand tokens ===== */ /* ===== artwork_preview_in_interior_room — MostFamousPaintings tokens (structure in global-custom) ===== */ /* ===== artwork_buy_ProductAuction — auction tokens ===== */ :root { --auction-accent: var(--mfp-gold, #8B6914); --auction-accent-dark: var(--mfp-ink, #1A1814); --auction-accent-text: #ffffff; --auction-ink: var(--mfp-ink, #1A1814); --auction-ink-mute: var(--mfp-ink-3, #8A8273); } /* ===== /artwork_buy_ProductAuction ===== */ /* ===================================================== Page side margins on non-large windows Below the large (xl) breakpoint — e.g. snapped quarter (1/4) and half (2/4) windows — Bootstrap caps .container at a fixed max-width (540/720/960px), leaving very wide empty side margins. We want the page content to use almost the full width with only a small gutter at those sizes. Scoped to in-page
content so header/top-bar/footer containers are unaffected. ===================================================== */ @media (max-width: 1199.98px) { main .container, main .container-sm, main .container-md, main .container-lg, main .container-xl { max-width: 100%; padding-left: 16px; padding-right: 16px; } } /* ===================================================== Dashboard feature spotlight — MostFamousPaintings tokens (museum sand/ivory + gold accent, 6px corners) ===================================================== */