/* ===================================================== FONTS — TI (TopImpressionists) DM Mono loaded via Google Fonts import; Manrope, Italiana, Cormorant Garamond via @font-face below. ===================================================== */ @import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap"); /* latin-ext */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/manrope/manrope-w400-normal-latin-ext.e19a7f36dd91.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: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/manrope/manrope-w400-normal-latin.1589a53d0b0e.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: "Manrope"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("../fonts/manrope/manrope-w600-700-normal-latin-ext.6d36d5bdedfa.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: "Manrope"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("../fonts/manrope/manrope-w600-700-normal-latin.938c6e8019b6.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 */ @font-face { font-family: "Italiana"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/italiana/italiana-w400-normal-latin.dca43a8eff26.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; } /* ===================================================== TI — Link hover: dual overline + underline sweep ===================================================== */ a { position: relative; padding: 3px 0; } a::before, a::after { content: ""; position: absolute; left: 50%; width: 0; height: 1px; background: var(--lc); transform: translateX(-50%); transition: width 0.38s cubic-bezier(0.22, 1, 0.36, 1); } a::before { top: 0; } /* overline */ a::after { bottom: 0; } /* underline */ a:hover::before, a:hover::after { width: 100%; } a:hover { color: var(--lc); } a:visited { color: var(--lv); } /* ===================================================== TI — Image hover: zoom retreat (dark background reveal) ===================================================== */ /* Dark background shows through as the image shrinks */ /* Base transition */ .swiper-slide .artist_slid_box a img, img.mouseover_effect_images, img.mouseover_image_effect { transition: transform 0.6s ease, opacity 0.6s ease; } /* Hover state — zoom retreat */ .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: scale(0.95); opacity: 0.9; } /* ===================================================== TI — Slider card title: multi-line hover-frame fix inline-block gives the a single rectangular bounding box so the dual overline/underline ::before/::after pseudo-elements correctly frame 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; } /* TopImpressionists.com — site-specific CSS overrides */ /* Loaded by base.html for dns_domain_base == 'topimpressionists' */ /* ===================================================== TI — Header & footer logo (TI-LOGO.png) ===================================================== */ /* ===================================================== TI — Override container width for all content ===================================================== */ .container { --bs-gutter-x: 2rem; max-width: 1380px; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-inline: auto; } main { overflow: clip; } /* ===================================================== TI — Extended design tokens (Impressionist palette) ===================================================== */ :root { --lc: #a0742a; /* link / hover accent — impressionist gold */ --lv: #6b4c1a; /* visited link colour */ /* ── Canonical --ti-* tokens ── */ --ti-canvas: #f4eee2; --ti-paper: #fbf7ee; --ti-linen: #ede5d2; --ti-gesso: #f9f4e8; --ti-shadow-c: #e6dec8; --ti-ink: #2a2438; --ti-ink-soft: #4a4358; --ti-ink-mute: #6c647a; --ti-ink-faint: #9a93a4; --ti-ink-vapor: #bdb6c3; --ti-plein: #d89a78; --ti-ochre: #b78b4a; --ti-monet: #6b8eb3; --ti-wisteria: #9a8bb8; --ti-lichen: #8fa280; --ti-rose: #c8a2a2; --ti-rule: #c7bea8; --ti-rule-soft: #ddd4be; --font-title-accent: "Manrope", -apple-system, sans-serif; --font-title: "Italiana", "Cormorant Garamond", serif; --font-body: "Cormorant Garamond", Garamond, serif; --ti-f-display: var(--font-title); --ti-f-edit: var(--font-body); /* ── Unprefixed short-name aliases (match design spec) ── */ --canvas: var(--ti-canvas); --paper: var(--ti-paper); --linen: var(--ti-linen); --gesso: var(--ti-gesso); --shadow: var(--ti-shadow-c); --ink: var(--ti-ink); --ink-soft: var(--ti-ink-soft); --ink-mute: var(--ti-ink-mute); --ink-faint: var(--ti-ink-faint); --ink-vapor: var(--ti-ink-vapor); --monet: var(--ti-monet); --wisteria: var(--ti-wisteria); --plein: var(--ti-plein); --lichen: var(--ti-lichen); --rose: var(--ti-rose); --ochre: var(--ti-ochre); --rule: var(--ti-rule); --rule-soft: var(--ti-rule-soft); /* ── Font stack shorthand (design spec names) ── */ --f-display: var(--font-title); --f-edit: var(--font-body); --f-ui: var(--font-title-accent); --f-mono: "DM Mono", ui-monospace, monospace; --max-w: 1380px; --gutter: clamp(20px, 4vw, 64px); /* ── Shadow tokens ── */ --ti-shadow-sm: 0 4px 20px -8px rgba(42, 36, 56, 0.1); --ti-shadow-md: 0 8px 32px -12px rgba(42, 36, 56, 0.12); --ti-shadow-lg: 0 10px 30px -8px rgba(42, 36, 56, 0.18); --ti-shadow-xl: 0 16px 40px -14px rgba(42, 36, 56, 0.2); --ti-shadow-frame: 0 30px 60px -20px rgba(42, 36, 56, 0.18); --ti-shadow-deep: 0 30px 70px -25px rgba(42, 36, 56, 0.25); --ti-shadow-hover-sm: 0 6px 18px -4px rgba(42, 36, 56, 0.16); --ti-shadow-hover-md: 0 6px 20px -6px rgba(42, 36, 56, 0.18); /* unprefixed aliases */ --shadow-sm: var(--ti-shadow-sm); --shadow-md: var(--ti-shadow-md); --shadow-lg: var(--ti-shadow-lg); --shadow-xl: var(--ti-shadow-xl); --shadow-frame: var(--ti-shadow-frame); --shadow-deep: var(--ti-shadow-deep); --shadow-hover-sm: var(--ti-shadow-hover-sm); --shadow-hover-md: var(--ti-shadow-hover-md); /* Layout tokens — consumed by global-style-V2.1.css via var(--site-*, fallback) */ --site-bg: var(--ti-canvas); --site-header-bg: var(--ti-canvas); --site-nav-bg: var(--ti-canvas); --site-nav-border: var(--ti-rule); --site-footer-bg: var(--ti-ink); } /* ===================================================== TI — Shared eyebrow / kicker (.ek) ===================================================== */ .ek { font-family: var(--f-ui); font-size: 10px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ochre); display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .ek::before { content: ""; width: 32px; height: 1px; background: var(--ochre); flex-shrink: 0; d: var(--bs-gutter-x); } .ek .num { font-family: var(--f-mono); color: var(--ink-faint); font-weight: 500; } /* ===================================================== TI — UI Kit production components Global button/chip variants; hero-scoped rules override with higher specificity. ===================================================== */ /* Suppress dual-line underline sweep on button/chip anchors */ a.btn-primary::before, a.btn-primary::after, a.btn-ghost::before, a.btn-ghost::after, a.btn-accent::before, a.btn-accent::after { content: none; } .btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; border-radius: 2px; transition: all .25s; text-decoration: none; background: var(--ink); color: var(--gesso); } .btn-primary:hover { background: var(--ink-soft); color: var(--gesso); transform: translateY(-1px); } .btn-primary svg { transition: transform .25s; } .btn-primary:hover svg { transform: translateX(3px); } .btn-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; border-radius: 2px; transition: all .25s; text-decoration: none; border: .5px solid var(--ink-soft); color: var(--ink-soft); background: none; } .btn-ghost:hover { background: var(--ink); color: var(--gesso); border-color: var(--ink); } .btn-accent { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; border-radius: 2px; transition: all .25s; text-decoration: none; background: var(--plein); color: var(--ink); } .btn-accent:hover { filter: brightness(1.06); } .link-cta { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; border-bottom: .5px solid var(--ink); padding-bottom: 3px; transition: gap .25s, color .25s, border-color .25s; text-decoration: none; } .link-cta:hover { gap: 14px; color: var(--plein); border-color: var(--plein); } /* ===================================================== TI — Body: warm canvas background with painterly gradients ===================================================== */ body, main { background-color: var(--ti-canvas) !important; background-image: radial-gradient( circle at 12% 18%, rgba(216, 154, 120, 0.06) 0, transparent 38% ), radial-gradient( circle at 88% 72%, rgba(107, 142, 179, 0.05) 0, transparent 44% ), radial-gradient( circle at 30% 90%, rgba(154, 139, 184, 0.04) 0, transparent 48% ); background-attachment: fixed; } /* ===================================================== TI — Page container tweaks ===================================================== */ /* homepage-impressionist-widgets is the test-page variant class */ .homepage-impressionist-widgets { background: transparent !important; } /* Bootstrap overrides → impressionist squared look */ .homepage-impressionist-widgets .rounded-3 { border-radius: 2px !important; } .homepage-impressionist-widgets .border { border: 0.5px solid var(--rule) !important; } .homepage-impressionist-widgets hr { border-color: var(--rule) !important; opacity: 1 !important; border-width: 0.5px !important; } /* ===================================================== TI — Widget base class overrides (wa-* classes) ===================================================== */ .w-overlay-bottom { color: var(--gesso); pointer-events: none; font-family: var(--f-ui); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; padding: 0.5rem 0.6rem; } /* Editorial/large heading */ /* Body copy — Cormorant Garamond */ /* Primary button — ink dark / gesso text */ /* ===================================================== TI — Movement masterclass slider widget ===================================================== */ /* Portrait: framed with paper surround + ruled border */ /* Inner-frame overlay using ::before — creates the mat effect on top of the image */ /* Keep artist name overlay above the frame */ /* Heading: large display serif */ /* CTA link: understated uppercase with underline sweep */ /* Artwork slide image: inner-frame effect */ .mpl-slide-img-wrap { outline: 4px solid var(--ti-paper); outline-offset: -5px; background: var(--ti-shadow-c); border: 0.5px solid var(--ti-rule); overflow: hidden; } /* ===================================================== TI — Most popular large slider widget ===================================================== */ /* MPL slide image: inner-frame */ /* ===================================================== TI — Artwork of the day widget ===================================================== */ /* ===================================================== TI — Swiper artwork slides: card styling ===================================================== */ .artist_slid_box { background: transparent !important; } /* Title area below each artwork */ .view_all_art { padding-top: 8px !important; background: transparent !important; } .view_all_art a { font-family: var(--ti-f-edit) !important; font-style: italic !important; font-size: 13px !important; color: var(--ti-ink-soft) !important; line-height: 1.35 !important; } .view_all_art a:hover { color: var(--ti-plein) !important; } /* Artist name below artwork */ .vincent_color { font-family: var(--font-title-accent) !important; font-size: 10px !important; letter-spacing: 0.06em !important; color: var(--ti-ink-faint) !important; font-weight: 500 !important; text-transform: uppercase !important; margin-bottom: 3px !important; } /* ===================================================== TI — Small translated field widget (tag/category links) ===================================================== */ /* ===================================================== TI — Identify masterpiece / quiz widgets ===================================================== */ /* ===================================================== TI — Curated choice widget ===================================================== */ [class^="curated-"] { background: var(--ti-paper) !important; border-color: var(--ti-rule) !important; border-radius: 2px !important; } /* ===================================================== TI — Museum widget ===================================================== */ [class^="widget-museum"] { background: var(--ti-linen) !important; border-color: var(--ti-rule) !important; border-radius: 2px !important; } /* ===================================================== TI — Overlay labels on artwork slides (movement name badge) ===================================================== */ .mpl-slide-group-label { background: rgba(42, 36, 56, 0.6) !important; font-family: var(--font-title-accent) !important; font-size: 9px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; font-weight: 600 !important; border-radius: 0 !important; padding: 0.28em 0.7em !important; } /* ===================================================== TI — Swiper navigation: warm accent color ===================================================== */ .swiper-button-next::after, .swiper-button-prev::after { color: var(--ti-ochre) !important; } /* ===================================================== TI — Paragraph text: editorial feel ===================================================== */ /* ── Shared card atoms: kicker / body ── */ .w-card__kicker { font-family: var(--f-ui); font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ochre); margin-bottom: 12px; } .w-card__body { font-family: var(--f-edit); font-size: 15px; line-height: 1.6; color: var(--ink-soft); } .stf-label { font-family: var(--f-ui); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.35rem 0.45rem; text-align: center; } /* ── Museum Masterpieces card ── */ .museum-card { background: var(--gesso); border: 0.5px solid var(--rule); padding: 22px; } .museum-title { font-family: var(--f-display); font-size: clamp(18px, 2vw, 26px); color: var(--ink); margin-bottom: 6px; font-weight: 400; } .museum-subtitle { font-family: var(--f-edit); font-size: 14px; color: var(--plein); font-style: italic; margin-bottom: 14px; } .museum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; } .museum-cell { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--shadow); } .museum-cta { font-family: var(--f-ui); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--plein); border-bottom: 0.5px solid var(--plein); padding-bottom: 1px; text-decoration: none; display: inline-block; } .museum-cta:hover { color: var(--ochre); border-color: var(--ochre); } /* ===================================================== TI — Search card artwork title/artist (list pages bleed-in) ===================================================== */ /* ===================================================== TI — Footer: dark ink (matching reference) ===================================================== */ .footer-widget, footer { border-top: 0.5px solid var(--ti-rule) !important; } /* ═══════════════════════════════════════════════════════ TI — ANNOUNCEMENT BAR (.ti-ann) ═══════════════════════════════════════════════════════ */ /* Suppress global dual overline/underline sweep inside the ann bar */ /* utility links on left / selectors on right */ .ti-ann-center { flex: 1; text-align: center; } /* ═══════════════════════════════════════════════════════ TI — DROPDOWN MENUS (.top_dropdown_*) ═══════════════════════════════════════════════════════ */ /* ── Dropdown menu list (global) ── */ /* ── List items ── */ /* ── Item buttons ── */ /* ── Active / selected item ── */ /* ── Flag icons inside dropdown items ── */ /* ── Scrollbar ── */ /* ── Announcement bar: menu list right-aligned ── */ /* ═══════════════════════════════════════════════════════ TI — STICKY HEADER (.header_container override) ═══════════════════════════════════════════════════════ */ /* Remove the old .main-header inner border — it now sits inside the sticky container so the only visible border should be at the container's edge */ /* The old broad `footer` selector adds an unwanted border-top to .ti-foot; neutralise it here so only the chip-subnav hairline is visible */ /* ═══════════════════════════════════════════════════════ TI — LOGO (.ti-logo) ═══════════════════════════════════════════════════════ */ .ti-logo { font-family: var(--f-display); font-size: 28px; line-height: 1; color: var(--ink); letter-spacing: 0.005em; display: flex; align-items: baseline; gap: 2px; flex-shrink: 0; text-decoration: none; } .ti-logo:hover { color: var(--ink); } /* suppress global hover lines on logo */ .ti-logo::before, .ti-logo::after { content: none !important; } .ti-logo-block { display: flex; flex-direction: column; } .ti-dot { width: 6px; height: 6px; background: var(--plein); border-radius: 50%; display: inline-block; transform: translateY(-4px); margin: 0 1px; } .ti-sub { display: block; font-family: var(--f-ui); font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-mute); margin-top: 3px; font-weight: 500; line-height: 1; } /* ═══════════════════════════════════════════════════════ TI — SEARCH BAR (.ti-search) ═══════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ TI — CART BUTTON (.ti-cart-btn) ═══════════════════════════════════════════════════════ */ .ti-cart-btn { display: flex !important; align-items: center !important; gap: 8px !important; border: 0.5px solid var(--rule) !important; padding: 8px 14px !important; border-radius: 2px !important; font-family: var(--f-ui) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--ink-soft) !important; text-decoration: none !important; transition: border-color 0.2s, color 0.2s !important; white-space: nowrap; } .ti-cart-btn:hover { border-color: var(--ink-soft) !important; color: var(--ink) !important; } .ti-cart-cnt { font-family: var(--f-mono) !important; font-size: 10px !important; background: var(--ink) !important; color: var(--paper) !important; padding: 1px 6px !important; border-radius: 8px !important; letter-spacing: 0.04em !important; display: inline-block !important; } /* ═══════════════════════════════════════════════════════ TI — HEADER ACTION ICONS (.header-actions / .icon-btn) Vertical icon-buttons (icon + label) with count badges: Wishlist · Account (dropdown) · Cart · mobile toggle. ═══════════════════════════════════════════════════════ */ /* Account auth visual (guest icon ⇄ logged-in initial overlay) */ .aps-user-initial--compact { font-size: 10px !important; } .aps-header-auth--hidden { display: none !important; } /* ── Account dropdown panel (.dd-light / .dd-menu) ── */ /* Guest ⇄ authenticated menu blocks (toggled by header.js via the initials cookie) */ /* ═══════════════════════════════════════════════════════ TI — UTILITY-BAR NOTE (.ti-util-note) ═══════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ TI — SCROLL-CONDENSE (body.scrolled) Utility bar + nav fold away, logo shrinks, header gains a drop shadow. ═══════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ TI — MAIN NAV (.navbar override) ═══════════════════════════════════════════════════════ */ /* Neutralise global hit-area negative margins — they inflate flex width and wrap titles */ /* Animated underline — sweeps in on hover / active (replaces the active-only hairline) */ /* suppress global before sweep on nav items */ /* Caret on dropdown parents (rotates open on hover) */ /* Soft page blur while a nav mega-menu is open */ main.blurred { filter: blur(3px); opacity: 0.88; transition: filter 0.25s ease-in-out, opacity 0.25s ease-in-out; } /* Editorial serif links inside the mega-menu dropdown */ /* ═══════════════════════════════════════════════════════ TI — CHIP SUB-NAV (.ti-subnav) ═══════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ TI — FOOTER (.ti-foot) ═══════════════════════════════════════════════════════ */ /* Brand column */ /* Social icons */ /* Messaging links */ /* Footer link columns */ /* suppress global hover lines in footer cols */ /* ═══════════════════════════════════════════════════════ TI — BOTTOM BAR (.ti-foot-bot) ═══════════════════════════════════════════════════════ */ /* Bottom bar outer wrapper */ /* ═══════════════════════════════════════════════════════ TI — MOBILE MENU ═══════════════════════════════════════════════════════ */ /* dropdown inside side nav */ /* suppress global link hover lines inside side nav */ /* ===================================================== TI — Hero, Atelier, Process (test homepage editorial) ===================================================== */ .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 0.95fr 1.15fr; gap: 80px; align-items: center; max-width: var(--max-w); margin-inline: auto; } .hero-meta { display: flex; gap: 36px; margin-top: 48px; padding-top: 28px; border-top: 0.5px solid var(--rule); max-width: 480px; } .hero-meta .m { display: flex; flex-direction: column; gap: 4px; } .hero-meta .v { font-family: var(--f-display); font-size: 28px; color: var(--ink); line-height: 1; } .hero-meta .k { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; } .section { padding-block: 100px; } .section-header { font-family: var(--f-display); font-size: clamp(40px, 5vw, 68px); line-height: 1; color: var(--ink); font-weight: 400; letter-spacing: -0.005em; } .section-header em { font-family: var(--f-edit); font-style: italic; } /* ===================================================== TI — RESPONSIVE All responsive overrides ===================================================== */ /* ── ≤1100px: two-column collapses ── */ @media (max-width: 1100px) { .hero-inner { grid-template-columns: 1fr; gap: 60px; } } /* ── ≤991px: tablet / mobile header ── */ @media (max-width: 991px) { } /* ── ≤700px: phone ── */ @media (max-width: 700px) { .section { padding-block: 56px; } .hero-inner { grid-template-columns: 1fr; gap: 48px; } /* header compact */ /* side nav */ /* ti-search inside side nav */ } /* === HOMEPAGETEST migrated inline CSS === */ /* ── widget-imp10: 10 Impressionist artists ── */ /* --- block --- */ /* ── widget-artist-otd5: Artist of the Day ── */ /* --- block --- */ /* ── widget-article-kw: Impressionism articles ── */ /* --- block --- */ /* ── widget-rts-slider: Ready to Ship ── */ .artist_slid_box .vincent_color { margin-top: 0; } .artist_slid_box .view_all_art { margin-top: 0; } /* --- block --- */ /* ── widget-museum-6p: Museum Masterpieces ── */ /* --- block --- */ /* ── Standalone section-hd headers (movements nav + spotlight) ── */ .ti-sh { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 32px; } .ti-sh .section-hd-left { max-width: 640px; } .ti-sh .section-header em { color: var(--ink-soft); } /* ── Artist spotlight slider — impressionist restyle ── */ /* mat inner line on portrait */ /* ── widget_artist_spotlight_slider_impressionism_12_ti ── */ /* movement chip scroll targets */ /* === 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; } } /* === HOMEPAGETEST — missing rules restored from backup (topimpressionists) === */ /* ===================================================== */ /* 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): TI — canvas page, violet-ink sidebar, impressionist ochre accent */ /* ===================================================== */ /* Profile: sidebar shell only — do not use * reset (zeros .sidebar_profile_section / link padding) */ .header_box { background: var(--ti-paper, #fbf7ee); padding: 15px 20px; box-shadow: 0px 0px 10px 0px rgb(42 36 56 / 10%); -webkit-box-shadow: 0px 0px 10px 0px rgb(42 36 56 / 10%); -moz-box-shadow: 0px 0px 10px 0px rgb(42 36 56 / 10%); margin-left: 320px; } h3.user_heading_text { color: var(--ti-ink, #2a2438); font-weight: 400; font-size: 20px; line-height: 30px; font-family: var(--font-title); margin-bottom: 0px; } p.user_title_text { color: var(--ti-ink, #2a2438); font-size: 14px; font-weight: 400; opacity: 0.6; line-height: 22px; margin-bottom: 0px; } .sidebar_box { background: var(--ti-ink, #2a2438); 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: #b78b4a; border-radius: 10px; } aside::-webkit-scrollbar-thumb:hover { background: #a0742a; } aside { scrollbar-width: thin; scrollbar-color: var(--ti-rule-soft, #ddd4be) var(--ti-ink, #2a2438); } .profile_name { color: var(--ti-gesso, #f9f4e8); font-weight: 500; font-size: 18px; line-height: 26px; } /* .sidebar_menu_link li.active a svg { color: var(--ti-ochre, #b78b4a) !important; } */ /* .sidebar_menu_link li:hover a svg, */ .favorite_img_card { border-right: 1px solid var(--ti-rule-soft, #ddd4be); border-bottom: 1px solid var(--ti-rule-soft, #ddd4be); 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(--ti-ochre, #b78b4a); } .fav-artist h2 a{ color: var(--ti-ochre, #b78b4a); } .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(--ti-ink, #2a2438); margin: 6px 0px 11px; min-height: 38px; } .fav-title a{ color: var(--ti-ink, #2a2438); } .button-dash { width: 100%; border: 1px solid var(--ti-ochre); border-radius: 0; padding: 11px 15px; color: var(--ti-ochre); 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(--ti-rule-soft, #ddd4be); } .main_gap { padding: 16px; } .top_order_section { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; } .order_count { color: var(--ti-ink, #2a2438); 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(--ti-rule-soft, #ddd4be); } .date_amount h6 { color: var(--ti-ink, #2a2438); font-size: 14px; opacity: 0.6; font-weight: 400; text-transform: uppercase; margin-bottom: 0px; } .date_amount p { color: var(--ti-ink, #2a2438); 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(42 36 56 / 10%); -webkit-box-shadow: 0px 0px 10px 0px rgb(42 36 56 / 10%); -moz-box-shadow: 0px 0px 10px 0px rgb(42 36 56 / 10%); background: var(--ti-paper, #fbf7ee); } .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(--ti-rule-soft, #ddd4be) !important; } table thead th { background: var(--ti-linen, #ede5d2) !important; color: var(--ti-ink, #2a2438) !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: var(--ti-paper, #fbf7ee) !important; color: var(--ti-ink, #2a2438) !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:var(--ti-paper, #fbf7ee); } /* 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(--ti-ink, #2a2438); } .text-center.suceesfulmsg_textt p { font-size: 16px; line-height: 24px; font-weight: 400; font-family: var(--font-body); color: var(--ti-ink, #2a2438); } .suceesfulmsg_textt button { padding: 10px 120px; border: none; background: var(--ti-ochre); font-size: 16px; line-height: 24px; font-family: var(--font-body); font-weight: 500; color: var(--ti-gesso, #f9f4e8); text-transform: uppercase; } /* Sidebar Default */ aside { width: 100%; background: var(--ti-linen, #ede5d2); height: 100%; overflow-y: auto; overflow-x: hidden; transition: transform 0.3s ease-in-out; z-index: 999; } /* Toggle Button */ .sidebar-toggle { background: var(--ti-ochre, #b78b4a); 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 */ /* ═══════════════════════════════════════ TopImpressionists — Infinite Scroll (/art/infinite_scroll/) Scoped via .ais-hero-banner; brand tokens only. ═══════════════════════════════════════ */ body:has(.ais-hero-banner) { --ais-page: var(--ti-canvas); --ais-surface: var(--ti-gesso); --ais-surface-2: var(--ti-paper); --ais-border: var(--ti-rule); --ais-divider: var(--ti-rule-soft); --ais-frame-bg: var(--ti-shadow-c); --ais-ink: var(--ti-ink); --ais-ink-2: var(--ti-ink-soft); --ais-ink-3: var(--ti-ink-mute); --ais-faint: var(--ti-ink-faint); --ais-accent: var(--ti-plein); --ais-accent-dark: var(--ti-ochre); --ais-label-accent: var(--ti-ochre); --ais-on-accent: var(--ti-ink); --ais-shadow-rgb: 42 36 56; --ais-accent-rgb: 216 154 120; --ais-f-heading: var(--ti-f-display); --ais-f-title: var(--ti-f-edit); --ais-f-body: var(--ti-f-edit); --ais-f-label: var(--f-ui); --ais-f-mono: var(--f-mono); --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: ti-ais-reveal-up .9s cubic-bezier(.16, 1, .3, 1) forwards; } @keyframes ti-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: ti-ais-draw-line 1.1s 1s cubic-bezier(.16, 1, .3, 1) forwards; } @keyframes ti-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: ti-ais-pin-in .8s cubic-bezier(.16, 1, .3, 1) both; } @keyframes ti-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: ti-ais-breathe 14s ease-in-out infinite alternate; } @keyframes ti-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: ti-ais-fact-in .5s cubic-bezier(.16, 1, .3, 1) forwards; } @keyframes ti-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: ti-ais-heart-pop .45s cubic-bezier(.34, 1.56, .64, 1); } @keyframes ti-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: ti-ais-shine .55s ease-out forwards; } @keyframes ti-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: ti-ais-feed-out .35s ease forwards; } @keyframes ti-ais-feed-out { to { opacity: 0; transform: translateY(10px); } } body:has(.ais-hero-banner) .feed.swap-in { animation: ti-ais-feed-in .5s cubic-bezier(.2, .8, .2, 1); } @keyframes ti-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 — TI (impressionist/ochre) ===== */ .artinfo_top h4 { color: var(--ti-ink, #2a2438); font-family: var(--font-title); } .art_info_details { background: var(--ti-linen, #ede5d2); border-color: var(--ti-rule, #c7bea8); box-shadow: var(--ti-shadow-md, 0 8px 32px -12px rgba(42,36,56,0.12)); } .art_info_inner { background: var(--ti-gesso, #f9f4e8); } .art_info_inner h4 { color: var(--ti-ochre, #b78b4a); text-transform: none; } .art_info_inner p { color: var(--ti-ink-soft, #4a4358); } .artwork-info-meta-link { color: var(--ti-ink-soft, #4a4358); } .artwork-info-meta-link:hover { color: var(--ti-ochre, #b78b4a); } /* ═══════════════════════════════════════════════════════════════════ TI — TopImpressionists — 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) — TI TopImpressionists Impressionist pastels, lavender ink, ochre CTA, Italiana serif. =================================================================== */ /* ===================================================== PrintReproduction & DigitalImage buy pages — article (historicle_box) typography Structure lives in global-custom-V2.1.css; brand ink/links here. ===================================================== */ /* ===== Artwork catalog list card — TopImpressionists (UI Kit aligned) ===== */ /* Scope: .search_sec.catalog-list-page and .search_sec.artwork-list-page only. Every selector is prefixed with both page wrappers so these rules never bleed onto the ~95 other pages that reuse .search_card. No HTML or class names changed. No new fonts loaded. Tokens used: surfaces — --ti-paper, --ti-gesso, --ti-linen, --ti-shadow-c, --ti-canvas ink — --ti-ink, --ti-ink-soft, --ti-ink-mute, --ti-ink-faint accent — --ti-plein, --ti-ochre rules — --ti-rule, --ti-rule-soft shadows — --ti-shadow-sm, --ti-shadow-hover-md fonts — --font-title (Italiana), --font-body (Cormorant Garamond), --f-ui (Manrope), --f-mono (DM Mono) */ /* ── 1. Card surface ─────────────────────────────────────────────────────── */ /* Remove double-border from Bootstrap column gutter */ /* ── 2. Image wrapper — mat motif (gallery-print inset) ─────────────────── */ /* Inset outline — the UI Kit .work .imgbox mat motif */ /* ── 3. Card body ────────────────────────────────────────────────────────── */ /* ── 4. Artist name — Manrope uppercase label ────────────────────────────── */ /* Year — DM Mono plate number, subdued */ /* ── 5. Artwork title — Italiana display serif ───────────────────────────── */ /* ── 6. Hover-visible overlay panel ─────────────────────────────────────── */ /* Global rules keep display:none by default and flip to display:block */ /* on .search_card:hover — we only style the surface here. */ /* Italic serif snippet */ /* Bottom row — CTA + fav */ /* ── 7. Add-to-cart — primary button (UI Kit .btn-primary) ──────────────── */ /* Price display inside the CTA — Italiana numeral */ /* ── 8. Favourite toggle ─────────────────────────────────────────────────── */ /* ── 9. Responsive — tighten mat padding at narrow viewport ─────────────── */ @media (max-width: 575.98px) { } /* ===== END Artwork catalog list card — TopImpressionists ===== */ /* ============================================================ Article detail page (article_detail.html) — TopImpressionists Overrides the brand-neutral beige structure in global-custom with TI tokens: soft canvas, ochre/gold accent, Italiana titles over Cormorant Garamond body. Scoped under .article_main_page. ============================================================ */ /* 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 — TopImpressionists ===== */ /* ===== TOP 100 PAGES (artists / artworks / museums / articles) ===== */ /* Brand-faithful overrides for TopImpressionists. Structural layout lives in global-custom-V2.1.css; here we only set the --top100-* tokens to the impressionist palette and add visual overrides that win because this file loads after global-custom. No literal hex except when seeding a token. */ /* --- Shared brand tokens for the three component groups --- */ .top100-artist-grid, .top100-artwork-list { --top100-card-bg: var(--ti-gesso); --top100-card-border: var(--ti-rule); --top100-ink: var(--ti-ink); --top100-muted: var(--ti-ink-mute); --top100-accent: var(--ti-plein); --top100-rank-color: rgba(42, 36, 56, 0.06); /* faint impressionist ink wash */ --top100-card-radius: 2px; } /* ============================================================ A) ARTISTS PORTRAIT GRID (/en/ti/artists/top100/) Gesso plate cards, hairline rule, circular portrait, Italiana display name, Cormorant clamped description. Lift on hover. ============================================================ */ .top100-artist-grid .top100-artist-card { background: var(--top100-card-bg); border: .5px solid var(--top100-card-border); border-radius: var(--top100-card-radius); transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease; } .top100-artist-grid .top100-artist-card:hover { transform: translateY(-4px); box-shadow: var(--ti-shadow-lg); border-color: var(--ti-ink-soft); } .top100-artist-grid .top100-artist-card__photo { border: .5px solid var(--top100-card-border); outline: 5px solid var(--ti-paper); outline-offset: -5px; background: var(--ti-shadow-c); filter: saturate(.96); transition: filter .35s ease; } .top100-artist-grid .top100-artist-card:hover .top100-artist-card__photo { filter: saturate(1.04); } .top100-artist-grid .top100-artist-card__name, .top100-artist-grid .top100-artist-card__name a { font-family: var(--f-display); font-weight: 400; letter-spacing: -.005em; color: var(--top100-ink); transition: color .25s ease; } .top100-artist-grid .top100-artist-card__name a:hover { color: var(--top100-accent); } .top100-artist-grid .top100-artist-card__desc { font-family: var(--f-edit); font-style: italic; color: var(--top100-muted); line-height: 1.55; } /* ============================================================ B) ARTWORKS ZIGZAG GALLERY (/en/ti/art/top100/) Giant ink-wash rank numeral in Italiana, gesso hover box with framed mat photo, plein-air accent on revealed meta. ============================================================ */ .top100-artwork-list .top100-artwork-card__rank { font-family: var(--f-display); font-weight: 400; color: var(--top100-rank-color); letter-spacing: -.02em; } .top100-artwork-list .top100-artwork-card__inner { background: var(--top100-card-bg); border: .5px solid var(--top100-card-border); border-radius: var(--top100-card-radius); transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease; } .top100-artwork-list .top100-artwork-card:hover .top100-artwork-card__inner { box-shadow: var(--ti-shadow-frame); border-color: var(--ti-ink-soft); } .top100-artwork-list .top100-artwork-card__photo { background: var(--ti-shadow-c); border: .5px solid var(--top100-card-border); } /* the framed "mat" variant — gesso mat with inset outline, brand motif */ .top100-artwork-list .top100-artwork-card__photo--framed { outline: 6px solid var(--ti-gesso); outline-offset: -7px; box-shadow: var(--ti-shadow-md); } .top100-artwork-list .top100-artwork-card__details { color: var(--top100-ink); } .top100-artwork-list .top100-artwork-card__artist { font-family: var(--f-ui); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--top100-accent); } .top100-artwork-list .top100-artwork-card__year { font-family: var(--f-mono); letter-spacing: .08em; color: var(--ti-ochre); } .top100-artwork-list .top100-artwork-card__title { font-family: var(--f-edit); font-style: italic; color: var(--top100-ink); } .top100-artwork-list .top100-artwork-card__meta { border-top: .5px solid var(--ti-rule-soft); } /* ============================================================ C) MUSEUMS + ARTICLES LISTING (/en/ti/museums|articles/top100/) Reuses .search_card — scope every override under .top100-listing so the bare .search_card shared by 24 other pages is never touched. These cards sit on the white listing surface (--ti-bg scope). ============================================================ */ /* Add-to-cart — brand pill button: ink fill, accent on hover */ /* hover panel: fill full card so VIEW is always reachable, even with no text */ /* ===== END TOP 100 PAGES — TopImpressionists ===== */ /* ===== fts_search — model type badge (TI) ===== */ /* Overlay label on the result thumbnail. Reuses the kit's .chip.on idiom: ink fill + gesso text, Manrope UI caps, wide tracking, 2px radius. Ink is dropped to ~72% alpha so the artwork stays readable beneath. */ /* ===== artwork-catalog-card (catalog list grid card) ===== */ /* TopImpressionists — dedicated, self-contained styling for the catalog list grid card via the long companion classes (BEM). Scoped under .custom_search and appended at end so it wins the cascade over the shared .search_card rules. Brand tokens only — Impressionist palette: surfaces — --ti-paper / --ti-gesso / --ti-linen / --ti-shadow-c ink — --ti-ink / --ti-ink-soft / --ti-ink-mute / --ti-ink-faint accent — --ti-plein (peach) · --ti-ochre (gold) · --ti-rule(-soft) fonts — --font-title (Italiana display) · --font-body (Cormorant Garamond edit) · --f-ui (Manrope) · --f-mono (DM Mono) */ /* ── 1. Card surface ─────────────────────────────────────────────────────── */ /* ── 2. Image wrapper — gallery mat motif (UI Kit .work .imgbox) ─────────── */ /* neutralise the global text-link over/underline pseudo rules on the image anchor */ /* Image — zoom-retreat on hover (brand signature: image shrinks on dark mat) */ /* ── 3. Body — artist + title block ──────────────────────────────────────── */ /* ── 4. Artist — Manrope uppercase label + DM Mono year ──────────────────── */ /* Year — DM Mono plate number, subdued */ /* ── 5. Title — Italiana display serif ───────────────────────────────────── */ /* ── 6. Hover overlay — revealed on card hover ───────────────────────────── */ /* The shared .hover_visible toggling (display none↔block) is handled by */ /* global rules; here we give the overlay the same paper surface as __body. */ /* ── 7. Footer — cart + fav row ──────────────────────────────────────────── */ /* ── 8. Buy button — primary (UI Kit .btn-primary, ink on gesso) ─────────── */ /* Price — Italiana numeral inside the buy button */ /* ── 9. Favourite toggle — hairline chip ─────────────────────────────────── */ /* ── 10. Responsive — tighten mat padding at narrow viewport ─────────────── */ @media (max-width: 575.98px) { } /* ===== END artwork-catalog-card — TopImpressionists ===== */ /* ===== article_list.html — article list cards (article-list-card) ===== */ /* Scope: .article-list-page .article-list-grid .article-list-card* The section element also carries .catalog-list-page / .artwork-list-page, so the shared-class artwork rules above already paint a base. This layer adds the ARTICLE identity (editorial eyebrow, "Read" CTA as PRIMARY button) and wins over the over-specified globals by chaining page + grid + long hooks. Only .article-list-card* / .article-list-grid are targeted here. Tokens reused (no hardcoded hex where a token exists): surfaces — --ti-paper, --ti-gesso, --ti-linen, --ti-shadow-c ink — --ti-ink, --ti-ink-soft, --ti-ink-mute, --ti-ink-faint accent — --ti-plein (plein-air apricot), --ti-ochre (editorial accent) rules — --ti-rule, --ti-rule-soft shadow — --ti-shadow-sm, --ti-shadow-hover-md fonts — --font-title (Italiana), --font-body (Cormorant Garamond), --f-ui (Manrope), --f-mono (DM Mono) !important notes: - __meta eyebrow h2 a / span: global `.search_sec.catalog-list-page .custom_search .search_card .art-artist h2 a` is ~(0,5,2); our (0,4,2) page+grid chain can't out-rank it on weight, so the accent eyebrow + year colours use !important. - __read-btn reuses the .addToCart base; we repaint it as the brand primary button and need !important to beat that base layer + globals. */ /* ── Grid surface (inherits global layout; refine gutter) ─────────────── */ /* ── 1. Card surface — paper plate, hover lift ───────────────────────── */ /* ── 2. Media — mat-inset image, slow zoom on hover ──────────────────── */ /* ── 3. Body ─────────────────────────────────────────────────────────── */ /* ── 4. Meta — editorial eyebrow (category) + year ───────────────────── */ /* Year — DM Mono plate number */ /* ── 5. Title — Italiana display serif ───────────────────────────────── */ /* ── 6. Hover panel — italic serif excerpt ───────────────────────────── */ /* ── 7. Footer + actions ─────────────────────────────────────────────── */ /* ── 8. "Read" CTA — brand PRIMARY button ────────────────────────────── */ /* ── 9. Responsive — tighten mat at narrow viewport ──────────────────── */ @media (max-width: 575.98px) { } /* ===== END article_list.html — article list cards ===== */ /* ===== 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) — TI ===== */ /* Sort chrome */ /* Filter panel shell */ /* Filter title + CLEAR ALL */ /* Active-filter badges */ /* Accordion groups */ /* Color / option lists */ /* Category value links (filter sidebar) — chip styling consistent with group-by Sidebar_tags + list_category. */ /* Checkboxes + search-within-filter input + tag buttons */ /* Price range slider (noUiSlider) */ /* ===== END list-page filter sidebar + sort — TI ===== */ /* ===== TI — Artists alphabet (group_by_alphabet / start_by_letter) ===== */ /* ── 1. Alphabet index bar ── */ /* ── 2. Alphabet group heading ── */ /* ── 3. Artist profile card ── */ /* ── 4. "View more" link ── */ /* ===== END TI — Artists alphabet ===== */ /* ===== photo_to_restyled_masterpiece ===================================== TopImpressionists brand styling for the artistic-style transformation page. All selectors scoped under body.custom-repro-page. Tokens reused from the canonical TI palette declared at the top of this file (--ti-* / short aliases). Hairline grammar, cream surfaces (paper/gesso), aubergine ink, plein-air peach accent, Italiana display + Cormorant edit + Manrope UI + DM Mono. ======================================================================= */ /* --- Brand tokens consumed by shared structural CSS (global-custom) ----- */ /* --- Page canvas -------------------------------------------------------- */ /* --- Hero caption ------------------------------------------------------- */ /* --- Intro paragraphs --------------------------------------------------- */ /* --- Step blocks (form_produc) — UI Kit .ostep grammar ----------------- */ /* Step badge — DM Mono on aubergine, UI Kit .step-badge */ /* Step heading — Italiana display serif */ /* Step help text — italic Cormorant */ /* File-type hint — DM Mono caption */ /* --- Step 01 · upload box — UI Kit .upload dashed mat ------------------ */ /* Spinner ring — monet on cream overlay (overlay bg set via --pr token) */ /* Remove button — ink disc (bg from --pr-remove-bg) */ /* --- Step 02 · edit-request textarea — UI Kit .txt-input -------------- */ /* --- Chips — Sidebar_tags / category-filter / edit-request examples ---- */ /* UI Kit .chip pill grammar (gesso pill → ink "on" state). */ /* Active category — ink pill (UI Kit .chip.on) */ /* "Examples:" intro lead-in */ /* --- Step 04 · style cards — UI Kit .work mat-frame plate -------------- */ /* Image — mat motif inset */ /* Card body */ /* Category label — Manrope uppercase */ /* Style title — Italiana display serif */ /* Hover description — italic Cormorant */ /* --- LEFT column steps 02–08 — override global beige panels ------------- */ /* ===== photo_to_restyled_masterpiece · RIGHT column (summery_checkout) ==== Order summary + checkout panel. Same body.custom-repro-page scope and --ti-* tokens as the LEFT column above. Overrides global-custom defaults (#3E342A ink / #875D2A brown CTA) with the TI cream/aubergine/plein-air palette. ======================================================================= */ /* --- Summary card shell --------------------------------------------------- */ /* Section titles — "Transform your photos…" / "Summary & Checkout" */ /* --- Accordions ("How our service works" / "Order Details") -------------- */ /* --- Summary line items (.repro-summary__row) ---------------------------- */ /* --- Total --------------------------------------------------------------- */ /* --- Checkout CTAs ------------------------------------------------------- */ /* Primary — Add to Cart: aubergine ink plate (UI Kit primary), not #875D2A */ /* Secondary — SEND: ghost/outline */ /* --- Confirmation notice ------------------------------------------------- */ /* --- Read-more CTA (yellow_cont) — TI accent ----------------------------- */ /* ===== END photo_to_restyled_masterpiece · summery_checkout ===== */ /* ===== END photo_to_restyled_masterpiece ===== */ /* ===== artist_group_by_attribute / group-by browse — TI ===== */ /* ── Local brand tokens scoped to group-by pages ── */ /* ── Nav + heading + showing text ── */ /* ── Selects + search inputs ── */ /* ── Badge list / filter chips ── */ /* ── Sidebar boxes ── */ /* ── Sidebar title + description ── */ /* description uses muted ink — visually subordinate to title */ /* title uses display serif + full ink */ /* ── Sidebar tags ── */ /* ── Search input placeholder + icon ── */ /* ── showMainResuls wrapper ── */ /* ── Group heading (showMainResulsTitle h3) ── */ /* ── Count badge inside h3 ── */ /* ── "See All" secondary action ── */ /* ── Main result box ── */ /* ── Image overlay (showMainResulsImage h3/p) ── */ /* ── Result list items (showResultsItems) ── */ /* ── Mobile (≤ 640px) ── */ @media (max-width: 640px) { } /* ===== END TI — artist_group_by_attribute / group-by browse ===== */ /* ═══════════════════════════════════════════════════════════════════ TI — Catalog categories browse (list_category) Scoped to .search_sec.catalog-categories-page and .search_sec.artwork-categories-page only — gallery brand tokens (paper / gesso / linen / rule / ink* / plein / ochre + Italiana/Cormorant/Manrope/DM Mono). Structural reference: ADC "Catalog categories browse" in site-artsdot-V2.0.css, WA in site-wahooart-V2.0.css. All values translated to TI tokens. ═══════════════════════════════════════════════════════════════════ */ /* ── 1. Page chrome — breadcrumb, title row, sort ─────────────────── */ /* ── 2. Filter panel shell ───────────────────────────────────────── */ /* ── 3. Filter title row ─────────────────────────────────────────── */ /* ── 4. Active-filter badges ─────────────────────────────────────── */ /* ── 5. CORE category links — the chip list inside the panel ──────── */ /* ── 6. Card grid — identical to the TI artwork-list card ─────────── */ /* Card surface */ /* Image wrapper — mat motif */ /* Card body */ /* Artist name — Manrope uppercase label */ /* Year — DM Mono plate number */ /* Artwork title — Italiana display serif */ /* Hover-visible overlay panel */ /* Add-to-cart — primary button */ /* ── 7. Responsive — tighten mat padding at narrow viewport ──────── */ @media (max-width: 575.98px) { } /* ── 8. Pagination — SITE-WIDE, overrides global brown #875D2A (every paginated template: list, categories, search, color search). Gesso cell, linen hover; active = inverted aubergine-ink pill. ── */ /* ===== END TI — 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 — TopImpressionists tokens (overrides the ADC-gold default in global-custom-V2.1.css). Layout mirrors ADC/OUA/WK. ===================================================== */ /* ===== search_by_color ===== */ @media (max-width: 768px) { } /* TI brand identity */ /* ===== orders/art_consultation.html — step image offset shadow ===== */ /* TopImpressionists: warm plein-air wash of the brand accent. */ .step .step-image { --step-image-shadow: rgb(var(--ais-accent-rgb, 216 154 120) / 0.32); } /* ===== orders/art_consultation.html — TopImpressionists brand colours ===== */ /* Violet ink · ochre accent · linen/canvas surfaces */ /* ===== /orders/art_consultation.html — TopImpressionists ===== */ /* ===== start_selling_* step-image shadow tint — TI · impressionist gold wash ===== */ /* ===== viewcart — cart state tokens (TI) ===== */ :root { --cart-placeholder-bg: var(--ti-gesso, #f9f4e8); --cart-placeholder-border: var(--ti-rule, #c7bea8); --cart-placeholder-icon: var(--ti-ink-mute, #6c647a); --cart-alert-warning-text: #876a28; --cart-alert-warning-bg: #f6edc8; --cart-alert-warning-border: #d9c884; --cart-alert-warning-accent: #d9c884; --cart-surface: var(--ti-gesso, #f9f4e8); --cart-surface-border: var(--ti-rule, #c7bea8); --cart-inset: var(--ti-paper, #fbf7ee); --cart-icon-bg: #E2DAC4; --cart-summary-ink: var(--ti-ink, #2a2438); --cart-summary-ink-2: var(--ti-ink-mute, #6c647a); --cart-summary-accent: var(--ti-accent, #a8524a); --cart-th-bg: #dbd4c0; --cart-th-color: var(--ti-ink, #2a2438); } /* ===== Art Appraisal (body.art-appraisal-page) — TI ===== */ /* Re-colours the shared ADC-palette appraisal page to the TopImpressionists UI Kit. Layout/spacing untouched; colours only. Scoped under body.art-appraisal-page so it beats the hardcoded globals. */ /* 1 · Hero caption (light over dark video) */ /* 2 · Intro band */ /* 3 · vertical connector */ /* 4 · step pill */ /* 5 · step headings / copy */ /* 6 · step image shadow */ /* 7 · comparative table */ /* 8 · valuation form */ /* step chip: ink chip + gesso (was warm-brown #3E342A bg leak) */ /* 9 · plan dropdown — align with form surfaces */ /* ===== orders/checkout ===== */ /* Scoped under .checkout-page. Impressionist palette: warm gesso surfaces, ink-dark card headers, ochre accent rail on the shipping panel. All values reuse TI tokens (hex fallbacks inside var() only). */ /* ===== collectible sell/edit — image upload + sales channels (restyle8) ===== */ @keyframes r8spin-ti { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} } /* ===== start_selling_* (body.start-selling-page) — TI · TopImpressionists ===== */ /* --- right CTA card "Start selling today" --- */ /* ===== apr-thanks (art project request thank-you) ===== Tokens used: --ti-canvas #f4eee2 (section background — warm impressionist canvas) --ti-paper #fbf7ee (intro card surface — lightest warm white) --ti-gesso #f9f4e8 (steps card surface — primed-canvas tint) --ti-linen #ede5d2 (card border / subtle divider) --ti-ink #2a2438 (headings — deep impressionist dark) --ti-ink-soft #4a4358 (body copy) --ti-ink-mute #6c647a (contact muted text) --ti-ochre #b78b4a (intro card top accent — brand gold-ochre) --ti-monet #6b8eb3 (steps card left accent — impressionist blue) --ti-plein #d89a78 (step bullet marker — warm terracotta) --ti-shadow-sm 0 4px 20px -8px rgba(42,36,56,.10) --f-display Italiana / Cormorant Garamond (headings) --f-edit Cormorant Garamond (body / steps) Specificity notes: Card surface: .apr-thanks-page .apr-thanks-card (0,2,0) — beats global .col-md-6 .card by load order Card title: .apr-thanks-page .apr-thanks-card .apr-thanks-card__title (0,3,0) — matches global Contact link: .apr-thanks-contact .apr-thanks-contact__link (0,2,0) — beats .text-muted a ===================================================================== */ /* --- Section vertical rhythm --- */ /* --- Shared card surface --- */ /* --- Intro card: lightest paper surface, ochre top accent, centered --- */ /* --- Steps card: gesso tint, monet-blue left accent --- */ /* --- Card body padding; intro content centered --- */ /* --- Card title — (0,3,0) to match/beat global .col-md-6 .card .card-title --- */ /* --- Card body text --- */ /* --- Steps list: remove default bullets, add plein-terracotta diamond marker --- */ /* Plein (terracotta) diamond bullet via pseudo-element */ /* --- Contact strip --- */ /* Force TI token over Bootstrap .text-muted color:var(--bs-secondary-color)!important */ /* (0,2,0) — beats .text-muted a */ /* --- Responsive: stack cols on mobile, tighten padding --- */ @media (max-width: 767px) { } /* ===== Artwork Not Found Page ===== */ /* ── Breadcrumb breadcrumb-navigation-list ── */ /* ── Card container ── */ /* Subtle plein top-rule accent */ /* ── Card heading ── */ /* ── Card body text ── */ /* ── Primary CTA button (Search Everywhere) ── */ /* ── Secondary button (Retry) ── */ /* Suppress global dual-sweep hover lines on these buttons */ /* ── Responsive: tighten padding on small screens ── */ @media (max-width: 576px) { } /* ===================================================== TI (TopImpressionists) — Artwork buy / reproduction page (artwork_buy_ArtistReproduction) Structure in global-custom; brand colours/identity here. Scoped to .reproduction_main_page. Impressionist identity: Italiana display + Cormorant body, warm canvas/gesso/linen surfaces, aubergine ink (#2a2438), gold-ochre accent (#a0742a), 2px radius. ===================================================== */ /* Academic block — same horizontal width as reproduction_section */ /* Custom width/height fields — warm linen slot */ /* ---- Action bar + cross-channel links (Buy print, Share, Favorites, …) ---- */ /* Monochrome icons — neutral ink, gold on hover */ /* ---- Metadata chips (medium, movement, year, …) ---- */ /* ---- PDP titles ---- */ /* ---- Accordions (description, size, summary, …) — warm band on full panel ---- */ /* Configurator tabs + radios */ /* Size / frame selector surfaces */ /* Price spans */ /* CTA buttons — gold accent, 2px radius, Manrope label */ /* ---- Academic / story block ---- */ /* Unified section headings (Quick Facts, Quiz, story, sidebars) */ /* Quick Facts cards — warm linen slot */ /* Order summary block */ /* Collections band at bottom of buy page */ /* Optional extras (checkbox row) */ /* Read more — TI text CTA (gold, uppercase Manrope) */ /* Related articles — « Explore Article » CTA */ /* Below-fold blocks (Related Artworks, Biography, …) */ /* Related artworks slider — swiper prev/next on warm band */ /* Digital Image — « Included in Every Digital Image Order » benefits band */ /* Academic block link colour (override generic historicle handled above) */ /* ===== END TI — Artwork buy / reproduction page ===== */ /* ===== TI — museum / artist / article detail sidebar (Quick Facts, Art Quiz, List of Artworks) ===== Parity with the reproduction page: these scopes were only branded under .reproduction_main_page, so on .article_main_page (museum/artist/article detail, no reproduction ancestor) the Quick Facts / Art Quiz / artwork-list fell back to the neutral global-custom theme. Re-apply the TI tokens here. */ /* Quick Facts card — warm linen slot */ /* Art Quiz card — paper surface (overrides global dark #3E342A) */ /* Quiz radio dial — paper surface (parity with reproduction page; the global .question_option rule fills the dial dark #3e342b, made for the old dark card) */ /* List of Artworks — paper band (overrides global beige #E8E2CD) */ /* ===== END TI — museum / artist / article detail sidebar ===== */ /* ===== TI — artist_detail.html — artistPage_Slider_section (corpus/popular/medium sliders) ===== */ /* Background — warm linen surface matching TI canvas palette */ /* view_all_art tag links — italic editorial style for TI */ /* Image hover: only the image itself reacts (zoom retreat) */ /* ===== END TI — artist_detail.html artistPage_Slider_section ===== */ /* ===== catalog left sidebars (filter / categories / group-by) — UI Kit alignment ===== */ /* Group-by rail (C): the Sidebar_tags (sbk-chip) rules above only scoped artwork-/artist-groupby; a real /groupby/ page carries ONLY catalog-groupby-page, so its tag chips fell back to global styling. Extend the existing scope to match the sibling title/description rules (catalog + museum + article). Values are the SAME tokens already used for artwork-groupby — chip = --SB-inset bg, --SB-border, --SB-ink-soft text, accent on hover. */ /* ===== customers_reviews — TI brand tokens (structure lives in global-custom) ===== */ /* ===== wheel-of-affinities (similar artworks study plate) ===== TI identity: linen/paper plate, ochre frames, impressionist-gold accent, Monet-blue criterion bars, Cormorant Garamond. Structure in global-custom. */ /* ===== artwork_info — action bar (Buy print, Send, Share, Favorites, Download, Similars, X-Ray, Diaporama) ===== */ /* hover/active icon recolour → TI ochre gold #a0742a */ /* ===== Catalog hover panel — align snippet + buy with the card body text ===== Card padding is reset globally; match __body 18px inset. */ /* Small-mobile (<=575.98px): body padding shrinks 4px here, so trim the hover panel inset to match and keep the snippet/buy aligned with the body text. */ @media (max-width: 575.98px) { } /* ===== TI — artworksimilarslider (artwork_similar_slider_section.html) ===== */ /* Artist name kicker hover color */ /* Artwork title link hover color */ /* ===== END TI — artworksimilarslider ===== */ /* ===== error_404.html + error_general.html — TopImpressionists ===== */ /* Tokens: --lc #a0742a (impressionist gold) --ti-ink #2a2438 (plum) --ti-ink-soft #4a4358 --font-body Cormorant Garamond serif */ /* ===== /error_404.html + error_general.html — TopImpressionists ===== */ /* ===== Native Stripe checkout + payment received — TI brand tokens ===== */ /* ===== artwork_preview_in_interior_room — TopImpressionists tokens (structure in global-custom) ===== */ /* ===== artwork_buy_ProductAuction — auction tokens ===== */ :root { --auction-accent: var(--ti-plein, #D89A78); --auction-accent-dark: var(--ti-ochre, #b87a55); --auction-accent-text: var(--ti-ink, #2a2438); --auction-ink: var(--ti-ink, #2a2438); --auction-ink-mute: var(--ti-ink-mute, #6c647a); } /* ===== /artwork_buy_ProductAuction ===== */ /* ===================================================== Dashboard feature spotlight — TopImpressionists tokens (impressionist canvas + ochre accent, soft shadow, 12px) ===================================================== */