/* ===================================================== FONTS — ADC (ArtsDot) ===================================================== */ /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 600; font-display: swap; src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.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(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.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(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.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(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.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; } /* Archivo — single neutral grotesque for the gallery-minimal redesign (variable, 100–900) */ /* latin-ext */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxK-vA.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: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.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 italic */ @font-face { font-family: 'Archivo'; font-style: italic; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/archivo/v25/k3kBo8UDI-1M0wlSfdzyIEkpwTM29hr-8mTYCx6muLRm.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 italic */ @font-face { font-family: 'Archivo'; font-style: italic; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/archivo/v25/k3kBo8UDI-1M0wlSfdzyIEkpwTM29hr-8mTYCxCmuA.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 { /* ArtsDot UI Kit: one family does everything — Archivo, a neutral grotesque. It is the only webfont the site loads; emphasis is italic, not a second face. */ --font-title-accent: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-title: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-body: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Horizontal rhythm — matches .adc-header / .adc-footer-v2 */ --adc-pad: 44px; } @media (max-width: 768px) { :root { --adc-pad: 24px; } } @media (max-width: 520px) { :root { --adc-pad: 16px; } } /* ===================================================== ADC chrome tokens — gallery-minimal, available site-wide (used by header/footer which live outside .adc-v2) ===================================================== */ .wa-topbar, .header_container, .footer_sec, .footer-container-bottom, .adc-utility, .adc-mainnav, .adc-footer { --adc-bg: #ffffff; --adc-ink: #111110; --adc-ink-2: #6e6c68; --adc-ink-3: #a3a09b; --adc-line: #e6e6e6; --adc-line-2: #d6d6d6; --adc-band: #f5f5f5; --adc-slot: #eeeeee; --adc-accent: #b3402a; --adc-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --adc-body: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* ===================================================== ADC — Image hover: grayscale + scale (consolidated) Three contexts merged into one consistent block. ===================================================== */ /* Base transition */ .search_card .search_img a img, .search_card .search_img > img, .showMainResulsImage a img, .swiper-slide .artist_slid_box a img, img.mouseover_effect_images, img.mouseover_image_effect { -webkit-filter: none; filter: none; transition: filter 0.3s ease-out, transform 1s ease-out; } /* Hover state — full grayscale + subtle zoom */ .search_card .search_img a:hover img, .search_card .search_img:hover > img, .showMainResulsImage a:hover img, .swiper-slide .artist_slid_box a:hover img, a:hover img.mouseover_effect_images, img.mouseover_effect_images:hover, a:hover img.mouseover_image_effect, img.mouseover_image_effect:hover { -webkit-filter: grayscale(100%); filter: grayscale(100%); transform: scale(1.02); } /* ===================================================== ADC — Link hover effects (consolidated) Nav, dropdown, footer, column, slider, and muted-text links. ===================================================== */ /* Nav top-level links → accent */ .wa-nav .nav-menu > li > a:hover { color: var(--adc-accent, #b3402a); } /* Nav dropdown inner links → accent + underline */ .wa-nav .dropdown-inner a:hover { color: var(--adc-accent, #b3402a); text-decoration: underline; } /* General dropdown links → accent */ .dropdown a:hover { color: var(--adc-accent, #b3402a); /* text-decoration: underline; */ } /* Footer list links → accent */ .footer_list a:hover { color: var(--adc-accent, #b3402a); /* text-decoration: underline; */ } /* Nav-pills / table-of-contents links → accent (overrides Bootstrap's .nav-link:hover) */ .nav-link:hover { color: var(--adc-accent, #b3402a); } /* Dropdown column links — strip underline */ .column a:hover { text-decoration: none !important; } /* Numeric slider label links → muted grey + underline */ .numeric_slider_bar .labels span a:hover { color: #6B6B6B; text-decoration: underline; } /* Generic muted-text links (slightly lighter on hover) */ .black-hover:hover { color: #8B8B8B; } /* ===================================================== mouseover_effect_texts — opt-in class for text links (nav, footer, breadcrumb anchors; not image links or buttons) ===================================================== */ a.mouseover_effect_texts { transition: color 0.25s ease, opacity 0.25s ease; } a.mouseover_effect_texts:hover { opacity: 0.8; } body, main { background: #ffffff; background-color: #ffffff !important; } /* ADC list/browse pages: main content card on white page */ .search_sec.same-space-card { background-color: #ffffff; } /* @media (min-width: 768px){ */ /* NOTE: `header` removed from this rule — the ADC header uses internal .adc-utility padding (--adc-pad) and must not have extra vw padding. */ .wa-topbar, #Most-Popular-Artists, #Artworks-By-Styles, #Specialize-Oil-Paintings, #Shop-By-Room, #reviews { padding-left: var(--adc-pad); padding-right: var(--adc-pad); } /* } */ @media (min-width: 1400px) { /* Bootstrap 5 XXL breakpoint */ .w-xxl-auto { width: auto !important; } /* .navbar padding-left removed: ADC nav uses --adc-pad on .adc-mainnav__row instead */ } @media (max-width: 576px) { .search-bar { width: 100%; min-width: 0; max-width: none; } .wa-topbar-left, .wa-topbar-right { gap: 0 !important; } } /* Do not use `all: unset` here: it strips intrinsic sizing from checkbox inputs so they can collapse to 0×0 inside flex rows (e.g. photo-to-painting optional add-ons). */ .form-check-input-custom { -webkit-appearance: none; appearance: none; display: inline-block; box-sizing: border-box; vertical-align: middle; flex-shrink: 0; width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; border: 1px solid #877f76 !important; background-color: #e8e2cd !important; outline: none !important; padding: 0; margin: 0; box-shadow: none !important; cursor: pointer; } .form-check-input-custom:checked { background-color: #4A4A4A !important; border-color: #4A4A4A !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6.173 12.727L2.222 8.777l1.415-1.414 2.536 2.536 6.364-6.364 1.414 1.414z'/%3E%3C/svg%3E")!important; background-repeat: no-repeat!important; background-position: center!important; background-size: 100%!important; } .artdots-content-block{ display: flex; gap: 10px; align-items: center; } .header_container { background-color: #FFF; position: relative; z-index: 1000; overflow: visible; } .nav-menu>li>a { color: #322721; font-weight: 500; font-size: 14px; line-height: 20px; text-transform:uppercase; text-decoration: none; } .column a { font-weight: normal; /* font-size: 1.2vW; */ } .desktop-nav li.dropdown .dropdown-content { left: 0; transform: translateX(-50%); /* width: calc(100vw - 320px); max-width: 700px; */ } .nav-menu>li:last-child { padding-left: 0 !important; margin-left: 0 !important; } /* NOTE: WahooArt site styling (.wa-*, .WahooArt-Header-Flags, etc.) removed. That site has its own CSS file (wahooart-V1.8.css). */ /* Customized CSS */ /* Old page rules removed: - #ArtsDot-Slider-Most_Famous_Artworks-Block - .main-header .logo img (not used in current templates) - Commented-out dead rules for .main-header and .nav-menu */ .ArtsDot-Content-Specialize-Block { padding-bottom: 0 !important; } .ArtsDot-Content-Specialize-Block-50 p { line-height: 1.6vw; } .ArtsDot-Content-Specialize-Block-50-Warranty-Title { font-size: 1vw; } .ArtsDot-Content-Specialize-Block-50-Warranty-Text { font-size: 1vw; } /* Old override rules removed: - .nav-menu > li { border-bottom: none; } (only relevant to legacy nav) - input[name="q"]::placeholder (ADC search has its own styling) - .top100_banner h2 (unused page section) - Kept: .consultation_content h1 color (used in thanks-for pages) */ .consultation_content h1 { color: #FFF !important; } /* NOTE: The old "ADC dark footer" block (dark #1c1a15 background, orange #e89177 links, near-white .links_heading, inverted social icons, black .footer-container-bottom) was removed. The footer is now the light UI-Kit design in base_artsdot_footer.html (.adc-footer-v2) with the legal row replacing the old black bottom bar. The light .footer_sec chrome further below (~line 4225) remains for any legacy markup. */ /* Blur only while a nav mega-menu is open; fade in on open, snap off on close */ main { transition: opacity 0.2s ease-in-out; } /* Alternative: Even darker with multiple effects */ main.blurred.darker { filter: blur(3px) brightness(0.9); opacity: 1; transition: filter 0.2s ease-in-out, opacity 0.2s ease-in-out; } /* Header icons: clean ink line-icons (grayscale filter removed). Sizing handled by .adc-utility-right .icon-group img below. */ /* User auth widget: do not apply cart/search icon sizing to dashboard avatar (incl. header_initial span) */ .header_container .icon-group #aps-user-auth-widget .user-menu-wrapper img { width: 22px; max-width: 22px; height: 22px; max-height: 22px; background-color: transparent; } .header_container .icon-group #aps-user-auth-widget .user-menu-wrapper .aps-user-initial { font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 1; color: #fff; user-select: none; letter-spacing: -0.02em; } .header_container .icon-group #aps-user-auth-widget .user-menu-wrapper { position: relative; } /* NOTE: Extensive old page/form styling removed. The rules below (lines ~415–554 in original) were for deprecated sections and forms: - .yellow_cont, .confirmation_notice, .explore_techniques (old UI sections) - .top100_posts_col (old blog) - .consultation_bottom, .step-*, .appraisel_* (old form pages) - Generic .table, tbody/th/thead styling (rarely needed for modern pages) - .input_label_text, .input_box, form inputs (old form styling) - .swp_btn, .artistPage_Slider_section (old slider styling) - .question_option, .ques_*, .repro_radio (old questionnaire/appraisal forms) - .fav-icon-artwork, .include_benifits_box, .collapse_tab_repro (old page components) Kept: .side_headings (used in article TOC), .consultation_content h6, h1/h2/h3 global styling. */ /* side_headings — legacy class; prefer .art_heading on ADC buy/academic pages */ .side_headings { font-family: var(--adc-body, var(--font-body)) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--adc-ink, #111110) !important; margin-top: 0 !important; margin-bottom: 18px !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--adc-line-2, #d6d6d6) !important; opacity: 1; } H1, H2, H3 { font-weight: bold !important; font-family: var(--font-body) !important; } .consultation_content h6 { font-family: var(--font-body) !important; } .collection_tabs .nav-pills .nav-link.active, .collection_tabs .nav-pills .show>.nav-link { color: #494949 ! IMPORTANT; background-color: #dddddd; } .collection_tabs .nav-item { background-color: #9d9d9d; } .collection_tabs .nav-pills .nav-link { color: #dfdfdf; } .collection_details h4 { color: #dfdfdf; } /* Cart link is wrapped in .aps-cart-icon-wrap for the count badge; keep same img sizing as direct .icon-group > a */ .main-header .icon-group > a img, .main-header .icon-group .aps-cart-icon-wrap a img { filter: grayscale(1); width: 100%; background: none; } .search_more a.btn-next { border: 1px solid #979797 !important; color: #979797 !important; } .e_card_form { --adc-band: #f5f5f5; --adc-line-2: #d6d6d6; --adc-ink: #111110; --adc-ink-2: #6e6c68; background: var(--adc-band); border: 1px solid var(--adc-line-2); } .e_card_form .form_heading { color: var(--adc-ink); font-family: var(--adc-display, var(--font-title)); } .e_card_form .form_content, .e_card_form .form_content p { color: var(--adc-ink-2); } /* Not-found / CTA row: global form max-width must not offset centered buttons */ .e_card_form > .d-flex form.d-inline { max-width: none; margin: 0; width: auto; } .step-content .step-number-box { background: #dbdbdb; border: 1px solid #c7c7c7; } .artinfo_top h4, .historicle_box.artwork-info-infobox .art-info-page-title { color: #404040; font-family: var(--font-body); font-weight: bold; font-size: 32px; line-height: 34px; margin-top: 0; margin-bottom: 18px; } .art_info_inner h4 { color: #B23333; font-family: var(--font-body); font-weight: bold; } .art_info_inner p { text-align: justify; } .custom_search .col-sm-12.col-md-6.col-lg-4.col-xl-3 { border: 1px solid #dddddd; } .colors_list li, .colorPlatte li, .compatibility_list li { background: #e7e7e7; border: 1px solid #c7c7c7; color: #2d2d2d; } .fav_group { border: 1px solid #A0A0A0; } .fav_group .unfav_icon , .fav_group .fav_icon { filter: grayscale(100%); } .full_collection_section { background: url(/static/images/artworks/collecton_background-gray.jpg); color: #dbdbdb; } .search_results #fieldSelector { border: 1px solid #AAA; background: #d1d1d1; } .show_results form.countrySearchForm input[type="text"] { border: 1px solid #AAA; } .showResultsItems h3 a, .showResultsItems h3 { color: #660000; } /* User dashboard sidebar only — browse/group-by uses catalog-groupby-page tokens below */ aside .sidebar_box { background: #5b5b5b; } .sidebar_menu_link li:hover a span, .logout_section ul li:hover a span, .logout_section ul li:hover a svg { color: orange; } .sidebar_menu_link li:hover, .logout_section ul li:hover { background: #ffa10036; } .container-fluid .header-section { background-color: #f1f1f1; } .sendmsg_textt button:hover { color: #e5e5e5 !important; background: #959595 !important; } .btn:hover { border: 1px solid var(--btn-color); color: var(--btn-text-color); background: var(--btn-color); } .form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after { background-color: #ffffff; } .contactfull_width_hero_banner_with_background_image { background: #d3d3d3; } .consultant_right h1, .consultant_right p { color: #bbbbbb; font-size: 40px; } .consultant_content h6 { color: #e7e7e7; font-family: var(--font-body); } button.top_dropdown_toggle_button_main_style.open { background-color: #ffdc73; } .top_dropdown_menu_list_block { background-color: #ffdc73; } .top_dropdown_item_button_clickable:hover, .top_dropdown_item_button_clickable:focus { color: #d19a00; } .alert-info { color: #717171; background-color: #f5f5f5; border-color: #bdbdbd; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { border: 1px solid #888; -webkit-text-fill-color: #222 !important; -webkit-box-shadow: 0 0 0px 1000px #fff inset !important; box-shadow: 0 0 0px 1000px #fff inset !important; transition: background-color 5000s ease-in-out 0s !important; } .form_produc .produc_space .form-control { background-color: #e9e9e9; } .form_produc .produc_space .form-control:focus { background-color: #ededed; } #upload-spinner { background: rgb(204, 204, 204); } a { color: #4A4A4A; } a:hover { color: var(--adc-accent, #b3402a); } :root { --btn-color: #6B6B6B; --btn-text-color: #E8E8E8; } .btn { background: #444; } .hero_swiper .swiper-caption h3, .hero_swiper .swiper-caption p, .hero_swiper .swiper-text { color: #E5E5E5; } .overlay_img { background: #09090987; } .hero_swiper .swiper-caption button { color: #2A2A2A; background: #B8B8B8; } .hero_swiper .swiper-pagination-fraction, .hero_swiper .swiper-button-next, .hero_swiper .swiper-button-prev { color: #E5E5E5; } .heading_text, .heading_paragrap, .elvatee_content_box h4 { color: #4A4A4A; } .swiper-button-prev:after, .swiper-button-next:after { background: #444; } .elvatee_content_box { background: #D8D8D8F2; } .elvatee_content_box a { color: #6B6B6B; } .white_back { background: #D8D8D8; } .signature-caption h3 { color: #6B6B6B; } .signature-caption p, .signature-caption .signature-text { color: #4A4A4A; } .signature-caption button, .signature-caption button:hover { color: #6B6B6B; border: 1px solid #6B6B6B; } .black_back { background: #5A5A5A; } .black_back p { color: #E5E5E5; } .black_back .signature-text { color: #E5E5E5; } .black_back .signature-caption h3 { color: #B8B8B8; } .black_back .signature-caption button, .meet_info .signature-caption button { color: #B8B8B8; border: 1px solid #B8B8B8; } .curator_rating ul { color: #6B6B6B; } .cur_heading, .cur_text, .why_choose_info h5, .why_choose_info p { color: #4A4A4A; } .cur_button a { color: #6B6B6B; } .why_choose_icon img { background: #6B6B6B; } #swiper_thumb::-webkit-scrollbar-thumb { background: #fff; } .thumb_overlay_cont .heading_text, .thumb_overlay_cont .heading_paragrap { color: #E8E8E8; } .swiper_main_thumb span { color: #E8E8E8; } .swiper_bottom_content .heading_text, .swiper_bottom_content .heading_paragrap { color: #E8E8E8; } .meet_info .signature-caption h3 { color: #B8B8B8; } .meet_info .signature-caption p { color: #E5E5E5; } .meet_info .signature-text { color: #E5E5E5; } .meet_info li::marker { color: #B8B8B8; } .meet_info .overlay_img { background: #5A5A5Ae3; } .book_call { color: #E8E8E8; } .primary-input, .main-grid-row input { background: #F0F0F0; color: #4A4A4A; } .primary-label, .page_navigation_menu a, .form_heading, .form_content, .dtl_con h4, .dtl_con p, h4.total_price, .confirmation_notice, select option, .manual_label p, .switches-container label, span.optional_text { color: #4A4A4A; } .form_produc { background: #E0E0E0; border: 1px solid #D0D0D0; } .black-hover { color: #6B6B6B; } .steps_count span { background: #4A4A4A; color: #E8E8E8; } .summery_checkout { background: #F0F0F0; border: 1px solid #D0D0D0; } .sum_chek_text { border-bottom: 1px solid #D0D0D0; color: #4A4A4A; } .summary_detail_box { border-bottom: 1px solid #D0D0D0; } span.green_include { color: #6B6B6B; } .add_tocart_btn button { background: #6B6B6B; color: #E8E8E8; } .select_size select { background: #F0F0F0; color: #4A4A4A; } select:focus>option:checked { background: #6B6B6B; color: #E0E0E0; } .manuall_box input { background: #F0F0F0; color: #4A4A4A; } .switches-container { background: #D0D0D0; } .switch { background: #6B6B6B; } .switch .switchbox { color: #E8E8E8; } .frame_box { border: 1px solid #F0F0F0; background-color: #F0F0F0; } .checked_box { border: 1px solid #4A4A4A !IMPORTANT; } .production_form input[type="radio"] { background: #E0E0E0; } .production_form input[type="radio"]:after { background-color: #E0E0E0; border: 1px solid #8B8B8B; } .production_form input[type="radio"]:checked:after { background-color: #4A4A4A; outline: 1.5px solid #4A4A4A; } h6.frame_text, .frame_details h5, .frame_details p, .face_paint_box, .face_paint_box img, .face_include, .artistic_box, .artistic_box img, .artis_radio label, .artistic_img .overlay_img, .overlay_content, .custome_check label, .custom_detail p, .custom_detail, .elevated_img_title, .curator_image, .hero_swiper .swiper-slide, .elvatee_content_box p, .swiper-button-prev, .collection_other_detail, .premium_service .why_choose_right, .side_inner-nav .top-bar a { color: #4A4A4A; } .side_inner-nav .dropdown { width: 100%; } .side_inner-nav .mobile_consultation a { color: #6B6B6B; } .side_inner-nav .search-bar { width: 100%; min-width: 100%; max-width: 100%; } .side_inner-nav .search-bar input { background-color: transparent !important; } .side_inner-nav .search-bar img { width: 12px !important; height: 12px !important; } .side_inner-nav .dropdown:hover .dropdown-content { background-color: transparent; } .production_form .form-check .form-check-input { background-color: #F0F0F0 !important; } .form-floating>label { color: #4A4A4A !important; border-bottom: none !important; } .e_card_form .form-control { background: #F0F0F0; color: #4A4A4A; } .repruct_content_collapse .accordion-body { color: #6B6B6B; } body, main { background: #E8E8E8; } .text-op-80, .text-op-60, .text-op-0 { color: #4A4A4A; } .text-op-80 { opacity: 0.8; } .text-op-60 { opacity: 0.6; } .container_content { background-color: #5A5A5A; } .top-bar { color: #fff; } .top-bar a, .topright_side a { color: #E8E8E8; } .header_container { background-color: #FFFFFF; position: relative; z-index: 1000; overflow: visible; } .search-bar { width: 100%; min-width: 0; max-width: none; flex: 1 1 auto; } .search-bar form { width: 100%; } .search-bar input { background: #FFFFFF !important; border-bottom: 1px solid #DFDFDF !important; border-top: none !important; border-left: none !important; border-right: none !important; color: #4A4A4A; font-size: 14px; width: 100%; } .search-bar input:hover { background-color: #F8F8F8 !important; } .search-bar input::placeholder { color: #4A4A4A66; } @media (max-width: 768px){ .search-bar { display: none; } } .consultation { color: #6B6B6B; } .navbar { background-color: #FFF; border: none !important; position: relative; z-index: 1001; overflow: visible; /* border-bottom: 1px solid transparent!important; */ /* border-top: 1px solid transparent!important; */ } .nav-menu>li>a, .dropdown-inner a { color: #4A4A4A; } .dropdown:hover .dropdown-content { background-color: #FFFFFF; } .dropdown-content.full-width { background-color: #E8E8E8; color: #4A4A4A; } .footer_sec { background: #2A2A2A; border-bottom: none; } .consultation_btn { border: 1px solid #B8B8B8; color: #B8B8B8; } /* .links_heading { color: #4E4339; } */ .footer_list a { font-weight: 400; /* color: #E8E8E8; */ } .copyRight_sec { background: #2A2A2A; } .ft_heading, .ft_pera, .copyRight_sec, .copyRight_sec a, .copyRight_text { color: #E8E8E8; } ul.nav-list li, ul.nav-list a, .main-heading, .search_results, .Showing_text, .sorting_content, .filter-title span { color: #4A4A4A; } .Showing_text .form-control { border: 1px solid #C0C0C0 !important; } .filter-panel { background-color: #E0E0E0; border: 1px solid #D0D0D0; } .filter-title a { color: #6B6B6B; } .badge-filter { background: #D0D0D0; color: #4A4A4A; } .badge_list { border-bottom: 1px solid #D0D0D0; } .tag-btn { background-color: #D8D8D8; } .accordion-item { background-color: #E0E0E0 !important; border-bottom: 1px solid #D0D0D0 !important; } button.accordion-button, .accordion-button:not(.collapsed) { background: #E0E0E0 !important; color: #4A4A4A !important; } .artist_input { background: #E8E8E8 !important; border: 1px solid #D0D0D0 !important; color: #4A4A4A; } .artist_input::placeholder { color: #4A4A4A66; } .form-check input { border: 1px solid #8B8B8B !important; background-color: #E0E0E0 !important; } .form-check input:checked { background-color: #4A4A4A !important; border-color: #4A4A4A !important; } .search_sec { padding: 20px var(--adc-pad); } .article_main_page { padding: 20px var(--adc-pad); } /* @media (max-width: 768px) { .search_sec { padding: 20px 20px; } .article_main_page { padding: 20px 20px; } } @media (max-width: 1280px) { .search_sec { padding: 20px 40px; } .article_main_page { padding: 20px 40px; } } */ .search_sec .form-check, .search_sec .form-check .form-check-label, .reproduction_image_detail .accordion-item button.accordion-button { color: #4A4A4A; } .noUi-target { background: #C0C0C0 !important; } .noUi-connect { background: #4A4A4A !important; } .noUi-horizontal .noUi-handle { background: #4A4A4A; } .noUi-handle:before { background: #E5E5E5 !important; } .compatibility_list li { background: #E0E0E0; border: 1px solid #C0C0C0; color: #4A4A4A; } .colorPlatte li.active, .compatibility_list li.active { background-color: #D8D8D8; border: 1px solid #4A4A4A; } .reproduction_image_detail .accordion-item { border: 1px solid #D0D0D0; } .search_card { border-bottom: 1px solid #D0D0D0; border-right: 1px solid #D0D0D0; } .searchCard_sec .row { border-left: 1px solid #D0D0D0; } .searchCard_sec .col-md-4:nth-child(-n+3) .search_card { border-top: 1px solid #D0D0D0; } .hover_visible p { color: #6B6B6B; } .art-artist h2 a { color: #6B6B6B; } .art-artist span, .art-artist span a, .art-title, .art-title a, .addToCart, .fav_group, .card_bottom a, .showMOre, .full_width_hero_banner_with_background_image, .consultation_container, .consultation_bottom, .consultation_bottom p, p.consultation_text, .process_section, span.line, img.step_icon, .step-header, .step-content p, .step .step-image, .step-content, .step-title, .step-heading, .step-number-box, .list-inline-item, .step li, ul.step_list, ul.step_list li, .step-header small, .step-header h4 { color: #4A4A4A; } .circle-icon { color: #4A4A4A; background-color: #dddddd; } /* .user-menu-wrapper background removed — ADC header uses plain line icon (no circle bg) */ .user-menu-wrapper { color: var(--adc-ink, #111110); background-color: transparent; } .fav_group.active { background: #D8D8D8; } .consultation_content h6 { /* color: #4A4A4A; */ color: #FFF; } .consultation_content h1 { /* color: #4A4A4A; */ color: #FFF; } .consultation_content p { /* color: #4A4A4A; */ color: #FFF; } .contactfull_width_hero_banner_with_background_image, .consultant_right, .consultant_right .overlay_img, .consultant_right h1, .consultant_right p, .consultant_content, .consultant_content img, .consultant_content h6, .consultant_content span, .contactForm_sec, .form-container h3, .contactForm_sec .image-preview, .contactForm_sec .image-upload-box, .form-container p, .form-container h3 span, .form-step, .form-step.active, .step-light, .manuall.box.input { color: #4A4A4A; } .manuall.box.input:focus { background: #F0F0F0 !important; } .manuall.box.input:-webkit-autofill, .manuall.box.input:-webkit-autofill:hover, .manuall.box.input:-webkit-autofill:focus, .manuall.box.input:-webkit-autofill:active { background: #F0F0F0 !important; } .btn-next { color: #FFF !important } .btn-prev { color: #4A4A4A !important; } .btn-next { background: #515151 !important; border: 1px solid #9f9f9e !important; } .btn-prev { border: 1px solid #9f9f9e !important; } .custom-dropdown, .custom-dropdown .dropdown-list, .custom-dropdown .dropdown-list li { color: #4A4A4A; background: #C8C8C8; } .dropdown-list { background: #C8C8C8; } .custom-dropdown .dropdown-list li:hover { background: #C8C8C8; } .form-container input, .floating_footer, .upload_img_form label, .custom-dropdown .arrow-icon img, .custom-dropdown.open span.arrow-icon, .custom-dropdown .custom-dropdown.open .arrow-icon img, .image-upload-container, .image-preview, .image-preview img, .form_produc .image-upload-box, .image-upload-box, .image-preview-list-box, #image-preview-list, .loader, .form-floating input, .loader::after { color: #4A4A4A; } .upload_img_form span { color: #6B6B6B; } .showMainResulsImage p a { color: #ffffff; } .card-body-art ul.list-unstyled.card-body-art-content.mb-0 li.d-flex.align-items-center.mb-2 a img, .art-curator, .art-curator .signature-caption, .art-curator .signature-caption h3, .art-curator .signature-caption p, .art-curator .signature-caption .signature-text, .thank_you img, .thank_you h3, .thank_you p, .proceed_box, .proceed_radio_box, .proceed_box input[type="radio"], .proceed_box input[type="radio"]:after, .proceed_box input[type="radio"]:checked:after, .proceed_radio_box label, .img_extention, .response-method, .response-method h3, .response-method label, .video-consultation, .calendar input[type="date"], .calendar, .timeslots, .timeslots h4, .sloat-btn, .time-btn, .artworks-container, .btn-group, .btn-group button, .btn-group button:hover, span.ui-datepicker-month, .ui-datepicker th, span.ui-datepicker-year, .ui-widget.ui-widget-content, .ui-widget-content, .ui-datepicker td span, .ui-datepicker td a, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-widget-header, a.ui-state-default, a.ui-state-default:hover, .ui-datepicker .ui-datepicker-header, .ui-datepicker .ui-datepicker-title, .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next, .ui-icon-circle-triangle-w, .ui-icon-circle-triangle-e, .searchCard_sec .col-md-3 { color: #4A4A4A; } .time-btn:hover { background: #4A4A4A; color: #E8E8E8; } .card { color: #4A4A4A; background: #d3d3d3; } .custom_search .row .col-md-3, .custom_search .row .col-md-4.col-12.col-lg-4.col-xl-3 { border: 1px solid #D0D0D0; } .custom_search .search_card { border: 0; border-bottom: 1px solid #D0D0D0; } /* FTS search card model badge — UI Kit .adc-badge / .adc-artcard__badges (#16) */ .custom_search .search_img .search_card_model_badge { position: absolute; top: 10px; left: 10px; margin: 0; z-index: 3; max-width: calc(100% - 20px); pointer-events: none; display: inline-block; font-family: var(--adc-body); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; padding: 4px 8px; border-radius: 3px; /* ~70% opacity — same overlay strength as WA (#3E342AB2) */ background: rgb(17 17 16 / 70%) !important; color: #fff !important; } h3.search_subtitle a span { color: #4A4A4A; background: #d8d8d8 !important; } .custom_search .search_card .searchCard_body, h3.search_subtitle, h3.search_subtitle a, .custom_search .search_card .art-artist h2, .custom_search .search_card .art-artist h2 a, .custom_search .search_card .art-artist span, .custom_search .art-title, .custom_search .search_card .hover_visible p, .search_more, .search_more a.btn-next, .custom_search .search_card .art-title a, .custom_search .cartbtn_group, p.Showing_text1, p.Showing_text1 span { color: #4A4A4A; } .search_more a.btn-next:hover { background: #6B6B6B !important; color: #ffffff !important; } .sorting_content select.custom-select { background: url("/static/images/arrow-down.png") no-repeat right center; background-size: 12px; } /* Legacy gray browse chrome — not used on catalog group-by (ADC tokens at EOF) */ .search_sec:not(.catalog-groupby-page) .sidebar_box { color: #4A4A4A; background:#D3D3D3; } .search_sec:not(.catalog-groupby-page) form.countrySearchForm input[type="text"] { background:#D3D3D3; } .showMainResulsImage h3 { background: #d3d3d3 !important; } .search_sec:not(.catalog-groupby-page) #groupby-selector { background-color: #d3d3d3 !important; } ul.Sidebar_tags a { background: #c8c8c8 !important; } ul.Sidebar_tags li button.catalog-nav-btn { background: #c8c8c8 !important; } /* ADC — grid card price/buy CTA (UI Kit #artcard .price / button.pill: ink bg, white text) */ .custom_search .search_card .addToCart, .custom_search .search_card .addToCart.added, .addToCart, .added { background: var(--adc-ink, #111110) !important; color: #ffffff !important; font-family: var(--adc-body, var(--font-body)); font-size: 13px; font-weight: 600; line-height: 1.35; letter-spacing: 0.04em; text-transform: none; border-radius: 999px; padding: 10px 20px; width: auto; min-width: 0; transition: background-color 0.15s ease, color 0.15s ease; } .custom_search .cartbtn_group a.addToCart { color: #ffffff !important; } .custom_search .search_card .addToCart:hover, .custom_search .cartbtn_group a.addToCart:hover, .addToCart:hover { background: #2c2a27 !important; color: #ffffff !important; } .art_info_details { background: #d8d8d8 !important; border: solid 1px #d8d8d8 !important; } .historicle_box.artwork-info-infobox { background: #d8d8d8 !important; border: solid 1px #d8d8d8 !important; } .art_info_inner { background: #e7e7e7 !important; } .art_his_text { background: #dbdbdb !important; } .hover_visible{ background: #dbdbdb !important; } .form-top_heading { background: #C3C3C3 !important; } .e_card_section .e_card_form { background: var(--adc-band, #f5f5f5) !important; border: 1px solid var(--adc-line-2, #d6d6d6) !important; } .e-card_img_upload_section { background: #d3d3d3 !important; border: 1px solid #bbbab7 !important; } .image-upload-box { background: #dbdbdb !important; } .customize_section{ background: #d8d8d8 !important; } .face_paint_box { background: #d8d8d8 !important; border: 1px solid #c1c1c1 !important; } .artist_posts:hover .artist_posts_innr { background: #dbdbdb !important; } .hover_visible p a { color: #000000 !important; } .search_card:hover { background: #dbdbdb !important; } .artistPage_Slider_section { background: #efefef !important; } /* .artwork_section — legacy gray band removed; ADC buy/academic blocks styled below */ .yellow_cont a { color: #515151 !important; } .reproduc_tabs .nav-pills .nav-link { color: #515151 !important; } .reproduc_tabs .nav-pills .nav-link.active, .reproduc_tabs .nav-pills .show>.nav-link { color: #515151 !important; background-color: unset; border-bottom: 1px solid #515151; } /* quick_facts_section — ADC surfaces set in “Academic / story block” (article_main_page) */ /* .art_quize_section — legacy WA dark panel removed; ADC buy-page quiz uses tokens below */ .sidebar_box:hover, .sidebar_box.active { border: 1px solid #4A4A4A; } h3.sidebar_box_title, h3.sidebar_box_title a, ul.Sidebar_tags, ul.Sidebar_tags a, ul.Sidebar_tags li button.catalog-nav-btn, p.sidebar_box_description, .showMainResuls, .showMainResulsTitle, .showMainResulsTitle h3, .showMainResulsTitle a, .showMainResulsTitle button.catalog-nav-btn { color: #4A4A4A; } .repruct_content_collapse button.accordion-button, .repruct_content_collapse button.accordion-button:not(.collapsed) { background: transparent !important; } .showMainResulsTitle h3 span { color: #4A4A4A; background-color: #c8c8c8 !important; } .fav-icon-artwork a, .buy_sale_channel_heading_alternate_buy a { color: #828282; } .fav-icon-artwork a img, .fav-icon-artwork .artwork-share-trigger img, .buy_sale_channel_heading_alternate_buy a img { filter: brightness(0) saturate(100%) invert(54%) sepia(2%) saturate(0%) hue-rotate(314deg) brightness(93%) contrast(86%); } .reproduc_tabs .collapse_tab_repro .custom-dropdown, .reproduc_tabs .collapse_tab_repro .custom-dropdown .drop_repro { background: #F0F0F0 !important; } .reproduc_tabs .custom-dropdown .dropdown-header { background: #F0F0F0 !important; color: #4A4A4A !important; } .reproduc_tabs .custom-dropdown label { color: #4A4A4A !important; opacity: 0.6; } .showMainResulsBox { background: #D8D8D8; color: #4A4A4A; } .showMainResulsImage, .showMainResulsImage img, .showMainResulsImage h3, .showMainResulsImage h3 a { color: #4A4A4A; } .showMainResulsImage p { color: #b5b5b5; } /* It is for new svg icons USER and CART */ .menu_icon { background: #FFF; width: 24px; height: 24px; line-height: 24px; font-size: 18px; } .icon-group { gap: 16px; } .showResultsItems .row.align-items-center, .showMainResulsBox .col-md-8.col-md-82, .showResultsItems img, .showResultsItems h3 a, .showResultsItems h3, .artwork_list_additional_values h3, .artwork_list_additional_values h3 a, .showResultsItems h4, .showResultsItems p.article-keywords, .showResultsItems p, .showResultsItems h4 a, .showResultsItems p.article-keywords a, .showResultsItems p a, .showResultsItems h4 button.catalog-nav-btn, .showResultsItems p.article-keywords button.catalog-nav-btn, .showResultsItems p.article-tone-style button.catalog-nav-btn, .showResultsItems p button.catalog-nav-btn, .slider-container, input[type=range], input[type=range]::-webkit-slider-runnable-track, input[type=range]::-moz-range-track, input[type=range]::-webkit-slider-thumb, input[type=range]::-moz-range-thumb, .labels, .numeric_slider_bar, .numeric_slider_bar .labels span a { color: #4A4A4A; } form.countrySearchForm, form.countrySearchForm input[type="text"], form.countrySearchForm i.fa.fa-search, .sortABC, .sortABC a, .sortABC span, .sortABC span.active, .sortABC span.active:after, .sortABC span.disabled { color: #4A4A4A; } .steps_count, .col-md-4.col-md-42, .col-md-8.col-md-82, .popup-content, .subscription-popup-custom .popup-content-modal-window-centered-positioning-active-state, .popup-badge, .hover_visible p, .popup-body h3, .btn-popup, .gap-20, .dropdown-inner, .dropdown-inner .column, .column a, .section-title-art, .section-description-art, .popup-overlay-full-screen-background-blur-effect-active-state, .popup-content-modal-window-centered-positioning-active-state, .popup-header-modal-section-styled-layout-active-state, .popup-body-modal-content-area-styled-active-state, .popup-form-input-field-modal-styled-formatting-active-state, .popup-submit-button-modal-styled-primary-appearance-active-state, .popup-overlay-background-hidden-inactive-state, .body-scroll-prevention-active-state, button.popup-close, .popup-body .form-control, .popup-body .form-control::placeholder, .popup-body .pop-para, label.footer-label-custom, .top_dropdown_custom_dropdown_container_box, .top_dropdown_custom_dropdown_container_box.open .top_dropdown_menu_list_block, button.top_dropdown_toggle_button_main_style.open, .top_dropdown_toggle_button_main_style::after, .top_dropdown_toggle_button_main_style.open::after, .top_dropdown_menu_list_block, .topright_side .top_dropdown_item_button_clickable, .top_dropdown_item_button_clickable img, img.top_dropdown_flag_icon_image_style, .profile_picture_top_header_initiales, .buy_page_main_artwork_image, .form_produc2 .optional_add .option_text > div span.yellow_cont a, .form_produc2 .optional_add .option_text > span span.yellow_cont a, .optional_add .option_text > div span:last-child, .top_dropdown_toggle_button_main_style { color: #4A4A4A; } .popup-body { background-color: #5A5A5A !important; } .side_nav .top_dropdown_toggle_button_main_style { color: #4a4a4a !important; } .top_dropdown_toggle_button_main_style { font-size: 14px; } .top_dropdown_item_button_clickable { display: block; width: 100%; padding: 5px 12px; text-align: left; background: none; border: none; cursor: pointer; font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 32px; letter-spacing: 0%; color: #504943; display: flex; align-items: center; gap: 10px; } page-link { color: #666666 !important; } a.page-link { border-color: #666666 !important; border: 1px solid #CCCCCC; } .page-item:first-child .page-link { background-color: #858585 !important; } /* showMainResulsBox hover — handled by consolidated block above */ /* custom_search .search_card hover — handled by consolidated block above */ /* 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; } /* ===================================================== ADC — Slider card title: multi-line hover-frame fix inline-block gives the a single rectangular bounding box so hover decorations correctly cover the full text block even when the title wraps. ===================================================== */ .view_all_art a { display: inline-block; } /* ===================================================== ARTSDOT (ADC) — Text-link hover colors (site-specific) Do NOT put these hover colors in custom-V1.8.css — WahooArt (WA) uses brand brown (#875D2A / #6B4822) instead. Documented in: -Documentation Project/DOC_APS_THE_7_SITES.md → section "Frontend CSS: text-link hover (WahooArt vs ArtsDot)" Brand token: - var(--adc-accent, #b3402a) — ADC rust accent (global a:hover also uses this; rules below override inline color: inherit on buy/info templates) Covered templates / URLs: - artwork_buy_*.html (e.g. …/ArtistReproduction/) - artwork_info.html (/art/info/{slug}/) Shared transition: custom-V1.8.css (.collection_details h4 a, .art_info_box …) ===================================================== */ /* Buy page — collections section (#collections-section) + slider labels */ .collection_details h4 a:hover, .full_collection_section .collec_heading a:hover, .yellow_cont a:hover, .view_all_art a:hover { color: var(--adc-accent, #b3402a) !important; } /* Artwork info page — .art_info_box */ .art_info_box .artwork-info-infobox a:hover, .art_info_box .historicle_box a:hover, .art_info_box .artinfo_top h4 a:hover, .art_info_box .art_info_inner h4 a:hover, .art_info_box .details_reproducton a:hover, .art_info_box .fav-icon-artwork a:hover { color: var(--adc-accent, #b3402a) !important; } /* === HOMEPAGETEST migrated inline CSS === */ /* ═══════════════════════════════════════════════════════════════════ ADC — Artisan Canvas — Design System Scoped to .homepage-artsdot-widgets ═══════════════════════════════════════════════════════════════════ */ /* ── CSS Design Tokens ─────────────────────────────────────────── */ .homepage-artsdot-widgets { --adc-carbon: #111110; --adc-accent: #b3402a; --adc-accent-dark: #93311f; --adc-matte: #F5F5F5; --adc-section: #F8F8F8; --adc-white: #FFFFFF; --adc-border: #E5E5E5; --adc-structural: #EEEEEE; --adc-divider: #DDDDDD; --adc-card-border: #E0E0E0; --adc-text-2: #555555; --adc-text-3: #666666; --adc-label: #777777; --adc-muted: #888888; --adc-serif: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --adc-sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --adc-radius: 2px; font-family: var(--adc-sans); color: var(--adc-carbon); background-color: var(--adc-white); -webkit-font-smoothing: antialiased; } /* ── Page container ─────────────────────────────────────────────── */ .homepage-artsdot-widgets { max-width: 1440px; margin: 0 auto; padding: 0 !important; } /* Row spacing between widget sections */ .homepage-artsdot-widgets > .row, .homepage-artsdot-widgets > .container-fluid > .row { border-top: 1px solid var(--adc-structural); padding-top: 1.5rem; padding-bottom: 1.5rem; } .homepage-artsdot-widgets > .row:first-child { border-top: none; } /* ── Typography overrides ───────────────────────────────────────── */ .homepage-artsdot-widgets h1, .homepage-artsdot-widgets h2, .homepage-artsdot-widgets .widget-artist-spotlight__title, .homepage-artsdot-widgets .widget-mpl__info h2 { font-family: var(--adc-serif) !important; font-weight: 400; color: var(--adc-carbon); letter-spacing: 0; } .homepage-artsdot-widgets h3 { font-family: var(--adc-serif); font-weight: 400; color: var(--adc-carbon); } .homepage-artsdot-widgets h4 { font-family: var(--adc-serif); font-size: 19px; font-weight: 500; line-height: 1.3; color: var(--adc-carbon); } .homepage-artsdot-widgets p, .homepage-artsdot-widgets .small, .homepage-artsdot-widgets small { font-family: var(--adc-sans); font-weight: 300; color: var(--adc-text-2); line-height: 1.6; } /* Kicker / eyebrow labels */ .homepage-artsdot-widgets .text-uppercase { font-family: var(--adc-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; } /* ── Links ──────────────────────────────────────────────────────── */ .homepage-artsdot-widgets a { color: var(--adc-carbon); text-decoration: none; transition: color 0.2s, opacity 0.2s; } .homepage-artsdot-widgets a:hover { color: var(--adc-accent); opacity: 1; } /* ── Generic card / border overrides ───────────────────────────── */ .homepage-artsdot-widgets .border, .homepage-artsdot-widgets [class*="border-"] { border-color: var(--adc-border) !important; } .homepage-artsdot-widgets .rounded-3 { border-radius: var(--adc-radius) !important; } .homepage-artsdot-widgets .rounded-2 { border-radius: var(--adc-radius) !important; } /* ══════════════════════════════════════════════════════════════════ ARTIST SLIDER WIDGET (.widget-artist-slider) ══════════════════════════════════════════════════════════════════ */ .homepage-artsdot-widgets .widget-artist-slider { background: var(--adc-section) !important; border: 1px solid var(--adc-border) !important; border-radius: var(--adc-radius) !important; box-shadow: none !important; } /* Portrait image wrapper */ .homepage-artsdot-widgets .widget-artist-slider__portrait { border-radius: var(--adc-radius) !important; overflow: hidden; background: var(--adc-matte); border: 1px solid var(--adc-card-border); } /* Artist name under portrait */ .homepage-artsdot-widgets .widget-artist-slider .text-muted.small.text-uppercase { font-family: var(--adc-sans) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; color: var(--adc-accent) !important; } /* Artist bio paragraph */ .homepage-artsdot-widgets .widget-artist-slider__bio { font-family: var(--adc-sans); font-size: 13px; font-weight: 300; color: var(--adc-text-2); line-height: 1.6; } .homepage-artsdot-widgets .widget-artist-slider__bio p { font-size: 13px; font-weight: 300; color: var(--adc-text-2); } /* Swiper slide — each artwork card */ .homepage-artsdot-widgets .artist_slid_box { background: var(--adc-matte); border: 1px solid var(--adc-card-border); border-radius: var(--adc-radius); overflow: hidden; } .homepage-artsdot-widgets .artist_slid_box img { object-fit: contain !important; background: var(--adc-matte); } /* Artist name kicker in slide */ .homepage-artsdot-widgets .vincent_color { font-family: var(--adc-sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--adc-accent); } /* Artwork title in slide */ .homepage-artsdot-widgets .view_all_art a { font-family: var(--adc-sans); font-size: 12px; font-weight: 400; color: var(--adc-carbon); line-height: 1.4; } /* Swiper nav arrows */ .homepage-artsdot-widgets .swp_btn { background: var(--adc-white) !important; border: 1px solid var(--adc-card-border) !important; border-radius: var(--adc-radius) !important; transition: border-color 0.2s; } .homepage-artsdot-widgets .swp_btn:hover { border-color: var(--adc-accent) !important; } .homepage-artsdot-widgets .swiper-button-next::after, .homepage-artsdot-widgets .swiper-button-prev::after { color: var(--adc-carbon); font-size: 14px; } /* ══════════════════════════════════════════════════════════════════ ARTIST SPOTLIGHT WIDGET (.widget-artist-spotlight) ══════════════════════════════════════════════════════════════════ */ .homepage-artsdot-widgets .widget-artist-spotlight { background: var(--adc-section) !important; border: 1px solid var(--adc-border) !important; border-radius: var(--adc-radius) !important; box-shadow: none !important; } .homepage-artsdot-widgets .widget-artist-spotlight__portrait { border-radius: var(--adc-radius) !important; overflow: hidden; } .homepage-artsdot-widgets .widget-artist-spotlight__title { font-family: var(--adc-serif) !important; font-size: 1.6rem !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--adc-carbon) !important; } .homepage-artsdot-widgets .widget-artist-spotlight__bio p { font-family: var(--adc-sans); font-size: 13px; font-weight: 300; color: var(--adc-text-2); line-height: 1.6; } .homepage-artsdot-widgets .widget-artist-spotlight__art { background: var(--adc-matte); border: 1px solid var(--adc-card-border); border-radius: var(--adc-radius); } .homepage-artsdot-widgets .widget-artist-spotlight__art-title { font-family: var(--adc-sans) !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0.06em; text-transform: uppercase !important; } /* ══════════════════════════════════════════════════════════════════ MOST POPULAR LARGE WIDGET (.widget-mpl) ══════════════════════════════════════════════════════════════════ */ .homepage-artsdot-widgets .widget-mpl { --mpl-bg: var(--adc-section) !important; --mpl-border: var(--adc-border) !important; --mpl-accent: var(--adc-carbon) !important; border-color: var(--adc-border) !important; border-radius: var(--adc-radius) !important; box-shadow: none !important; } .homepage-artsdot-widgets .widget-mpl__info { background: var(--adc-section) !important; } .homepage-artsdot-widgets .widget-mpl__info h2 { font-family: var(--adc-serif) !important; font-size: 1.6rem !important; font-weight: 400 !important; color: var(--adc-carbon) !important; letter-spacing: 0 !important; } .homepage-artsdot-widgets .widget-mpl__info p { font-family: var(--adc-sans); font-size: 13px; font-weight: 300; color: var(--adc-text-3) !important; line-height: 1.6; } .homepage-artsdot-widgets .widget-mpl__filter-subtitle { font-family: var(--adc-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--adc-accent) !important; } .homepage-artsdot-widgets .widget-mpl__cta { border-color: var(--adc-carbon) !important; color: var(--adc-carbon) !important; font-family: var(--adc-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.05em; border-radius: var(--adc-radius) !important; } .homepage-artsdot-widgets .widget-mpl__cta:hover { background: var(--adc-carbon) !important; color: var(--adc-white) !important; } .homepage-artsdot-widgets .widget-mpl__group-col { background: var(--adc-section) !important; border-color: var(--adc-border) !important; } .homepage-artsdot-widgets .widget-mpl__tile { background: var(--adc-matte) !important; } .homepage-artsdot-widgets .widget-mpl__caption { font-family: var(--adc-sans); border-top-color: var(--adc-divider) !important; } .homepage-artsdot-widgets .widget-mpl__caption a { color: var(--adc-carbon) !important; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; } .homepage-artsdot-widgets .widget-mpl__caption a:hover { color: var(--adc-accent) !important; text-decoration: none; } /* ══════════════════════════════════════════════════════════════════ MOVEMENT-4 WIDGET (.widget-mov-4) ══════════════════════════════════════════════════════════════════ */ .homepage-artsdot-widgets .widget-mov-4 { --widget-mov-accent: var(--adc-accent) !important; background: var(--adc-white) !important; border: 1px solid var(--adc-border) !important; border-radius: var(--adc-radius) !important; box-shadow: none !important; } /* ══════════════════════════════════════════════════════════════════ FEATURED ARTIST WITH FACT (.widget-featured-artist-with-fact) ══════════════════════════════════════════════════════════════════ */ .homepage-artsdot-widgets .widget-featured-artist-with-fact { background: var(--adc-section) !important; border: 1px solid var(--adc-border) !important; border-radius: var(--adc-radius) !important; box-shadow: none !important; } /* ══════════════════════════════════════════════════════════════════ READY TO SHIP / UNIQUE NFT / REIMAGINE WIDGETS Generic widget card override ══════════════════════════════════════════════════════════════════ */ .homepage-artsdot-widgets .w-100.border.mb-4, .homepage-artsdot-widgets .w-100.border.rounded-3.mb-4, .homepage-artsdot-widgets .w-100.border.rounded-3.p-3.mb-4, .homepage-artsdot-widgets .w-100.border.rounded-3.p-3.p-md-4.mb-4 { border-color: var(--adc-border) !important; border-radius: var(--adc-radius) !important; box-shadow: none !important; } /* ══════════════════════════════════════════════════════════════════ ARTWORK IMAGE containers — always contain, never crop ══════════════════════════════════════════════════════════════════ */ .homepage-artsdot-widgets img { object-fit: contain !important; } /* ══════════════════════════════════════════════════════════════════ SECTION LABEL / PERIOD HEADER above each artist slider ══════════════════════════════════════════════════════════════════ */ .homepage-artsdot-widgets .adc-period-label { display: block; font-family: var(--adc-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--adc-accent); margin-bottom: 0.5rem; } /* ══════════════════════════════════════════════════════════════════ QUIZ / IDENTIFY MASTERPIECE widgets ══════════════════════════════════════════════════════════════════ */ .homepage-artsdot-widgets .quiz-label:has(input[type="radio"]:checked) { border-color: var(--adc-accent) !important; background: var(--adc-section); } .homepage-artsdot-widgets .identify-label:has(input[type="radio"]:checked) > .identify-img-wrap { border-color: var(--adc-accent) !important; } /* ══════════════════════════════════════════════════════════════════ ARTICLE / KEYWORD WIDGETS — neutralise accent colours ══════════════════════════════════════════════════════════════════ */ .homepage-artsdot-widgets .btn-primary, .homepage-artsdot-widgets .btn-dark { background-color: var(--adc-carbon) !important; border-color: var(--adc-carbon) !important; border-radius: var(--adc-radius) !important; font-family: var(--adc-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } .homepage-artsdot-widgets .btn-outline-dark, .homepage-artsdot-widgets .btn-outline-secondary { border-color: var(--adc-carbon) !important; color: var(--adc-carbon) !important; border-radius: var(--adc-radius) !important; font-family: var(--adc-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } .homepage-artsdot-widgets .btn-outline-dark:hover, .homepage-artsdot-widgets .btn-outline-secondary:hover { background-color: var(--adc-carbon) !important; color: var(--adc-white) !important; } /* ══════════════════════════════════════════════════════════════════ FACT BLOCK — border-left accent marker (from ADC reference) ══════════════════════════════════════════════════════════════════ */ .homepage-artsdot-widgets .fact-block { border-left: 2px solid var(--adc-accent); padding-left: 10px; margin-bottom: 10px; font-size: 13px; font-weight: 300; color: var(--adc-text-2); line-height: 1.6; } /* ══════════════════════════════════════════════════════════════════ SCROLLBAR — thin, neutral (ADC aesthetic) ══════════════════════════════════════════════════════════════════ */ .homepage-artsdot-widgets ::-webkit-scrollbar { width: 4px; height: 4px; } .homepage-artsdot-widgets ::-webkit-scrollbar-track { background: var(--adc-structural); } .homepage-artsdot-widgets ::-webkit-scrollbar-thumb { background: var(--adc-accent); border-radius: 2px; } /* --- block --- */ .widget-artist-slider { background: linear-gradient(90deg, rgba(245,245,240,0.95) 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.98) 100%); box-shadow: var(--w-shadow-base); } .widget-artist-slider__portrait { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--w-radius); } .widget-artist-slider__bio { line-height: 1.45; } /* --- block --- */ .widget-artist-slider { background: linear-gradient(90deg, rgba(245,245,240,0.95) 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.98) 100%); box-shadow: var(--w-shadow-base); } .widget-artist-slider__portrait { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--w-radius); } .widget-artist-slider__bio { line-height: 1.45; } /* --- block --- */ .widget-artist-slider { background: linear-gradient(90deg, rgba(245,245,240,0.95) 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.98) 100%); box-shadow: var(--w-shadow-base); } .widget-artist-slider__portrait { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--w-radius); } .widget-artist-slider__bio { line-height: 1.45; } /* --- block --- */ .widget-artist-slider { background: linear-gradient(90deg, rgba(245,245,240,0.95) 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.98) 100%); box-shadow: var(--w-shadow-base); } .widget-artist-slider__portrait { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--w-radius); } .widget-artist-slider__bio { line-height: 1.45; } /* --- block --- */ .widget-artist-slider { background: linear-gradient(90deg, rgba(245,245,240,0.95) 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.98) 100%); box-shadow: var(--w-shadow-base); } .widget-artist-slider__portrait { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--w-radius); } .widget-artist-slider__bio { line-height: 1.45; } /* --- block --- */ .widget-artist-slider { background: linear-gradient(90deg, rgba(245,245,240,0.95) 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.98) 100%); box-shadow: var(--w-shadow-base); } .widget-artist-slider__portrait { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--w-radius); } .widget-artist-slider__bio { line-height: 1.45; } /* --- block --- */ .widget-artist-slider { background: linear-gradient(90deg, rgba(245,245,240,0.95) 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.98) 100%); box-shadow: var(--w-shadow-base); } .widget-artist-slider__portrait { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--w-radius); } .widget-artist-slider__bio { line-height: 1.45; } /* --- block --- */ .widget-artist-slider { background: linear-gradient(90deg, rgba(245,245,240,0.95) 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.98) 100%); box-shadow: var(--w-shadow-base); } .widget-artist-slider__portrait { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--w-radius); } .widget-artist-slider__bio { line-height: 1.45; } /* --- block --- */ .widget-article-kw { --widget-akw-accent: #0f172a; background: #fff; box-shadow: var(--w-shadow-base); } .widget-article-kw__title { font-weight: 800; color: #111; letter-spacing: -0.02em; line-height: 1.3; } .widget-article-kw__cell { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--w-radius); background: #1a1a1a; } .widget-article-kw__cell a { display: block; width: 100%; height: 100%; position: relative; } .widget-article-kw__meta { z-index: 2; padding: 0.5rem 0.55rem 0.55rem; max-height: 55%; overflow: hidden; font-size: 0.8rem; line-height: 1.35; font-weight: 600; text-align: left; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } .widget-article-kw__cell--wide { aspect-ratio: 16 / 9; } /* --- block --- */ .widget-stf__cell { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--w-radius); background: #1a1a1a; } .widget-stf__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.4rem 0.5rem; } /* --- block --- */ a.widget-artist-spotlight__portrait { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--w-radius); box-shadow: var(--w-shadow-base); } .widget-artist-spotlight__art { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; margin: 0; text-align: center; } .widget-artist-spotlight__art > a { display: block; position: relative; width: 100%; height: 100%; min-height: 0; } .widget-artist-spotlight__art-title { font-size: 0.78rem; font-weight: 600; line-height: 1.3; padding: 0.35rem 0.4rem; z-index: 1; } .widget-artist-spotlight { background: linear-gradient(90deg, rgba(245,245,240,0.95) 0%, rgba(255,255,255,0.98) 40%, rgba(255,255,255,0.98) 100%); box-shadow: var(--w-shadow-base); } .widget-artist-spotlight__title { font-family: var(--font-title); } .widget-artist-spotlight__bio { line-height: 1.45; } /* --- block --- */ .widget-mov-4 { --widget-mov-accent: #0d9488; background: #fff; box-shadow: var(--w-shadow-base); } .widget-mov-4__portrait { position: relative; display: block; width: 100%; border-radius: var(--w-radius); overflow: hidden; aspect-ratio: 1; max-width: 100%; background: #0d9488; } .widget-mov-4__name { padding: 0.65rem 0.75rem; font-weight: 700; font-size: 1.1rem; line-height: 1.2; } .widget-mov-4__row-thumb { flex: 0 0 3.5rem; width: 3.5rem; height: 3.5rem; border-radius: var(--w-radius); overflow: hidden; background: #f0f0f0; } .widget-mov-4__row-thumb a { display: block; width: 100%; height: 100%; } .widget-mov-4__row-thumb img { width: 100%; height: 100%; object-fit: cover; } .widget-mov-4__cta { color: var(--widget-mov-accent); font-weight: 600; text-decoration: none; font-size: 0.95rem; } .widget-mov-4__cta:hover, .widget-mov-4__cta:focus { text-decoration: underline; } .widget-mov-4__head { color: #111; font-size: 1.15rem; line-height: 1.35; font-weight: 600; } .widget-mov-4__head strong { font-weight: 800; } .widget-mov-4__row-title { color: #111; } .widget-mov-4__row-subtitle { color: #222; } /* --- block --- */ .widget-mpl { --mpl-bg: #f5f0e8; --mpl-border: #ddd6c8; --mpl-accent: #2c2c2c; --mpl-part-pad: 0.3rem; --mpl-art-pad: 0.22rem; } .widget-mpl__part { padding: var(--mpl-part-pad); box-sizing: border-box; } .widget-mpl__info { background: var(--mpl-bg); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 1.5rem 1.6rem; } .widget-mpl__info h2 { font-family: var(--font-title); font-size: 1.65rem; font-weight: 400; color: var(--mpl-accent); margin-bottom: 0.45rem; line-height: 1.2; letter-spacing: 0.01em; } .widget-mpl__info p { font-size: 0.8rem; color: #666; margin-bottom: 1.1rem; line-height: 1.45; } .widget-mpl__filter-subtitle { font-size: 0.78rem; color: #3a3a3a; font-weight: 600; margin-bottom: 0.8rem; line-height: 1.35; } .widget-mpl__cta { display: inline-flex; align-items: center; gap: 0.35em; align-self: flex-start; border: 1px solid var(--mpl-accent); color: var(--mpl-accent) !important; text-transform: uppercase; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; padding: 0.5rem 0.9rem; text-decoration: none; border-radius: 2px; white-space: nowrap; } .widget-mpl__cta:hover { background: rgba(44,44,44,0.07); color: var(--mpl-accent) !important; } .widget-mpl__cta::before, .widget-mpl__cta::after { display: none !important; } .widget-mpl__group-col { background: var(--mpl-bg); border-color: var(--mpl-border) !important; display: flex; flex-direction: column; min-height: 0; } .widget-mpl__group-stack { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; } .widget-mpl__panel { flex: 1 1 auto; } .widget-mpl__panel--tall { min-height: 9rem; } .widget-mpl__panel--half { min-height: 4.5rem; } .widget-mpl__info--tall { min-height: 9rem; } .widget-mpl__narrow { width: 25%; min-width: 0; flex-shrink: 0; } .widget-mpl__tile { position: relative; overflow: hidden; display: block; height: 100%; min-height: 0; background: #e0dbd1; padding: var(--mpl-art-pad); box-sizing: border-box; } .widget-mpl__img { position: absolute; left: var(--mpl-art-pad); top: var(--mpl-art-pad); width: calc(100% - 2 * var(--mpl-art-pad)); height: calc(100% - 2 * var(--mpl-art-pad)); object-fit: cover; object-position: center; display: block; margin: 0; } .widget-mpl__caption { flex: 0 0 auto; width: 100%; text-align: center; padding: 0.45rem 0.3rem 0.3rem; margin-top: 0; border-top: 1px solid rgba(44, 44, 44, 0.12); font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; } .widget-mpl__caption a { color: var(--mpl-accent); text-decoration: none; display: inline-block; max-width: 100%; word-break: break-word; } .widget-mpl__caption a:hover { text-decoration: underline; } /* --- block --- */ .widget-mpl { --mpl-bg: #f5f0e8; --mpl-border: #ddd6c8; --mpl-accent: #2c2c2c; --mpl-part-pad: 0.3rem; --mpl-art-pad: 0.22rem; } .widget-mpl__part { padding: var(--mpl-part-pad); box-sizing: border-box; } .widget-mpl__info { background: var(--mpl-bg); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 1.5rem 1.6rem; } .widget-mpl__info h2 { font-family: var(--font-title); font-size: 1.65rem; font-weight: 400; color: var(--mpl-accent); margin-bottom: 0.45rem; line-height: 1.2; letter-spacing: 0.01em; } .widget-mpl__info p { font-size: 0.8rem; color: #666; margin-bottom: 1.1rem; line-height: 1.45; } .widget-mpl__filter-subtitle { font-size: 0.78rem; color: #3a3a3a; font-weight: 600; margin-bottom: 0.8rem; line-height: 1.35; } .widget-mpl__cta { display: inline-flex; align-items: center; gap: 0.35em; align-self: flex-start; border: 1px solid var(--mpl-accent); color: var(--mpl-accent) !important; text-transform: uppercase; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; padding: 0.5rem 0.9rem; text-decoration: none; border-radius: 2px; white-space: nowrap; } .widget-mpl__cta:hover { background: rgba(44,44,44,0.07); color: var(--mpl-accent) !important; } .widget-mpl__cta::before, .widget-mpl__cta::after { display: none !important; } .widget-mpl__group-col { background: var(--mpl-bg); border-color: var(--mpl-border) !important; display: flex; flex-direction: column; min-height: 0; } .widget-mpl__group-stack { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; } .widget-mpl__panel { flex: 1 1 auto; } .widget-mpl__panel--tall { min-height: 9rem; } .widget-mpl__panel--half { min-height: 4.5rem; } .widget-mpl__info--tall { min-height: 9rem; } .widget-mpl__narrow { width: 25%; min-width: 0; flex-shrink: 0; } .widget-mpl__tile { position: relative; overflow: hidden; display: block; height: 100%; min-height: 0; background: #e0dbd1; padding: var(--mpl-art-pad); box-sizing: border-box; } .widget-mpl__img { position: absolute; left: var(--mpl-art-pad); top: var(--mpl-art-pad); width: calc(100% - 2 * var(--mpl-art-pad)); height: calc(100% - 2 * var(--mpl-art-pad)); object-fit: cover; object-position: center; display: block; margin: 0; } .widget-mpl__caption { flex: 0 0 auto; width: 100%; text-align: center; padding: 0.45rem 0.3rem 0.3rem; margin-top: 0; border-top: 1px solid rgba(44, 44, 44, 0.12); font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; } .widget-mpl__caption a { color: var(--mpl-accent); text-decoration: none; display: inline-block; max-width: 100%; word-break: break-word; } .widget-mpl__caption a:hover { text-decoration: underline; } /* --- block --- */ .widget-mpl { --mpl-bg: #f5f0e8; --mpl-border: #ddd6c8; --mpl-accent: #2c2c2c; --mpl-part-pad: 0.3rem; --mpl-art-pad: 0.22rem; } .widget-mpl__part { padding: var(--mpl-part-pad); box-sizing: border-box; } .widget-mpl__info { background: var(--mpl-bg); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 1.5rem 1.6rem; } .widget-mpl__info h2 { font-family: var(--font-title); font-size: 1.65rem; font-weight: 400; color: var(--mpl-accent); margin-bottom: 0.45rem; line-height: 1.2; letter-spacing: 0.01em; } .widget-mpl__info p { font-size: 0.8rem; color: #666; margin-bottom: 1.1rem; line-height: 1.45; } .widget-mpl__filter-subtitle { font-size: 0.78rem; color: #3a3a3a; font-weight: 600; margin-bottom: 0.8rem; line-height: 1.35; } .widget-mpl__cta { display: inline-flex; align-items: center; gap: 0.35em; align-self: flex-start; border: 1px solid var(--mpl-accent); color: var(--mpl-accent) !important; text-transform: uppercase; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; padding: 0.5rem 0.9rem; text-decoration: none; border-radius: 2px; white-space: nowrap; } .widget-mpl__cta:hover { background: rgba(44,44,44,0.07); color: var(--mpl-accent) !important; } .widget-mpl__cta::before, .widget-mpl__cta::after { display: none !important; } .widget-mpl__group-col { background: var(--mpl-bg); border-color: var(--mpl-border) !important; display: flex; flex-direction: column; min-height: 0; } .widget-mpl__group-stack { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; } .widget-mpl__panel { flex: 1 1 auto; } .widget-mpl__panel--tall { min-height: 9rem; } .widget-mpl__panel--half { min-height: 4.5rem; } .widget-mpl__info--tall { min-height: 9rem; } .widget-mpl__narrow { width: 25%; min-width: 0; flex-shrink: 0; } .widget-mpl__tile { position: relative; overflow: hidden; display: block; height: 100%; min-height: 0; background: #e0dbd1; padding: var(--mpl-art-pad); box-sizing: border-box; } .widget-mpl__img { position: absolute; left: var(--mpl-art-pad); top: var(--mpl-art-pad); width: calc(100% - 2 * var(--mpl-art-pad)); height: calc(100% - 2 * var(--mpl-art-pad)); object-fit: cover; object-position: center; display: block; margin: 0; } .widget-mpl__caption { flex: 0 0 auto; width: 100%; text-align: center; padding: 0.45rem 0.3rem 0.3rem; margin-top: 0; border-top: 1px solid rgba(44, 44, 44, 0.12); font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; } .widget-mpl__caption a { color: var(--mpl-accent); text-decoration: none; display: inline-block; max-width: 100%; word-break: break-word; } .widget-mpl__caption a:hover { text-decoration: underline; } /* --- block --- */ .widget-mpl { --mpl-bg: #f5f0e8; --mpl-border: #ddd6c8; --mpl-accent: #2c2c2c; --mpl-part-pad: 0.3rem; --mpl-art-pad: 0.22rem; } .widget-mpl__part { padding: var(--mpl-part-pad); box-sizing: border-box; } .widget-mpl__info { background: var(--mpl-bg); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 1.5rem 1.6rem; } .widget-mpl__info h2 { font-family: var(--font-title); font-size: 1.65rem; font-weight: 400; color: var(--mpl-accent); margin-bottom: 0.45rem; line-height: 1.2; letter-spacing: 0.01em; } .widget-mpl__info p { font-size: 0.8rem; color: #666; margin-bottom: 1.1rem; line-height: 1.45; } .widget-mpl__filter-subtitle { font-size: 0.78rem; color: #3a3a3a; font-weight: 600; margin-bottom: 0.8rem; line-height: 1.35; } .widget-mpl__cta { display: inline-flex; align-items: center; gap: 0.35em; align-self: flex-start; border: 1px solid var(--mpl-accent); color: var(--mpl-accent) !important; text-transform: uppercase; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; padding: 0.5rem 0.9rem; text-decoration: none; border-radius: 2px; white-space: nowrap; } .widget-mpl__cta:hover { background: rgba(44,44,44,0.07); color: var(--mpl-accent) !important; } .widget-mpl__cta::before, .widget-mpl__cta::after { display: none !important; } .widget-mpl__group-col { background: var(--mpl-bg); border-color: var(--mpl-border) !important; display: flex; flex-direction: column; min-height: 0; } .widget-mpl__group-stack { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; } .widget-mpl__panel { flex: 1 1 auto; } .widget-mpl__panel--tall { min-height: 9rem; } .widget-mpl__panel--half { min-height: 4.5rem; } .widget-mpl__info--tall { min-height: 9rem; } .widget-mpl__narrow { width: 25%; min-width: 0; flex-shrink: 0; } .widget-mpl__tile { position: relative; overflow: hidden; display: block; height: 100%; min-height: 0; background: #e0dbd1; padding: var(--mpl-art-pad); box-sizing: border-box; } .widget-mpl__img { position: absolute; left: var(--mpl-art-pad); top: var(--mpl-art-pad); width: calc(100% - 2 * var(--mpl-art-pad)); height: calc(100% - 2 * var(--mpl-art-pad)); object-fit: cover; object-position: center; display: block; margin: 0; } .widget-mpl__caption { flex: 0 0 auto; width: 100%; text-align: center; padding: 0.45rem 0.3rem 0.3rem; margin-top: 0; border-top: 1px solid rgba(44, 44, 44, 0.12); font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; } .widget-mpl__caption a { color: var(--mpl-accent); text-decoration: none; display: inline-block; max-width: 100%; word-break: break-word; } .widget-mpl__caption a:hover { text-decoration: underline; } /* --- block --- */ .widget-mpl { --mpl-bg: #f5f0e8; --mpl-border: #ddd6c8; --mpl-accent: #2c2c2c; --mpl-part-pad: 0.3rem; --mpl-art-pad: 0.22rem; } .widget-mpl__part { padding: var(--mpl-part-pad); box-sizing: border-box; } .widget-mpl__info { background: var(--mpl-bg); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 1.5rem 1.6rem; } .widget-mpl__info h2 { font-family: var(--font-title); font-size: 1.65rem; font-weight: 400; color: var(--mpl-accent); margin-bottom: 0.45rem; line-height: 1.2; letter-spacing: 0.01em; } .widget-mpl__info p { font-size: 0.8rem; color: #666; margin-bottom: 1.1rem; line-height: 1.45; } .widget-mpl__filter-subtitle { font-size: 0.78rem; color: #3a3a3a; font-weight: 600; margin-bottom: 0.8rem; line-height: 1.35; } .widget-mpl__cta { display: inline-flex; align-items: center; gap: 0.35em; align-self: flex-start; border: 1px solid var(--mpl-accent); color: var(--mpl-accent) !important; text-transform: uppercase; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; padding: 0.5rem 0.9rem; text-decoration: none; border-radius: 2px; white-space: nowrap; } .widget-mpl__cta:hover { background: rgba(44,44,44,0.07); color: var(--mpl-accent) !important; } .widget-mpl__cta::before, .widget-mpl__cta::after { display: none !important; } .widget-mpl__group-col { background: var(--mpl-bg); border-color: var(--mpl-border) !important; display: flex; flex-direction: column; min-height: 0; } .widget-mpl__group-stack { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; } .widget-mpl__panel { flex: 1 1 auto; } .widget-mpl__panel--tall { min-height: 9rem; } .widget-mpl__panel--half { min-height: 4.5rem; } .widget-mpl__info--tall { min-height: 9rem; } .widget-mpl__narrow { width: 25%; min-width: 0; flex-shrink: 0; } .widget-mpl__tile { position: relative; overflow: hidden; display: block; height: 100%; min-height: 0; background: #e0dbd1; padding: var(--mpl-art-pad); box-sizing: border-box; } .widget-mpl__img { position: absolute; left: var(--mpl-art-pad); top: var(--mpl-art-pad); width: calc(100% - 2 * var(--mpl-art-pad)); height: calc(100% - 2 * var(--mpl-art-pad)); object-fit: cover; object-position: center; display: block; margin: 0; } .widget-mpl__caption { flex: 0 0 auto; width: 100%; text-align: center; padding: 0.45rem 0.3rem 0.3rem; margin-top: 0; border-top: 1px solid rgba(44, 44, 44, 0.12); font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; } .widget-mpl__caption a { color: var(--mpl-accent); text-decoration: none; display: inline-block; max-width: 100%; word-break: break-word; } .widget-mpl__caption a:hover { text-decoration: underline; } /* --- block --- */ .widget-artist-otd5-slider { border: 1px solid #111; background: #f6f2e9; } .widget-artist-otd5-slider__title { font-size: 1rem; font-weight: 700; margin-bottom: 0.75rem; } .widget-artist-otd5-slider__media { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: #ddd; } .widget-artist-otd5-slider__overlay { padding: 0.5rem 0.6rem; font-size: 0.85rem; line-height: 1.25; } /* --- block --- */ .widget-museum-4p { --wm4p-accent: #875D2A; --wm4p-accent-hover: #6f4a22; --wm4p-title: #1a1a1a; --wm4p-body: #333; --wm4p-caption-bg: #f2eee4; --wm4p-card-bg: #fff; --wm4p-gap: 0.6rem; --wm4p-media-max-h: 27rem; font-family: var(--font-body); background: var(--wm4p-card-bg); padding: 1.15rem; margin-bottom: 1.5rem; max-width: 100%; overflow-x: clip; box-sizing: border-box; } @media (min-width: 768px) { .widget-museum-4p { padding: 1.35rem 1.6rem; } } .widget-museum-4p__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.95rem; align-items: stretch; min-width: 0; } @media (min-width: 768px) { .widget-museum-4p__layout { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); gap: 1.15rem; } } .widget-museum-4p__hero { position: relative; display: block; width: 100%; min-width: 0; min-height: 11rem; overflow: hidden; background: #e8e4dc; } @media (min-width: 768px) { .widget-museum-4p__hero { min-height: 0; max-height: var(--wm4p-media-max-h); height: var(--wm4p-media-max-h); } } .widget-museum-4p__hero img { width: 100%; height: 100%; min-height: 11rem; object-fit: cover; object-position: center; display: block; } @media (min-width: 768px) { .widget-museum-4p__hero img { min-height: 0; } } .widget-museum-4p__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--wm4p-gap); min-width: 0; height: 100%; } @media (min-width: 768px) { .widget-museum-4p__grid { max-height: var(--wm4p-media-max-h); height: var(--wm4p-media-max-h); } } .widget-museum-4p__tile { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .widget-museum-4p__tile-link { display: flex; flex-direction: column; flex: 1; min-height: 0; text-decoration: none; color: inherit; } .widget-museum-4p__tile-link::before, .widget-museum-4p__tile-link::after { display: none; } .widget-museum-4p__tile-img { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #e8e4dc; aspect-ratio: 1; } @media (min-width: 768px) { .widget-museum-4p__tile-img { aspect-ratio: auto; } } .widget-museum-4p__tile-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .widget-museum-4p__label { flex: 0 0 auto; font-family: var(--font-body); font-size: 0.625rem; font-weight: 700; line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; color: var(--wm4p-accent); background: var(--wm4p-caption-bg); padding: 0.32rem 0.38rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .widget-museum-4p__content { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-self: start; text-align: left; min-width: 0; padding: 0.85rem 0 0; font-family: var(--font-body); font-style: normal; } @media (min-width: 768px) { .widget-museum-4p__content { padding: 1.25rem 0.25rem 0; } } /* Title: Baskervville SC only — title case, no faux italic */ .widget-museum-4p__title { margin: 0 0 1.1rem; padding: 0; width: 100%; font-family: var(--font-title); font-size: inherit; font-style: normal; font-weight: 400; font-synthesis: none; line-height: 1.2; } .widget-museum-4p__title-line1, .widget-museum-4p__title-accent { display: block; font-family: var(--font-title); font-style: normal; font-weight: 400; font-synthesis: none; font-variant: normal; text-transform: none; } .widget-museum-4p__title-line2, .widget-museum-4p__title-line3 { display: inline; font-family: var(--font-title); font-style: normal; font-weight: 400; font-synthesis: none; font-variant: normal; text-transform: none; } .widget-museum-4p__title-line1 { font-size: 1.875rem; color: var(--wm4p-title); line-height: 1.25; letter-spacing: 0.02em; margin-bottom: 0.35rem; } @media (min-width: 768px) { .widget-museum-4p__title-line1 { font-size: 2.125rem; } } .widget-museum-4p__title-line2, .widget-museum-4p__title-line3 { font-size: 1.75rem; letter-spacing: 0.03em; color: var(--wm4p-accent); line-height: 1.3; } @media (min-width: 768px) { .widget-museum-4p__title-line2, .widget-museum-4p__title-line3 { font-size: 2rem; } } /* Body: DM Sans */ .widget-museum-4p__meta { font-family: var(--font-body); font-style: normal; font-weight: 400; font-size: 0.9375rem; line-height: 1.6; color: var(--wm4p-body); margin: 0 0 1.25rem; width: 100%; } .widget-museum-4p__meta p { margin: 0; font-family: inherit; font-style: normal; font-weight: inherit; } /* CTA: DM Sans, all-caps (button only) */ .widget-museum-4p__cta { font-family: var(--font-body); font-style: normal; font-weight: 400 !important; font-synthesis: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; align-self: flex-start; width: auto; max-width: 100%; box-sizing: border-box; padding: 0.75rem 1.2rem; background: var(--wm4p-accent); border: 0; border-radius: 0; color: #fff !important; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; text-align: left; line-height: 1.35; transition: background 0.25s ease; } @media (min-width: 768px) { .widget-museum-4p__cta { font-size: 0.875rem; padding: 0.85rem 1.35rem; } } .widget-museum-4p__cta::before, .widget-museum-4p__cta::after { display: none; } .widget-museum-4p__cta:hover, .widget-museum-4p__cta:focus { background: var(--wm4p-accent-hover); color: #fff !important; } .widget-museum-4p__cta-arrow { font-size: 0.9em; line-height: 1; } .widget-museum-4p__hero, .widget-museum-4p__tile-img { overflow: hidden; } /* --- block --- */ .widget-quiz-artwork__card { background: #f5f5f6; border: 1px solid #c4c4c7; } .widget-quiz-artwork__kicker { font-weight: 700; color: #111; font-size: 1.05rem; } .widget-quiz-artwork__eyebrow { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; color: #111; } .widget-quiz-artwork__btn { background: #6d7a88; border: 0; color: #fff; font-weight: 600; letter-spacing: 0.06em; } .widget-quiz-artwork__btn:hover, .widget-quiz-artwork__btn:focus { background: #5c6773; color: #fff; } .widget-quiz-artwork__opt label { cursor: pointer; } .widget-quiz-artwork__img { border-radius: var(--w-radius); overflow: hidden; } .widget-quiz-artwork__img-inner { position: relative; width: 100%; height: 100%; } .widget-quiz-artwork__caption { font-size: 0.78rem; font-weight: 700; line-height: 1.3; text-align: left; pointer-events: none; padding: 0.5rem 0.65rem 0.55rem; } .widget-quiz-artwork__caption .widget-quiz-artwork__cap-artist { font-size: 0.72rem; font-weight: 600; opacity: 0.95; margin-top: 0.1rem; } .widget-quiz-artwork__question { color: #111; line-height: 1.4; } /* --- block --- */ .widget-identify-masterpiece__card { background: #f5f5f6; border: 1px solid #c4c4c7; } .widget-identify-masterpiece__title { font-weight: 700; color: #111; font-size: 1.05rem; } .widget-identify-masterpiece__btn { background: #6d7a88; border: 0; color: #fff; font-weight: 600; letter-spacing: 0.06em; } .widget-identify-masterpiece__btn:hover, .widget-identify-masterpiece__btn:focus { background: #5c6773; color: #fff; } .widget-identify-masterpiece__cell { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--w-radius); } .widget-identify-masterpiece__question { color: #111; line-height: 1.4; } /* --- block --- */ .widget-article-kw { --widget-akw-accent: #0f172a; background: #fff; box-shadow: var(--w-shadow-base); } .widget-article-kw__title { font-weight: 800; color: #111; letter-spacing: -0.02em; line-height: 1.3; } .widget-article-kw__cell { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--w-radius); background: #1a1a1a; } .widget-article-kw__cell a { display: block; width: 100%; height: 100%; position: relative; } .widget-article-kw__meta { z-index: 2; padding: 0.5rem 0.55rem 0.55rem; max-height: 55%; overflow: hidden; font-size: 0.8rem; line-height: 1.35; font-weight: 600; text-align: left; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } .widget-article-kw__cell--wide { aspect-ratio: 16 / 9; } /* --- block --- */ .widget-unique-nft-1 { --widget-unique-nft-fg: #fff; --widget-unique-nft-accent: #c9a227; background: #0d0d0d; box-shadow: var(--w-shadow-base); border: 1px solid rgba(255,255,255,0.08); } .widget-unique-nft-1__headline { font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: var(--widget-unique-nft-fg); text-align: center; margin-bottom: 0.75rem; } .widget-unique-nft-1__headline--tight { margin-bottom: 0.4rem; } .widget-unique-nft-1__body { font-size: 0.9rem; line-height: 1.5; color: rgba(255,255,255,0.88); text-align: center; margin-bottom: 1rem; } .widget-unique-nft-1__body--default { color: rgba(255,255,255,0.72); } .widget-unique-nft-1__figure { position: relative; width: 100%; max-width: 36rem; margin-left: auto; margin-right: auto; border-radius: var(--w-radius); overflow: hidden; aspect-ratio: 1; } .widget-unique-nft-1__figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .widget-unique-nft-1__over { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 1rem 0.75rem 0.85rem; } .widget-unique-nft-1__overlay-title { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; text-align: center; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .widget-unique-nft-1__cta { display: inline-block; padding: 0.45rem 1.1rem; font-size: 0.8rem; font-weight: 700; text-transform: none; color: #111; background: var(--widget-unique-nft-accent); border: none; border-radius: var(--w-radius); text-decoration: none; transition: filter 0.15s ease; } .widget-unique-nft-1__cta:hover { color: #111; filter: brightness(1.08); } /* --- block --- */ /* .widget-faf__cell responsive dividers live in widgets-base.css */ .widget-faf { background: #f5f0e6; color: #111; border: 1px solid #000; } .widget-faf__title { font-size: 1.05rem; font-weight: 700; text-transform: none; letter-spacing: 0.02em; margin-bottom: 0.75rem; } .widget-faf__portrait, .widget-faf__painting { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: #e8e4dc; } .widget-faf__painting__cap { padding: 0.4rem 0.5rem; font-size: 0.8rem; font-weight: 600; line-height: 1.25; text-align: left; text-shadow: 0 1px 1px rgba(0,0,0,0.4); } .widget-faf__name { text-align: center; font-weight: 700; margin-top: 0.5rem; margin-bottom: 0; font-size: 0.95rem; } .widget-faf__meta { font-size: 0.82rem; line-height: 1.4; font-weight: 400; } .widget-faf__flash { margin: 0; padding-left: 1.1rem; } .widget-faf__flash li { margin-bottom: 0.4rem; font-size: 0.86rem; line-height: 1.35; } .widget-faf__ruler { height: 1px; background: #000; margin: 0; border: 0; opacity: 1; } /* --- block --- */ .widget-quiz-artist__card { background: #f5f5f6; border: 1px solid #c4c4c7; } .widget-quiz-artist__btn { background: #6d7a88; border: 0; color: #fff; font-weight: 600; letter-spacing: 0.06em; } .widget-quiz-artist__btn:hover, .widget-quiz-artist__btn:focus { background: #5c6773; color: #fff; } .widget-quiz-artist__opt label { cursor: pointer; } .widget-quiz-artist__img { border-radius: var(--w-radius); overflow: hidden; } .widget-quiz-artist__img-inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 0; } .widget-quiz-artist__title-top { z-index: 1; margin: 0; padding: 0.55rem 0.65rem 0.5rem; font-size: 1.15rem; font-weight: 700; line-height: 1.25; text-align: left; pointer-events: none; } .widget-quiz-artist__caption { z-index: 1; padding: 0.5rem 0.65rem 0.55rem; font-size: 0.8rem; font-weight: 700; line-height: 1.3; text-align: left; pointer-events: none; } .widget-quiz-artist__question { color: #111; line-height: 1.4; } .widget-quiz-artist__meta { color: #111; line-height: 1.45; } /* --- block --- */ .widget-dqf--artist { --widget-dqf-accent: #1a4d2e; } .widget-dqf--artist .widget-dqf__title { font-weight: 700; color: #111; } .widget-dqf--artist .widget-dqf__photo { position: relative; display: block; width: 100%; border-radius: var(--w-radius); overflow: hidden; aspect-ratio: 1; max-width: 22rem; background: #e8e4dc; } .widget-dqf--artist .widget-dqf__photo img { position: absolute; left:0; top:0; right:0; bottom:0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .widget-dqf--artist .widget-dqf__cta { background: var(--widget-dqf-accent); border: 0; color: #fff; font-weight: 600; } .widget-dqf--artist .widget-dqf__cta:hover, .widget-dqf--artist .widget-dqf__cta:focus { background: #143c24; color: #fff; } .widget-dqf--artist .widget-dqf__meta { line-height: 1.5; color: #333; } .widget-dqf--artist .widget-dqf__fact { line-height: 1.45; color: #222; } /* --- block --- */ .widget-article-kw { --widget-akw-accent: #0f172a; background: #fff; box-shadow: var(--w-shadow-base); } .widget-article-kw__title { font-weight: 800; color: #111; letter-spacing: -0.02em; line-height: 1.3; } .widget-article-kw__cell { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--w-radius); background: #1a1a1a; } .widget-article-kw__cell a { display: block; width: 100%; height: 100%; position: relative; } .widget-article-kw__meta { z-index: 2; padding: 0.5rem 0.55rem 0.55rem; max-height: 55%; overflow: hidden; font-size: 0.8rem; line-height: 1.35; font-weight: 600; text-align: left; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } .widget-article-kw__cell--wide { aspect-ratio: 16 / 9; } /* --- block --- */ .widget-reimagine-4-slider { --w-accent: #c026d3; background: #fff; box-shadow: var(--w-shadow-base); } .widget-reimagine-4-slider__title { font-weight: 800; color: #111; letter-spacing: -0.02em; } .widget-reimagine-4-slider__cta { display: inline-block; width: 100%; text-align: center; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.75rem 1.25rem; border-radius: var(--w-radius); background: linear-gradient(135deg, #a21caf 0%, #7c3aed 100%); color: #fff !important; text-decoration: none !important; border: none; box-shadow: 0 0.15rem 0.5rem rgba(124, 58, 237, 0.45); } .widget-reimagine-4-slider__cta:hover, .widget-reimagine-4-slider__cta:focus { filter: brightness(1.08); color: #fff !important; } /* --- block --- */ .widget-ready-to-ship { --wrs-accent: #1a1a1a; background: #fff; box-shadow: var(--w-shadow-base); } .widget-ready-to-ship__heading { font-weight: 700; color: var(--wrs-accent); } .widget-ready-to-ship__cell { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--w-radius); } .widget-ready-to-ship__cell a { display: block; width: 100%; height: 100%; position: relative; } .widget-ready-to-ship__title-on-image { font-size: 0.8rem; line-height: 1.2; padding: 0.5rem 0.4rem 0.35rem; text-align: center; font-weight: 600; z-index: 1; } .widget-ready-to-ship__shop { margin-top: 1.25rem; } .widget-ready-to-ship__shop .btn { font-weight: 700; letter-spacing: 0.04em; min-width: 10rem; } /* --- block --- */ .widget-curated-choice { --wcc-accent: #8b6f47; --wcc-border: #d0d0d0; } .widget-curated-choice__tile { position: relative; overflow: hidden; display: block; height: 100%; min-height: 0; } .widget-curated-choice__label { font-size: 0.78rem; font-weight: 700; line-height: 1.2; text-transform: none; padding: 0.45rem 0.65rem; } .widget-curated-choice__label--small { font-size: 0.68rem; padding: 0.3rem 0.45rem; } .widget-curated-choice__head { color: #0a0a0a; font-weight: 800; letter-spacing: 0.02em; line-height: 1.2; } .widget-curated-choice__desc { font-size: 0.95rem; line-height: 1.65; } .widget-curated-choice__btn { background: var(--wcc-accent); color: #fff !important; border: none; text-transform: uppercase; font-weight: 600; letter-spacing: 0.04em; font-size: 0.8rem; padding: 0.55rem 1.1rem; border-radius: var(--w-radius); text-decoration: none; display: inline-block; } .widget-curated-choice__btn:hover { filter: brightness(1.06); color: #fff; } /* === ARTS DOT hompagetest — modifier classes === */ .widget-mpl--adc { border: 1px solid var(--mpl-border, var(--adc-border)) !important; border-radius: var(--adc-radius, 2px) !important; } .widget-curated-choice--adc { border-color: var(--wcc-border, var(--adc-border)) !important; box-shadow: var(--w-shadow-base, 0 1px 4px rgba(0,0,0,.07)) !important; } .widget-curated-choice__info { border-color: #e8e8e8 !important; } /* === HOMEPAGETEST shared layout utilities === */ .widget-mpl__part { border-color: var(--mpl-border, var(--g400, #e0d8cc)) !important; } .widget-mpl__panel, .widget-mpl__min-h-panel { min-height: 14rem; } .widget-mpl__min-h-half { min-height: 7rem; } .widget-mpl__min-h-sm { min-height: 3.5rem; } .widget-mpl__col-quarter { width: 25%; min-width: 0; } .widget-mpl__col-half { width: 50%; min-width: 0; } .widget-stf__header-band { letter-spacing: 0.04em; } .widget-museum-6p__placeholder { min-height: 10rem; } .widget-museum-4p__title { font-weight: 700; color: #111; } .widget-museum-4p__title-line { color: #111; } .widget-museum-4p__meta { line-height: 1.5; color: #111; } .widget-dqf__question { color: #111; line-height: 1.4; } .widget-dqf__meta { color: #111; line-height: 1.45; } .mfp-section-head--raised { position: relative; z-index: 1; } .bpa-spotlight__art-link { overflow: hidden; display: block; } .bpa-spotlight__art-img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; } .bpa-text-muted { color: var(--pewter); } .bpa-cc__grid { min-height: 16rem; } .bpa-cc__grid-hero { width: 50%; min-width: 0; border-right: 2px solid var(--ink); } .bpa-cc__grid-tile { min-height: 8rem; border-bottom: 1px solid var(--smoke); } .bpa-cc__grid-tile--border-r { border-right: 1px solid var(--smoke); } @media (max-width: 991.98px) { .widget-mpl__col-quarter, .widget-mpl__col-half { width: 100%; } .widget-mpl__panel, .widget-mpl__min-h-panel { min-height: 10rem; } .widget-mpl__min-h-half { min-height: 6rem; } .bpa-cc__grid-hero { width: 100%; border-right: none; border-bottom: 2px solid var(--ink); } .bpa-cc__grid { flex-direction: column; min-height: 0; } } @media (max-width: 767.98px) { .homepage-site-widgets, .homepage-impressionist-widgets, .homepage-artsdot-widgets, .homepage-buypopart-widgets, .mfp-hp { padding-left: clamp(12px, 3vw, 24px); padding-right: clamp(12px, 3vw, 24px); } .widget-imp10__movement-title { font-size: clamp(18px, 5vw, 24px); } .ti-sh { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; } } /* ===================================================== ADC v2 — ArtsDot editorial design system (scoped to .adc-v2, used by homepage_artsdot.html) ===================================================== */ .adc-v2 { /* Gallery-minimal tokens — aligned to the ArtsDot UI Kit */ --adc-bg: #ffffff; --adc-paper: #ffffff; --adc-ink: #111110; --adc-muted: #6e6c68; --adc-faint: #a3a09b; --adc-line: #e6e6e6; --adc-line-2: #d6d6d6; --adc-accent: #b3402a; --adc-accent-d:#93311f; --adc-soft: #f0f0f0; /* image-slot grey */ --adc-band: #f5f5f5; /* soft section band */ /* ArtsDot UI kit: one neutral grotesque (Archivo) for display + body. --adc-serif retained as the display alias so existing consumers keep working. */ --adc-serif: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --adc-sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --adc-maxw: 1440px; --adc-radius: 2px; background: var(--adc-bg); color: var(--adc-ink); font-family: var(--adc-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-size: 15px; line-height: 1.5; letter-spacing: -0.003em; } .adc-v2 *, .adc-v2 *::before, .adc-v2 *::after { box-sizing: border-box; } .adc-v2 img { display: block; max-width: 100%; height: auto; } .adc-v2 a:not(.adc-btn) { color: inherit; text-decoration: none; } .adc-v2 a.adc-btn { color: #fff; text-decoration: none; } .adc-v2 a.adc-btn:hover { color: #fff; } .adc-v2 a.adc-btn--ghost, .adc-v2 a.adc-btn.adc-btn--ghost { color: var(--adc-ink); } .adc-v2 a.adc-btn--ghost:hover { color: var(--adc-ink); } .adc-wrap { width: 100%; margin: 0 auto; padding-left: var(--adc-pad); padding-right: var(--adc-pad); } /* ---- Typography ---- */ .adc-h1 { font-family: var(--adc-serif); font-weight: 700; font-size: clamp(38px, 6vw, 72px); line-height: 1.02; letter-spacing: -0.03em; margin: 8px 0 0; } .adc-h2 { font-family: var(--adc-serif); font-weight: 600; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -0.025em; margin: 0; } .adc-h3 { font-family: var(--adc-serif); font-weight: 600; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 6px; } .adc-h1 em, .adc-h2 em, .adc-h3 em { font-style: italic; font-weight: inherit; color: var(--adc-accent); } /* Editorial headings use the kit serif; !important overrides a global heading rule that otherwise forces --font-title-accent (Inter) onto these headings. */ .adc-v2 .adc-h1, .adc-v2 .adc-h2, .adc-v2 .adc-h3 { font-family: var(--adc-serif) !important; } .adc-eyebrow { font-family: var(--adc-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--adc-accent); margin-bottom: 14px; } .adc-textlink { color: var(--adc-accent); font-weight: 600; } .adc-textlink:hover { color: var(--adc-accent-d); } /* ---- Hero / page header ---- */ .adc-pagehead { padding: clamp(40px, 7vw, 88px) 0 clamp(28px, 4vw, 56px); } .adc-pagehead .adc-wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 5vw, 72px); align-items: end; } .adc-crumb { font-size: 12.5px; color: var(--adc-muted); letter-spacing: 0.02em; } .adc-crumb b { color: var(--adc-ink); font-weight: 600; } .adc-lede { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--adc-muted); margin: 0 0 28px; } .adc-lede a { color: var(--adc-accent); border-bottom: 1px solid rgba(179,64,42,.3); } .adc-headstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; border-top: 1px solid var(--adc-line); padding-top: 22px; } .adc-n { font-family: var(--adc-serif); font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); line-height: 1; letter-spacing: -0.02em; margin-bottom: 6px; } .adc-k { font-size: 12.5px; color: var(--adc-muted); line-height: 1.35; } /* ---- Section scaffolding ---- */ .adc-section { padding: clamp(32px, 5vw, 64px) 0; } .adc-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: clamp(18px, 2.5vw, 32px); flex-wrap: wrap; } .adc-section-head--center { flex-direction: column; align-items: center; text-align: center; } .adc-section-sub { color: var(--adc-muted); font-size: 14.5px; margin: 0; } .adc-seeall { color: var(--adc-accent); font-weight: 600; font-size: 14px; white-space: nowrap; } .adc-seeall:hover { color: var(--adc-accent-d); } /* ---- Image frame (shared) ---- */ .adc-frame { position: relative; display: block; overflow: hidden; border-radius: var(--adc-radius); background: var(--adc-soft); border: 1px solid var(--adc-line); aspect-ratio: 1 / 1; } .adc-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .adc-card:hover .adc-frame img, .adc-style-card:hover .adc-frame img, .adc-artist-card:hover .adc-artist-portrait img { transform: scale(1.04); } /* ---- Horizontal rail ---- */ .adc-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: clamp(12px, 1.6vw, 20px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 10px; scrollbar-width: thin; } .adc-rail::-webkit-scrollbar { height: 6px; } .adc-rail::-webkit-scrollbar-thumb { background: var(--adc-line-2); border-radius: 3px; } .adc-rail--artists { grid-auto-columns: minmax(150px, 1fr); } .adc-rail > * { scroll-snap-align: start; } /* Shop by Style: 6 movement cards in one row (no horizontal scroll). */ .adc-rail--styles { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); grid-auto-columns: auto; overflow: visible; } @media (max-width: 1100px) { .adc-rail--styles { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px) { .adc-rail--styles { grid-template-columns: repeat(2, 1fr); } } /* Most Popular Artists: 16 cards wrap onto two rows (no horizontal scroll). */ .adc-rail--artists { grid-auto-flow: row; grid-template-columns: repeat(8, 1fr); grid-auto-columns: auto; overflow: visible; row-gap: clamp(20px, 2.4vw, 32px); } @media (max-width: 1100px) { .adc-rail--artists { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 820px) { .adc-rail--artists { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 520px) { .adc-rail--artists { grid-template-columns: repeat(3, 1fr); } } .adc-style-card .adc-sub, .adc-style-card .adc-frame { width: 100%; } .adc-style-card .adc-sub { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; } .adc-style-card:hover .adc-sub { color: var(--adc-accent); } /* ---- Card grids ---- */ .adc-grid { display: grid; gap: clamp(14px, 2vw, 24px); } .adc-grid--famous { grid-template-columns: repeat(4, 1fr); } .adc-grid--3 { grid-template-columns: repeat(3, 1fr); } .adc-card { display: block; } .adc-cardcap { display: block; padding-top: 12px; } .adc-card-title { display: block; font-family: var(--adc-serif); font-size: 16px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; } .adc-card:hover .adc-card-title { color: var(--adc-accent); } .adc-sub { display: block; color: var(--adc-muted); font-size: 13px; margin-top: 2px; } .adc-meta { display: block; color: var(--adc-faint); font-size: 12px; margin-top: 6px; } .adc-card--wide .adc-frame { aspect-ratio: 4 / 3; } /* ---- ADC artwork card (UI-Kit #16) — shared tile for gallery widgets ---- */ .adc-artcard { display: block; } .adc-artcard__frame { position: relative; display: block; overflow: hidden; border-radius: var(--adc-radius); background: var(--adc-soft); border: 1px solid var(--adc-line); aspect-ratio: 1 / 1; } .adc-artcard__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .adc-artcard:hover .adc-artcard__frame img { transform: scale(1.04); } .adc-artcard__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; z-index: 1; } .adc-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 8px; border-radius: 3px; line-height: 1; } .adc-badge--exclusive { background: var(--adc-accent); color: #fff; } .adc-badge--bestseller { background: var(--adc-ink); color: #fff; } .adc-badge--movement { background: #0a0a09; color: #fff; text-transform: none; letter-spacing: 0.02em; font-size: 11px; font-weight: 600; max-width: calc(100% - 20px); } .adc-artcard__meta { display: block; padding-top: 11px; } .adc-artcard__artist { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--adc-ink); } .adc-artcard__title { display: block; font-family: var(--adc-serif); font-style: italic; font-size: 14.5px; line-height: 1.25; color: var(--adc-muted); margin-top: 1px; } .adc-artcard:hover .adc-artcard__title { color: var(--adc-accent); } .adc-artcard__detail { display: block; font-size: 12px; color: var(--adc-faint); margin-top: 5px; } .adc-artcard__price { display: block; font-size: 13.5px; font-weight: 600; color: var(--adc-ink); margin-top: 6px; } /* ---- ADC "Most Popular" mosaic (UI-Kit #25 Popular mediums) ---- */ .adc-mpl-grid { display: grid; grid-template-columns: repeat(3, 1fr) minmax(220px, 1fr); gap: clamp(20px, 2.6vw, 34px); align-items: start; } .adc-mpl-card { display: flex; flex-direction: column; } /* Mosaic proportions match UI-Kit / WA widget-mpl (2:1 band, not 11:9). */ .adc-mpl-mosaic { display: grid; grid-template-columns: 1.55fr 1fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; aspect-ratio: 2 / 1; width: 100%; overflow: hidden; } .adc-mpl-mosaic a { display: block; overflow: hidden; border-radius: 8px; background: var(--adc-soft); border: 1px solid var(--adc-line); min-height: 0; min-width: 0; } .adc-v2 .adc-mpl-mosaic a img { width: 100%; height: 100%; max-height: none; object-fit: cover; transition: transform .5s ease; } .adc-mpl-mosaic a:hover img { transform: scale(1.05); } .adc-mpl-mosaic .m1 { grid-row: 1 / 3; } .adc-mpl-label { display: block; text-align: center; margin-top: 15px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--adc-ink); } .adc-mpl-card:hover .adc-mpl-label { color: var(--adc-accent); } .adc-mpl-intro { align-self: center; text-align: center; display: flex; flex-direction: column; align-items: center; } .adc-v2 .adc-mpl-intro h3 { font-family: var(--adc-serif); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.12; letter-spacing: -0.025em; margin: 0; text-align: center; } .adc-mpl-intro p { font-size: 14px; color: var(--adc-muted); line-height: 1.6; margin: 12px auto 0; max-width: 30ch; } .adc-mpl-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; } @media (max-width: 1100px) { .adc-mpl-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .adc-mpl-grid { grid-template-columns: 1fr; } } /* ---- Craft band ---- */ .adc-craft { background: var(--adc-band); border-top: 1px solid var(--adc-line); border-bottom: 1px solid var(--adc-line); } .adc-craft .adc-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(36px, 5vw, 64px); } .adc-craft__img { display: flex; align-items: center; justify-content: center; } .adc-craft__frame { display: inline-block; max-width: 100%; line-height: 0; } .adc-craft__frame a { display: inline-block; line-height: 0; } .adc-craft__img img { display: block; max-width: 100%; max-height: 460px; width: auto; height: auto; object-fit: contain; } @media (max-width: 860px) { .adc-craft__img img { max-height: 340px; } .adc-craft__frame img[style] { border-width: 20px !important; } } .adc-craft__copy p { color: var(--adc-muted); line-height: 1.65; margin: 16px 0 24px; } .adc-craftstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; border-top: 1px solid var(--adc-line); padding-top: 22px; } .adc-craftstats .adc-n { font-size: clamp(18px, 2vw, 24px); } /* ---- Artist cards ---- */ .adc-artist-card { text-align: center; } .adc-artist-portrait { position: relative; display: block; overflow: hidden; border-radius: 50%; aspect-ratio: 1 / 1; background: var(--adc-soft); border: 1px solid var(--adc-line); } .adc-artist-portrait img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .adc-artist-name { display: block; margin-top: 12px; font-family: var(--adc-serif); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .adc-artist-card:hover .adc-artist-name { color: var(--adc-accent); } /* ---- Museum prestige ---- */ .adc-museum { background: var(--adc-band); border-top: 1px solid var(--adc-line); border-bottom: 1px solid var(--adc-line); } .adc-museum__body { display: grid; grid-template-columns: 1fr 1.6fr; grid-template-areas: "hero grid" "copy grid"; gap: clamp(20px, 3vw, 40px); align-items: stretch; padding-top: clamp(44px, 5vw, 72px); padding-bottom: clamp(44px, 5vw, 72px); } .adc-museum__hero { grid-area: hero; display: block; border-radius: var(--adc-radius); overflow: hidden; background: var(--adc-soft); border: 1px solid var(--adc-line); } .adc-museum__hero img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; } .adc-museum__grid { grid-area: grid; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 12px; } .adc-museum__copy { grid-area: copy; } .adc-museum__tile { border-radius: 8px; overflow: hidden; background: var(--adc-soft); border: 1px solid var(--adc-line); } .adc-museum__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .adc-museum__tile:hover img { transform: scale(1.05); } .adc-museum__copy { display: flex; flex-direction: column; justify-content: center; } .adc-museum__copy p { color: var(--adc-muted); line-height: 1.6; margin: 12px 0 18px; } /* ---- Reviews ---- */ .adc-reviews { background: var(--adc-bg); padding: clamp(36px, 5vw, 72px) 0; } .adc-review { margin: 0; background: var(--adc-paper); border: 1px solid var(--adc-line); border-radius: var(--adc-radius); padding: 28px 26px; } .adc-stars { color: var(--adc-accent); letter-spacing: 2px; font-size: 15px; margin-bottom: 12px; } .adc-review blockquote { font-family: var(--adc-serif); font-size: 19px; line-height: 1.4; margin: 0 0 16px; } .adc-review figcaption { font-size: 13px; color: var(--adc-muted); font-weight: 600; } /* ---- Curation steps ---- */ .adc-curation { padding: clamp(36px, 5vw, 72px) 0; } .adc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(24px, 3vw, 40px); } .adc-step { display: flex; gap: 16px; align-items: flex-start; } .adc-num { font-family: var(--adc-serif); font-size: 34px; line-height: 1; color: var(--adc-accent); flex-shrink: 0; } .adc-step p { color: var(--adc-muted); margin: 0; font-size: 14.5px; line-height: 1.55; } /* ---- CTA band / newsletter ---- */ .adc-ctaband { background: var(--adc-ink); color: #fff; } .adc-ctaband .adc-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; padding-top: clamp(40px, 6vw, 70px); padding-bottom: clamp(40px, 6vw, 70px); } .adc-ctaband .adc-h2 { color: #fff; } .adc-ctaband .adc-h2 em { color: #fff; } .adc-ctaband p { color: rgba(255,255,255,.66); margin: 18px 0 0; max-width: 40ch; } .adc-signup { display: flex; gap: 10px; margin-top: 4px; } .adc-signup input { flex: 1; min-width: 0; padding: 14px 16px; border-radius: var(--adc-radius); border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font: inherit; } .adc-signup input::placeholder { color: rgba(255,255,255,.5); } .adc-signup button { padding: 14px 24px; border: 0; border-radius: var(--adc-radius); background: #fff; color: var(--adc-ink); font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; } .adc-signup button:hover { background: var(--adc-line); } .adc-fineprint { margin-top: 14px; font-size: 12px; color: rgba(255,255,255,.5); } /* ---- Buttons ---- */ .adc-btn { display: inline-block; padding: 11px 22px; border-radius: 999px; background: var(--adc-ink); color: #fff; font-weight: 600; font-size: 13px; font-family: var(--adc-sans); border: 0; cursor: pointer; align-self: flex-start; transition: background .15s ease; } .adc-btn:hover { background: #2c2a27; color: #fff; } .adc-btn--ghost { background: transparent; color: var(--adc-ink); border: 1px solid var(--adc-line-2); } .adc-btn--ghost:hover { background: transparent; border-color: var(--adc-ink); } .adc-mb { margin-bottom: 16px; } /* ---- Artist spotlight (WA disposition: portrait · intro · 2×2 works) ---- */ .adc-spotlight { display: grid; grid-template-columns: minmax(0, 35%) 1fr minmax(0, 400px); gap: clamp(16px, 2.5vw, 32px); align-items: start; } .adc-spotlight__portrait { position: relative; display: block; border-radius: var(--adc-radius); overflow: hidden; aspect-ratio: 1 / 1; background: var(--adc-soft); border: 1px solid var(--adc-line); } .adc-spotlight__portrait img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .adc-spotlight__portrait:hover img { transform: scale(1.04); } .adc-spotlight__name { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 14px 12px; color: #fff; font-family: var(--adc-serif); font-size: 20px; background: linear-gradient(to top, rgba(0,0,0,.6), transparent); } .adc-spotlight__intro { display: flex; flex-direction: column; } .adc-spotlight__sub { margin: 6px 0 12px; color: var(--adc-muted); } .adc-spotlight__bio { color: var(--adc-muted); font-size: 14px; line-height: 1.55; } .adc-spotlight__intro .adc-textlink { margin-top: 14px; } .adc-spotlight__works { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; justify-self: end; width: 100%; max-width: 400px; } /* ---- Feature (movement masterclass) ---- */ .adc-feature { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; } .adc-feature__media { position: relative; display: block; border-radius: var(--adc-radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--adc-soft); border: 1px solid var(--adc-line); } .adc-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .adc-feature__media:hover img { transform: scale(1.03); } .adc-feature__cap { position: absolute; left: 0; bottom: 0; padding: 16px; color: #fff; font-family: var(--adc-serif); font-size: 22px; background: linear-gradient(to top, rgba(0,0,0,.6), transparent); width: 100%; } .adc-feature__side { display: flex; flex-direction: column; gap: 16px; } .adc-rowlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .adc-rowlist a { display: flex; gap: 12px; align-items: center; } .adc-rowlist__thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: var(--adc-soft); border: 1px solid var(--adc-line); } .adc-rowlist__thumb img { width: 100%; height: 100%; object-fit: cover; } .adc-rowlist__txt { display: flex; flex-direction: column; min-width: 0; } .adc-rowlist__txt b { font-family: var(--adc-serif); font-size: 16px; font-weight: 500; } .adc-rowlist__txt span { color: var(--adc-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adc-rowlist a:hover b { color: var(--adc-accent); } /* Movement masterclass: smaller portrait + 6 works as 3 cols × 2 rows */ .adc-feature--movement { grid-template-columns: 0.85fr 2.1fr; align-items: start; } .adc-feature--movement .adc-feature__lead { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .adc-feature--movement .adc-feature__media { aspect-ratio: 3 / 4; } .adc-feature--movement .adc-feature__bio { color: var(--adc-muted); font-size: 14px; line-height: 1.55; margin: 0; } .adc-section-sub__link { color: inherit; text-decoration: none; } .adc-section-sub__link:hover, .adc-section-sub__link:focus { color: var(--adc-accent, #0d9488); text-decoration: underline; } .adc-movement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 16px); margin-bottom: 16px; } @media (max-width: 760px) { .adc-movement-grid { grid-template-columns: repeat(2, 1fr); } } /* ---- Artist on this day (WA disposition, ADC styling) ---- */ .adc-otd { display: grid; grid-template-columns: 230px 1.4fr 1fr; gap: clamp(16px, 2.5vw, 32px); align-items: start; } .adc-otd__portrait { position: relative; display: block; border-radius: var(--adc-radius); overflow: hidden; aspect-ratio: 3 / 4; background: var(--adc-soft); border: 1px solid var(--adc-line); } .adc-otd__portrait img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .adc-otd__portrait:hover img { transform: scale(1.04); } .adc-otd__namebar { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 12px 10px; color: #fff; font-family: var(--adc-serif); font-size: 18px; background: linear-gradient(to top, rgba(0,0,0,.6), transparent); } .adc-otd__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .adc-otd__aside { display: flex; flex-direction: column; } .adc-otd__born { margin: 8px 0 12px; color: var(--adc-muted); } .adc-otd__meta { color: var(--adc-muted); font-size: 14px; line-height: 1.6; margin: 0 0 14px; } @media (max-width: 992px) { .adc-otd { grid-template-columns: 1fr 1fr; } .adc-otd__aside { grid-column: 1 / -1; } } @media (max-width: 560px) { .adc-otd { grid-template-columns: 1fr; } .adc-otd__grid { grid-template-columns: repeat(2, 1fr); } } /* ---- Featured-artist facts / quick-fact box ---- */ .adc-faf .adc-frame { aspect-ratio: 1 / 1; } .adc-faf { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(18px, 2.5vw, 32px); align-items: start; } .adc-faf__works { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.6vw, 20px); } .adc-faf__desc { color: var(--adc-muted); font-size: 13.5px; line-height: 1.55; margin: 14px 0 0; } .adc-faf__cta { margin-top: 16px; } @media (max-width: 900px) { .adc-faf { grid-template-columns: 1fr; } } @media (max-width: 560px) { .adc-faf__works { grid-template-columns: 1fr 1fr; } } .adc-factbox { background: var(--adc-paper); border: 1px solid var(--adc-line); border-radius: var(--adc-radius); padding: 22px; } .adc-factbox__photo { display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 1 / 1; background: var(--adc-soft); border: 1px solid var(--adc-line); margin-bottom: 14px; } .adc-factbox__photo img { width: 100%; height: 100%; object-fit: cover; } .adc-factlist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .adc-factlist li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.5; color: var(--adc-muted); } .adc-factlist li::before { content: "—"; position: absolute; left: 0; color: var(--adc-accent); } .adc-factbox .adc-textlink { display: inline-block; margin-top: 14px; } /* ---- Quizzes / identify ---- */ .adc-quiz { background: var(--adc-paper); border: 1px solid var(--adc-line); border-radius: var(--adc-radius); overflow: hidden; display: flex; flex-direction: column; } .adc-quiz__img { display: block; aspect-ratio: 16 / 10; background: var(--adc-soft); overflow: hidden; } .adc-quiz__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .adc-quiz__img:hover img { transform: scale(1.04); } .adc-quiz__body { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .adc-quiz__q { font-family: var(--adc-serif); font-size: 19px; line-height: 1.3; margin: 0; } .adc-quiz__opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; } .adc-quiz__opts li { padding: 10px 12px; border: 1px solid var(--adc-line); border-radius: 8px; font-size: 14px; transition: border-color .12s, background .12s; } .adc-quiz__opts li:hover { border-color: var(--adc-accent); background: rgba(179,64,42,.05); } .adc-identify { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .adc-identify__thumb { display: block; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: var(--adc-soft); border: 1px solid var(--adc-line); } .adc-identify__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .adc-identify__thumb:hover img { transform: scale(1.06); } /* ---- Reimagine your photo ---- */ .adc-reimagine { display: grid; grid-template-columns: 340px 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; background: var(--adc-paper); border: 1px solid var(--adc-line); border-radius: var(--adc-radius); padding: clamp(20px, 3vw, 36px); } .adc-reimagine__copy { display: flex; flex-direction: column; gap: 12px; } .adc-reimagine__copy p { color: var(--adc-muted); margin: 0; line-height: 1.6; } /* Reimagine style rail: very slow auto-scroll (duplicated track for seamless loop). */ .adc-reimagine__rail-wrap { margin: 0; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); } .adc-reimagine__rail-track { display: flex; width: max-content; animation: adc-reimagine-marquee 150s linear infinite; } .adc-reimagine__rail-track:hover { animation-play-state: paused; } .adc-reimagine__rail-set { display: flex; flex-shrink: 0; gap: clamp(12px, 1.6vw, 20px); padding-right: clamp(12px, 1.6vw, 20px); } .adc-reimagine__rail-set .adc-style-card { flex: 0 0 clamp(160px, 14vw, 200px); scroll-snap-align: unset; } @keyframes adc-reimagine-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .adc-reimagine__rail-wrap { overflow-x: auto; -webkit-mask-image: none; mask-image: none; overscroll-behavior-x: contain; scrollbar-width: thin; } .adc-reimagine__rail-track { animation: none; flex-wrap: nowrap; } .adc-reimagine__rail-set[aria-hidden="true"] { display: none; } } /* ---- Promo grid (article keyword) ---- */ .adc-promo .adc-frame { aspect-ratio: 1 / 1; } .adc-promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; } .adc-promo-grid .adc-sub { margin-top: 6px; font-size: 12px; } /* ---- Ready-to-ship price ---- */ .adc-rts-price { display: block; margin-top: 6px; font-family: var(--adc-serif); font-weight: 600; font-size: 15px; color: var(--adc-ink); } /* ---- Available now — ready to ship (prototype design) ---- */ .adc-avail-ready { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--adc-muted); white-space: nowrap; } .adc-pip { width: 8px; height: 8px; border-radius: 999px; background: var(--adc-muted); display: inline-block; flex-shrink: 0; } .adc-pip--green { background: #1f8a5b; } .adc-avail { display: block; } .adc-avail__frame { position: relative; display: block; overflow: hidden; border-radius: var(--adc-radius); background: var(--adc-soft); border: 1px solid var(--adc-line); aspect-ratio: 4 / 5; } .adc-avail__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .adc-avail:hover .adc-avail__frame img { transform: scale(1.04); } .adc-avail__meta { display: block; padding-top: 11px; } .adc-avail__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .adc-avail__artist { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; } .adc-avail__title { display: block; font-family: var(--adc-serif); font-style: italic; font-size: 14.5px; line-height: 1.25; color: var(--adc-muted); margin-top: 1px; } .adc-avail:hover .adc-avail__title { color: var(--adc-accent); } .adc-avail__detail { display: block; font-size: 12px; color: var(--adc-faint); margin-top: 5px; } .adc-avail__price { display: block; font-family: var(--adc-serif); font-weight: 600; font-size: 15px; color: var(--adc-ink); margin-top: 7px; } .adc-avail__ship { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--adc-muted); margin-top: 8px; } /* ---- Curation CTA ---- */ .adc-curation__cta { text-align: center; margin-top: clamp(24px, 3vw, 40px); } /* ---- Hero: Original & Exclusive Art (text left, image right) ---- */ .adc-herox { padding: clamp(32px, 5vw, 64px) 0; } .adc-herox__body { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 5vw, 64px); align-items: center; } .adc-herox__copy .adc-h1 { font-size: clamp(32px, 4.6vw, 56px); } .adc-herox__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 16px; } .adc-herox__note { font-size: 12.5px; color: var(--adc-muted); margin-bottom: 26px; } .adc-herox__stats { margin-top: 0; } .adc-herox__stats a { display: block; } .adc-herox__media { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; } .adc-herox__frame { display: inline-block; max-width: 100%; line-height: 0; } .adc-herox__frame-link { display: inline-block; line-height: 0; } .adc-herox__media img { display: block; max-width: 100%; max-height: 540px; width: auto; height: auto; object-fit: contain; } .adc-herox__caption { text-align: center; line-height: 1.3; } .adc-herox__cap-title { display: block; font-family: var(--adc-serif); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .adc-herox__cap-artist { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--adc-muted); } .adc-herox__cap-title:hover, .adc-herox__cap-artist a:hover { color: var(--adc-accent); } @media (max-width: 860px) { .adc-herox__body { grid-template-columns: 1fr; } .adc-herox__media { order: -1; } .adc-herox__media img { max-height: 360px; } .adc-herox__frame img[style] { border-width: 24px !important; } } /* ---- Responsive ---- */ @media (max-width: 992px) { .adc-grid--famous { grid-template-columns: repeat(2, 1fr); } .adc-museum__body { grid-template-columns: 1fr; grid-template-areas: "hero" "grid" "copy"; } .adc-museum__hero img { min-height: 220px; } .adc-spotlight { grid-template-columns: 1fr; } .adc-spotlight__portrait { aspect-ratio: 16 / 9; } .adc-spotlight__works { grid-template-columns: repeat(4, 1fr); } .adc-feature, .adc-reimagine { grid-template-columns: 1fr; } .adc-feature--movement { grid-template-columns: 1fr; } } @media (max-width: 768px) { .adc-pagehead .adc-wrap, .adc-craft .adc-wrap, .adc-ctaband .adc-wrap { grid-template-columns: 1fr; } .adc-grid--3 { grid-template-columns: 1fr; } .adc-steps { grid-template-columns: 1fr; } .adc-spotlight__works { grid-template-columns: repeat(2, 1fr); } .adc-signup { flex-direction: column; } .adc-signup button { width: 100%; } } @media (max-width: 600px) { .adc-museum__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .adc-grid--famous { grid-template-columns: 1fr 1fr; } .adc-headstats, .adc-craftstats { grid-template-columns: 1fr; gap: 12px; } .adc-herox__stats { grid-template-columns: repeat(3, 1fr); } } /* ---- Curators' Edit (#curators): one row on desktop ---- */ .adc-grid--curators, #curators .adc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 992px) { .adc-grid--curators, #curators .adc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 768px) { .adc-grid--curators, #curators .adc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .adc-grid--curators, #curators .adc-grid { grid-template-columns: 1fr; } } /* ===================================================== ADC — Site-wide page content horizontal rhythm Match header utility bar / category nav / footer inset. ===================================================== */ main > .container, main > .reproduction_main_page.container, main > .adc-v2, main > main > .container, main > .container-fluid { width: 100%; max-width: none !important; padding-left: var(--adc-pad) !important; padding-right: var(--adc-pad) !important; } .consultation_container { max-width: none !important; width: 100%; padding-left: var(--adc-pad) !important; padding-right: var(--adc-pad) !important; } .consultation_bottom { padding-left: var(--adc-pad); padding-right: var(--adc-pad); } /* ===================================================== ADC chrome — site-wide header & footer (gallery-minimal) Faithful to the ArtsDot UI Kit: white canvas, Archivo, hairline rules, single terracotta accent, near-square radius. (loaded site-wide via base.html: css/artsdot-V1.8.css) ===================================================== */ /* Shared chrome container */ .adc-chrome-wrap { width: 100%; margin: 0 auto; padding-left: var(--adc-pad); padding-right: var(--adc-pad); } /* ---- Slim top strip: reassurance + language/currency ---- */ .wa-topbar { background: var(--adc-bg); color: var(--adc-ink-2); font-family: var(--adc-body); font-size: 12px; letter-spacing: 0.01em; padding: 8px var(--adc-pad); border-bottom: 1px solid var(--adc-line); } .wa-topbar a { color: var(--adc-ink-2); } .wa-topbar a:hover { color: var(--adc-ink); } .wa-topbar .wa-topbar-left { display: flex; align-items: center; gap: 22px; } .wa-topbar .wa-topbar-item { display: inline-flex; align-items: center; gap: 7px; } .wa-topbar .wa-topbar-item i { color: var(--adc-accent); font-size: 12px; } .wa-topbar .wa-topbar-right { display: flex; align-items: center; gap: 14px; } /* ---- Header utility bar ---- */ /* Sticky on scroll with a soft shadow so the header stays usable on long pages. */ .header_container { background: var(--adc-bg); color: var(--adc-ink); font-family: var(--adc-body); position: sticky; top: 0; z-index: 1000; box-shadow: 0 1px 0 var(--adc-line); transition: box-shadow .2s ease; } .header_container.is-stuck { box-shadow: 0 6px 20px rgba(17,17,16,.08); } .adc-utility { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px); padding: 12px var(--adc-pad); border-bottom: 1px solid var(--adc-line); } .adc-logo { flex-shrink: 0; display: flex; align-items: center; } .adc-logo img { height: 32px; width: auto; display: block; } /* Full-width search — hairline rectangle, 2px radius (capped so it stays tidy) */ .adc-search { flex: 1 1 auto; min-width: 0; max-width: none; width: 100%; position: relative; display: flex; align-items: center; } .adc-search form { flex: 1 1 auto; min-width: 0; width: 100%; } .adc-search .form-control, .adc-search input { width: 100%; height: 42px; border: 1px solid var(--adc-line); border-radius: var(--adc-radius); background: var(--adc-bg); padding: 0 40px 0 14px; font: inherit; font-size: 13.5px; color: var(--adc-ink); box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } .adc-search input::placeholder { color: var(--adc-ink-3); } .adc-search input:focus { outline: none; border-color: var(--adc-ink); box-shadow: 0 0 0 3px rgba(17,17,16,.06); } .adc-search__btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 6px; display: grid; place-items: center; cursor: pointer; } .adc-search__btn img { width: 16px; height: 16px; opacity: .5; } .adc-utility-right { display: flex; align-items: center; gap: 18px; margin-left: auto; font-size: 13px; line-height: 18px; } .adc-util-link { color: var(--adc-ink); white-space: nowrap; font-weight: 500; transition: color .15s ease; } .adc-util-link:hover { color: var(--adc-accent); } .adc-header .adc-utility-right .icon-group, .adc-header .adc-utility-right .adc-selectors { display: contents; } .adc-utility-right .icon-group { display: flex; align-items: center; gap: 18px; } .adc-utility-right .icon-group img { width: 22px; height: 22px; display: block; } /* UI Kit Section 11: icons at 18×18 to match SVG viewBox */ #aps-user-auth-widget .aps-user-auth-visual { width: 24px; height: 24px; } #aps-user-auth-widget img { width: 18px; height: 18px; } .aps-user-initial { font-family: var(--adc-body); font-weight: 700; font-size: 10px; color: var(--adc-ink); } /* Sign-up / account pill */ .adc-pill { background: var(--adc-ink); color: #fff; border: 0; border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .15s ease; } .adc-pill:hover { background: #2c2a27; color: #fff; } /* Cart badge */ .aps-cart-icon-wrap { position: relative; display: inline-flex; } .aps-cart-count-badge { position: absolute; top: -7px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--adc-accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } /* ---- Category nav row ---- */ .adc-mainnav { background: var(--adc-bg); border-bottom: 1px solid var(--adc-line); } /* max-width/margin removed: row padding is set by --adc-pad in the template */ .adc-mainnav__row { display: flex; align-items: center; gap: 30px; min-height: 48px; } /* .adc-mainnav__note removed — reassurance text lives in footer (.footbar__reassurance) */ .adc-mainnav .nav-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 28px; } .adc-mainnav .nav-menu > li { position: relative; } .adc-mainnav .nav-menu > li > a { font-family: var(--adc-body); font-size: 13.5px; font-weight: 500; color: var(--adc-ink); white-space: nowrap; display: inline-flex; align-items: center; height: 46px; letter-spacing: -0.005em; } .adc-mainnav .nav-menu > li > a:hover { color: var(--adc-ink-2); } .adc-mainnav .dropdown-content, .adc-mainnav .dropdown-content.full-width { position: absolute; top: 100%; left: 0; z-index: 60; display: none; background: var(--adc-bg); border: 1px solid var(--adc-line); border-radius: var(--adc-radius); box-shadow: 0 14px 34px rgba(17,17,16,.09); padding: 20px 22px; opacity: 0; visibility: hidden; pointer-events: none; } .adc-mainnav .dropdown:hover .dropdown-content, .adc-mainnav .dropdown:hover .dropdown-content.full-width { display: none; opacity: 0; visibility: hidden; pointer-events: none; } .adc-mainnav .dropdown.dropdown-open .dropdown-content, .adc-mainnav .dropdown.dropdown-open .dropdown-content.full-width, .adc-mainnav .dropdown.dropdown-closing .dropdown-content, .adc-mainnav .dropdown.dropdown-closing .dropdown-content.full-width { display: block; } .adc-mainnav .dropdown.dropdown-open:not(.dropdown-closing) .dropdown-content, .adc-mainnav .dropdown.dropdown-open:not(.dropdown-closing) .dropdown-content.full-width { opacity: 1; visibility: visible; pointer-events: auto; transition: none; } .adc-mainnav .dropdown.dropdown-closing .dropdown-content, .adc-mainnav .dropdown.dropdown-closing .dropdown-content.full-width { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; } .adc-mainnav .dropdown > a { cursor: pointer; } .adc-mainnav .dropdown-inner { display: flex; gap: 32px; } .adc-mainnav .dropdown-inner .column { display: flex; flex-direction: column; gap: 10px; min-width: 150px; } .adc-mainnav .dropdown-inner a { font-size: 13px; color: var(--adc-ink-2); white-space: nowrap; } .adc-mainnav .dropdown-inner a:hover { color: var(--adc-ink); } /* Mobile menu toggle (hamburger) — quiet ink */ .adc-utility-right .mobile_menu_toggle .menu_icon { font-size: 19px; color: var(--adc-ink); cursor: pointer; display: none; } .adc-utility-right .consultation, .consultation.mobile_consultation { background: var(--adc-ink); color: #fff; border-radius: 999px; padding: 9px 18px; font-weight: 600; font-size: 13px; } .consultation.mobile_consultation:hover { background: #2c2a27; color: #fff; } /* Desktop ≥992px: category nav; mobile ≤991px: hamburger drawer */ @media (min-width: 992px) { .adc-mainnav { display: block; } .adc-header .adc-burger { display: none; } } @media (max-width: 991px) { .adc-mainnav { display: none; } .adc-header .adc-burger { display: inline-flex; align-items: center; justify-content: center; } .adc-utility-right .adc-util-link, .adc-utility-right .adc-pill { display: none; } /* Logo + icons on the top row; search drops onto its own full-width line. */ .adc-utility { gap: 12px; padding: 10px var(--adc-pad); flex-wrap: wrap; row-gap: 10px; } .adc-logo img { height: 26px; } .adc-search { max-width: none; order: 3; flex-basis: 100%; } .adc-utility-right { gap: 16px; } .adc-utility-right .icon-group { gap: 16px; } } /* ---- Footer ---- brand column + 4 link columns + footbar ---- */ .footer_sec { background: var(--adc-bg); color: var(--adc-ink); font-family: var(--adc-body); border-top: 1px solid var(--adc-line); } .footer_sec .footer_container { width: 100%; margin: 0 auto; padding: clamp(40px, 5vw, 64px) var(--adc-pad) 30px; } /* layout: brand (wide) + footer link columns */ .footer_sec .row { display: grid; grid-template-columns: 1.5fr 3fr; gap: clamp(28px, 4vw, 56px); } .footer_sec .footer_list-wrap, .footer_sec .col-lg-9 { min-width: 0; } .footer_sec .col-lg-9 .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.5vw, 40px); } /* brand column */ .footer_sec .logo img, .ArtsDot-Footer-Block-Content-Payment-Warranty.logo img { height: 30px; width: auto; margin-bottom: 18px; } .footer_sec .adc-footbrand__tagline { font-size: 13px; color: var(--adc-ink-2); line-height: 1.6; max-width: 32ch; margin: 0 0 18px; } .footer_sec .messaging_links { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 12.5px; margin: 0 0 18px; } .footer_sec .messaging_links a { color: var(--adc-ink-2); } .footer_sec .messaging_links a:hover { color: var(--adc-ink); } .footer_sec .messaging_links i, .footer_sec .messaging_links .fas, .footer_sec .messaging_links .fab { color: var(--adc-accent); margin-right: 4px; } /* link columns */ .footer_sec .links_heading { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--adc-ink); margin: 0 0 16px; font-weight: 700; } .footer_sec .footer_list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .footer_sec .footer_list a, .footer_sec .list_link { font-size: 13.5px; color: var(--adc-ink-2); transition: color .15s ease; } .footer_sec .footer_list a:hover, .footer_sec .list_link:hover { color: var(--adc-accent); } /* social icons — quiet, monochrome until hover */ .footer_sec .social_icons { display: flex; gap: 14px; margin-top: 2px; } .footer_sec .social_icons a { display: inline-flex; align-items: center; justify-content: center; } .footer_sec .social_icons a img { width: 18px; height: 18px; opacity: .55; transition: opacity .15s ease; } .footer_sec .social_icons a:hover img { opacity: 1; } /* Newsletter / art-suggestion popups — light cards on white, terracotta CTA */ .subscription-popup .form-control { background: var(--adc-bg); border: 1px solid var(--adc-line); border-radius: var(--adc-radius); color: var(--adc-ink); padding: 12px 14px; } .subscription-popup .form-control::placeholder { color: var(--adc-ink-3); } .btn-popup { background: var(--adc-accent); color: #fff; border: 0; border-radius: var(--adc-radius); padding: 12px 22px; font-weight: 600; letter-spacing: 0.01em; } .btn-popup:hover { background: #93311f; color: #fff; } /* ---- Footbar (copyright + payment) ---- */ .footer-container-bottom { background: var(--adc-bg); color: var(--adc-ink-2); font-family: var(--adc-body); border-top: 1px solid var(--adc-line); } .footer-container-bottom > .w-100 { margin: 0 auto; padding-left: var(--adc-pad); padding-right: var(--adc-pad); } .footer-container-bottom, .footer-container-bottom div { font-size: 12.5px; } .footer-container-bottom img { height: 20px; width: auto; } /* Stack copyright above payment marks on phones instead of cramping them. */ @media (max-width: 560px) { .footer-container-bottom .d-flex.justify-content-between { flex-direction: column; gap: 12px; align-items: flex-start !important; } } .wa-bottombar, .bottom-bar, [class*="bottom_bar"] { background: var(--adc-bg); color: var(--adc-ink-2); font-size: 12px; } .wa-bottombar a:hover { color: var(--adc-ink); } /* ---- Footer responsive ---- */ @media (max-width: 1024px) { .footer_sec .row { grid-template-columns: 1fr; gap: 36px; } .footer_sec .col-lg-9 .row { grid-template-columns: repeat(3, 1fr); gap: 28px 24px; } } @media (max-width: 700px) { .footer_sec .col-lg-9 .row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .footer_sec .col-lg-9 .row { grid-template-columns: 1fr; gap: 26px; } } /* ===================================================== */ /* MERGED FROM articles_style-V1.8.css */ /* ===================================================== */ a { color: inherit; } H1, H2, H3 { clear: both; font-size: 29px; text-align: left; line-height: 38px; margin-bottom: 32px; font-weight: 400; font-family: var(--font-title); margin-top: 55px; } H2:first-of-type { margin-top: 0; } .HTMLSectionBlock { float: right; max-width: 20vw; padding: 0 1vh 1vh 1vh; text-align: justify; clear: both; font-size: 14px; font-style: italic; font-weight: 400; color: #776E62; line-height: 21px; } .HTMLSectionBlock p { margin: 0; padding: 0; font-size: 14px; font-style: italic; font-weight: 400; color: #776E62; line-height: 21px; } .HTMLSectionBlock a { display: inline-block; color: #000000; text-align: justify; margin-bottom: 8px; } .HTMLSectionBlock img { display: block; margin: 0 auto 0.5em auto; /* Centers the image & adds space below */ max-width: 100%; max-height: 350px; margin-bottom: 8px; } /* ===================================================== */ /* MERGED FROM widget-artwork-labels.css */ /* ===================================================== */ /* * widget-artwork-labels.css — unified typography for artwork/category captions * in widgets. Loaded after site *-V1.8.css in base.html. * Typography only — does not override color, background, padding, or overlay layout. */ .widget-stf__label, .widget-stf__label a, .bpa-stf__label, .widget-mpl__category, .widget-mpl__category a, .widget-mpl__caption, .widget-mpl__caption a, .widget-tf-static__category, .widget-tf-static__category a, .widget-recent-own-static__category, .widget-recent-own-static__category a, .widget-stock-ready-static__category, .widget-stock-ready-static__category a, .widget-museum-4p__label, .widget-museum-4__label, .widget-museum-6p__label, .widget-museum-6h__label, .widget-museum-single__caption, .widget-artist-otd5__label, .widget-artist-otd5__art-title, .widget-curated-choice__label, .widget-curated-choice__label--hero, .widget-curated-choice__label--small, .widget-artist-spotlight__art-title, .widget-imp10__art-title, .widget-pop10__art-title, .widget-famous10__art-title, .widget-quiz-artwork__caption { font-family: var(--font-title, inherit) !important; font-size: clamp(0.95rem, 1.2vw, 1.0625rem) !important; font-weight: 400 !important; letter-spacing: 0.02em !important; line-height: 1.3 !important; text-transform: none !important; font-style: normal !important; font-synthesis: none !important; } /* ===================================================== */ /* MERGED FROM userprofile-V1.8.css */ /* ===================================================== */ /* Profile: sidebar shell only — do not use * reset (zeros .sidebar_profile_section / link padding) */ .userprofile-page .sidebar-col, .userprofile-page .mobile-sidebar { box-sizing: border-box; } body.userprofile-page { font-family: var(--font-body); background: #EDE9DE; } .userprofile-page .sidebar-col a, .userprofile-page .mobile-sidebar a { text-decoration: none; } .userprofile-page .sidebar_menu_link ul, .userprofile-page .mobile-sidebar .sidebar_menu_link ul { padding-left: 0px; margin-bottom: 0px; } .userprofile-page .sidebar_menu_link li, .userprofile-page .mobile-sidebar .sidebar_menu_link li { list-style-type: none; } .header_box { background: #F7F2E1; padding: 15px 20px; box-shadow: 0px 0px 10px 0px rgb(62 52 42 / 10%); -webkit-box-shadow: 0px 0px 10px 0px rgb(62 52 42 / 10%); -moz-box-shadow: 0px 0px 10px 0px rgb(62 52 42 / 10%); margin-left: 320px; } h3.user_heading_text { color: #3E342A; font-weight: 400; font-size: 20px; line-height: 30px; font-family: var(--font-title); margin-bottom: 0px; } p.user_title_text { color: #3E342A; font-size: 14px; font-weight: 400; opacity: 0.6; line-height: 22px; margin-bottom: 0px; } aside > .sidebar_box { background: #504943; margin-bottom:0 !important; border:0 !important; height:100%; } .sidebar_menu_link { /* height: 100vh; */ } .sidebar_profile_section { padding: 15px 30px; border-bottom: 1px solid #EDE9DE33; display: flex; gap: 10px; align-items: center; } aside::-webkit-scrollbar { width: 8px; } aside::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } aside::-webkit-scrollbar-thumb { background: #8B4513; border-radius: 10px; } aside::-webkit-scrollbar-thumb:hover { background: #A0522D; } aside { scrollbar-width: thin; scrollbar-color: #DCD3BF #504943; } .image_letter { width: 50px; height: 50px; line-height: 50px; text-align: center; background: #9b91885e; border-radius: 50%; color: #EDE9DE; font-weight: 500; font-size: 19.43px; } .profile_name { color: #EDE9DE; font-weight: 500; font-size: 18px; line-height: 26px; } .profile_email { color: #EDE9DE; opacity: 0.6; font-size: 16px; font-weight: 400; line-height: 16px; } .sidebar_menu_link ul li { cursor: pointer; } .sidebar_menu_link li.active { background: #F0B6530F; border-left: 4px solid #F0B653; } .sidebar_menu_link li.active a span { color: #F0B653; } /* .sidebar_menu_link li.active a svg { color: #F0B653 !important; } */ .sidebar_menu_link li a { padding: 22px 30px; } .sidebar_menu_link li { transition: background-color 0.3s ease, color 0.3s ease; } .sidebar_menu_link li:hover , .logout_section ul li:hover{ background: #F0B6530F; } /* .sidebar_menu_link li:hover a svg, */ .sidebar_menu_link li:hover a span, .logout_section ul li:hover a span, .logout_section ul li:hover a svg { color: #F0B653; } .sidebar_menu_link ul li a { display: flex; align-items: center; gap: 15px; } .sidebar_menu_link li span, .logout_section ul li span{ color: #EDE9DE; text-transform: uppercase; font-weight: 500; font-size: 16px; } .sidebar_menu_link li a svg , .logout_section ul li a svg { color: #EDE9DE ; } .main_section { } .favorite_img_card { border-right: 1px solid #DCD3BF; border-bottom: 1px solid #DCD3BF; 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: #B23333; } .fav-artist h2 a{ color: #B23333; } .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: #3E342A; margin: 6px 0px 11px; min-height: 38px; } .fav-title a{ color: #3E342A; } .button-dash { width: 100%; border: 1px solid #875D2A; border-radius: 0; padding: 11px 15px; color: #875D2A; 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 #DCD3BF; } .logout_section { width: 100%; z-index: 99; background: #504943; } .logout_section ul li { cursor: pointer; } .logout_section ul li a { display: flex; align-items: center; padding: 22px 30px; gap: 15px; } .logout_section ul li span{ color: #EDE9DE; text-transform: uppercase; font-weight: 500; font-size: 14px; } .main_gap { padding: 16px; } .top_order_section { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; } .order_count { color: #3E342A; 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 #DCD3BF; } .date_amount h6 { color: #3E342A; font-size: 14px; opacity: 0.6; font-weight: 400; text-transform: uppercase; margin-bottom: 0px; } .date_amount p { color: #3E342A; 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(62 52 42 / 10%); -webkit-box-shadow: 0px 0px 10px 0px rgb(62 52 42 / 10%); -moz-box-shadow: 0px 0px 10px 0px rgb(62 52 42 / 10%); background: #F7F2E1; } .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: #DCD3BF !important; } table thead th { background: #E8E2CD !important; color: #3E342A !important; opacity: 0.6; font-weight: 400; text-transform: uppercase; font-size: 14px; padding: 9px 12px !important; } table tbody td { background: #F7F2E1 !important; color: #3E342A !important; padding: 12px 14px !important; font-family: var(--font-body); font-weight: 400; font-style: Regular; font-size: 16px; leading-trim: NONE; line-height: 24px; letter-spacing: 0%; } .red_box { color: #B0312E; display: inline; font-weight: 500; background: #F0DFCF; padding: 4px 10px; border-radius: 4px; } .green_box { color: #389544; display: inline; font-weight: 500; background: #E4E9D1; padding: 4px 10px; border-radius: 4px; } .yellow_box { color: #D08608; display: inline; font-weight: 500; background: #F3E7CB; padding: 4px 10px; border-radius: 4px; } .table_type_datail { display: flex; align-items: center; gap: 9px; } .table_img { width: 18px; height: 18px; position: relative; top: -3px; } .table_img img { width: 100%; height: 100%; } .img_date_box { position: relative; top: -2px; left: -3px; } /*message_us form css*/ .message-bg { background-color:#E8E2CD; } .message_section { } .message_form { max-width: 630px; /* background: #E8E2CD; */ margin: auto; } textarea.form-control:focus { background-color:#F7F2E1; } .message_image img { width: 100%; height: 100%; object-fit: cover; /* Image ko crop karke fill karega */ display: block; max-height: 800px; } .text-center.sendmsg_textt { /* padding-top: 120px; */ } .text-center.sendmsg_textt h1 { font-size: 48px; font-weight: 400; font-family: var(--font-title); line-height: 56px; color: #3E342A; } .text-center.sendmsg_textt p { font-size: 16px; line-height: 24px; opacity:0.8; font-weight: 400; font-family: var(--font-body); color: #3E342A; } .mesg_textarea textarea { width: 100%; height: 280px; margin-top:36px; margin-bottom:30px; padding: 10px; font-size: 16px; font-family: var(--font-body); border: 1px solid #F7F2E1; resize: vertical; background: #F7F2E1; border-radius:0; } .mesg_textarea textarea:focus { border: 1px solid #ccc; box-shadow: none; } .mesg_textarea { } .sendmsg_textt button { padding: 14px; border: none; background: #948574; font-family: var(--font-body); font-weight: 500; font-style: Medium; font-size: 16px; leading-trim: CAP_HEIGHT; line-height: 20px; width:100%; letter-spacing: 6%; text-align: center; text-transform: uppercase; color:#EDE9DE; } .sendmsg_textt button:hover { border: none !important; color:#EDE9DE !important; background: #948574 !important; } /* When textarea is focused, change button color */ .mesg_textarea textarea:focus ~ button { background: #875D2A; } .mesg_textarea textarea:focus { outline: none; /* Remove the blue glow */ border: none; /* Remove the border */ box-shadow: none; /* Ensure no shadow */ } /*succesfull msg */ .text-center.suceesfulmsg_textt{ padding-top: 230px; } .text-center.suceesfulmsg_textt img { padding-bottom: 30px; } .text-center.suceesfulmsg_textt h1 { font-size: 45px; font-weight: 400; font-family: var(--font-title); line-height: 66px; color: #3E342A; } .text-center.suceesfulmsg_textt p { font-size: 16px; line-height: 24px; font-weight: 400; font-family: var(--font-body); color: #3E342A; } .suceesfulmsg_textt button { padding: 10px 120px; border: none; background: #875D2A; font-size: 16px; line-height: 24px; font-family: var(--font-body); font-weight: 500; color: #EDE9DE; text-transform: uppercase; } /* Sidebar Default */ aside { width: 100%; background: #E8E2CD; height: 100%; overflow-y: auto; overflow-x: hidden; transition: transform 0.3s ease-in-out; z-index: 999; } /* Toggle Button */ .sidebar-toggle { background: #948574; color: white; border: none; padding: 8px 12px; font-size: 18px; cursor: pointer; z-index: 1000; } .mobile-sidebar { position: fixed; top: 0; left: -270px; height: 100vh; width: 260px; background-color: #504943; z-index: 1050; transition: left 0.3s ease-in-out; box-shadow: 2px 0 5px rgba(0,0,0,0.5); } .mobile-sidebar.active { left: 0; } .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1040; display: none; } .sidebar-overlay.active { display: block; } .sidebar-toggle-btn { position: absolute; top: 1rem; right: 1rem; z-index: 1060; width: 40px !important; } .sidebar_box .sidebar_menu_link li img { height: clamp(20px , 1.25vw , 24px); width: clamp(20px , 1.25vw , 24px); filter: brightness(0) invert(1); transition: filter 0.3s ease; } @media (min-width: 768px) { .sidebar-toggle-btn { display: none; } .profile_picture_top_header_initiales { font-size: 15.43px; } .message_form { padding: 0px 60px; } .message_image { padding:0; } .upload_img_form { display: flex; flex-direction: row-reverse; text-align: left; gap: 12px; } /* .main-grid-row { display: flex; } */ /* .sidebar-col { flex-basis: 25%; max-width: 25%; } .main-content-col { flex-basis: 75%; max-width: 75%; padding-left: 2rem; } */ .mobile-sidebar { display: none; } /* .logout_section { position: absolute; bottom: 0; } */ .sidebar_box { position: relative; } } /* Responsive */ @media (max-width: 768px) { .profile-photo-section .profile-photo-upload .form-control { background-color: #F7F2E1 !important; border-radius: 0 !important; padding: 12px !important; border: 1px solid #9A9385 !important; } .e_card_form { padding: 24px; margin: 24px auto; } .profile-photo-section { padding: 15px; } .profile-photo-circle { width: 120px; height: 120px; border-width: 3px; } .btn-delete-photo { padding: 8px 16px; font-size: 12px; } .form-container input , .main-grid-row input { font-size: 14px; width: 100%; padding: 9px; margin-bottom: 8px; } .purchase-card .btn-prev { font-size: 14px !important; padding: 10px !important; width: auto; } .puchase-card-content { padding: 14px; gap: 14px; } .purchase-card-head { padding: 14px; } .sidebar_profile_section { padding: 15px 15px;}.profile_name{ font-size: 15px;} .profile_email {font-size: 12px;}.sidebar_menu_link li span {font-size: 12px;}.sidebar_menu_link ul li img {width: 20px;height:20px; object-fit:contain;} .text-center.sendmsg_textt h1 {font-size: 35px;line-height: 42px;}.text-center.suceesfulmsg_textt h1 { font-size: 30px;line-height: 38px;} .text-center.suceesfulmsg_textt p {font-size: 13px;line-height: 20px;} .suceesfulmsg_textt button {padding: 10px 80px;font-size: 14px;} .text-center.sendmsg_textt p { font-size: 14px; line-height: 14px; } aside { height: 100%; } .message_image img { height: 339px !important; } .sidebar_box .text-center.mb-20 img{ } .sidebar_box { width:auto !important; } aside {transform: translateX(0%);}aside.active { transform: translateX(0); }.sidebar-toggle {display: block;}#sidebar { display: block; } .main_section { margin-left: 0px;margin-top: 20px;}.sidebar-toggle { display: block;}.header_box {margin-left:0px;padding: 10px 20px;position: fixed; top: 0; left: 0;width: 100%;z-index: 999;} .date_amount h6 {font-size: 12px;}p.user_title_text {font-size: 12px;}.date_amount p {font-size: 12px;}.button-dash {padding: 5px 8px; font-size: 12px;}.purchase-bottom ul li img { object-fit: cover;} .fav_img {height: auto;}.favorite_img_card {padding: 40px 0px; width: 100%;}table thead th {font-size: 12px; white-space: nowrap;} table tbody td { font-size: 12px;white-space: nowrap;}.table_img img {width: 80%; height: 80%;object-fit: contain;}.img_date_box {position: relative;top: 0px;left: 0px;} .message_form {width: 100%;}.sendmsg_textt button {padding: 10px 60px}.message_image {width: 100%;order: -1;padding-top:50px;} .text-center.sendmsg_textt {padding-top: 60px;padding-bottom: 60px;}.text-center.suceesfulmsg_textt {padding-top: 50px; padding-bottom: 50px;} } /* Tablet Portrait to Tablet Landscape */ @media (min-width: 768px) and (max-width: 1023px) { /* Tablet styles */ } /* Small Desktop / Laptop */ @media (min-width: 1024px) and (max-width: 1199px) { } /* Large Desktop */ @media (min-width: 1200px) and (max-width: 1365px) { } /* Extra Large Desktop */ @media (min-width: 1366px) and (max-width: 1919px) { } /* Full HD (1920px) to Ultra-wide */ @media (min-width: 1920px) and (max-width: 2499px) { } /* Ultra-wide 2K/4K */ @media (min-width: 2500px) { } .profile_picture img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } /* Profile Photo Edit Section */ .profile-photo-section { margin-bottom: 25px; padding: 20px; background: #F7F2E1; border-radius: 0px; } .profile-photo-section > label { display: block; color: #3E342A; position: relative; font-weight: 500; padding: 0; font-size: 16px; margin-bottom: 15px; text-transform: uppercase; }.profile-photo-section > label { display: block; color: #3E342A; font-weight: 500; font-size: 16px; margin-bottom: 15px; text-transform: uppercase; } .profile-photo-display { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; padding: 20px; background: #E8E2CD; border-radius: 0; } .profile-photo-circle { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 4px solid #875D2A; box-shadow: 0 4px 10px rgba(62, 52, 42, 0.2); margin-bottom: 15px; } .profile-photo-path { margin-bottom: 10px; text-align: center; } .profile-photo-path small { color: #3E342A; opacity: 0.7; font-size: 13px; word-break: break-all; } .profile-photo-actions { margin-top: 10px; } .btn-delete-photo { background: #B23333; color: #EDE9DE; border: none; padding: 10px 20px; font-size: 14px; font-weight: 500; text-transform: uppercase; border-radius: 4px; cursor: pointer; transition: background 0.3s ease; } .btn-delete-photo:hover { background: #8B2222; } .profile-photo-upload { margin-top: 15px; } .profile-photo-upload input[type="file"] { display: block; width: 100%; padding: 10px; background: #FFFFFF; border: 1px solid #DCD3BF; border-radius: 4px; font-size: 14px; color: #3E342A; } .profile-photo-upload .form-text { display: block; margin-top: 8px; color: #3E342A !important; opacity: 0.6; } /* user interaction-card */ .interaction-card { /* background-color:#DCD3BF; */ border-radius: 0; /* background-color: #DCD3BF; */ padding: 0; border: 0; } .header-section { background-color: #F7F2E1; padding: 12px 20px; margin-bottom: 20px; width: -webkit-fill-available; box-shadow: 0px 0px 10px 0px #3E342A1A; } .header-section h3 { font-family: var(--font-title); font-weight: 400; font-style: Regular; font-size: 26px; leading-trim: NONE; line-height: 36px; letter-spacing: 0%; color:#3E342A; } .header-section p { color:#3E342A; font-family: var(--font-body); font-weight: 400; font-style: Regular; font-size: 16px; leading-trim: NONE; line-height: 24px; letter-spacing: 0%; } .profile_picture { width: 50px; height:50px; border-radius:50%; } .purchase-card { background-color:#F7F2E1; border:1px solid #DCD3BF; padding:0; } .purchase-card-head { padding:20px; border-bottom:1px solid #DCD3BF; } .puchase-card-content { padding:20px; flex-wrap: wrap; gap:20px; } .puchase-card-content img { height:120px; width:120px; } .purchase-card .btn-prev { color:#875D2A; font-family: var(--font-body); font-weight: 500; font-style: Medium; font-size: 16px; leading-trim: CAP_HEIGHT; line-height: 20px; letter-spacing: 6%; text-align: center; text-transform: uppercase; padding:20px; width: auto; } /* Form-floating: always use "focused" style (label above, reduced padding) on account forms */ .e_card_form .form-floating > .form-control, .e_card_form .form-floating > .form-select { padding-top: 1.2rem !important; padding-bottom: 8px; } .e_card_form .form-floating > .form-control ~ label, .e_card_form .form-floating > .form-control-plaintext ~ label, .e_card_form .form-floating > .form-select ~ label { color: #7b7b7b !important; opacity: 0.8; transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); font-size: 12px !important; } /* ===================================================== ADC — Artwork buy / reproduction page (gallery-minimal) Overrides legacy gray/WA tokens on PDP + academic block. Scoped to .reproduction_main_page only. ===================================================== */ .reproduction_main_page { --adc-radius: 2px; --adc-line: #e6e6e6; --adc-line-2: #d6d6d6; --adc-band: #f5f5f5; --adc-slot: #eeeeee; font-family: var(--adc-body, var(--font-body)); color: var(--adc-ink, #111110); background-color: var(--adc-bg, #ffffff); } /* Academic block — same horizontal width as reproduction_section (no nested container gutters) */ .reproduction_main_page > .container { max-width: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .reproduction_main_page .article_main_page, .reproduction_main_page .article_main_page.p-0 { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; width: 100% !important; } .reproduction_main_page .academicism_wrapper, .reproduction_main_page .acadamic_inner_box { padding-left: 0; padding-right: 0; max-width: none; width: 100%; } /* ---- Action bar + cross-channel links (Buy print, Share, Favorites, …) ---- */ .reproduction_main_page .fav-icon-artwork, .reproduction_main_page .buy_sale_channel_heading_alternate_buy { border-bottom-color: var(--adc-line, #e6e6e6); } .reproduction_main_page .buy_sale_channel_heading_alternate_buy { gap: 20px; padding-bottom: 16px; } .reproduction_main_page .fav-icon-artwork a, .reproduction_main_page .fav-icon-artwork .artwork-share-trigger, .reproduction_main_page .buy_sale_channel_heading_alternate_buy a { font-family: var(--adc-body, var(--font-body)); font-size: 13px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; text-transform: none; color: var(--adc-ink-2, #6e6c68) !important; transition: color 0.15s ease; } .reproduction_main_page .fav-icon-artwork a:hover, .reproduction_main_page .fav-icon-artwork .artwork-share-trigger:hover, .reproduction_main_page .buy_sale_channel_heading_alternate_buy a:hover { color: var(--adc-accent, #b3402a) !important; } /* Monochrome icons — neutral ink (SVG assets still carry legacy WA #875D2A) */ .reproduction_main_page .fav-icon-artwork a img, .reproduction_main_page .fav-icon-artwork .artwork-share-trigger img, .reproduction_main_page .buy_sale_channel_heading_alternate_buy a img { width: 18px; height: 18px; flex-shrink: 0; filter: brightness(0) saturate(100%); opacity: 0.42; transition: opacity 0.15s ease, filter 0.15s ease; } .reproduction_main_page .fav-icon-artwork a:hover img, .reproduction_main_page .fav-icon-artwork .artwork-share-trigger:hover img, .reproduction_main_page .buy_sale_channel_heading_alternate_buy a:hover img { opacity: 1; filter: brightness(0) saturate(100%) invert(37%) sepia(28%) saturate(1679%) hue-rotate(339deg) brightness(91%) contrast(89%); } .reproduction_main_page .fav-icon-artwork a.fav_toggle .fav_icon { filter: brightness(0) saturate(100%) invert(37%) sepia(28%) saturate(1679%) hue-rotate(339deg) brightness(91%) contrast(89%); opacity: 1; } /* ---- Metadata chips (medium, movement, year, …) ---- */ .reproduction_main_page .details_reproducton li { font-family: var(--adc-body, var(--font-body)); font-size: 13px; font-weight: 400; color: var(--adc-ink-2, #6e6c68); } .reproduction_main_page .details_reproducton li img { width: 16px; height: 16px; opacity: 0.7; } /* ---- PDP titles ---- */ .reproduction_main_page .repro_heading, .reproduction_main_page .buy_sale_channel_heading, .reproduction_main_page .buy_sale_channel_heading a { font-family: var(--adc-display, var(--font-title)); font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--adc-ink, #111110); text-transform: none; } .reproduction_main_page .buy_sale_channel_short_description { font-family: var(--adc-body, var(--font-body)); font-size: 14px; font-weight: 300; color: var(--adc-ink-2, #6e6c68); } /* ---- Accordions (description, size, summary, …) — band on full panel ---- */ .reproduction_main_page .reproduc_tabs .accordion-item, .reproduction_main_page .reproduction_image_detail .accordion-item, .reproduction_main_page .repruct_content_collapse .accordion-item, .reproduction_main_page #summary_checkout .accordion-item, .reproduction_main_page #summary_checkout .collapse_inner_box .accordion-item { background-color: var(--adc-band, #f5f5f5) !important; border: 1px solid var(--adc-line, #e6e6e6) !important; border-radius: var(--adc-radius, 2px); overflow: hidden; padding-bottom: 0 !important; } .reproduction_main_page .repruct_content_collapse .accordion-item + .accordion-item { margin-top: 10px; } /* Gap between description/bio block and following collapse (e.g. digital images) */ .reproduction_main_page .reproduction_image_detail .repruct_content_collapse + .repruct_content_collapse { margin-top: 10px; } .reproduction_main_page .reproduc_tabs .accordion-item + .accordion-item, .reproduction_main_page .reproduction_image_detail .reproduc_tabs .accordion-item + .accordion-item { margin-top: 8px; } .reproduction_main_page .reproduc_tabs .accordion-collapse, .reproduction_main_page .reproduction_image_detail .accordion-collapse, .reproduction_main_page .repruct_content_collapse .accordion-collapse { background-color: var(--adc-band, #f5f5f5); } .reproduction_main_page .reproduc_tabs button.accordion-button, .reproduction_main_page .reproduc_tabs button.accordion-button:not(.collapsed), .reproduction_main_page .reproduction_image_detail .accordion-item button.accordion-button, .reproduction_main_page .reproduction_image_detail .accordion-item button.accordion-button:not(.collapsed), .reproduction_main_page .repruct_content_collapse button.accordion-button, .reproduction_main_page .repruct_content_collapse button.accordion-button:not(.collapsed), .reproduction_main_page #summary_checkout button.accordion-button, .reproduction_main_page #summary_checkout button.accordion-button:not(.collapsed) { font-family: var(--adc-body, var(--font-body)) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.04em; text-transform: uppercase !important; color: var(--adc-ink, #111110) !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; } .reproduction_main_page .reproduc_tabs button.accordion-button { padding: 12px 20px; } .reproduction_main_page .repruct_content_collapse button.accordion-button { padding: 12px 20px; } .reproduction_main_page .reproduc_tabs .accordion-body, .reproduction_main_page .reproduction_image_detail .accordion-body, .reproduction_main_page .repruct_content_collapse .accordion-body, .reproduction_main_page #summary_checkout .accordion-body { font-family: var(--adc-body, var(--font-body)); font-size: 14px; font-weight: 300; color: var(--adc-ink-2, #6e6c68); background: transparent !important; background-color: transparent !important; } .reproduction_main_page #summary_checkout .accordion-body { padding: 0 16px 16px !important; } .reproduction_main_page .reproduc_tabs .accordion-body { padding: 0 20px 16px !important; } .reproduction_main_page .repruct_content_collapse .accordion-body { padding: 0 20px 16px !important; } .reproduction_main_page .repruct_content_collapse { border-top-color: var(--adc-line, #e6e6e6); border-bottom-color: var(--adc-line, #e6e6e6); } .reproduction_main_page .repruct_content_collapse .accordion-body span { color: var(--adc-accent, #b3402a); } /* Configurator tabs + radios */ .reproduction_main_page .reproduc_tabs .nav-pills .nav-link { font-family: var(--adc-body, var(--font-body)); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--adc-ink-3, #a3a09b); border-bottom-color: transparent; } .reproduction_main_page .reproduc_tabs .nav-pills .nav-link.active, .reproduction_main_page .reproduc_tabs .nav-pills .show > .nav-link { color: var(--adc-ink, #111110); border-bottom-color: var(--adc-accent, #b3402a); } .article_main_page .repro_radio label, .article_main_page .ques_box .repro_radio label, .reproduction_main_page .repro_radio label, .reproduction_main_page .article_main_page .repro_radio label, .adc-buy-page-section .repro_radio label, .reproduction_main_page .ques_box .repro_radio label, .reproduction_main_page .article_main_page .ques_box .repro_radio label, .adc-buy-page-section .ques_box .repro_radio label { font-family: var(--adc-body, var(--font-body)); font-size: 14px !important; font-weight: 400; line-height: 1.45 !important; color: var(--adc-ink, #111110) !important; } .article_main_page .repro_radio input[type="radio"], .reproduction_main_page .repro_radio input[type="radio"], .reproduction_main_page .article_main_page .repro_radio input[type="radio"], .adc-buy-page-section .repro_radio input[type="radio"] { background: var(--adc-bg, #ffffff); } .article_main_page .repro_radio input[type="radio"]:after, .article_main_page .question_option .repro_radio input[type="radio"]:after, .reproduction_main_page .repro_radio input[type="radio"]:after, .reproduction_main_page .article_main_page .repro_radio input[type="radio"]:after, .adc-buy-page-section .repro_radio input[type="radio"]:after, .reproduction_main_page .question_option .repro_radio input[type="radio"]:after, .reproduction_main_page .article_main_page .question_option .repro_radio input[type="radio"]:after, .adc-buy-page-section .question_option .repro_radio input[type="radio"]:after { background-color: var(--adc-bg, #ffffff) !important; border: 1px solid var(--adc-line-2, #d6d6d6) !important; } .article_main_page .repro_radio input[type="radio"]:checked:after, .article_main_page .question_option .repro_radio input[type="radio"]:checked:after, .reproduction_main_page .repro_radio input[type="radio"]:checked:after, .reproduction_main_page .article_main_page .repro_radio input[type="radio"]:checked:after, .adc-buy-page-section .repro_radio input[type="radio"]:checked:after, .reproduction_main_page .question_option .repro_radio input[type="radio"]:checked:after, .reproduction_main_page .article_main_page .question_option .repro_radio input[type="radio"]:checked:after, .adc-buy-page-section .question_option .repro_radio input[type="radio"]:checked:after { background-color: var(--adc-accent, #b3402a) !important; border-color: var(--adc-accent, #b3402a) !important; outline: 1.5px solid var(--adc-accent, #b3402a) !important; outline-offset: 3px; } /* CTA buttons */ .reproduction_main_page .add_tocart_btn button, .reproduction_main_page .reproduction_button_box .add_tocart_btn button { font-family: var(--adc-body, var(--font-body)); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #ffffff; background: var(--adc-accent, #b3402a); border: 1px solid var(--adc-accent, #b3402a); border-radius: var(--adc-radius, 2px); transition: background 0.15s ease, border-color 0.15s ease; } .reproduction_main_page .add_tocart_btn button:hover:not(:disabled), .reproduction_main_page .reproduction_button_box .add_tocart_btn button:hover:not(:disabled) { background: #93311f; border-color: #93311f; color: #ffffff; } /* ---- Academic / story block ---- */ .article_main_page .artwork_section, .reproduction_main_page .artwork_section, .reproduction_main_page .article_main_page .artwork_section, .adc-buy-page-section.artwork_section { background: transparent !important; padding-top: 24px; padding-bottom: 8px; padding-left: 0 !important; padding-right: 0 !important; } /* Unified section headings (Quick Facts, Quiz, story, sidebars, sliders) */ .article_main_page .art_heading, .article_main_page .art_heading.art_heading--quick-facts, .article_main_page .quick_facts_section h4, .article_main_page .art_quize_section .art_header h4, .article_main_page .side_headings, .reproduction_main_page .art_heading, .reproduction_main_page .article_main_page .art_heading, .adc-buy-page-section .art_heading, .reproduction_main_page .art_heading.art_heading--quick-facts, .reproduction_main_page .article_main_page .art_heading.art_heading--quick-facts, .adc-buy-page-section .art_heading.art_heading--quick-facts, .reproduction_main_page .quick_facts_section h4, .reproduction_main_page .article_main_page .quick_facts_section h4, .adc-buy-page-section .quick_facts_section h4, .reproduction_main_page .quick_facts_section h4.art_heading, .reproduction_main_page .article_main_page .quick_facts_section h4.art_heading, .adc-buy-page-section .quick_facts_section h4.art_heading, .reproduction_main_page .art_quize_section .art_header h4, .reproduction_main_page .article_main_page .art_quize_section .art_header h4, .adc-buy-page-section .art_quize_section .art_header h4, .reproduction_main_page .side_headings, .reproduction_main_page .article_main_page .side_headings, .adc-buy-page-section .side_headings { font-family: var(--adc-body, var(--font-body)) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--adc-ink, #111110) !important; margin-top: 0 !important; margin-bottom: 18px !important; padding-top: 0 !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--adc-line-2, #d6d6d6) !important; opacity: 1; } /* Beat global-custom .art_header h4 (24px / cream) on quiz titles */ .article_main_page .art_quize_section .art_header h4.art_heading { font-family: var(--adc-body, var(--font-body)) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--adc-ink, #111110) !important; } .reproduction_main_page .art_heading.art_heading--section-spaced, .adc-buy-page-section .art_heading.art_heading--section-spaced, .article_main_page .art_heading.art_heading--section-spaced { margin-top: 36px !important; } /* Related slider — contained width, no legacy full-bleed padding */ .adc-buy-page-section .parent_slid_box.adc-related-slider { border: none; border-bottom: none; padding: 0 0 28px; margin: 0; } .reproduction_main_page .art_text, .reproduction_main_page .art_detail, .article_main_page .box_facts ul li, .reproduction_main_page .box_facts ul li, .reproduction_main_page .article_main_page .box_facts ul li { font-family: var(--adc-body, var(--font-body)); font-weight: 300; color: var(--adc-ink-2, #6e6c68); } .article_main_page .box_facts ul li b, .reproduction_main_page .box_facts ul li b, .reproduction_main_page .article_main_page .box_facts ul li b { font-weight: 600; color: var(--adc-ink, #111110); } .article_main_page .box_facts ul li a, .reproduction_main_page .box_facts ul li a, .reproduction_main_page .article_main_page .box_facts ul li a, .article_main_page .qf-more-trigger, .reproduction_main_page .qf-more-trigger { color: var(--adc-accent, #b3402a); } .article_main_page .box_facts ul li a:hover, .article_main_page .qf-more-trigger:hover, .reproduction_main_page .box_facts ul li a:hover, .reproduction_main_page .qf-more-trigger:hover { color: #93311f; } /* Quick Facts cards */ .article_main_page .quick_facts_section, .reproduction_main_page .quick_facts_section, .reproduction_main_page .article_main_page .quick_facts_section, .adc-buy-page-section .quick_facts_section { background-color: var(--adc-slot, #eeeeee) !important; border: 1px solid var(--adc-line, #e6e6e6); border-radius: var(--adc-radius, 2px); padding: 20px; } /* Art Quiz — ADC card (reproduction academic block + digital image sidebar) */ .article_main_page .art_quize_section, .reproduction_main_page .art_quize_section, .reproduction_main_page .article_main_page .art_quize_section, .adc-buy-page-section .art_quize_section { margin-top: 0; background: var(--adc-bg, #ffffff) !important; border: 1px solid var(--adc-line, #e6e6e6); border-radius: var(--adc-radius, 2px); padding: 20px; } /* List of Artworks — white band (ADC; overrides global beige #E8E2CD) */ .article_main_page .listOf_artwork_section { background: var(--adc-bg, #ffffff) !important; background-color: var(--adc-bg, #ffffff) !important; } /* View more — same secondary action as catalog group-by "See All" */ .article_main_page .listOf_artwork_section .view_all_art { margin-top: clamp(24px, 3vw, 32px); } .article_main_page .listOf_artwork_section .view_all_art a { display: inline-block; font-family: var(--adc-body, var(--font-body)); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: normal; text-transform: none; color: var(--adc-ink, #111110) !important; text-decoration: none; transition: color 0.15s ease; } .article_main_page .listOf_artwork_section .view_all_art a:hover, .article_main_page .listOf_artwork_section .view_all_art a:focus { color: var(--adc-accent, #b3402a) !important; } /* Table of Contents — same card surface as Art Quiz (white bg) */ .article_main_page .table_of_contents_section, .reproduction_main_page .table_of_contents_section, .reproduction_main_page .article_main_page .table_of_contents_section, .adc-buy-page-section .table_of_contents_section { margin-top: 0; background: var(--adc-bg, #ffffff) !important; border: 1px solid var(--adc-line, #e6e6e6); border-radius: var(--adc-radius, 2px); padding: 20px; } /* Article sidebar — TOC flat like Browse; Quick Facts card matches reproduction #facts */ .article_main_page .tableContent .table_of_contents_section { background: transparent !important; background-color: transparent !important; border: none; border-radius: 0; padding: 0; } .article_main_page .tableContent .quick_facts_section, .article_main_page .tableContent .quick_facts_section#facts { background-color: var(--adc-slot, #eeeeee) !important; border: 1px solid var(--adc-line, #e6e6e6) !important; border-radius: var(--adc-radius, 2px); padding: 20px !important; width: 100%; box-sizing: border-box; } .article_main_page .tableContent .art_quize_section, .article_main_page .tableContent .art_quize_section#quiz { margin-top: 16px !important; background: var(--adc-bg, #ffffff) !important; border: 1px solid var(--adc-line, #e6e6e6) !important; border-radius: var(--adc-radius, 2px); padding: 20px !important; width: 100%; box-sizing: border-box; } .article_main_page .tableContent .artist_sidebar_links > .side_headings, .article_main_page .tableContent .table_of_contents_section > .side_headings, .article_main_page .tableContent .table_of_contents_section > .art_heading { margin-bottom: 8px !important; padding-bottom: 6px !important; } .article_main_page .tableContent .quick_facts_section > h4.art_heading.art_heading--quick-facts, .article_main_page .tableContent .quick_facts_section#facts > h4.art_heading.art_heading--quick-facts { font-family: var(--adc-body, var(--font-body)) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 33px !important; min-height: 33px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--adc-ink, #111110) !important; margin-top: 0 !important; margin-bottom: 14px !important; padding-top: 0 !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--adc-line-2, #d6d6d6) !important; box-sizing: border-box; } .article_main_page .tableContent .art_quize_section .art_header h4.art_heading.art_heading--quick-facts, .article_main_page .tableContent .art_quize_section#quiz .art_header h4.art_heading.art_heading--quick-facts { font-family: var(--adc-body, var(--font-body)) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 33px !important; min-height: 33px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--adc-ink, #111110) !important; margin-top: 0 !important; margin-bottom: 14px !important; padding-top: 0 !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--adc-line-2, #d6d6d6) !important; box-sizing: border-box; } .article_main_page .quick_facts_section + .art_quize_section, .reproduction_main_page .quick_facts_section + .art_quize_section, .reproduction_main_page .article_main_page .quick_facts_section + .art_quize_section, .adc-buy-page-section .quick_facts_section + .art_quize_section { margin-top: 16px; } .article_main_page .art_quize_section .art_header p, .reproduction_main_page .art_quize_section .art_header p, .reproduction_main_page .article_main_page .art_quize_section .art_header p, .adc-buy-page-section .art_quize_section .art_header p { font-family: var(--adc-body, var(--font-body)); font-size: 12px; font-weight: 300; line-height: 1.45; color: var(--adc-ink-2, #6e6c68) !important; margin-bottom: 12px; } .article_main_page .ques_heading, .reproduction_main_page .ques_heading, .reproduction_main_page .article_main_page .ques_heading, .adc-buy-page-section .ques_heading { font-family: var(--adc-body, var(--font-body)); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--adc-accent, #b3402a) !important; } .article_main_page .ques_text, .reproduction_main_page .ques_text, .reproduction_main_page .article_main_page .ques_text, .adc-buy-page-section .ques_text { font-family: var(--adc-body, var(--font-body)); font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--adc-ink, #111110) !important; margin: 8px 0 12px; } .reproduction_main_page .ques_box, .adc-buy-page-section .ques_box { margin-bottom: 14px; } .article_main_page .art_quize_section .submit_quiz .add_tocart_btn button, .reproduction_main_page .art_quize_section .submit_quiz .add_tocart_btn button, .adc-buy-page-section .art_quize_section .submit_quiz .add_tocart_btn button { font-family: var(--adc-body, var(--font-body)); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #ffffff !important; background: var(--adc-accent, #b3402a) !important; border: 1px solid var(--adc-accent, #b3402a) !important; border-radius: var(--adc-radius, 2px); } .article_main_page .art_quize_section .submit_quiz .add_tocart_btn button:hover:not(:disabled), .reproduction_main_page .art_quize_section .submit_quiz .add_tocart_btn button:hover:not(:disabled), .adc-buy-page-section .art_quize_section .submit_quiz .add_tocart_btn button:hover:not(:disabled) { background: #93311f !important; border-color: #93311f !important; } .article_main_page .art_quize_section .submit_quiz .add_tocart_btn button.disabled_button, .reproduction_main_page .art_quize_section .submit_quiz .add_tocart_btn button.disabled_button, .adc-buy-page-section .art_quize_section .submit_quiz .add_tocart_btn button.disabled_button { opacity: 0.45; cursor: not-allowed; } .reproduction_main_page .art_quize_section .quiz_result_text, .adc-buy-page-section .art_quize_section .quiz_result_text { font-family: var(--adc-body, var(--font-body)); font-size: 14px; line-height: 1.45; color: var(--adc-ink, #111110) !important; border: 1px solid var(--adc-line, #e6e6e6); background: var(--adc-band, #f5f5f5); } .reproduction_main_page .art_quize_section .repro_radio.mark_wrong_answer, .adc-buy-page-section .art_quize_section .repro_radio.mark_wrong_answer { border-color: #d7352c; } .reproduction_main_page .art_quize_section .repro_radio.mark_right_answer, .adc-buy-page-section .art_quize_section .repro_radio.mark_right_answer { border-color: #4a8c2a; } /* Collections band at bottom of buy page */ .reproduction_main_page .full_collection_section { background: var(--adc-band, #f5f5f5); color: var(--adc-ink, #111110); } .reproduction_main_page .collec_heading, .reproduction_main_page .collec_heading a { font-family: var(--adc-display, var(--font-title)); font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 400; letter-spacing: -0.02em; color: var(--adc-ink, #111110); } .reproduction_main_page .collec_text { font-family: var(--adc-body, var(--font-body)); font-weight: 300; color: var(--adc-ink-2, #6e6c68); } .reproduction_main_page .collection_tabs .nav-pills .nav-link { font-family: var(--adc-body, var(--font-body)); font-size: 13px; color: var(--adc-ink-2, #6e6c68); border-color: var(--adc-line, #e6e6e6); } .reproduction_main_page .collection_tabs .nav-pills .nav-link.active, .reproduction_main_page .collection_tabs .nav-pills .show > .nav-link { color: var(--adc-ink, #111110); background-color: var(--adc-bg, #ffffff); border-color: var(--adc-line-2, #d6d6d6); } .reproduction_main_page .collection_details h4 { color: var(--adc-ink, #111110); } /* Optional extras (checkbox row) — Read more on its own line after label/description */ .reproduction_main_page .optional_box .optional_add { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; } .reproduction_main_page .optional_box .option_text { width: 100%; } .reproduction_main_page .optional_box .optional_add > .yellow_cont, .reproduction_main_page .optional_box .optional_add > span.yellow_cont { margin-top: 10px; margin-left: 0; padding-left: 0; align-self: flex-start; } /* Read more / Read More — ADC text CTA (accordions, tabs, options) */ .reproduction_main_page .yellow_cont, .reproduction_main_page span.yellow_cont { display: block; margin-top: 12px; } .reproduction_main_page .repruct_content_collapse .accordion-body .yellow_cont, .reproduction_main_page .reproduc_tabs .accordion-body .yellow_cont { margin-top: 12px; } /* Read more placed after .accordion-body (legacy markup) — align with body inset */ .reproduction_main_page .repruct_content_collapse .accordion-collapse > .yellow_cont, .reproduction_main_page .repruct_content_collapse .accordion-collapse > span.yellow_cont { padding-left: 16px; padding-right: 16px; margin-top: 0; margin-bottom: 4px; } .reproduction_main_page .yellow_cont a, .reproduction_main_page span.yellow_cont a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--adc-body, var(--font-body)); font-size: 12px; font-weight: 600; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; color: var(--adc-accent, #b3402a) !important; text-decoration: none; transition: color 0.15s ease; } .reproduction_main_page .yellow_cont a:hover, .reproduction_main_page span.yellow_cont a:hover { color: #93311f !important; } .reproduction_main_page .yellow_cont a .yellow_cont__icon, .reproduction_main_page .yellow_cont a img, .reproduction_main_page span.yellow_cont a .yellow_cont__icon, .reproduction_main_page span.yellow_cont a img { width: 14px; height: 14px; max-height: 14px; margin: 0 !important; flex-shrink: 0; filter: brightness(0) saturate(100%) invert(37%) sepia(28%) saturate(1679%) hue-rotate(339deg) brightness(91%) contrast(89%); opacity: 0.9; transition: opacity 0.15s ease, transform 0.15s ease, filter 0.15s ease; } .reproduction_main_page .yellow_cont a:hover .yellow_cont__icon, .reproduction_main_page .yellow_cont a:hover img, .reproduction_main_page span.yellow_cont a:hover .yellow_cont__icon, .reproduction_main_page span.yellow_cont a:hover img { opacity: 1; transform: translateX(2px); filter: brightness(0) saturate(100%) invert(30%) sepia(35%) saturate(1800%) hue-rotate(339deg) brightness(88%) contrast(92%); } /* Related articles — « Explore Article » CTA (sidebar + story) */ .reproduction_main_page .related_articles .explore_techniques, .reproduction_main_page .article_main_page .related_articles .explore_techniques { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-family: var(--adc-body, var(--font-body)); font-size: 12px; font-weight: 600; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; color: var(--adc-accent, #b3402a) !important; cursor: pointer; } .reproduction_main_page .related_articles .explore_techniques a, .reproduction_main_page .article_main_page .related_articles .explore_techniques a { font: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; text-transform: inherit; color: var(--adc-accent, #b3402a) !important; text-decoration: none; transition: color 0.15s ease; } .reproduction_main_page .related_articles .explore_techniques:hover, .reproduction_main_page .related_articles .explore_techniques a:hover, .reproduction_main_page .article_main_page .related_articles .explore_techniques:hover, .reproduction_main_page .article_main_page .related_articles .explore_techniques a:hover { color: #93311f !important; } .reproduction_main_page .related_articles .explore_techniques span, .reproduction_main_page .article_main_page .related_articles .explore_techniques span { display: inline-flex; align-items: center; line-height: 0; } .reproduction_main_page .related_articles .explore_techniques span img, .reproduction_main_page .article_main_page .related_articles .explore_techniques span img { width: 14px; height: 14px; margin: 0 !important; filter: brightness(0) saturate(100%) invert(37%) sepia(28%) saturate(1679%) hue-rotate(339deg) brightness(91%) contrast(89%); opacity: 0.9; transition: opacity 0.15s ease, transform 0.15s ease, filter 0.15s ease; } .reproduction_main_page .related_articles .explore_techniques:hover span img, .reproduction_main_page .article_main_page .related_articles .explore_techniques:hover span img { opacity: 1; transform: translateX(2px); filter: brightness(0) saturate(100%) invert(30%) sepia(35%) saturate(1800%) hue-rotate(339deg) brightness(88%) contrast(92%); } /* Academic block — Related Artworks inside reproduction_main_page */ .reproduction_main_page .container-fluid.adc-buy-page-section { padding-top: 32px !important; border-top: 1px solid var(--adc-line, #e6e6e6); } .reproduction_main_page .container-fluid.adc-buy-page-section .art_heading.art_heading--section-spaced, .reproduction_main_page .article_main_page .container-fluid.adc-buy-page-section .art_heading.art_heading--section-spaced { margin-top: 33px !important; } .reproduction_main_page .article_main_page hr { margin: 0; border: none; border-top: 1px solid var(--adc-line, #e6e6e6); } /* Related artworks slider — swiper prev/next (ADC asset: round band + arrow in SVG) */ .reproduction_main_page .parent_slid_box .artist_slider .swiper-button-next::after, .reproduction_main_page .parent_slid_box .artist_slider .swiper-button-prev::after, .adc-buy-page-section .parent_slid_box .artist_slider .swiper-button-next::after, .adc-buy-page-section .parent_slid_box .artist_slider .swiper-button-prev::after, .article_main_page .artistPage_Slider_section .parent_slid_box .artist_slider .swiper-button-next::after, .article_main_page .artistPage_Slider_section .parent_slid_box .artist_slider .swiper-button-prev::after { display: none; } .reproduction_main_page .parent_slid_box .artist_slider .swp_btn, .adc-buy-page-section .parent_slid_box .artist_slider .swp_btn, .article_main_page .artistPage_Slider_section .parent_slid_box .artist_slider .swp_btn { width: 44px; height: 44px; margin: 0; background: var(--adc-band, #f5f5f5) !important; border: none !important; border-radius: 50%; box-shadow: none !important; opacity: 0.85; transition: opacity 0.2s ease, background-color 0.2s ease; } .reproduction_main_page .parent_slid_box .artist_slider .swp_btn:hover:not(.swp_btn--adc), .adc-buy-page-section .parent_slid_box .artist_slider .swp_btn:hover:not(.swp_btn--adc), .article_main_page .artistPage_Slider_section .parent_slid_box .artist_slider .swp_btn:hover:not(.swp_btn--adc) { opacity: 1; background: var(--adc-band, #f5f5f5) !important; border: none !important; box-shadow: none !important; } .reproduction_main_page .parent_slid_box .artist_slider .swp_btn--adc:hover, .adc-buy-page-section .parent_slid_box .artist_slider .swp_btn--adc:hover, .article_main_page .artistPage_Slider_section .parent_slid_box .artist_slider .swp_btn--adc:hover { opacity: 1; background: var(--adc-band, #f5f5f5) url('../images/artist/arrows_swiper_adc.svg') no-repeat center / 44px 44px !important; border: none !important; box-shadow: none !important; } .reproduction_main_page .parent_slid_box .artist_slider .swiper-button-prev.swp_btn:not(.swp_btn--adc), .adc-buy-page-section .parent_slid_box .artist_slider .swiper-button-prev.swp_btn:not(.swp_btn--adc), .article_main_page .artistPage_Slider_section .parent_slid_box .artist_slider .swiper-button-prev.swp_btn:not(.swp_btn--adc) { transform: rotate(180deg); } .reproduction_main_page .parent_slid_box .artist_slider .swp_btn img, .adc-buy-page-section .parent_slid_box .artist_slider .swp_btn img, .article_main_page .artistPage_Slider_section .parent_slid_box .artist_slider .swp_btn img { width: 44px; height: 44px; display: block; object-fit: contain; background: transparent !important; filter: none !important; opacity: 1; } .reproduction_main_page .parent_slid_box .artist_slider .swp_btn--adc, .adc-buy-page-section .parent_slid_box .artist_slider .swp_btn--adc, .article_main_page .artistPage_Slider_section .parent_slid_box .artist_slider .swp_btn--adc { background: var(--adc-band, #f5f5f5) url('../images/artist/arrows_swiper_adc.svg') no-repeat center / 44px 44px !important; } .reproduction_main_page .parent_slid_box .artist_slider .swiper-button-prev.swp_btn--adc, .adc-buy-page-section .parent_slid_box .artist_slider .swiper-button-prev.swp_btn--adc, .article_main_page .artistPage_Slider_section .parent_slid_box .artist_slider .swiper-button-prev.swp_btn--adc { transform: rotate(180deg); } .reproduction_main_page .parent_slid_box .artist_slider .swiper-button-next.swp_btn.swiper-button-disabled, .reproduction_main_page .parent_slid_box .artist_slider .swiper-button-prev.swp_btn.swiper-button-disabled, .adc-buy-page-section .parent_slid_box .artist_slider .swiper-button-next.swp_btn.swiper-button-disabled, .adc-buy-page-section .parent_slid_box .artist_slider .swiper-button-prev.swp_btn.swiper-button-disabled, .article_main_page .artistPage_Slider_section .parent_slid_box .artist_slider .swiper-button-next.swp_btn.swiper-button-disabled, .article_main_page .artistPage_Slider_section .parent_slid_box .artist_slider .swiper-button-prev.swp_btn.swiper-button-disabled { opacity: 0.3 !important; pointer-events: none; } /* Below-fold sections — same horizontal inset as header/footer */ .container-fluid.adc-buy-page-section { padding-left: var(--adc-pad, 44px) !important; padding-right: var(--adc-pad, 44px) !important; box-sizing: border-box; width: 100%; max-width: none !important; } .adc-buy-page-section .artist_slider, .adc-buy-page-section .artworksimilarslider { max-width: 100%; } .adc-buy-page-section.artwork_section { padding-top: 32px !important; } .adc-buy-page-section .row > [class*="col-"] > .art_heading:first-child:not(.art_heading--section-spaced) { margin-top: 0 !important; } .adc-buy-page-section .row > [class*="col-"] > .art_heading.art_heading--section-spaced:first-child, .reproduction_main_page .article_main_page .adc-buy-page-section .row > [class*="col-"] > .art_heading.art_heading--section-spaced:first-child { margin-top: 33px !important; } /* Below-fold blocks (Related Artworks, Artist Biography, …) */ main > .container-fluid.adc-buy-page-section { padding-top: 32px !important; border-top: 1px solid var(--adc-line, #e6e6e6); } main > .container-fluid.adc-buy-page-section .art_heading.art_heading--section-spaced, main .reproduction_main_page .article_main_page .container-fluid.adc-buy-page-section .art_heading.art_heading--section-spaced { margin-top: 33px !important; } main > hr { margin: 0 var(--adc-pad, 44px); padding: 0; height: 0; border: none; border-top: 1px solid var(--adc-line, #e6e6e6); opacity: 1; } /* Digital Image — « Included in Every Digital Image Order » benefits band */ .premium_service { margin-bottom: var(--adc-pad, 44px); } .premium_service .why_choose_right, .premium_service .why_choose_right.black_back { height: auto !important; min-height: 0; padding: 32px var(--adc-pad, 44px) 48px !important; } .premium_service .why_choose_right h3 { margin: 0 0 10px; padding: 0; font-family: var(--adc-display, var(--font-title-accent)); font-size: clamp(22px, 2.5vw, 28px); font-weight: 600; line-height: 1.25; letter-spacing: 0.02em; text-align: center; color: var(--adc-band, #f5f5f5); } .premium_service .why_choose_right .heading_text { margin: 0 0 12px; font-family: var(--adc-display, var(--font-title-accent)); font-size: clamp(20px, 2.2vw, 26px); font-weight: 400; line-height: 1.3; text-align: center; color: var(--adc-band, #f5f5f5); } .premium_service .why_choose_right .heading_paragrap { margin: 0 auto; max-width: 52rem; text-align: center; color: var(--adc-ink-3, #a3a09b); } .premium_service .why_choose_box { margin-top: 28px; padding-bottom: 4px; } .premium_service .why_choose_right.black_back { overflow: visible; } .premium_service .why_choose_box .row { row-gap: 28px; margin-bottom: 8px; } .premium_service .why_choose_box .row > [class*="col-"] { display: flex; flex-direction: column; } .premium_service .why_choose_box_inner { align-items: flex-start; gap: 14px; margin-bottom: 0; height: auto; min-height: 0; flex: 1 1 auto; } .premium_service .why_choose_icon { margin-top: 2px; flex-shrink: 0; } .premium_service .why_choose_info { min-width: 0; flex: 1; } .premium_service .why_choose_info h5 { margin: 0 0 8px; font-family: var(--adc-body, var(--font-body)); font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--adc-band, #f5f5f5); } .premium_service .why_choose_info p { width: 100%; margin: 0; font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--adc-ink-3, #a3a09b); overflow: visible; } .premium_service .why_choose_icon img { background: transparent !important; outline: none !important; outline-offset: 0; filter: brightness(0) invert(1); opacity: 0.92; } .premium_service .why_choose_box_inner:hover .why_choose_icon img { opacity: 1; } /* ADC buy academic — override global-custom cream band (#E8E2CD) and WA quiz panel (#3E342A) */ .article_main_page .artwork_section, .reproduction_main_page .article_main_page .artwork_section { background: transparent !important; } .article_main_page .art_quize_section .ques_box .repro_radio label, .reproduction_main_page .article_main_page .art_quize_section .ques_box .repro_radio label { color: var(--adc-ink, #111110) !important; } .article_main_page .art_quize_section .question_option .repro_radio input[type="radio"]:after, .reproduction_main_page .article_main_page .art_quize_section .question_option .repro_radio input[type="radio"]:after { background-color: var(--adc-bg, #ffffff) !important; border: 1px solid var(--adc-line-2, #d6d6d6) !important; } .article_main_page .art_quize_section .question_option .repro_radio input[type="radio"]:checked:after, .reproduction_main_page .article_main_page .art_quize_section .question_option .repro_radio input[type="radio"]:checked:after { background-color: var(--adc-accent, #b3402a) !important; border-color: var(--adc-accent, #b3402a) !important; } .article_main_page .art_quize_section .art_header h4, .reproduction_main_page .article_main_page .art_quize_section .art_header h4 { color: var(--adc-ink, #111110) !important; } /* ═══════════════════════════════════════════════════════════════════ ADC — Artist / article detail (.article_main_page) Sidebar sections, related articles, artwork sliders ═══════════════════════════════════════════════════════════════════ */ /* Sidebar — vertical rhythm between grouped sections (Browse / TOC / Quick Facts) */ .article_main_page .tableContent > * + * { margin-top: 32px; } .article_main_page .related_articles > * + * { margin-top: 28px; } /* Related artworks — left sidebar (below TOC); card + list artwork typography */ .article_main_page .tableContent .related_artworks_sidebar.related_artworks_section { margin-top: 32px; } .article_main_page .related_artworks_box_main .related_artwork_box { padding: 0 0 20px; border-bottom: none; margin-bottom: 24px; } .article_main_page .related_artworks_box_main .related_artwork_box:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .article_main_page .tableContent .related_artwork_box .related_artwork_img_box { margin-bottom: 0; line-height: 0; } .article_main_page .tableContent .related_artwork_box .related_artwork_img_box img { display: block; } .article_main_page .tableContent .related_artwork_box .vincent_color { margin-top: 8px; margin-bottom: 2px; } .article_main_page .tableContent .related_artwork_box p { font-size: 14px; font-weight: 500; line-height: normal; color: var(--adc-ink, #111110); margin-bottom: 12px; } .article_main_page .tableContent .related_artwork_box p a { color: inherit; text-decoration: none; transition: color 0.15s ease; } .article_main_page .tableContent .related_artwork_box p a:hover { color: var(--adc-accent, #b3402a); } .article_main_page .tableContent .related_artwork_img_box img { width: 100%; object-fit: cover; object-position: center; border: none !important; border-image: none !important; box-shadow: none !important; } /* Headings inside card panels (title + body share one wrapper) */ .article_main_page .quick_facts_section > .art_heading, .article_main_page .art_quize_section .art_header .art_heading, .article_main_page .table_of_contents_section > .side_headings, .article_main_page .table_of_contents_section > .art_heading { margin-bottom: 8px !important; } /* Buy page story row — Quick Facts + Artwork Description share one heading box (beats global .art_heading) */ main .reproduction_main_page.container .article_main_page .artwork_section #artwork-description > h4.art_heading, main .reproduction_main_page.container .article_main_page .artwork_section .quick_facts_section#facts > h4.art_heading.art_heading--quick-facts, main .reproduction_main_page.container .article_main_page .artwork_section .quick_facts_section > h4.art_heading.art_heading--quick-facts { font-family: var(--adc-body, var(--font-body)) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 33px !important; min-height: 33px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--adc-ink, #111110) !important; margin-top: 0 !important; margin-bottom: 18px !important; padding-top: 0 !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--adc-line-2, #d6d6d6) !important; box-sizing: border-box; } main .reproduction_main_page.container .article_main_page .artwork_section #artwork-description > h4.art_heading { margin-bottom: 18px !important; } main .reproduction_main_page.container .article_main_page .artwork_section .quick_facts_section > h4.art_heading.art_heading--quick-facts, main .reproduction_main_page.container .article_main_page .artwork_section .quick_facts_section#facts > h4.art_heading.art_heading--quick-facts { margin-bottom: 14px !important; } /* Browse + Table of Contents — flat vertical nav (UI Kit .acct-nav pattern) */ .article_main_page .tableContent .artist_sidebar_links .nav.nav-pills, .article_main_page .tableContent .table_of_contents_section .nav.nav-pills, .article_main_page .tableContent #table-of-contents .nav.nav-pills { display: flex; flex-direction: column; gap: 2px; width: 100%; margin: 0; padding: 0; } .article_main_page .tableContent .artist_sidebar_links .nav-link, .article_main_page .tableContent .table_of_contents_section .nav-link, .article_main_page .tableContent #table-of-contents .nav-link { display: block; width: 100%; box-sizing: border-box; font-family: var(--adc-body, var(--font-body)); font-size: 13.5px; font-weight: 400; line-height: 1.35; color: var(--adc-ink, #111110); background: transparent; border: none; border-radius: 0; padding: 8px 10px 8px 14px; transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } .article_main_page .tableContent .artist_sidebar_links .nav-link:hover, .article_main_page .tableContent .table_of_contents_section .nav-link:hover, .article_main_page .tableContent #table-of-contents .nav-link:hover { color: var(--adc-accent, #b3402a); background-color: var(--adc-band, #f5f5f5); text-decoration: none; } .article_main_page .tableContent .artist_sidebar_links li.nav-item, .article_main_page .tableContent .table_of_contents_section li.nav-item, .article_main_page .tableContent #table-of-contents li.nav-item { border-left: none !important; width: 100%; } .article_main_page .tableContent .artist_sidebar_links .nav-pills .nav-link.active, .article_main_page .tableContent .artist_sidebar_links .nav-pills .show > .nav-link, .article_main_page .tableContent .table_of_contents_section .nav-pills .nav-link.active, .article_main_page .tableContent .table_of_contents_section .nav-pills .show > .nav-link, .article_main_page .tableContent #table-of-contents .nav-pills .nav-link.active, .article_main_page .tableContent #table-of-contents .nav-pills .show > .nav-link { color: var(--adc-ink, #111110); font-weight: 600; background-color: var(--adc-band, #f5f5f5); border: none !important; border-left: none !important; box-shadow: inset 2px 0 0 var(--adc-accent, #b3402a); } /* Related articles — card copy + « Explore Article » CTA */ .article_main_page .related_aricle_box { padding: 0 0 20px; border-bottom: 1px solid var(--adc-line, #e6e6e6); margin-bottom: 24px; } .article_main_page .related_aricle_box:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .article_main_page .related_aricle_box h4 { font-family: var(--adc-body, var(--font-body)); font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--adc-ink, #111110); margin-top: 16px; margin-bottom: 8px; } .article_main_page .related_aricle_box h4 a { color: inherit; text-decoration: none; transition: color 0.15s ease; } .article_main_page .related_aricle_box h4 a:hover { color: var(--adc-accent, #b3402a); } .article_main_page .related_aricle_box p { font-family: var(--adc-body, var(--font-body)); font-size: 14px; font-weight: 300; line-height: 1.45; color: var(--adc-ink-2, #6e6c68); margin-bottom: 0; } .article_main_page .related_articles .explore_techniques { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-family: var(--adc-body, var(--font-body)); font-size: 12px; font-weight: 600; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; color: var(--adc-accent, #b3402a) !important; cursor: pointer; } .article_main_page .related_articles .explore_techniques a { font: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; text-transform: inherit; color: var(--adc-accent, #b3402a) !important; text-decoration: none; transition: color 0.15s ease; } .article_main_page .related_articles .explore_techniques:hover, .article_main_page .related_articles .explore_techniques a:hover { color: #93311f !important; } .article_main_page .related_articles .explore_techniques span { display: inline-flex; align-items: center; line-height: 0; } .article_main_page .related_articles .explore_techniques span img { width: 14px; height: 14px; margin: 0 !important; filter: brightness(0) saturate(100%) invert(37%) sepia(28%) saturate(1679%) hue-rotate(339deg) brightness(91%) contrast(89%); opacity: 0.9; transition: opacity 0.15s ease, transform 0.15s ease, filter 0.15s ease; } .article_main_page .related_articles .explore_techniques:hover span img { opacity: 1; transform: translateX(2px); filter: brightness(0) saturate(100%) invert(30%) sepia(35%) saturate(1800%) hue-rotate(339deg) brightness(88%) contrast(92%); } /* Artwork sliders below biography */ .article_main_page .artistPage_Slider_section { background: var(--adc-band, #f5f5f5) !important; padding: 32px var(--adc-pad, 44px); text-align: center; } /* Track height — was 450px inline; −20% for denser corpus/popular carousels */ .article_main_page .artistPage_Slider_section .swiper-wrapper { height: 360px; } .article_main_page .artistPage_Slider_section .swiper-slide { height: 360px; box-sizing: border-box; } .article_main_page .artistPage_Slider_section .artist_slid_box a img { max-height: 300px; width: 100%; height: auto; object-fit: contain; object-position: center; } .article_main_page .parent_slid_box { border-bottom: 1px solid var(--adc-line, #e6e6e6); padding: 28px 0; } .article_main_page .artistPage_Slider_section .parent_slid_box:last-child { border-bottom: none; padding-bottom: 0; } .article_main_page .parent_slid_box h4 { margin: 0 0 0px; font-family: var(--adc-display, var(--font-title)); font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 400; line-height: 1.25; letter-spacing: -0.02em; color: var(--adc-ink, #111110); text-transform: none; } .article_main_page .parent_slid_box h4 a { color: inherit; text-decoration: none; transition: color 0.15s ease; } .article_main_page .parent_slid_box h4 a:hover { color: var(--adc-accent, #b3402a); } .article_main_page .view_all_art { margin-top: 12px; } .article_main_page .view_all_art a { display: inline-block; font-family: var(--adc-body, var(--font-body)); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.35; text-transform: uppercase; color: var(--adc-ink-2, #6e6c68); text-decoration: none; transition: color 0.15s ease; } .article_main_page .view_all_art a:hover { color: var(--adc-accent, #b3402a) !important; } /* ═══════════════════════════════════════════════════════════════════ ADC — Catalog list pages (/art/list, /artists/list, /museums/list, /articles/list) Scoped to .catalog-list-page (+ legacy hooks) — gallery-minimal tokens ═══════════════════════════════════════════════════════════════════ */ .search_sec.catalog-list-page, .search_sec.artwork-list-page, .search_sec.artist-list-page, .search_sec.museum-list-page, .search_sec.article-list-page { --adc-bg: #ffffff; --adc-ink: #111110; --adc-ink-2: #6e6c68; --adc-ink-3: #a3a09b; --adc-line: #e6e6e6; --adc-line-2: #d6d6d6; --adc-band: #f5f5f5; --adc-slot: #eeeeee; --adc-accent: #b3402a; --adc-accent-dark: #93311f; --adc-body: var(--font-body); } .search_sec.catalog-list-page .nav-list li, .search_sec.catalog-list-page .nav-list a, .search_sec.catalog-list-page .main-heading, .search_sec.catalog-list-page .Showing_text, .search_sec.catalog-list-page .sorting_content, .search_sec.catalog-list-page .sort_by, .search_sec.artwork-list-page .nav-list li, .search_sec.artwork-list-page .nav-list a, .search_sec.artwork-list-page .main-heading, .search_sec.artwork-list-page .Showing_text, .search_sec.artwork-list-page .sorting_content, .search_sec.artwork-list-page .sort_by { color: var(--adc-ink); font-family: var(--adc-body); } .search_sec.catalog-list-page .Showing_text .form-control, .search_sec.catalog-list-page .sorting_content select.custom-select, .search_sec.artwork-list-page .Showing_text .form-control, .search_sec.artwork-list-page .sorting_content select.custom-select { background-color: var(--adc-bg) !important; border: 1px solid var(--adc-line-2) !important; color: var(--adc-ink) !important; border-radius: 2px; font-family: var(--adc-body); font-size: 13px; } /* Filter sidebar — gallery-minimal tokens (match categories / similar lists) */ .search_sec.catalog-list-page .filter-panel, .search_sec.artwork-list-page .filter-panel { background-color: var(--adc-band); border: 1px solid var(--adc-line); border-radius: 2px; font-family: var(--adc-body); } /* Filter panel header — align title, icon, and “Clear all” on one row */ .search_sec.catalog-list-page .filter-title, .search_sec.artwork-list-page .filter-title, .search_sec.catalog-categories-page .filter-title, .search_sec.artwork-categories-page .filter-title, .search_sec.artwork-similar-page .filter-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 12px 16px; min-height: 44px; box-sizing: border-box; } .search_sec.catalog-list-page .filter-title span, .search_sec.artwork-list-page .filter-title span, .search_sec.catalog-categories-page .filter-title span, .search_sec.artwork-categories-page .filter-title span, .search_sec.artwork-similar-page .filter-title span { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--adc-body); font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--adc-ink); } .search_sec.catalog-list-page .filter-title span img, .search_sec.artwork-list-page .filter-title span img, .search_sec.catalog-categories-page .filter-title span img, .search_sec.artwork-categories-page .filter-title span img, .search_sec.artwork-similar-page .filter-title span img { display: block; width: 16px; height: 16px; flex-shrink: 0; } .search_sec.catalog-list-page .filter-title a, .search_sec.artwork-list-page .filter-title a, .search_sec.catalog-categories-page .filter-title a, .search_sec.artwork-categories-page .filter-title a, .search_sec.artwork-similar-page .filter-title a { display: inline-flex; align-items: center; align-self: center; flex-shrink: 0; margin: 0; padding: 0; font-family: var(--adc-body); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--adc-ink-2); } .search_sec.catalog-list-page .filter-title a:hover, .search_sec.artwork-list-page .filter-title a:hover, .search_sec.catalog-categories-page .filter-title a:hover, .search_sec.artwork-categories-page .filter-title a:hover, .search_sec.artwork-similar-page .filter-title a:hover { color: var(--adc-accent); } .search_sec.artwork-list-page .badge_list { border-bottom: 1px solid var(--adc-line); } .search_sec.artwork-list-page .badge-filter { background: var(--adc-slot) !important; color: var(--adc-ink) !important; border: 1px solid var(--adc-line); border-radius: 2px; font-family: var(--adc-body); font-size: 13px; } .search_sec.artwork-list-page .accordion-item { background-color: var(--adc-band) !important; border-bottom: 1px solid var(--adc-line) !important; } .search_sec.artwork-list-page button.accordion-button, .search_sec.artwork-list-page .accordion-button:not(.collapsed) { background: var(--adc-band) !important; color: var(--adc-ink) !important; font-family: var(--adc-body); font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: normal; text-transform: none; box-shadow: none !important; } .search_sec.artwork-list-page .accordion-body { font-family: var(--adc-body); color: var(--adc-ink-2); } .search_sec.artwork-list-page .filter-panel .colors_list { padding: 0 16px 16px !important; display: flex !important; flex-wrap: wrap; gap: 10px; } .search_sec.artwork-list-page .filter-panel .colors_list li { width: auto !important; display: inline-block !important; background: var(--adc-slot) !important; border: 1px solid var(--adc-line) !important; border-radius: 2px; color: var(--adc-ink-2); padding: 5px 8px; font-family: var(--adc-body); font-size: 13px; line-height: 1.4; font-weight: 400; cursor: pointer; } .search_sec.artwork-list-page .filter-panel .colors_list li span { color: inherit; font-weight: inherit; } .search_sec.artwork-list-page .filter-panel .colors_list li:hover, .search_sec.artwork-list-page .filter-panel .colors_list li:hover span { color: var(--adc-accent); } .search_sec.artwork-list-page .filter-panel .colors_list li.active { background: var(--adc-band) !important; border-color: var(--adc-line-2) !important; color: var(--adc-ink); } .search_sec.artwork-list-page .form-check, .search_sec.artwork-list-page .form-check .form-check-label { color: var(--adc-ink-2); font-family: var(--adc-body); font-size: 13px; line-height: 1.4; } .search_sec.artwork-list-page .form-check input { border: 1px solid var(--adc-line-2) !important; background-color: var(--adc-bg) !important; } .search_sec.artwork-list-page .form-check input:checked { background-color: var(--adc-ink) !important; border-color: var(--adc-ink) !important; } .search_sec.artwork-list-page .artist_input { background: var(--adc-bg) !important; border: 1px solid var(--adc-line-2) !important; color: var(--adc-ink); font-family: var(--adc-body); font-size: 13px; border-radius: 2px; } .search_sec.artwork-list-page .artist_input::placeholder { color: var(--adc-ink-3); } .search_sec.artwork-list-page .tag-btn { background-color: var(--adc-slot); color: var(--adc-ink); font-family: var(--adc-body); border-radius: 2px; } .search_sec.artwork-list-page .noUi-target { background: var(--adc-line-2) !important; } .search_sec.artwork-list-page .noUi-connect { background: var(--adc-ink) !important; } .search_sec.artwork-list-page .noUi-horizontal .noUi-handle { background: var(--adc-ink); } /* ═══════════════════════════════════════════════════════════════════ ADC — Similar artworks browse (/art/similar//) Scoped to .artwork-similar-page — gallery-minimal tokens ═══════════════════════════════════════════════════════════════════ */ .search_sec.artwork-similar-page { --adc-bg: #ffffff; --adc-ink: #111110; --adc-ink-2: #6e6c68; --adc-ink-3: #a3a09b; --adc-line: #e6e6e6; --adc-line-2: #d6d6d6; --adc-band: #f5f5f5; --adc-slot: #eeeeee; --adc-accent: #b3402a; --adc-accent-dark: #93311f; --adc-body: var(--font-body); } /* Page chrome — title row, sort */ .search_sec.artwork-similar-page .nav-list li, .search_sec.artwork-similar-page .nav-list a, .search_sec.artwork-similar-page .main-heading, .search_sec.artwork-similar-page .Showing_text, .search_sec.artwork-similar-page .sorting_content, .search_sec.artwork-similar-page .sort_by { color: var(--adc-ink); font-family: var(--adc-body); } .search_sec.artwork-similar-page .Showing_text .form-control, .search_sec.artwork-similar-page .sorting_content select.custom-select { background-color: var(--adc-bg) !important; border: 1px solid var(--adc-line-2) !important; color: var(--adc-ink) !important; border-radius: 2px; } /* Criteria sidebar */ .search_sec.artwork-similar-page .filter-panel { background-color: var(--adc-band); border: 1px solid var(--adc-line); border-radius: 2px; } .search_sec.artwork-similar-page .colors_list { padding: 16px !important; } .search_sec.artwork-similar-page .colors_list li { background: transparent !important; border: none !important; color: var(--adc-ink); } .search_sec.artwork-similar-page .colors_list li a { display: block; padding: 10px 12px !important; font-family: var(--adc-body); font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--adc-ink-2) !important; text-decoration: none; border-radius: 2px; transition: color 0.15s ease, background-color 0.15s ease; } .search_sec.artwork-similar-page .colors_list li a:hover { color: var(--adc-accent) !important; background-color: var(--adc-slot); } .search_sec.artwork-similar-page .colors_list li a.active { color: var(--adc-accent) !important; font-weight: 600; background-color: var(--adc-slot); } /* Grid — catalog cards (list / categories / similar) */ .search_sec.catalog-list-page .custom_search .row > [class*="col-"], .search_sec.artwork-list-page .custom_search .row > [class*="col-"], .search_sec.catalog-categories-page .custom_search .row > [class*="col-"], .search_sec.artwork-categories-page .custom_search .row > [class*="col-"], .search_sec.artwork-similar-page .custom_search .row > [class*="col-"] { border-color: var(--adc-line) !important; } .search_sec.catalog-list-page .custom_search .search_card, .search_sec.artwork-list-page .custom_search .search_card, .search_sec.catalog-categories-page .custom_search .search_card, .search_sec.artwork-categories-page .custom_search .search_card, .search_sec.artwork-similar-page .custom_search .search_card { background-color: var(--adc-bg); border-color: var(--adc-line) !important; transition: background-color 0.2s ease; } .search_sec.artwork-list-page .search_card:hover, .search_sec.artwork-categories-page .search_card:hover, .search_sec.artwork-similar-page .search_card:hover { background-color: var(--adc-band) !important; } .search_sec.artwork-list-page .hover_visible, .search_sec.artwork-categories-page .hover_visible, .search_sec.artwork-similar-page .hover_visible { background: var(--adc-band) !important; border-bottom-color: var(--adc-line) !important; } .search_sec.catalog-list-page .search_card .art-artist, .search_sec.artwork-list-page .search_card .art-artist, .search_sec.artwork-categories-page .search_card .art-artist, .search_sec.artwork-similar-page .search_card .art-artist { align-items: center; gap: 0.5rem; } .search_sec.catalog-list-page .search_card .art-artist h2, .search_sec.artwork-list-page .search_card .art-artist h2, .search_sec.artwork-categories-page .search_card .art-artist h2, .search_sec.artwork-similar-page .search_card .art-artist h2 { margin: 0; flex: 1 1 auto; min-width: 0; } .search_sec.artwork-list-page .custom_search .search_card .art-artist h2, .search_sec.artwork-list-page .custom_search .search_card .art-artist h2 a, .search_sec.artwork-list-page .search_card .art-artist h2, .search_sec.artwork-list-page .search_card .art-artist h2 a, .search_sec.artwork-categories-page .search_card .art-artist h2, .search_sec.artwork-categories-page .search_card .art-artist h2 a, .search_sec.artwork-similar-page .search_card .art-artist h2, .search_sec.artwork-similar-page .search_card .art-artist h2 a, .search_sec.article-list-page .custom_search .search_card .art-artist h2, .search_sec.article-list-page .custom_search .search_card .art-artist h2 a, .search_sec.artist-list-page .custom_search .search_card .art-artist h2, .search_sec.artist-list-page .custom_search .search_card .art-artist h2 a, .search_sec.museum-list-page .custom_search .search_card .art-artist h2, .search_sec.museum-list-page .custom_search .search_card .art-artist h2 a { font-family: var(--adc-body); font-size: 12px; font-weight: 600; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; color: var(--adc-accent) !important; text-decoration: none; transition: color 0.15s ease; } .search_sec.artwork-list-page .search_card .art-artist h2 a:hover, .search_sec.artwork-categories-page .search_card .art-artist h2 a:hover, .search_sec.artwork-similar-page .search_card .art-artist h2 a:hover { color: var(--adc-accent-dark) !important; } .search_sec.artwork-list-page .custom_search .search_card .art-artist span, .search_sec.artwork-list-page .custom_search .search_card .art-artist span a, .search_sec.artwork-list-page .search_card .art-artist span, .search_sec.artwork-list-page .search_card .art-artist span a, .search_sec.artwork-categories-page .search_card .art-artist span, .search_sec.artwork-categories-page .search_card .art-artist span a, .search_sec.artwork-similar-page .search_card .art-artist span, .search_sec.artwork-similar-page .search_card .art-artist span a, .search_sec.article-list-page .custom_search .search_card .art-artist span, .search_sec.article-list-page .custom_search .search_card .art-artist span a, .search_sec.artist-list-page .custom_search .search_card .art-artist span, .search_sec.artist-list-page .custom_search .search_card .art-artist span a, .search_sec.museum-list-page .custom_search .search_card .art-artist span, .search_sec.museum-list-page .custom_search .search_card .art-artist span a { font-family: var(--adc-body); font-size: 12px; font-weight: 400; line-height: 1.35; text-align: right; flex-shrink: 0; opacity: 1; color: var(--adc-ink-3) !important; } .search_sec.artwork-list-page .search_card .art-title, .search_sec.artwork-list-page .search_card .art-title a, .search_sec.artwork-categories-page .search_card .art-title, .search_sec.artwork-categories-page .search_card .art-title a, .search_sec.artwork-similar-page .search_card .art-title, .search_sec.artwork-similar-page .search_card .art-title a { font-family: var(--adc-body); font-size: 14px; font-weight: 400; line-height: 1.4; text-align: left; color: var(--adc-ink) !important; text-decoration: none; transition: color 0.15s ease; } .search_sec.artwork-list-page .search_card .art-title a:hover, .search_sec.artwork-categories-page .search_card .art-title a:hover, .search_sec.artwork-similar-page .search_card .art-title a:hover { color: var(--adc-accent) !important; } .search_sec.artwork-list-page .search_card .hover_visible p, .search_sec.artwork-categories-page .search_card .hover_visible p, .search_sec.artwork-similar-page .search_card .hover_visible p { font-family: var(--adc-body); font-size: 13px; font-weight: 300; font-style: normal; line-height: 1.55; text-align: left; color: var(--adc-ink-2) !important; opacity: 1; margin-bottom: 24px; } .search_sec.artwork-list-page .search_card .hover_visible p a, .search_sec.artwork-categories-page .search_card .hover_visible p a, .search_sec.artwork-similar-page .search_card .hover_visible p a { color: var(--adc-accent) !important; } .search_sec.artwork-list-page .search_card .addToCart, .search_sec.artwork-list-page .search_card .addToCart.added, .search_sec.artwork-categories-page .search_card .addToCart, .search_sec.artwork-categories-page .search_card .addToCart.added, .search_sec.artwork-similar-page .search_card .addToCart, .search_sec.artwork-similar-page .search_card .addToCart.added { background: var(--adc-ink) !important; color: #ffffff !important; font-family: var(--adc-body); font-size: 13px; font-weight: 600; line-height: 1.35; letter-spacing: 0.04em; text-transform: none; border-radius: 999px; padding: 10px 20px; width: auto; min-width: 0; transition: background-color 0.15s ease, color 0.15s ease; } .search_sec.artwork-list-page .search_card .addToCart:hover, .search_sec.artwork-categories-page .search_card .addToCart:hover, .search_sec.artwork-similar-page .search_card .addToCart:hover { background: #2c2a27 !important; color: #ffffff !important; } .search_sec.artwork-list-page .custom_search .cartbtn_group a.addToCart, .search_sec.artwork-categories-page .custom_search .cartbtn_group a.addToCart, .search_sec.artwork-similar-page .custom_search .cartbtn_group a.addToCart { color: #ffffff !important; } .search_sec.artwork-list-page .search_card .fav_group, .search_sec.artwork-similar-page .search_card .fav_group { background: var(--adc-bg); border: 1px solid var(--adc-line-2) !important; border-radius: 999px; padding: 7px 10px; transition: border-color 0.15s ease, background-color 0.15s ease; } .search_sec.artwork-similar-page .search_card .fav_group:hover, .search_sec.artwork-similar-page .search_card .fav_group.active { background: var(--adc-slot) !important; border-color: var(--adc-accent) !important; } .search_sec.artwork-similar-page .search_card .fav_group .unfav_icon, .search_sec.artwork-similar-page .search_card .fav_group .fav_icon { filter: brightness(0) saturate(100%) invert(8%) sepia(6%) saturate(500%) hue-rotate(12deg) brightness(95%) contrast(95%); opacity: 0.75; transition: opacity 0.15s ease; } .search_sec.artwork-similar-page .search_card .fav_group:hover .unfav_icon, .search_sec.artwork-similar-page .search_card .fav_group:hover .fav_icon, .search_sec.artwork-similar-page .search_card .fav_group.active .fav_icon { opacity: 1; filter: brightness(0) saturate(100%) invert(37%) sepia(28%) saturate(1679%) hue-rotate(339deg) brightness(91%) contrast(89%); } /* ═══════════════════════════════════════════════════════════════════ ADC — Catalog categories browse (list_category on all apps) Scoped to .catalog-categories-page (+ legacy hooks) — gallery-minimal tokens ═══════════════════════════════════════════════════════════════════ */ .search_sec.catalog-categories-page, .search_sec.artwork-categories-page, .search_sec.artist-categories-page, .search_sec.museum-categories-page, .search_sec.article-categories-page { --adc-bg: #ffffff; --adc-ink: #111110; --adc-ink-2: #6e6c68; --adc-ink-3: #a3a09b; --adc-line: #e6e6e6; --adc-line-2: #d6d6d6; --adc-band: #f5f5f5; --adc-slot: #eeeeee; --adc-accent: #b3402a; --adc-accent-dark: #93311f; --adc-body: var(--font-body); } .search_sec.catalog-categories-page .nav-list li, .search_sec.catalog-categories-page .nav-list a, .search_sec.catalog-categories-page .main-heading, .search_sec.catalog-categories-page .Showing_text, .search_sec.catalog-categories-page .sorting_content, .search_sec.catalog-categories-page .sort_by, .search_sec.artwork-categories-page .nav-list li, .search_sec.artwork-categories-page .nav-list a, .search_sec.artwork-categories-page .main-heading, .search_sec.artwork-categories-page .Showing_text, .search_sec.artwork-categories-page .sorting_content, .search_sec.artwork-categories-page .sort_by { color: var(--adc-ink); font-family: var(--adc-body); } .search_sec.catalog-categories-page .Showing_text .form-control, .search_sec.catalog-categories-page .sorting_content select.custom-select, .search_sec.artwork-categories-page .Showing_text .form-control, .search_sec.artwork-categories-page .sorting_content select.custom-select { background-color: var(--adc-bg) !important; border: 1px solid var(--adc-line-2) !important; color: var(--adc-ink) !important; border-radius: 2px; font-family: var(--adc-body); font-size: 13px; } .search_sec.catalog-categories-page .filter-panel, .search_sec.artwork-categories-page .filter-panel { background-color: var(--adc-band); border: 1px solid var(--adc-line); border-radius: 2px; font-family: var(--adc-body); } .search_sec.catalog-categories-page .filter-title, .search_sec.artwork-categories-page .filter-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 12px 16px; min-height: 44px; box-sizing: border-box; } .search_sec.catalog-categories-page .badge_list, .search_sec.artwork-categories-page .badge_list { border-bottom: 1px solid var(--adc-line); } .search_sec.catalog-categories-page .badge-filter, .search_sec.artwork-categories-page .badge-filter { background: var(--adc-slot) !important; color: var(--adc-ink) !important; border: 1px solid var(--adc-line); border-radius: 2px; font-family: var(--adc-body); font-size: 13px; } .search_sec.catalog-categories-page .colors_list, .search_sec.artwork-categories-page .colors_list { padding: 16px !important; display: flex !important; flex-wrap: wrap; gap: 10px; text-align: left !important; list-style: none; } .search_sec.catalog-categories-page .colors_list li, .search_sec.artwork-categories-page .colors_list li { width: auto !important; display: inline-block !important; margin: 0; padding: 0; background: transparent !important; border: none !important; } .search_sec.catalog-categories-page .colors_list li a, .search_sec.artwork-categories-page .colors_list li a { display: inline-block !important; padding: 5px 8px !important; width: auto !important; font-family: var(--adc-body); font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--adc-ink-2) !important; text-decoration: none !important; background: var(--adc-slot) !important; border: 1px solid var(--adc-line) !important; border-radius: 2px; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .search_sec.catalog-categories-page .colors_list li a:hover, .search_sec.artwork-categories-page .colors_list li a:hover { color: var(--adc-accent) !important; } .search_sec.catalog-categories-page .colors_list li a.active, .search_sec.artwork-categories-page .colors_list li a.active { color: var(--adc-accent) !important; font-weight: 600; background: var(--adc-band) !important; border-color: var(--adc-line-2) !important; } /* ═══════════════════════════════════════════════════════════════════ ADC — Group-by browse (artworks, artists, museums, articles) Scoped to .catalog-groupby-page (+ legacy page hooks) — gallery-minimal tokens ═══════════════════════════════════════════════════════════════════ */ .search_sec.catalog-groupby-page, .search_sec.artwork-groupby-page, .search_sec.artist-groupby-page, .search_sec.museum-groupby-page, .search_sec.article-groupby-page { --adc-bg: #ffffff; --adc-ink: #111110; --adc-ink-2: #6e6c68; --adc-ink-3: #a3a09b; --adc-line: #e6e6e6; --adc-line-2: #d6d6d6; --adc-band: #f5f5f5; --adc-slot: #eeeeee; --adc-accent: #b3402a; --adc-body: var(--font-body); } .search_sec.artwork-groupby-page .nav-list li, .search_sec.artwork-groupby-page .nav-list a, .search_sec.artwork-groupby-page .main-heading, .search_sec.artwork-groupby-page .Showing_text, .search_sec.artwork-groupby-page .sortABC, .search_sec.artwork-groupby-page .sortABC a, .search_sec.artwork-groupby-page .sortABC span, .search_sec.artist-groupby-page .nav-list li, .search_sec.artist-groupby-page .nav-list a, .search_sec.artist-groupby-page .main-heading, .search_sec.artist-groupby-page .Showing_text, .search_sec.artist-groupby-page .sortABC, .search_sec.artist-groupby-page .sortABC a, .search_sec.artist-groupby-page .sortABC span { color: var(--adc-ink); font-family: var(--adc-body); } .search_sec.artwork-groupby-page .Showing_text, .search_sec.artist-groupby-page .Showing_text { font-size: 14px; line-height: 1.5; } .search_sec.catalog-groupby-page #groupby-selector, .search_sec.catalog-groupby-page #fieldSelector, .search_sec.catalog-groupby-page .Showing_text .form-control, .search_sec.artwork-groupby-page #groupby-selector, .search_sec.artwork-groupby-page .Showing_text .form-control, .search_sec.artist-groupby-page #groupby-selector, .search_sec.artist-groupby-page .Showing_text .form-control, .search_sec.museum-groupby-page #groupby-selector, .search_sec.museum-groupby-page #fieldSelector, .search_sec.museum-groupby-page .Showing_text .form-control, .search_sec.article-groupby-page #groupby-selector, .search_sec.article-groupby-page .Showing_text .form-control, .search_sec.catalog-groupby-page form.countrySearchForm input[type="text"], .search_sec.artwork-groupby-page form.countrySearchForm input[type="text"], .search_sec.artist-groupby-page form.countrySearchForm input[type="text"], .search_sec.museum-groupby-page form.countrySearchForm input[type="text"], .search_sec.article-groupby-page form.countrySearchForm input[type="text"] { background-color: var(--adc-bg) !important; border: 1px solid var(--adc-line-2) !important; color: var(--adc-ink) !important; border-radius: 2px; font-family: var(--adc-body); font-size: 13px; } .search_sec.artwork-groupby-page .badge_list, .search_sec.artist-groupby-page .badge_list { border-bottom: 1px solid var(--adc-line); } .search_sec.artwork-groupby-page .badge-filter, .search_sec.artist-groupby-page .badge-filter { background: var(--adc-slot) !important; color: var(--adc-ink) !important; border: 1px solid var(--adc-line); border-radius: 2px; font-family: var(--adc-body); font-size: 13px; } .search_sec.catalog-groupby-page .sidebar .sidebar_box, .search_sec.artwork-groupby-page .sidebar .sidebar_box, .search_sec.artist-groupby-page .sidebar .sidebar_box, .search_sec.museum-groupby-page .sidebar .sidebar_box, .search_sec.article-groupby-page .sidebar .sidebar_box { background: var(--adc-band) !important; border: 1px solid var(--adc-line) !important; color: var(--adc-ink) !important; border-radius: 2px; font-family: var(--adc-body); } .search_sec.catalog-groupby-page .sidebar .sidebar_box:hover, .search_sec.catalog-groupby-page .sidebar .sidebar_box.active, .search_sec.artwork-groupby-page .sidebar .sidebar_box:hover, .search_sec.artwork-groupby-page .sidebar .sidebar_box.active, .search_sec.artist-groupby-page .sidebar .sidebar_box:hover, .search_sec.artist-groupby-page .sidebar .sidebar_box.active, .search_sec.museum-groupby-page .sidebar .sidebar_box:hover, .search_sec.museum-groupby-page .sidebar .sidebar_box.active, .search_sec.article-groupby-page .sidebar .sidebar_box:hover, .search_sec.article-groupby-page .sidebar .sidebar_box.active { background: var(--adc-band) !important; border-color: var(--adc-line-2) !important; } .search_sec.artwork-groupby-page h3.sidebar_box_title, .search_sec.artwork-groupby-page h3.sidebar_box_title a, .search_sec.artwork-groupby-page p.sidebar_box_description, .search_sec.artwork-groupby-page p.sidebar_box_description a, .search_sec.artist-groupby-page h3.sidebar_box_title, .search_sec.artist-groupby-page h3.sidebar_box_title a, .search_sec.artist-groupby-page p.sidebar_box_description, .search_sec.artist-groupby-page p.sidebar_box_description a { color: var(--adc-ink) !important; font-family: var(--adc-body); font-size: 13px; line-height: 1.4; font-weight: 400; text-transform: none; letter-spacing: normal; } .search_sec.artwork-groupby-page h3.sidebar_box_title, .search_sec.artwork-groupby-page h3.sidebar_box_title a, .search_sec.artist-groupby-page h3.sidebar_box_title, .search_sec.artist-groupby-page h3.sidebar_box_title a { font-family: var(--adc-display, var(--adc-body)); font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; margin-bottom: 12px; } .search_sec.artwork-groupby-page h3.sidebar_box_title a:hover, .search_sec.artist-groupby-page h3.sidebar_box_title a:hover { color: var(--adc-accent) !important; } .search_sec.artwork-groupby-page ul.Sidebar_tags, .search_sec.artist-groupby-page ul.Sidebar_tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; padding: 0; list-style: none; } .search_sec.artwork-groupby-page ul.Sidebar_tags a, .search_sec.artwork-groupby-page ul.Sidebar_tags li button.catalog-nav-btn, .search_sec.artist-groupby-page ul.Sidebar_tags a, .search_sec.artist-groupby-page ul.Sidebar_tags li button.catalog-nav-btn { display: inline-block; padding: 5px 8px; background: var(--adc-slot) !important; color: var(--adc-ink-2) !important; border: 1px solid var(--adc-line); border-radius: 2px; font-family: var(--adc-body); font-size: 13px; line-height: 1.4; font-weight: 400; text-decoration: none; } .search_sec.artwork-groupby-page ul.Sidebar_tags a:hover, .search_sec.artist-groupby-page ul.Sidebar_tags a:hover { color: var(--adc-accent) !important; } .search_sec.artwork-groupby-page form.countrySearchForm input[type="text"]::placeholder, .search_sec.artist-groupby-page form.countrySearchForm input[type="text"]::placeholder, .search_sec.museum-groupby-page form.countrySearchForm input[type="text"]::placeholder, .search_sec.article-groupby-page form.countrySearchForm input[type="text"]::placeholder, .search_sec.catalog-groupby-page form.countrySearchForm input[type="text"]::placeholder { color: var(--adc-ink-3); } .search_sec.artwork-groupby-page form.countrySearchForm i.fa.fa-search, .search_sec.artist-groupby-page form.countrySearchForm i.fa.fa-search { color: var(--adc-ink-2); } .search_sec.artwork-groupby-page .showMainResuls, .search_sec.artist-groupby-page .showMainResuls { font-family: var(--adc-body); } /* Group heading — match sidebar_box_title */ .search_sec.artwork-groupby-page .showMainResulsTitle h3, .search_sec.artwork-groupby-page .showMainResulsTitle h3 a, .search_sec.artist-groupby-page .showMainResulsTitle h3, .search_sec.artist-groupby-page .showMainResulsTitle h3 a { color: var(--adc-ink) !important; font-family: var(--adc-display, var(--adc-body)); font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; text-transform: none; } .search_sec.artwork-groupby-page .showMainResulsTitle h3 a:hover, .search_sec.artist-groupby-page .showMainResulsTitle h3 a:hover { color: var(--adc-accent) !important; } .search_sec.artwork-groupby-page .showMainResulsTitle h3 span, .search_sec.artist-groupby-page .showMainResulsTitle h3 span { background: var(--adc-slot) !important; color: var(--adc-ink) !important; font-family: var(--adc-body); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: normal; } /* See All — secondary action */ .search_sec.artwork-groupby-page .showMainResulsTitle > a, .search_sec.artwork-groupby-page .showMainResulsTitle > button.catalog-nav-btn, .search_sec.artist-groupby-page .showMainResulsTitle > a, .search_sec.artist-groupby-page .showMainResulsTitle > button.catalog-nav-btn { color: var(--adc-ink) !important; font-family: var(--adc-body); font-size: 13px; font-weight: 600; line-height: 1.4; text-transform: none; } .search_sec.artwork-groupby-page .showMainResulsTitle > a:hover, .search_sec.artwork-groupby-page .showMainResulsTitle > button.catalog-nav-btn:hover, .search_sec.artist-groupby-page .showMainResulsTitle > a:hover, .search_sec.artist-groupby-page .showMainResulsTitle > button.catalog-nav-btn:hover { color: var(--adc-accent) !important; } .search_sec.artwork-groupby-page .showMainResulsBox, .search_sec.artist-groupby-page .showMainResulsBox { background: var(--adc-band) !important; color: var(--adc-ink) !important; border: 1px solid var(--adc-line); border-radius: 2px; font-family: var(--adc-body); } .search_sec.artwork-groupby-page .showMainResulsImage h3, .search_sec.artwork-groupby-page .showMainResulsImage h3 a, .search_sec.artist-groupby-page .showMainResulsImage h3, .search_sec.artist-groupby-page .showMainResulsImage h3 a { background: rgb(17 17 16 / 70%) !important; color: var(--adc-bg) !important; font-family: var(--adc-body); font-size: 13px; font-weight: 600; line-height: 1.4; } .search_sec.artwork-groupby-page .showMainResulsImage p, .search_sec.artwork-groupby-page .showMainResulsImage p a, .search_sec.artist-groupby-page .showMainResulsImage p, .search_sec.artist-groupby-page .showMainResulsImage p a { color: var(--adc-bg) !important; font-family: var(--adc-body); font-size: 13px; font-weight: 400; font-style: normal; line-height: 1.4; } .search_sec.artwork-groupby-page .showResultsItems h3 a, .search_sec.artwork-groupby-page .showResultsItems h3, .search_sec.artwork-groupby-page .showResultsItems h4, .search_sec.artwork-groupby-page .showResultsItems h4 a, .search_sec.artwork-groupby-page .showResultsItems p, .search_sec.artwork-groupby-page .showResultsItems p a, .search_sec.artwork-groupby-page .artwork_list_additional_values h3, .search_sec.artwork-groupby-page .artwork_list_additional_values h3 a, .search_sec.artist-groupby-page .showResultsItems h3 a, .search_sec.artist-groupby-page .showResultsItems h3, .search_sec.artist-groupby-page .showResultsItems h4, .search_sec.artist-groupby-page .showResultsItems h4 a, .search_sec.artist-groupby-page .showResultsItems p, .search_sec.artist-groupby-page .showResultsItems p a { color: var(--adc-ink) !important; font-family: var(--adc-body); font-size: 13px; line-height: 1.4; font-weight: 400; text-transform: none; white-space: normal; } .search_sec.artwork-groupby-page .showResultsItems h3 a, .search_sec.artwork-groupby-page .showResultsItems h4 a, .search_sec.artist-groupby-page .showResultsItems h3 a, .search_sec.artist-groupby-page .showResultsItems h4 a { font-weight: 600; } .search_sec.artwork-groupby-page .showResultsItems h4 a:hover, .search_sec.artwork-groupby-page .showResultsItems h3 a:hover, .search_sec.artwork-groupby-page .showResultsItems p a:hover, .search_sec.artist-groupby-page .showResultsItems h4 a:hover, .search_sec.artist-groupby-page .showResultsItems h3 a:hover, .search_sec.artist-groupby-page .showResultsItems p a:hover { color: var(--adc-accent) !important; } /* ===================================================== ADC — Subject Atlas: neutral gray backgrounds Same relative luminance as museum sand / warm ADC bands. ===================================================== */ .atlas-page { --sand: #f2f2f2; --sand-2: #e8e8e8; --sand-3: #d6d6d6; --ivory: #fbfbfb; --rule: rgb(28 28 28 / 12%); --rule-strong: rgb(28 28 28 / 28%); } .atlas-page .artist-hero-banner.full_width_hero_banner_with_background_image::before { background: linear-gradient( 120deg, rgba(255, 255, 255, 0.14) 0%, rgba(0, 0, 0, 0.22) 50%, rgba(255, 255, 255, 0.1) 100% ); } .atlas-page .atlas-section::before { background: radial-gradient(ellipse 60% 50% at 50% 42%, rgba(255, 255, 255, 0.06), transparent 65%), radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.5) 100%); } .atlas-page .chip:hover { background: rgba(255, 255, 255, 0.08); } .atlas-page .chip.active { background: rgba(255, 255, 255, 0.14); } /* ===================================================== ADC — Artist Atlas / Chronicle hero (.artist-hero) Overrides global museum tokens (sand/gold/Cormorant) on Subject Atlas + Chronicle pages. ===================================================== */ .atlas-page .artist-hero, .chr-page .artist-hero { --adc-bg: #ffffff; --adc-ink: #111110; --adc-muted: #6e6c68; --adc-faint: #a3a09b; --adc-line: #e6e6e6; --adc-line-2: #d6d6d6; --adc-accent: #b3402a; --adc-soft: #eeeeee; --adc-band: #f5f5f5; --adc-serif: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); --adc-sans: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); --adc-radius: 2px; /* Remap museum custom props used by global .atlas-page / .chr-page rules */ --ink: var(--adc-ink); --ink-2: var(--adc-muted); --ink-3: var(--adc-faint); --sand: var(--adc-band); --sand-2: var(--adc-soft); --sand-3: var(--adc-line-2); --gold: var(--adc-accent); --gold-lt: #c95a47; --gold-br: #d9725f; --rule: rgb(17 17 16 / 12%); --serif: var(--adc-serif); --sans: var(--adc-sans); font-family: var(--adc-sans); color: var(--adc-ink); background: var(--adc-band); border-bottom: 1px solid var(--adc-line); } /* Atlas hero band: neutral grays (L matched to warm ADC tokens above) */ .atlas-page .artist-hero { --adc-band: #f5f5f5; --adc-soft: #ebebeb; --adc-line: #e8e8e8; --adc-line-2: #d7d7d7; --sand: var(--adc-band); --sand-2: var(--adc-soft); --sand-3: var(--adc-line-2); background: var(--adc-band); border-bottom-color: var(--adc-line); } .atlas-page .artist-hero .hero-inner, .chr-page .artist-hero .hero-inner { max-width: var(--adc-maxw, 1440px); padding: clamp(40px, 5vw, 72px) var(--adc-pad, 44px); gap: clamp(28px, 4vw, 64px); } .atlas-page .artist-hero .portrait-frame, .chr-page .artist-hero .portrait-frame { padding: 0; background: var(--adc-soft); border: 1px solid var(--adc-line); border-radius: var(--adc-radius); box-shadow: none; } .atlas-page .artist-hero .portrait-frame img, .chr-page .artist-hero .portrait-frame img { filter: none; border-radius: 0; } .atlas-page .artist-hero .portrait-cap, .chr-page .artist-hero .portrait-cap { font-family: var(--adc-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--adc-faint); } /* Period under portrait duplicates .artist-kicker — keep only the kicker line */ .atlas-page .artist-hero .portrait-cap, .chr-page .artist-hero .portrait-cap { display: none; } .atlas-page .artist-hero .artist-kicker, .chr-page .artist-hero .artist-kicker { margin-bottom: 14px; } .atlas-page .artist-hero .artist-kicker::before, .chr-page .artist-hero .artist-kicker::before { width: 24px; background: var(--adc-accent); } .atlas-page .artist-hero .artist-kicker span, .chr-page .artist-hero .artist-kicker span { font-family: var(--adc-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--adc-accent); } .atlas-page .artist-hero .artist-name, .chr-page .artist-hero .artist-name { font-family: var(--adc-serif); font-weight: 700; font-size: clamp(32px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.03em; color: var(--adc-ink); margin-bottom: 12px; } .atlas-page .artist-hero .artist-name em, .chr-page .artist-hero .artist-name em { font-style: italic; color: var(--adc-accent); } .atlas-page .artist-hero .artist-meta, .chr-page .artist-hero .artist-meta { font-family: var(--adc-sans); font-size: 13px; font-weight: 400; letter-spacing: 0.02em; color: var(--adc-muted); margin-bottom: 22px; } .atlas-page .artist-hero .artist-meta b, .chr-page .artist-hero .artist-meta b { color: var(--adc-ink); font-weight: 600; } .atlas-page .artist-hero .artist-bio p, .chr-page .artist-hero .artist-bio p { font-family: var(--adc-sans); font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--adc-muted); } .atlas-page .artist-hero .artist-stats, .chr-page .artist-hero .artist-stats { border-top: 1px solid var(--adc-line); margin-top: 28px; padding-top: 22px; gap: clamp(20px, 3vw, 40px); } .atlas-page .artist-hero .stat-v, .chr-page .artist-hero .stat-v, .atlas-page .artist-hero .stat-v.serif, .chr-page .artist-hero .stat-v.serif { font-family: var(--adc-serif); font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.02em; color: var(--adc-ink); } .atlas-page .artist-hero .stat-l, .chr-page .artist-hero .stat-l { font-family: var(--adc-sans); font-size: 12.5px; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--adc-muted); } @media (max-width: 760px) { .atlas-page .artist-hero .hero-inner, .chr-page .artist-hero .hero-inner { padding-top: 32px; padding-bottom: 32px; } .atlas-page .artist-hero .portrait-frame, .chr-page .artist-hero .portrait-frame { max-width: 280px; } .atlas-page .artist-hero .artist-stats, .chr-page .artist-hero .artist-stats { flex-wrap: wrap; gap: 20px 28px; } } /* ===================================================== ADC — Atlas section typography only (.atlas-section) Fonts / weights / sizes / letter-spacing — colors unchanged. ===================================================== */ .atlas-page .atlas-section { --serif: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); --sans: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); } .atlas-page .atlas-kicker { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; } .atlas-page .atlas-title { font-family: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: clamp(28px, 4vw, 48px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; } .atlas-page .atlas-title em { font-family: inherit; font-style: italic; font-weight: inherit; } .atlas-page .atlas-sub { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 15px; font-weight: 300; line-height: 1.6; letter-spacing: -0.003em; } .atlas-page .atlas-replay { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; } .atlas-page .rail-block-title { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; } .atlas-page .chip { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 13px; font-weight: 400; letter-spacing: 0.02em; } .atlas-page .chip-n { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; } .atlas-page .rail-reset { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; } .atlas-page .guide-item h4 { font-family: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; } .atlas-page .guide-item p { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 14px; font-weight: 300; line-height: 1.6; letter-spacing: -0.003em; } /* SVG labels (fill colours unchanged — global rules keep museum gold/ivory) */ .atlas-page .atlas-section .spoke-label { font-family: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-style: normal; font-weight: 600; font-size: 17px; letter-spacing: -0.015em; } .atlas-page .atlas-section .spoke-count { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; } .atlas-page .atlas-section .center-name { font-family: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-style: normal; font-weight: 600; font-size: 15px; letter-spacing: -0.02em; } .atlas-page .atlas-section .center-sub { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; } .atlas-page .atlas-section .ring-label, .atlas-page .atlas-section .ring-label-sub { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-weight: 600; } .atlas-page .atlas-section .ring-label { font-size: 11px; letter-spacing: 0.14em; } .atlas-page .atlas-section .ring-label-sub { font-size: 10px; letter-spacing: 0.1em; } .atlas-page .atlas-section .node-tip .tt { font-family: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-weight: 600; } .atlas-page .atlas-section .node-tip .td { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-weight: 600; letter-spacing: 0.1em; } /* ===================================================== ADC — Chronicle section typography only (.chronicle-section) Fonts / weights / sizes / letter-spacing — colors unchanged. ===================================================== */ .chr-page .chronicle-section { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); } .chr-page .chr-kicker { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; } .chr-page .chr-title { font-family: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: clamp(28px, 4vw, 48px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; } .chr-page .chr-title em { font-family: inherit; font-style: italic; font-weight: inherit; } .chr-page .chr-sub { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 15px; font-weight: 300; line-height: 1.6; letter-spacing: -0.003em; } .chr-page .scroll-hint { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; } .chr-page .guide-card h4 { font-family: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; } .chr-page .guide-card p { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 14px; font-weight: 300; line-height: 1.6; letter-spacing: -0.003em; } /* ADC — Chronicle section: light gray band + ink text (header + guide cards) */ .chr-page .chronicle-section { background: var(--adc-band, #f5f5f5); color: var(--adc-ink, #111110); } .chr-page .chronicle-section::before { background: radial-gradient(ellipse 70% 40% at 30% 20%, rgb(179 64 42 / 5%), transparent 65%), radial-gradient(circle at 80% 80%, transparent 60%, rgb(17 17 16 / 4%) 100%); } .chr-page .chronicle-section .chr-kicker { color: var(--adc-accent, #b3402a); } .chr-page .chronicle-section .chr-title { color: var(--adc-ink, #111110); } .chr-page .chronicle-section .chr-title em { color: var(--adc-accent, #b3402a); } .chr-page .chronicle-section .chr-sub { color: var(--adc-ink-2, #6e6c68); } .chr-page .chronicle-section .scroll-hint { color: var(--adc-ink-3, #a3a09b); } .chr-page .chronicle-section .scroll-hint svg path { stroke: var(--adc-accent, #b3402a); } .chr-page .chronicle-section .chr-empty { color: var(--adc-ink-3, #a3a09b); } .chr-page .chronicle-section .tick-lbl { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--adc-ink, #111110); } .chr-page .chronicle-section .ch-year-span { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--adc-ink, #111110); opacity: 1; } .chr-page .chronicle-section .ch-label { font-family: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--adc-ink, #111110); } .chr-page .chronicle-section .ch-context { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 11px; font-weight: 300; line-height: 1.55; letter-spacing: -0.003em; color: var(--adc-ink-2, #6e6c68); opacity: 1; } .chr-page .chronicle-section .chr-guide { background: var(--adc-line, #e6e6e6); border-top-color: var(--adc-line, #e6e6e6); } .chr-page .chronicle-section .guide-card { background: var(--adc-bg, #ffffff); } .chr-page .chronicle-section .guide-card h4 { color: var(--adc-ink, #111110); } .chr-page .chronicle-section .guide-card p { color: var(--adc-ink-2, #6e6c68); } .chr-page .chronicle-section .ribbon-scroll { scrollbar-color: var(--adc-accent, #b3402a) var(--adc-line, #e6e6e6); } .chr-page .chronicle-section .ribbon-scroll::-webkit-scrollbar-track { background: var(--adc-line, #e6e6e6); } /* ===================================================== ADC — Chronicle lifeline ribbon (JS + CSS timeline colours) Chapter fills (--chr-ch-fill-*) consumed by inline JS; caption colours via .ch-label / .ch-context in .chronicle-section (tokens). --gold* remapped for axis, pins, connectors, movement bar accents. ===================================================== */ .chr-page { --gold: var(--adc-accent, #b3402a); --gold-lt: #c95a47; --gold-br: #d9725f; /* Neutral grays (not warm adc-band/slot beiges) — read by lifeline JS */ --chr-ch-fill-0: #f0f0f0; --chr-ch-fill-1: #eaeaea; --chr-ch-fill-2: #e4e4e4; --chr-ch-fill-3: #dedede; --chr-ch-fill-4: #d8d8d8; } .chr-page .chapter-band + .chapter-band { border-left-color: rgb(17 17 16 / 10%); } .chr-page .axis-tick { background: rgb(179 64 42 / 45%); } .chr-page .work-pin img, .chr-page .work-pin .work-placeholder { border-color: rgb(179 64 42 / 55%); } .chr-page .work-pin--big img, .chr-page .work-pin--big .work-placeholder, .chr-page .work-pin:hover img, .chr-page .work-pin:hover .work-placeholder { border-color: var(--gold-br); box-shadow: none; } .chr-page .work-connector { background: linear-gradient(to bottom, rgb(179 64 42 / 60%), rgb(179 64 42 / 5%)); } .chr-page .work-dot { background: var(--gold-lt); box-shadow: 0 0 6px rgb(179 64 42 / 70%); } .chr-page .work-tooltip { border-color: rgb(179 64 42 / 30%); } .chr-page .work-tooltip strong { color: var(--gold-br); } .chr-page .ribbon-scroll::-webkit-scrollbar-thumb { background: var(--adc-accent, #b3402a); } /* ===================================================== ADC — Artist timeline page (.tl-page) colour tokens ===================================================== */ .tl-page { /* Scroll rail: soft gray band (not adc-ink — that painted the shell black). */ --tl-canvas: var(--adc-band, #f5f5f5); --tl-paper: var(--adc-ink, #111110); --tl-gesso: var(--adc-bg, #ffffff); --tl-shadow: var(--adc-slot, #eeeeee); --tl-ink: var(--adc-ink, #111110); --tl-ink-soft: var(--adc-ink-2, #6e6c68); --tl-ink-mute: #555555; --tl-ink-faint: var(--adc-ink-3, #a3a09b); --tl-ink-vapor: var(--adc-ink-2, #6e6c68); --tl-gold: var(--adc-accent, #b3402a); --tl-gold-lt: #c95a47; --tl-rule: rgb(179 64 42 / 34%); --tl-rule-soft: rgb(179 64 42 / 18%); color: var(--adc-ink-2, #6e6c68); font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); } .tl-page .tl-progress-wrap { background: var(--adc-line, #e6e6e6); } .tl-page .tl-progress-bar { background: linear-gradient(90deg, var(--tl-gold), var(--tl-gold-lt)); box-shadow: 0 0 12px rgb(179 64 42 / 45%); } .tl-page .tl-shell { scrollbar-color: var(--tl-gold) var(--tl-canvas); } .tl-page .tl-shell::-webkit-scrollbar-track { background: var(--adc-line, #e6e6e6); } .tl-page .tl-shell::-webkit-scrollbar-thumb { background: var(--tl-gold); } .tl-page .tl-period-band, .tl-page .tl-period-node { background: var(--tl-gold); } .tl-page .tl-period-chip .yr { color: var(--tl-gold-lt); } /* Plate ref (NO. 01) — UI Kit mono label */ .tl-page .tl-plate { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--adc-ink-3, #a3a09b); padding: 12px 14px 0; } /* Year chip on artwork frame — UI Kit .adc-badge */ .tl-page .tl-year-tag { font-family: var(--adc-body, var(--font-body)); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--adc-accent, #b3402a); border: none; border-radius: var(--adc-radius, 2px); padding: 4px 8px; } .tl-page .tl-mat { background: var(--tl-gesso); } /* Card copy — aligned with .adc-artcard meta (UI Kit #16) */ .tl-page .tl-body { border-top-color: var(--adc-line, #e6e6e6); } .tl-page .tl-artist { font-family: var(--adc-body, var(--font-body)); font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--adc-ink, #111110); margin: 0 0 4px; } .tl-page .tl-wt { font-family: var(--adc-serif, var(--font-title)); font-style: italic; font-size: 14.5px; font-weight: 400; line-height: 1.25; color: var(--adc-muted, #6e6c68); margin: 0; } .tl-page .tl-work:hover .tl-wt { color: var(--adc-accent, #b3402a); } .tl-page .tl-rule { background: var(--adc-line, #e6e6e6); margin: 10px 0 8px; } .tl-page .tl-prov { font-family: var(--adc-body, var(--font-body)); font-style: normal; font-size: 13px; font-weight: 400; line-height: 1.55; color: var(--adc-ink-2, #6e6c68); } /* ===================================================== ADC — Palette Genome header (.genome-wrap .gn-artist-head) ===================================================== */ .genome-wrap { --gn-ink: var(--adc-ink, #111110); --gn-ink-2: var(--adc-muted, #6e6c68); --gn-ink-3: var(--adc-faint, #a3a09b); --gn-sand: var(--adc-band, #f5f5f5); --gn-sand-2: var(--adc-soft, #eeeeee); --gn-sand-3: var(--adc-line-2, #d6d6d6); --gn-gold: var(--adc-accent, #b3402a); --gn-gold-lt: #c95a47; --gn-ivory: var(--adc-bg, #ffffff); --gn-rule: rgb(17 17 16 / 12%); --gn-rule-str: rgb(17 17 16 / 20%); --gn-serif: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); --gn-sans: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); background: var(--gn-ivory); color: var(--gn-ink); font-family: var(--gn-sans); } .genome-wrap .gn-scroll-bar { background: linear-gradient(90deg, var(--gn-gold) 0%, var(--gn-gold-lt) 100%); box-shadow: 0 0 8px rgb(179 64 42 / 50%); } .genome-wrap .gn-artist-head { background: var(--gn-sand); border-top: 1px solid var(--adc-line, #e6e6e6); border-bottom: 1px solid var(--adc-line, #e6e6e6); } .genome-wrap .gn-kicker { margin-bottom: 14px; } .genome-wrap .gn-kicker::before { width: 24px; background: var(--gn-gold); } .genome-wrap .gn-kicker span { font-family: var(--gn-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gn-gold); } .genome-wrap .gn-artist-name { font-family: var(--gn-serif); font-size: clamp(32px, 5vw, 64px); font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; color: var(--gn-ink); margin-bottom: 12px; } .genome-wrap .gn-artist-name a { text-decoration: none; color: inherit; } .genome-wrap .gn-artist-name em { font-style: italic; font-weight: inherit; color: var(--gn-gold); } .genome-wrap .gn-artist-name a:hover em { color: var(--gn-ink-2); } .genome-wrap .gn-dates { font-family: var(--gn-sans); font-size: 13px; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--gn-ink-2); margin-bottom: 22px; } .genome-wrap .gn-bio { font-family: var(--gn-sans); font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--gn-ink-2); max-width: 540px; margin-bottom: 28px; } .genome-wrap .gn-stats { border-top: 1px solid var(--adc-line, #e6e6e6); padding-top: 22px; gap: clamp(20px, 3vw, 40px); } .genome-wrap .gn-stat-val, .genome-wrap .gn-stat-val.gn-serif, .genome-wrap .gn-serif.gn-stat-val { font-family: var(--gn-serif); font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.02em; color: var(--gn-ink); line-height: 1; margin-bottom: 4px; } .genome-wrap .gn-stat-lab { font-family: var(--gn-sans); font-size: 12.5px; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--gn-ink-2); margin-top: 4px; } .genome-wrap .gn-portrait { padding: 0; background: var(--adc-soft, #eeeeee); border: 1px solid var(--adc-line, #e6e6e6); border-radius: 2px; box-shadow: none; } .genome-wrap .gn-portrait:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgb(17 17 16 / 12%); } .genome-wrap .gn-portrait img { filter: none; } .genome-wrap .gn-portrait:hover img { filter: none; } .genome-wrap .gn-portrait-cap { color: var(--gn-ink-3); font-family: var(--gn-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; } /* ── Wheel preview, facts & gallery (UI Kit / .adc-artcard meta) ── */ .genome-wrap .gn-wheel-preview { border: 1px solid var(--adc-line, #e6e6e6); border-radius: var(--adc-radius, 2px); box-shadow: 0 12px 32px rgb(17 17 16 / 10%); } .genome-wrap .gn-wheel-preview-body { font-family: var(--gn-sans); } .genome-wrap .gn-wp-title { font-family: var(--gn-serif); font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--gn-ink); } .genome-wrap .gn-wp-meta { font-family: var(--gn-sans); font-size: 12px; font-weight: 400; letter-spacing: 0.02em; color: var(--gn-ink-2); } .genome-wrap .gn-wp-hsl { border-top-color: var(--adc-line, #e6e6e6); } .genome-wrap .gn-wp-val { font-family: var(--gn-serif); font-size: clamp(18px, 2vw, 22px); font-weight: 600; letter-spacing: -0.02em; color: var(--gn-gold); line-height: 1; } .genome-wrap .gn-wp-lab { font-family: var(--gn-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gn-ink-3); } .genome-wrap .gn-fact-card { border: 1px solid var(--adc-line, #e6e6e6); border-radius: var(--adc-radius, 2px); } .genome-wrap .gn-fact-val { font-family: var(--gn-serif); font-size: clamp(28px, 3.2vw, 38px); font-weight: 600; letter-spacing: -0.02em; color: var(--gn-ink); } .genome-wrap .gn-fact-val small { font-family: var(--gn-serif); font-size: clamp(16px, 1.8vw, 20px); font-weight: 600; color: var(--gn-gold); } .genome-wrap .gn-fact-lab { font-family: var(--gn-sans); font-size: 12.5px; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--gn-ink-2); } .genome-wrap .gn-fact-desc { font-family: var(--gn-sans); font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--gn-ink-2); } .genome-wrap .gn-card { border: 1px solid var(--adc-line, #e6e6e6); border-radius: var(--adc-radius, 2px); background: var(--gn-ivory); } .genome-wrap .gn-card:hover { box-shadow: 0 12px 32px rgb(17 17 16 / 12%); border-color: var(--adc-line-2, #d6d6d6); } .genome-wrap .gn-card-info { font-family: var(--gn-sans); padding: 14px 16px 18px; } .genome-wrap .gn-card-title { font-family: var(--gn-serif); font-style: italic; font-size: 14.5px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--gn-ink-2); margin-bottom: 6px; } .genome-wrap .gn-card:hover .gn-card-title { color: var(--gn-gold); } .genome-wrap .gn-card-year { font-family: var(--gn-sans); font-size: 12px; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--gn-ink-3); margin-bottom: 10px; } .genome-wrap .gn-card-color { font-family: var(--gn-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gn-gold); } .genome-wrap .gn-card-color i { border-color: var(--adc-line, #e6e6e6); border-radius: 1px; } /* ===================================================== ADC — Mood Room (.moom-room) typography only Archivo + UI Kit scale; dark-room palette unchanged. ===================================================== */ .moom-room { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); } .moom-room .moom-eyebrow, .moom-room .moom-sec-head .kick, .moom-room .moom-breadcrumb .nav-list li, .moom-room .moom-breadcrumb .nav-list a, .moom-room .moom-breadcrumb .main-heading { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); } .moom-room .moom-eyebrow, .moom-room .moom-sec-head .kick { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; } .moom-room .moom-hero h1 { font-family: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-weight: 700; font-size: clamp(38px, 6vw, 72px); line-height: 1.02; letter-spacing: -0.03em; } .moom-room .moom-hero h1 em { font-family: inherit; font-style: italic; font-weight: inherit; font-size: 1em; display: inline; } .moom-room .moom-hero .lede { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 15px; font-weight: 300; line-height: 1.6; letter-spacing: -0.003em; } .moom-room .moom-hero-meta .m .v, .moom-room .moom-manifesto .stats .v { font-family: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; } .moom-room .moom-hero-meta .m .l, .moom-room .moom-manifesto .stats .l, .moom-room .moom-manifesto .side { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 12.5px; font-weight: 400; letter-spacing: 0.02em; text-transform: none; } .moom-room .moom-readout, .moom-room .moom-vitals { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); } .moom-room .moom-readout { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; } /* ── Gallery cards (plate, body, tags, placement) ── */ .moom-room .moom-body { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); } .moom-room .moom-plate { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif) !important; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; line-height: 1.2; } .moom-room .moom-body .moom-artist-label { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif) !important; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .moom-room .moom-tag, .moom-room .moom-tag.tonetag { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif) !important; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; line-height: 1.3; } .moom-room .moom-vitals { font-size: 11px; letter-spacing: 0.08em; } .moom-room .moom-sec-head h2 { font-family: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-weight: 600; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -0.025em; } .moom-room .moom-sec-head h2 em { font-family: inherit; font-style: italic; font-size: 1em; } .moom-room .moom-sec-head p, .moom-room .moom-bio p, .moom-room .moom-placement { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-style: normal; } .moom-room .moom-sec-head p { font-size: 15px; font-weight: 300; line-height: 1.6; } .moom-room .moom-body .moom-title { font-family: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif) !important; font-style: italic; font-size: 14.5px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; } .moom-room .moom-body .moom-title span { font-family: inherit; font-style: normal; font-size: 12px; font-weight: 400; letter-spacing: 0; } .moom-room .moom-placement, .moom-room .moom-placement a, .moom-room .moom-placement span { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif) !important; font-style: normal; font-size: 13px; font-weight: 400; line-height: 1.45; letter-spacing: -0.003em; } .moom-room .moom-seal { font-family: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: -0.01em; } .moom-room .moom-manifesto .quote { font-family: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-weight: 600; font-size: clamp(22px, 2.8vw, 36px); line-height: 1.12; letter-spacing: -0.02em; } .moom-room .moom-manifesto .quote em { font-family: inherit; font-style: italic; } .moom-room .moom-portrait .cap { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .moom-room .moom-bio h3 { font-family: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-weight: 700; font-size: clamp(28px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.025em; } .moom-room .moom-bio h3 em { font-family: inherit; font-style: italic; font-size: 0.55em; font-weight: inherit; display: block; } .moom-room .moom-bio p { font-size: 15px; font-weight: 300; line-height: 1.6; } /* ── Mood dock (label + mood pills) ── */ .moom-room .moom-dock, .moom-room .moom-dock-inner, .moom-room .moom-moods { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); } .moom-room .moom-dock-label { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif) !important; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.35; } .moom-room .moom-dock-label em { font-family: inherit !important; font-style: italic; font-weight: 600; font-size: 13px; letter-spacing: -0.01em; text-transform: none; } .moom-room .moom-btn { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif) !important; } .moom-room .moom-btn .name { font-family: inherit !important; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.25; } .moom-room .moom-btn .it { font-family: inherit !important; font-style: italic; font-size: 13px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; } .moom-room .moom-btn.on .name { font-weight: 700; } .moom-room .moom-btn.on .it { font-weight: 600; } @media (max-width: 760px) { .moom-room .moom-hero h1 { font-size: clamp(32px, 8vw, 48px); line-height: 1.04; } .moom-room .moom-sec-head h2 { font-size: clamp(24px, 6vw, 32px); } .moom-room .moom-dock-label { font-size: 10px; letter-spacing: 0.12em; } .moom-room .moom-dock-label em { font-size: 12px; } .moom-room .moom-btn .name { font-size: 10px; letter-spacing: 0.1em; } .moom-room .moom-btn .it { font-size: 12px; } } @media (max-width: 480px) { .moom-room .moom-hero h1 { font-size: clamp(28px, 9vw, 40px); line-height: 1.06; } .moom-room .moom-body .moom-title { font-size: 14px; } .moom-room .moom-body .moom-artist-label, .moom-room .moom-plate, .moom-room .moom-tag { font-size: 9px; } } /* ===================================================== ADC — Artists alphabet bar (group_by_alphabet / ofletter) ===================================================== */ .art_info_section .alphabet_box .alpha_letter { border-color: var(--adc-line-2, #d6d6d6); color: var(--adc-ink, #111110); font-family: var(--font-title); font-size: 22px; font-weight: 500; letter-spacing: 0.04em; } .art_info_section .alphabet_box .alpha_letter:last-child { border-right-color: var(--adc-line-2, #d6d6d6); } .art_info_section .alphabet_box .alpha_letter a { color: var(--adc-ink, #111110); } .art_info_section .alphabet_box .alpha_letter:hover { background: var(--adc-band, #f5f5f5); } .art_info_section .alphabet_indv h4 { color: var(--adc-ink, #111110); } /* View more — same secondary action as catalog group-by "See All" */ .art_info_section .view_more_alpha a { color: var(--adc-ink, #111110); font-family: var(--adc-body); font-size: 13px; font-weight: 600; line-height: 1.4; text-transform: none; } .art_info_section .view_more_alpha a:hover, .art_info_section .view_more_alpha a:focus { color: var(--adc-accent, #b3402a); } .art_info_section .view_more_alpha a .fa-angle-right { font-size: 0.85em; line-height: 1; } /* ===================================================== ADC — Under the Light (.utl-reading) Remap global museum/conservator tokens → ArtsDot UI Kit. ===================================================== */ .utl-reading { --utl-canvas: var(--adc-band, #f5f5f5); --utl-paper: var(--adc-bg, #ffffff); --utl-linen: var(--adc-soft, #eeeeee); --utl-gesso: var(--adc-band, #f5f5f5); --utl-shadow: var(--adc-soft, #eeeeee); --utl-ink: var(--adc-ink, #111110); --utl-ink-soft: var(--adc-ink-2, #6e6c68); --utl-ink-mute: var(--adc-ink-2, #6e6c68); --utl-ink-faint: var(--adc-ink-3, #a3a09b); --utl-ink-vapor: var(--adc-ink-3, #a3a09b); --utl-monet: var(--adc-accent, #b3402a); --utl-wisteria: var(--adc-ink-3, #a3a09b); --utl-plein: var(--adc-accent, #b3402a); --utl-lichen: var(--adc-ink-2, #6e6c68); --utl-rose: #c95a47; --utl-ochre: var(--adc-accent, #b3402a); --utl-rule: var(--adc-line, #e6e6e6); --utl-rule-soft: var(--adc-line-2, #d6d6d6); --utl-f-display: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); --utl-f-edit: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); --utl-f-ui: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); --utl-f-mono: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace; max-width: var(--adc-maxw, 1440px); padding: clamp(32px, 5vw, 64px) var(--adc-pad, 44px); font-family: var(--utl-f-ui); color: var(--utl-ink); background: var(--adc-bg, #ffffff); } /* Breadcrumb */ .utl-reading .utl-breadcrumb .nav-list li, .utl-reading .utl-breadcrumb .nav-list a, .utl-reading .utl-breadcrumb .main-heading { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--adc-ink-2, #6e6c68); } .utl-reading .utl-breadcrumb .main-heading { color: var(--adc-ink, #111110); font-weight: 600; } .utl-reading .utl-breadcrumb .nav-list a:hover, .utl-reading .utl-breadcrumb .nav-list a:focus { color: var(--adc-accent, #b3402a); } /* Hero head */ .utl-reading .utl-head { gap: clamp(24px, 4vw, 48px); margin-bottom: clamp(32px, 4vw, 56px); } .utl-reading h1.utl-title { font-family: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-weight: 700; font-size: clamp(32px, 5vw, 52px); line-height: 1.04; letter-spacing: -0.03em; max-width: 14ch; } .utl-reading h1.utl-title em { font-family: inherit; font-style: italic; font-weight: inherit; font-size: 1em; color: var(--adc-accent, #b3402a); } .utl-reading .utl-lede { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 15px; font-weight: 300; line-height: 1.6; letter-spacing: -0.003em; color: var(--adc-ink-2, #6e6c68); max-width: 42ch; } .utl-reading .utl-lede em { font-style: italic; font-weight: 400; color: var(--adc-ink, #111110); } /* Canvas stage */ .utl-reading .utl-stage-wrap { display: flex; flex-direction: column; gap: 12px; } .utl-reading .utl-plate-no { position: static; display: inline-flex; align-items: center; gap: 10px; width: auto; max-width: 100%; padding: 0; background: transparent; color: var(--adc-accent, #b3402a); font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; line-height: 1.2; text-transform: uppercase; border-radius: 0; } .utl-reading .utl-plate-no::before { content: ""; flex: 0 0 24px; width: 24px; height: 1px; background: var(--adc-accent, #b3402a); } .utl-reading .utl-stage { background: var(--adc-soft, #eeeeee); border: 1px solid var(--adc-line, #e6e6e6); border-radius: var(--adc-radius, 2px); box-shadow: 0 24px 48px -20px rgb(17 17 16 / 16%); } .utl-reading .utl-stage::after { outline-color: var(--adc-line-2, #d6d6d6); } .utl-reading .utl-caption { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 14px; font-style: normal; font-weight: 400; color: var(--adc-ink-2, #6e6c68); } .utl-reading .utl-caption b { font-family: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--adc-ink, #111110); } .utl-reading .utl-hint { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--adc-ink-3, #a3a09b); } .utl-reading .utl-rail::after { box-shadow: 0 0 8px rgb(179 64 42 / 45%); } .utl-reading .utl-handle { border-radius: var(--adc-radius, 2px); border-color: var(--adc-line-2, #d6d6d6); box-shadow: 0 8px 20px -6px rgb(17 17 16 / 28%); } .utl-reading .utl-handle::before { border-radius: 1px; border-color: var(--adc-accent, #b3402a); background: rgb(179 64 42 / 10%); } .utl-reading .utl-handle:hover { box-shadow: 0 0 0 5px rgb(179 64 42 / 10%), 0 8px 22px -4px rgb(17 17 16 / 28%); } .utl-reading .utl-handle:focus-visible { box-shadow: 0 0 0 3px var(--adc-bg, #fff), 0 0 0 6px var(--adc-accent, #b3402a), 0 8px 22px -4px rgb(17 17 16 / 28%); } .utl-reading .utl-handle .utl-car { font-family: var(--utl-f-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.12em; color: var(--adc-ink-2, #6e6c68); } /* Reading panel */ .utl-reading .utl-panel { border: 1px solid var(--adc-line, #e6e6e6); border-radius: var(--adc-radius, 2px); box-shadow: 0 16px 40px -20px rgb(17 17 16 / 12%); } .utl-reading .utl-panel-top { border-top: 3px solid var(--adc-accent, #b3402a); } .utl-reading .utl-p-head { padding: 20px 22px 18px; border-bottom-color: var(--adc-line, #e6e6e6); } .utl-reading .utl-p-kick { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--adc-ink-3, #a3a09b); } .utl-reading .utl-p-stage { font-family: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: clamp(22px, 2.4vw, 26px); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; color: var(--adc-ink, #111110); } .utl-reading .utl-p-stage em { font-family: inherit; font-style: italic; color: var(--adc-accent, #b3402a); } .utl-reading .utl-p-sub { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 14px; font-weight: 300; font-style: normal; line-height: 1.55; letter-spacing: -0.003em; color: var(--adc-ink-2, #6e6c68); } /* Gauges */ .utl-reading .utl-gauges { padding: 20px 22px; gap: 14px; border-bottom-color: var(--adc-line, #e6e6e6); } .utl-reading .utl-g-name { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--adc-ink-2, #6e6c68); } .utl-reading .utl-g-val { font-family: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--adc-ink, #111110); } .utl-reading .utl-g-val span { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; color: var(--adc-ink-3, #a3a09b); } .utl-reading .utl-g-bar { height: 4px; background: var(--adc-soft, #eeeeee); border-radius: 2px; box-shadow: inset 0 1px 2px rgb(17 17 16 / 6%); } .utl-reading .utl-g-fill { border-radius: 2px; } .utl-reading .utl-g1 .utl-g-fill { background: linear-gradient(90deg, var(--adc-ink-3, #a3a09b), var(--adc-accent, #b3402a)); } .utl-reading .utl-g2 .utl-g-fill { background: linear-gradient(90deg, var(--adc-ink-3, #a3a09b), var(--adc-ink, #111110)); } .utl-reading .utl-g3 .utl-g-fill { background: linear-gradient(90deg, var(--adc-ink-2, #6e6c68), var(--adc-accent, #b3402a)); } .utl-reading .utl-g4 .utl-g-fill { background: linear-gradient(90deg, var(--adc-ink-3, #a3a09b), var(--utl-rose), var(--adc-accent, #b3402a)); } .utl-reading .utl-g5 .utl-g-fill { background: linear-gradient(90deg, var(--adc-ink-2, #6e6c68), var(--adc-ink-3, #a3a09b)); } .utl-reading .utl-g6 .utl-g-fill { background: linear-gradient(90deg, var(--adc-ink-3, #a3a09b), var(--adc-accent, #b3402a), var(--utl-rose)); } .utl-reading .utl-g-live { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; color: var(--adc-accent, #b3402a); } /* Support / medium */ .utl-reading .utl-medium { padding: 16px 22px; border-bottom-color: var(--adc-line, #e6e6e6); } .utl-reading .utl-medium p { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 14px; font-weight: 300; font-style: normal; line-height: 1.55; color: var(--adc-ink-2, #6e6c68); } /* Optical profile verdict */ .utl-reading .utl-verdict { padding: 22px; background: var(--adc-band, #f5f5f5); } .utl-reading .utl-verdict .utl-badge { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; color: var(--adc-accent, #b3402a); border: 1px solid var(--adc-line-2, #d6d6d6); background: var(--adc-bg, #ffffff); border-radius: 999px; } .utl-reading .utl-verdict h3 { font-family: var(--font-title, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: clamp(24px, 2.8vw, 30px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; color: var(--adc-ink, #111110); } .utl-reading .utl-verdict h3 em { font-family: inherit; font-style: italic; color: var(--adc-accent, #b3402a); } .utl-reading .utl-verdict p { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--adc-ink-2, #6e6c68); } .utl-reading .utl-verdict p em { font-style: italic; font-weight: 400; color: var(--adc-ink, #111110); } .utl-reading .utl-verdict .utl-labels { border-top-color: var(--adc-line, #e6e6e6); } .utl-reading .utl-verdict .utl-lab { font-family: var(--font-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--adc-ink-2, #6e6c68); border: 1px solid var(--adc-line-2, #d6d6d6); border-radius: var(--adc-radius, 2px); background: var(--adc-bg, #ffffff); } .utl-reading .utl-verdict a.utl-lab { text-decoration: none; color: var(--adc-ink-2, #6e6c68); cursor: pointer; } .utl-reading .utl-verdict .utl-lab:hover, .utl-reading .utl-verdict a.utl-lab:hover { border-color: var(--adc-accent, #b3402a); color: var(--adc-ink, #111110); } .utl-reading .utl-verdict.utl-locked { animation-name: utl-flash-adc; } @keyframes utl-flash-adc { 0% { background: rgb(179 64 42 / 12%); } 100% { background: var(--adc-band, #f5f5f5); } } @media (max-width: 1100px) { .utl-reading .utl-head { flex-direction: column; align-items: flex-start; } .utl-reading .utl-lede { max-width: 56ch; } }