/* ===================================================== 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 — 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; transition: color .25s; } /* `color` split into `@layer important-pins` (declared before Bootstrap's `vendor` layer in vendor-layers.css): these icons carry Bootstrap's `.text-light` utility, which is itself `!important` — per the @layer + `!important` reversal rule, an unlayered `!important` can no longer beat it on specificity alone once Bootstrap is layered. */ @layer important-pins { .messaging_links a { color: rgba(253,250,244,.50) !important; } .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; } } /* ===================================================== 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{ 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{ 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; } /* 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; } @media (max-width: 767.98px) { .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; border:0 !important; height:100%; } aside::-webkit-scrollbar { width: 8px; } aside::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } aside::-webkit-scrollbar-thumb { background: var(--mfp-gold, #8B6914); border-radius: 10px; } aside::-webkit-scrollbar-thumb:hover { background: var(--mfp-gold-lt, #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-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); } .favorite_img_section { display: flex; flex-wrap: wrap; } .favorite_img_section:nth-child(-n+5) { border-top: 1px solid var(--mfp-sand-3, #DDD5C0); } .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; } 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%; } .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%; } /*message_us form css*/ textarea.form-control:focus { background-color:#FFFFFF; } /* 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; } @media (min-width: 768px) { .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; } .profile_name{ font-size: 15px;} 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 { display: block; }.header_box {margin-left:0px;padding: 10px 20px;position: fixed; top: 0; left: 0;width: 100%;z-index: 999;}p.user_title_text {font-size: 12px;} .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;} } /* Tablet Portrait to Tablet Landscape */ @media (min-width: 768px) and (max-width: 1023px) { /* Tablet styles */ } /* 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; } } @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) .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 (var(--mfp-gold, #8B6914)), ink var(--mfp-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; } /* ===== orders/art_consultation.html — step image offset shadow ===== */ /* MostFamousPaintings: muted antique-gold wash of the brand accent (var(--mfp-gold, #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)} } /* ---------- 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); } } /* ===== END MFP — promo sections ===== */ /* ===== error_404.html + error_general.html — MostFamousPaintings ===== */ /* Tokens: --lc var(--lc, #c8a96e) (antique gold) --mfp-accent var(--mfp-gold, #8B6914) --mfp-ink var(--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) ===================================================== */