/* ===================================================== 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 { --font-title-accent: 'Inter', system-ui, sans-serif; --font-title: 'Cormorant Garamond', Georgia, serif; --font-body: 'Inter', system-ui, 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: #e9e7e2; --adc-line-2: #d9d6cf; --adc-band: #f6f5f2; --adc-slot: #eceae5; --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 → red */ .wa-nav .nav-menu > li > a:hover { color: #C6270E; } /* Nav dropdown inner links → red + underline */ .wa-nav .dropdown-inner a:hover { color: #C6270E; text-decoration: underline; } /* General dropdown links → red */ .dropdown a:hover { color: #C6270E; /* text-decoration: underline; */ } /* Footer list links → red */ .footer_list a:hover { color: #C6270E; /* text-decoration: underline; */ } /* Nav-pills / table-of-contents links → red (overrides Bootstrap's .nav-link:hover) */ .nav-link:hover { color: #C6270E; } /* 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-family: Georgia, "Book Antiqua", "Times New Roman", serif; */ /* font-family: Montserrat; */ 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.7.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 { font-size: 18px; font-weight: bold; color: #660000; opacity: 1; font-family: var(--font-body) !important; } 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 { background: #d9d9d9; border: 1px solid #cdcdcd; } .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; } .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: #C6270E; } :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; } 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; } .sidebar_box { color: #4A4A4A; background:#D3D3D3; } form.countrySearchForm input[type="text"] { background:#D3D3D3; } .showMainResulsImage h3 { background: #d3d3d3 !important; } #groupby-selector { background-color: #d3d3d3 !important; } ul.Sidebar_tags a { background: #c8c8c8 !important; } ul.Sidebar_tags li button.catalog-nav-btn { background: #c8c8c8 !important; } .addToCart, .added { background: #ffd17c !important; } .custom_search .cartbtn_group a.addToCart { color: #343434 !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: #d8d8d8 !important; border: 1px solid #bbbab7 !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 { background: #e0e0e0 !important; } .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 { background-color: #c3c3c3 !important; } .art_quize_section { background: #3f3f3f !important; } .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.7.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: - #C6270E — ADC red (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.7.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: #C6270E !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: #C6270E !important; } /* === HOMEPAGETEST migrated inline CSS === */ /* ═══════════════════════════════════════════════════════════════════ ADC — Artisan Canvas — Design System Scoped to .homepage-artsdot-homepagetest-widgets ═══════════════════════════════════════════════════════════════════ */ /* ── CSS Design Tokens ─────────────────────────────────────────── */ .homepage-artsdot-homepagetest-widgets { --adc-carbon: #1A1A1A; --adc-accent: #666666; --adc-accent-dark: #444444; --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: 'Cormorant Garamond', Georgia, serif; --adc-sans: 'Inter', -apple-system, BlinkMacSystemFont, 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-homepagetest-widgets { max-width: 1440px; margin: 0 auto; padding: 0 !important; } /* Row spacing between widget sections */ .homepage-artsdot-homepagetest-widgets > .row, .homepage-artsdot-homepagetest-widgets > .container-fluid > .row { border-top: 1px solid var(--adc-structural); padding-top: 1.5rem; padding-bottom: 1.5rem; } .homepage-artsdot-homepagetest-widgets > .row:first-child { border-top: none; } /* ── Typography overrides ───────────────────────────────────────── */ .homepage-artsdot-homepagetest-widgets h1, .homepage-artsdot-homepagetest-widgets h2, .homepage-artsdot-homepagetest-widgets .widget-artist-spotlight__title, .homepage-artsdot-homepagetest-widgets .widget-mpl__info h2 { font-family: var(--adc-serif) !important; font-weight: 400; color: var(--adc-carbon); letter-spacing: 0; } .homepage-artsdot-homepagetest-widgets h3 { font-family: var(--adc-serif); font-weight: 400; color: var(--adc-carbon); } .homepage-artsdot-homepagetest-widgets h4 { font-family: var(--adc-serif); font-size: 19px; font-weight: 500; line-height: 1.3; color: var(--adc-carbon); } .homepage-artsdot-homepagetest-widgets p, .homepage-artsdot-homepagetest-widgets .small, .homepage-artsdot-homepagetest-widgets small { font-family: var(--adc-sans); font-weight: 300; color: var(--adc-text-2); line-height: 1.6; } /* Kicker / eyebrow labels */ .homepage-artsdot-homepagetest-widgets .text-uppercase { font-family: var(--adc-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; } /* ── Links ──────────────────────────────────────────────────────── */ .homepage-artsdot-homepagetest-widgets a { color: var(--adc-carbon); text-decoration: none; transition: color 0.2s, opacity 0.2s; } .homepage-artsdot-homepagetest-widgets a:hover { color: var(--adc-accent); opacity: 1; } /* ── Generic card / border overrides ───────────────────────────── */ .homepage-artsdot-homepagetest-widgets .border, .homepage-artsdot-homepagetest-widgets [class*="border-"] { border-color: var(--adc-border) !important; } .homepage-artsdot-homepagetest-widgets .rounded-3 { border-radius: var(--adc-radius) !important; } .homepage-artsdot-homepagetest-widgets .rounded-2 { border-radius: var(--adc-radius) !important; } /* ══════════════════════════════════════════════════════════════════ ARTIST SLIDER WIDGET (.widget-artist-slider) ══════════════════════════════════════════════════════════════════ */ .homepage-artsdot-homepagetest-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-homepagetest-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-homepagetest-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-homepagetest-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-homepagetest-widgets .widget-artist-slider__bio p { font-size: 13px; font-weight: 300; color: var(--adc-text-2); } /* Swiper slide — each artwork card */ .homepage-artsdot-homepagetest-widgets .artist_slid_box { background: var(--adc-matte); border: 1px solid var(--adc-card-border); border-radius: var(--adc-radius); overflow: hidden; } .homepage-artsdot-homepagetest-widgets .artist_slid_box img { object-fit: contain !important; background: var(--adc-matte); } /* Artist name kicker in slide */ .homepage-artsdot-homepagetest-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-homepagetest-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-homepagetest-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-homepagetest-widgets .swp_btn:hover { border-color: var(--adc-accent) !important; } .homepage-artsdot-homepagetest-widgets .swiper-button-next::after, .homepage-artsdot-homepagetest-widgets .swiper-button-prev::after { color: var(--adc-carbon); font-size: 14px; } /* ══════════════════════════════════════════════════════════════════ ARTIST SPOTLIGHT WIDGET (.widget-artist-spotlight) ══════════════════════════════════════════════════════════════════ */ .homepage-artsdot-homepagetest-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-homepagetest-widgets .widget-artist-spotlight__portrait { border-radius: var(--adc-radius) !important; overflow: hidden; } .homepage-artsdot-homepagetest-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-homepagetest-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-homepagetest-widgets .widget-artist-spotlight__art { background: var(--adc-matte); border: 1px solid var(--adc-card-border); border-radius: var(--adc-radius); } .homepage-artsdot-homepagetest-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-homepagetest-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-homepagetest-widgets .widget-mpl__info { background: var(--adc-section) !important; } .homepage-artsdot-homepagetest-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-homepagetest-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-homepagetest-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-homepagetest-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-homepagetest-widgets .widget-mpl__cta:hover { background: var(--adc-carbon) !important; color: var(--adc-white) !important; } .homepage-artsdot-homepagetest-widgets .widget-mpl__group-col { background: var(--adc-section) !important; border-color: var(--adc-border) !important; } .homepage-artsdot-homepagetest-widgets .widget-mpl__tile { background: var(--adc-matte) !important; } .homepage-artsdot-homepagetest-widgets .widget-mpl__caption { font-family: var(--adc-sans); border-top-color: var(--adc-divider) !important; } .homepage-artsdot-homepagetest-widgets .widget-mpl__caption a { color: var(--adc-carbon) !important; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; } .homepage-artsdot-homepagetest-widgets .widget-mpl__caption a:hover { color: var(--adc-accent) !important; text-decoration: none; } /* ══════════════════════════════════════════════════════════════════ MOVEMENT-4 WIDGET (.widget-mov-4) ══════════════════════════════════════════════════════════════════ */ .homepage-artsdot-homepagetest-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-homepagetest-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-homepagetest-widgets .w-100.border.mb-4, .homepage-artsdot-homepagetest-widgets .w-100.border.rounded-3.mb-4, .homepage-artsdot-homepagetest-widgets .w-100.border.rounded-3.p-3.mb-4, .homepage-artsdot-homepagetest-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-homepagetest-widgets img { object-fit: contain !important; } /* ══════════════════════════════════════════════════════════════════ SECTION LABEL / PERIOD HEADER above each artist slider ══════════════════════════════════════════════════════════════════ */ .homepage-artsdot-homepagetest-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-homepagetest-widgets .quiz-label:has(input[type="radio"]:checked) { border-color: var(--adc-accent) !important; background: var(--adc-section); } .homepage-artsdot-homepagetest-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-homepagetest-widgets .btn-primary, .homepage-artsdot-homepagetest-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-homepagetest-widgets .btn-outline-dark, .homepage-artsdot-homepagetest-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-homepagetest-widgets .btn-outline-dark:hover, .homepage-artsdot-homepagetest-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-homepagetest-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-homepagetest-widgets ::-webkit-scrollbar { width: 4px; height: 4px; } .homepage-artsdot-homepagetest-widgets ::-webkit-scrollbar-track { background: var(--adc-structural); } .homepage-artsdot-homepagetest-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: Georgia, 'Times New Roman', serif; } .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-homepagetest-widgets, .homepage-impressionist-widgets, .homepage-artsdot-homepagetest-widgets, .homepage-buypopart-homepagetest-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_v2.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: #e9e7e2; --adc-line-2: #d9d6cf; --adc-accent: #b3402a; --adc-accent-d:#93311f; --adc-soft: #eceae5; /* image-slot grey */ --adc-band: #f6f5f2; /* soft section band */ /* Single neutral grotesque for both display and body (no serif) */ --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 { color: inherit; text-decoration: none; } .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); } .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; } /* Most Popular Artists: 24 cards wrap onto multiple 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-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; } .adc-mpl-mosaic { display: grid; grid-template-columns: 1.55fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; aspect-ratio: 11 / 9; } .adc-mpl-mosaic a { display: block; overflow: hidden; border-radius: 8px; background: var(--adc-soft); border: 1px solid var(--adc-line); min-height: 0; } .adc-mpl-mosaic a img { width: 100%; height: 100%; 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; } .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; } .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-paper); 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: 230px 1.3fr 1.5fr; 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: 14px; } /* ---- 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__media { aspect-ratio: 3 / 4; } .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(3, 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; } .adc-reimagine__rail { margin: 0; } /* ---- 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); } } /* ===================================================== 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.7.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; } .adc-mainnav .dropdown:hover .dropdown-content, .adc-mainnav .dropdown:hover .dropdown-content.full-width { display: none; } .adc-mainnav .dropdown.dropdown-open .dropdown-content, .adc-mainnav .dropdown.dropdown-open .dropdown-content.full-width { display: block; } .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; } }