/* ===================================================== FONTS — ADC (ArtsDot) ===================================================== */ /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter/inter-w100-900-normal-latin-ext.1ad231aac0a8.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter/inter-w100-900-normal-latin.260c81a4759b.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 600; font-display: swap; src: url("../fonts/cormorant-garamond/cormorant-garamond-w300-600-italic-latin-ext.61d59919981f.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 600; font-display: swap; src: url("../fonts/cormorant-garamond/cormorant-garamond-w300-600-italic-latin.3e2c4175a96d.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/cormorant-garamond/cormorant-garamond-w300-600-normal-latin-ext.acc46a2a7785.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/cormorant-garamond/cormorant-garamond-w300-600-normal-latin.c47ff12887a3.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* 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("../fonts/archivo/archivo-w100-900-normal-latin-ext.c5e41aa17045.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("../fonts/archivo/archivo-w100-900-normal-latin.cd56e2ec63d7.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("../fonts/archivo/archivo-w100-900-italic-latin-ext.b6c736b29c0a.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("../fonts/archivo/archivo-w100-900-italic-latin.b590eac708ab.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ArtsDot UI Kit: one family does everything — Archivo, a neutral grotesque. It is the only webfont the site loads; emphasis is italic, not a second face. */ --font-title-accent: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-title: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-body: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Horizontal rhythm — matches .adc-header / .adc-footer-v2 */ --adc-pad: 44px; /* Layout tokens — consumed by global-style-V2.1.css via var(--site-*, fallback) */ --site-bg: #ffffff; --site-header-bg: #ffffff; --site-nav-bg: #ffffff; --site-nav-border: transparent; --site-footer-bg: #2A2A2A; --site-footer-border: transparent; --site-copyright-bg: #2A2A2A; --site-topbar-bg: #5A5A5A; --site-link: #4A4A4A; --site-btn: #6B6B6B; --site-btn-text: #E8E8E8; } @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, .footer-container-bottom, .adc-footer { --adc-bg: #ffffff; --adc-ink: #111110; --adc-ink-2: #6e6c68; --adc-ink-3: #a3a09b; --adc-line: #e6e6e6; --adc-line-2: #d6d6d6; --adc-band: #f5f5f5; --adc-slot: #eeeeee; --adc-accent: #b3402a; --adc-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --adc-body: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* ===================================================== ADC — Image hover: grayscale + scale (consolidated) Three contexts merged into one consistent block. ===================================================== */ /* Base transition */ .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 */ .swiper-slide .artist_slid_box a:hover img, a:hover img.mouseover_effect_images, img.mouseover_effect_images:hover, a:hover img.mouseover_image_effect, img.mouseover_image_effect:hover { -webkit-filter: grayscale(100%); filter: grayscale(100%); transform: scale(1.02); } /* ===================================================== ADC — Link hover effects (consolidated) Nav, dropdown, footer, column, slider, and muted-text links. ===================================================== */ /* Nav top-level links → accent */ /* Nav dropdown inner links → accent + underline */ /* General dropdown links → accent */ .dropdown a:hover { color: var(--adc-accent, #b3402a); /* text-decoration: underline; */ } /* Footer list links → accent */ /* Nav-pills / table-of-contents links → accent (overrides Bootstrap's .nav-link:hover) */ .nav-link:hover { color: var(--adc-accent, #b3402a); } /* Dropdown column links — strip underline */ /* Numeric slider label links → muted grey + 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) ===================================================== */ 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) { .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). */ /* NOTE: WahooArt site styling (.wa-*, .WahooArt-Header-Flags, etc.) removed. That site has its own CSS file (wahooart-V2.0.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) */ /* 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) */ /* 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: .sidebar-section-heading (used in article TOC), .consultation_content h6, h1/h2/h3 global styling. */ /* side_headings — legacy class; prefer .art_heading on ADC buy/academic pages */ .sidebar-section-heading { font-family: var(--adc-body, var(--font-body)) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--adc-ink, #111110) !important; margin-top: 0 !important; margin-bottom: 18px !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--adc-line-2, #d6d6d6) !important; opacity: 1; } H1, H2, H3 { font-weight: bold !important; font-family: var(--font-body) !important; } /* Cart link is wrapped in .aps-cart-icon-wrap for the count badge; keep same img sizing as direct .icon-group > a */ /* Not-found / CTA row: global form max-width must not offset centered buttons */ .step-content .step-number-box { background: #dbdbdb; border: 1px solid #c7c7c7; } .custom_search .col-sm-12.col-md-6.col-lg-4.col-xl-3 { border: 1px solid #dddddd; } .colorPlatte li, .compatibility_list li { background: #e7e7e7; border: 1px solid #c7c7c7; color: #2d2d2d; } .search_results #fieldSelector { border: 1px solid #AAA; background: #d1d1d1; } /* User dashboard sidebar only — browse/group-by uses catalog-groupby-page tokens below */ aside .sidebar_box { background: #5b5b5b; } .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 copy lives on a dark photo band — typography scoped under body.art-consultation-page / body.start-selling-page below. */ .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; } #upload-spinner { background: rgb(204, 204, 204); } a { color: #4A4A4A; } a:hover { color: var(--adc-accent, #b3402a); } :root { --btn-color: #6B6B6B; --btn-text-color: #E8E8E8; } .btn { background: #444; } .overlay_img { background: #09090987; } .heading_text, .heading_paragrap { color: #4A4A4A; } .swiper-button-prev:after, .swiper-button-next:after { background: #444; } .black_back { background: #5A5A5A; } .black_back p { color: #E5E5E5; } .why_choose_info h5, .why_choose_info p { color: #4A4A4A; } .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 li::marker { color: #B8B8B8; } .meet_info .overlay_img { background: #5A5A5Ae3; } .book_call { color: #E8E8E8; } .primary-label, .page_navigation_menu a, .form_heading, .form_content, .dtl_con h4, .dtl_con p, select option { color: #4A4A4A; } .black-hover { color: #6B6B6B; } .steps_count span { background: #4A4A4A; color: #E8E8E8; } .sum_chek_text { border-bottom: 1px solid #D0D0D0; color: #4A4A4A; } select:focus>option:checked { background: #6B6B6B; color: #E0E0E0; } .manuall_box input { background: #F0F0F0; color: #4A4A4A; } .checked_box { border: 1px solid #4A4A4A !IMPORTANT; } .artistic_img .overlay_img, .overlay_content, .elevated_img_title, .swiper-button-prev, .collection_other_detail { color: #4A4A4A; } .form-floating>label { color: #4A4A4A !important; border-bottom: none !important; } .repruct_content_collapse .accordion-body { color: #6B6B6B; } body, main { background: #E8E8E8; } .text-op-80, .text-op-0 { color: #4A4A4A; } .text-op-80 { opacity: 0.8; } @media (max-width: 768px){ } /* .links_heading { color: #4E4339; } */ /* (breadcrumb ul/li/a/current-item ink MIGRATED 2026-07-05 to components/breadcrumb/breadcrumb--artsdot.css — --breadcrumb-ink) */ .search_results, .Showing_text, .sorting_content { color: #4A4A4A; } .Showing_text .form-control { border: 1px solid #C0C0C0 !important; } .tag-btn { background-color: #D8D8D8; } .accordion-item { background-color: #E0E0E0; border-bottom: 1px solid #D0D0D0; } button.accordion-button, .accordion-button:not(.collapsed) { background: #E0E0E0; color: #4A4A4A; } .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); } /* @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 { 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; } .searchCard_sec .row { border-left: 1px solid #D0D0D0; } .showMOre, .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) */ .contactfull_width_hero_banner_with_background_image, .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-prev { color: #4A4A4A !important; } .btn-prev { border: 1px solid #9f9f9e !important; } .dropdown-list { background: #C8C8C8; } .floating_footer, .upload_img_form label, .image-upload-container, .image-preview, .image-preview img, .image-upload-box, .image-preview-list-box, #image-preview-list, .loader, .form-floating input, .loader::after { color: #4A4A4A; } .upload_img_form span { color: #6B6B6B; } .card-body-art ul.list-unstyled.card-body-art-content.mb-0 li.d-flex.align-items-center.mb-2 a img, .art-curator, .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, .ui-widget.ui-widget-content, .ui-widget-content, .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-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; } /* FTS search card model badge — UI Kit .adc-badge / .adc-artcard__badges (#16) */ h3.search_subtitle a span { color: #4A4A4A; background: #d8d8d8 !important; } h3.search_subtitle, h3.search_subtitle a, .search_more, p.Showing_text1, p.Showing_text1 span { color: #4A4A4A; } .sorting_content select.custom-select { background: url("/static/images/arrow-down.5a2ececd62b2.png") no-repeat right center; background-size: 12px; } /* Legacy gray browse chrome — not used on catalog group-by (ADC tokens at EOF) */ ul.sidebar-tags-chip-list a { background: #c8c8c8 !important; } ul.sidebar-tags-chip-list li button.catalog-nav-btn { background: #c8c8c8 !important; } /* ADC — grid card price/buy CTA (UI Kit #artcard .price / button.pill: ink bg, white text) */ .added { background: var(--adc-ink, #111110) !important; color: #ffffff !important; font-family: var(--adc-body, var(--font-body)); font-size: 13px; font-weight: 600; line-height: 1.35; letter-spacing: 0.04em; text-transform: none; border-radius: 999px; padding: 10px 20px; width: auto; min-width: 0; transition: background-color 0.15s ease, color 0.15s ease; } .art_info_details { background: #ffffff; border: 1px solid #e6e6e6; box-shadow: none; } .art_info_inner { background: #f5f5f5; } .art_his_text { background: #dbdbdb !important; } .image-upload-box { background: #dbdbdb !important; } .artist_posts:hover .artist_posts_innr { background: #dbdbdb !important; } .artistPage_Slider_section { background: #efefef !important; } /* .artwork_section — legacy gray band removed; ADC buy/academic blocks styled below */ .yellow_cont a { color: #515151 !important; } /* quick_facts_section — ADC surfaces set in “Academic / story block” (article_main_page) */ /* .art_quize_section — legacy WA dark panel removed; ADC buy-page quiz uses tokens below */ .sidebar_box:hover, .sidebar_box.active { border: 1px solid #4A4A4A; } ul.sidebar-tags-chip-list, ul.sidebar-tags-chip-list a, ul.sidebar-tags-chip-list li button.catalog-nav-btn { color: #4A4A4A; } .repruct_content_collapse button.accordion-button, .repruct_content_collapse button.accordion-button:not(.collapsed) { background: transparent !important; } .buy_sale_channel_heading_alternate_buy a { color: #828282; } .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%); } /* It is for new svg icons USER and CART */ 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 { color: #4A4A4A; } .steps_count, .profile_picture_top_header_initiales { color: #4A4A4A; } page-link { color: #666666 !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-V2.0.css — WahooArt (WA) uses brand brown (#875D2A / #6B4822) instead. Documented in: -Documentation Project/DOC_APS_THE_7_SITES.md → section "Frontend CSS: text-link hover (WahooArt vs ArtsDot)" Brand token: - var(--adc-accent, #b3402a) — ADC rust accent (global a:hover also uses this; rules below override inline color: inherit on buy/info templates) Covered templates / URLs: - artwork_buy_*.html (e.g. …/ArtistReproduction/) - artwork_info.html (/art/info/{slug}/) Shared transition: custom-V2.0.css (.collection_details h4 a, .art_info_box …) ===================================================== */ /* Buy page — collections section (#collections-section) + slider labels */ .yellow_cont a:hover, .view_all_art a:hover { color: var(--adc-accent, #b3402a) !important; } /* Artwork info page — .art_info_box */ /* === HOMEPAGETEST migrated inline CSS === */ /* ═══════════════════════════════════════════════════════════════════ ADC — Artisan Canvas — Design System Scoped to .homepage-artsdot-widgets ═══════════════════════════════════════════════════════════════════ */ /* ── CSS Design Tokens ─────────────────────────────────────────── */ /* ── Page container ─────────────────────────────────────────────── */ /* Row spacing between widget sections */ /* ── Typography overrides ───────────────────────────────────────── */ /* Kicker / eyebrow labels */ /* ── Links ──────────────────────────────────────────────────────── */ /* ── Generic card / border overrides ───────────────────────────── */ /* ══════════════════════════════════════════════════════════════════ ARTIST SLIDER WIDGET (.widget-artist-slider) ══════════════════════════════════════════════════════════════════ */ /* Portrait image wrapper */ /* Artist name under portrait */ /* Artist bio paragraph */ /* Swiper slide — each artwork card */ /* Artist name kicker in slide */ /* Artwork title in slide */ /* Swiper nav arrows */ /* ══════════════════════════════════════════════════════════════════ ARTIST SPOTLIGHT WIDGET (.widget-artist-spotlight) ══════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ MOST POPULAR LARGE WIDGET (.widget-mpl) ══════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ MOVEMENT-4 WIDGET (.widget-mov-4) ══════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ FEATURED ARTIST WITH FACT (.widget-featured-artist-with-fact) ══════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ READY TO SHIP / UNIQUE NFT / REIMAGINE WIDGETS Generic widget card override ══════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ ARTWORK IMAGE containers — always contain, never crop ══════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ SECTION LABEL / PERIOD HEADER above each artist slider ══════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ QUIZ / IDENTIFY MASTERPIECE widgets ══════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ ARTICLE / KEYWORD WIDGETS — neutralise accent colours ══════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ FACT BLOCK — border-left accent marker (from ADC reference) ══════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ SCROLLBAR — thin, neutral (ADC aesthetic) ══════════════════════════════════════════════════════════════════ */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* --- block --- */ @media (min-width: 768px) { } @media (min-width: 768px) { } @media (min-width: 768px) { } @media (min-width: 768px) { } @media (min-width: 768px) { } @media (min-width: 768px) { } @media (min-width: 768px) { } /* Title: Baskervville SC only — title case, no faux italic */ @media (min-width: 768px) { } @media (min-width: 768px) { } /* Body: DM Sans */ /* CTA: DM Sans, all-caps (button only) */ @media (min-width: 768px) { } /* --- block --- */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* .widget-faf__cell responsive dividers live in widgets-base.css */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* --- block --- */ /* === ARTS DOT hompagetest — modifier classes === */ /* === HOMEPAGETEST shared layout utilities === */ @media (max-width: 991.98px) { } @media (max-width: 767.98px) { .homepage-impressionist-widgets, .homepage-buypopart-widgets { padding-left: clamp(12px, 3vw, 24px); padding-right: clamp(12px, 3vw, 24px); } .ti-sh { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; } } /* ===================================================== ADC v2 — ArtsDot editorial design system (scoped to .adc-v2, used by homepage_artsdot.html) ===================================================== */ /* ---- Typography ---- */ .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-h3 em { font-style: italic; font-weight: inherit; color: var(--adc-accent); } /* Editorial headings use the kit serif; !important overrides a global heading rule that otherwise forces --font-title-accent (Inter) onto these headings. */ .adc-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; } /* ---- Hero / page header ---- */ /* ---- Section scaffolding ---- */ /* ---- Image frame (shared) ---- */ /* ---- Horizontal rail ---- */ /* Shop by Style: 6 movement cards in one row (no horizontal scroll). */ @media (max-width: 1100px) { } @media (max-width: 520px) { } /* Most Popular Artists: 16 cards wrap onto two rows (no horizontal scroll). */ @media (max-width: 1100px) { } @media (max-width: 820px) { } @media (max-width: 520px) { } /* ---- Card grids ---- */ .adc-meta { display: block; color: var(--adc-faint); font-size: 12px; margin-top: 6px; } /* ---- ADC artwork card (UI-Kit #16) — shared tile for gallery widgets ---- */ .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 "Most Popular" mosaic (UI-Kit #25 Popular mediums) ---- */ /* Mosaic proportions match UI-Kit / WA widget-mpl (2:1 band, not 11:9). */ @media (max-width: 1100px) { } @media (max-width: 560px) { } /* ---- Craft band ---- */ @media (max-width: 860px) { } /* ---- Artist cards ---- */ /* ---- Museum prestige ---- */ /* ---- 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 ---- */ /* ---- CTA band / newsletter ---- */ /* ---- 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-mb { margin-bottom: 16px; } /* ---- Artist spotlight (WA disposition: portrait · intro · 2×2 works) ---- */ /* ---- Feature (movement masterclass) ---- */ .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 */ @media (max-width: 760px) { } /* ---- Artist on this day (WA disposition, ADC styling) ---- */ @media (max-width: 992px) { } @media (max-width: 560px) { } /* ---- Featured-artist facts / quick-fact box ---- */ .adc-faf { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(18px, 2.5vw, 32px); align-items: start; } .adc-faf__works { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.6vw, 20px); } .adc-faf__desc { color: var(--adc-muted); font-size: 13.5px; line-height: 1.55; margin: 14px 0 0; } .adc-faf__cta { margin-top: 16px; } @media (max-width: 900px) { .adc-faf { grid-template-columns: 1fr; } } @media (max-width: 560px) { .adc-faf__works { grid-template-columns: 1fr 1fr; } } .adc-factbox { background: var(--adc-paper); border: 1px solid var(--adc-line); border-radius: var(--adc-radius); padding: 22px; } .adc-factbox__photo { display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 1 / 1; background: var(--adc-soft); border: 1px solid var(--adc-line); margin-bottom: 14px; } .adc-factbox__photo img { width: 100%; height: 100%; object-fit: cover; } .adc-factlist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .adc-factlist li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.5; color: var(--adc-muted); } .adc-factlist li::before { content: "—"; position: absolute; left: 0; color: var(--adc-accent); } /* ---- Quizzes / identify ---- */ /* Keep every challenge card the same height with its CTA pinned to the bottom. */ @media (max-width: 360px) { } /* ---- Reimagine your photo ---- */ /* Reimagine style rail: very slow auto-scroll (duplicated track for seamless loop). */ @keyframes adc-reimagine-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { } /* ---- Promo grid (article keyword) ---- */ .adc-promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; } /* ---- 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) ---- */ /* ---- Curation CTA ---- */ /* ---- Hero: Original & Exclusive Art (text left, image right) ---- */ @media (max-width: 860px) { } /* ---- Responsive ---- */ @media (max-width: 992px) { } @media (max-width: 768px) { } @media (max-width: 600px) { } @media (max-width: 480px) { } /* ---- Curators' Edit (#curators): one row on desktop ---- */ @media (max-width: 992px) { } @media (max-width: 768px) { } @media (max-width: 480px) { } /* ===================================================== ADC — Site-wide page content horizontal rhythm Match header utility bar / category nav / footer inset. ===================================================== */ main > .container, main > main > .container, main > .container-fluid { width: 100%; max-width: none; padding-left: var(--adc-pad); padding-right: var(--adc-pad); } .consultation_bottom { padding-left: var(--adc-pad); padding-right: var(--adc-pad); } /* Hero intro band — light copy on dark band (overrides legacy #4A4A4A text bucket) */ .consultation_bottom, .consultation_bottom .row, .consultation_bottom p, .consultation_bottom p.consultation_text { font-family: var(--adc-body, var(--font-body)); font-size: 16px; font-weight: 400; line-height: 25px; letter-spacing: normal; color: #E8E5DC; opacity: 1; } /* ===================================================== 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-V2.0.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. */ /* Full-width search — hairline rectangle, 2px radius (capped so it stays tidy) */ .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); } /* UI Kit Section 11: icons at 18×18 to match SVG viewBox */ #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 */ /* ---- Category nav row ---- */ /* max-width/margin removed: row padding is set by --adc-pad in the template */ /* .adc-mainnav__note removed — reassurance text lives in footer (.footbar__reassurance) */ /* Mobile menu toggle (hamburger) — quiet ink */ /* Desktop ≥992px: category nav; mobile ≤991px: hamburger drawer */ @media (min-width: 992px) { } @media (max-width: 991px) { /* Logo + search + icons stay on a single row (pill/links/selectors are hidden here, so there is room). Search wraps to its own line only on phones (≤768px). */ } /* ---- Footer ---- brand column + 4 link columns + footbar ---- */ /* layout: brand (wide) + footer link columns */ /* brand column */ /* link columns */ /* social icons — quiet, monochrome until hover */ /* Newsletter / art-suggestion popups — light cards on white, terracotta CTA */ /* ---- 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) { } @media (max-width: 700px) { } @media (max-width: 420px) { } /* ===================================================== */ /* MERGED FROM articles_style-V2.0.css */ /* ===================================================== */ a { color: inherit; } H1, H2, H3 { clear: both; font-size: 29px; text-align: left; line-height: 38px; margin-bottom: 32px; font-weight: 400; font-family: var(--font-title); margin-top: 55px; } H2:first-of-type { margin-top: 0; } .HTMLSectionBlock { float: right; max-width: 20vw; padding: 0 1vh 1vh 1vh; text-align: justify; clear: both; font-size: 14px; font-style: italic; font-weight: 400; color: #776E62; line-height: 21px; } .HTMLSectionBlock p { margin: 0; padding: 0; font-size: 14px; font-style: italic; font-weight: 400; color: #776E62; line-height: 21px; } .HTMLSectionBlock a { display: inline-block; color: #000000; text-align: justify; margin-bottom: 8px; } .HTMLSectionBlock img { display: block; margin: 0 auto 0.5em auto; /* Centers the image & adds space below */ max-width: 100%; max-height: 350px; margin-bottom: 8px; } /* ===================================================== */ /* MERGED FROM widget-artwork-labels.css */ /* ===================================================== */ /* * widget-artwork-labels.css — unified typography for artwork/category captions * in widgets. Loaded after site *-V2.0.css in base.html. * Typography only — does not override color, background, padding, or overlay layout. */ /* ===================================================== */ /* MERGED FROM userprofile-V2.0.css */ /* Re-themed to brand UI Kit (was WA palette): ADC — neutral gallery: white page, charcoal sidebar, terracotta accent */ /* ===================================================== */ /* Profile: sidebar shell only — do not use * reset (zeros .sidebar_profile_section / link padding) */ .header_box { background: #ffffff; padding: 15px 20px; box-shadow: 0px 0px 10px 0px rgb(22 22 22 / 10%); -webkit-box-shadow: 0px 0px 10px 0px rgb(22 22 22 / 10%); -moz-box-shadow: 0px 0px 10px 0px rgb(22 22 22 / 10%); margin-left: 320px; } h3.user_heading_text { color: var(--adc-ink, #161616); font-weight: 400; font-size: 20px; line-height: 30px; font-family: var(--font-title); margin-bottom: 0px; } p.user_title_text { color: var(--adc-ink, #161616); font-size: 14px; font-weight: 400; opacity: 0.6; line-height: 22px; margin-bottom: 0px; } aside > .sidebar_box { background: #2A2A2A; margin-bottom:0 !important; border:0 !important; height:100%; } aside::-webkit-scrollbar { width: 8px; } aside::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } aside::-webkit-scrollbar-thumb { background: #6e6c68; border-radius: 10px; } aside::-webkit-scrollbar-thumb:hover { background: #4a4a4a; } aside { scrollbar-width: thin; scrollbar-color: var(--adc-line-2, #d6d6d6) #2A2A2A; } .profile_name { color: #E8E8E8; font-weight: 500; font-size: 18px; line-height: 26px; } /* .sidebar_menu_link li.active a svg { color: #ffffff !important; } */ /* .sidebar_menu_link li:hover a svg, */ .favorite_img_card { border-right: 1px solid var(--adc-line-2, #d6d6d6); border-bottom: 1px solid var(--adc-line-2, #d6d6d6); padding: 42px 33px; width: 20%; } .fav_img { max-width: 250px; height: 233px; margin: auto; } .fav_img img{ width: 100%; height: 100%; object-fit: contain; } .fav-artist h2 { font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 20px; text-transform: uppercase; color: var(--adc-accent, #b3402a); } .fav-artist h2 a{ color: var(--adc-accent, #b3402a); } .favCard_body { margin-top: 30px; max-width: 250px; margin: auto; margin-top: 30px; } .fav-title { font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 20px; color: var(--adc-ink, #161616); margin: 6px 0px 11px; min-height: 38px; } .fav-title a{ color: var(--adc-ink, #161616); } .button-dash { width: 100%; border: 1px solid var(--site-btn, #6B6B6B); border-radius: 0; padding: 11px 15px; color: var(--site-btn, #6B6B6B); font-size: 14px; font-weight: 500; text-transform: uppercase; background: transparent; } .favorite_img_section { display: flex; flex-wrap: wrap; } .favorite_img_section:nth-child(-n+5) { border-top: 1px solid var(--adc-line-2, #d6d6d6); } .main_gap { padding: 16px; } .top_order_section { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; } .order_count { color: var(--adc-ink, #161616); font-size: 14px; font-weight: 400; opacity: 0.8; } .purchase_top { display: flex; align-items: center; justify-content: space-between; padding: 11px 18px 12px 18px; border-bottom: 1px solid var(--adc-line-2, #d6d6d6); } .date_amount h6 { color: var(--adc-ink, #161616); font-size: 14px; opacity: 0.6; font-weight: 400; text-transform: uppercase; margin-bottom: 0px; } .date_amount p { color: var(--adc-ink, #161616); font-weight: 500; font-size: 15px; margin-bottom: 0px; } .pur_top_box { display: flex; gap: 17px; } .purchase_section { margin-top: 11px; box-shadow: 0px 0px 10px 0px rgb(22 22 22 / 10%); -webkit-box-shadow: 0px 0px 10px 0px rgb(22 22 22 / 10%); -moz-box-shadow: 0px 0px 10px 0px rgb(22 22 22 / 10%); background: #ffffff; } .purchase-bottom { padding: 15px 18px 15px 18px; } .purchase-bottom ul { display: flex; gap: 15px; } .purchase-bottom ul li { width: 90px; height: 90px; } .purchase-bottom ul li img{ width: 100%; height: 100%; } table { border-color: var(--adc-line-2, #d6d6d6) !important; } table thead th { background: var(--adc-band, #f5f5f5) !important; color: var(--adc-ink, #161616) !important; opacity: 0.6; font-weight: 400; text-transform: uppercase; font-size: 14px; padding: 9px 12px !important; } /* Cart table keeps the global rhythm: the generic table theme below carries !important (needed against Bootstrap elsewhere), so the cart scope must re-assert the global-custom cart paddings that used to win via !important. */ .cart_table_box .table > :not(caption) > * > * { padding: 20px 0 !important; } table tbody td { background: #ffffff !important; color: var(--adc-ink, #161616) !important; padding: 12px 14px !important; font-family: var(--font-body); font-weight: 400; font-style: Regular; font-size: 16px; leading-trim: NONE; line-height: 24px; letter-spacing: 0%; } .red_box { color: #B0312E; display: inline; font-weight: 500; background: #F0DFCF; padding: 4px 10px; border-radius: 4px; } .green_box { color: #389544; display: inline; font-weight: 500; background: #E4E9D1; padding: 4px 10px; border-radius: 4px; } .yellow_box { color: #D08608; display: inline; font-weight: 500; background: #F3E7CB; padding: 4px 10px; border-radius: 4px; } .table_type_datail { display: flex; align-items: center; gap: 9px; } .table_img { width: 18px; height: 18px; position: relative; top: -3px; } .table_img img { width: 100%; height: 100%; } .img_date_box { position: relative; top: -2px; left: -3px; } /*message_us form css*/ textarea.form-control:focus { background-color:#ffffff; } /* When textarea is focused, change button color */ /*succesfull msg */ .text-center.suceesfulmsg_textt{ padding-top: 230px; } .text-center.suceesfulmsg_textt img { padding-bottom: 30px; } .text-center.suceesfulmsg_textt h1 { font-size: 45px; font-weight: 400; font-family: var(--font-title); line-height: 66px; color: var(--adc-ink, #161616); } .text-center.suceesfulmsg_textt p { font-size: 16px; line-height: 24px; font-weight: 400; font-family: var(--font-body); color: var(--adc-ink, #161616); } .suceesfulmsg_textt button { padding: 10px 120px; border: none; background: var(--site-btn, #6B6B6B); font-size: 16px; line-height: 24px; font-family: var(--font-body); font-weight: 500; color: #E8E8E8; text-transform: uppercase; } /* Sidebar Default */ aside { width: 100%; background: var(--adc-band, #f5f5f5); height: 100%; overflow-y: auto; overflow-x: hidden; transition: transform 0.3s ease-in-out; z-index: 999; } /* Toggle Button */ .sidebar-toggle { background: var(--site-btn, #6B6B6B); color: white; border: none; padding: 8px 12px; font-size: 18px; cursor: pointer; z-index: 1000; } @media (min-width: 768px) { .profile_picture_top_header_initiales { font-size: 15.43px; } .upload_img_form { display: flex; flex-direction: row-reverse; text-align: left; gap: 12px; } /* .main-grid-row { display: flex; } */ /* .sidebar-col { flex-basis: 25%; max-width: 25%; } .main-content-col { flex-basis: 75%; max-width: 75%; padding-left: 2rem; } */ /* .logout_section { position: absolute; bottom: 0; } */ .sidebar_box { position: relative; } } /* Responsive */ @media (max-width: 768px) { .form-container input { font-size: 14px; width: 100%; padding: 9px; margin-bottom: 8px; } .puchase-card-content { padding: 14px; gap: 14px; } .profile_name{ font-size: 15px;} .text-center.suceesfulmsg_textt h1 { font-size: 30px;line-height: 38px;} .text-center.suceesfulmsg_textt p {font-size: 13px;line-height: 20px;} .suceesfulmsg_textt button {padding: 10px 80px;font-size: 14px;} aside { height: 100%; } .sidebar_box .text-center.mb-20 img{ } .sidebar_box { width:auto !important; } aside {transform: translateX(0%);}aside.active { transform: translateX(0); }.sidebar-toggle {display: block;}#sidebar { display: block; } .sidebar-toggle { display: block;}.header_box {margin-left:0px;padding: 10px 20px;position: fixed; top: 0; left: 0;width: 100%;z-index: 999;} .date_amount h6 {font-size: 12px;}p.user_title_text {font-size: 12px;}.date_amount p {font-size: 12px;}.button-dash {padding: 5px 8px; font-size: 12px;}.purchase-bottom ul li img { object-fit: cover;} .fav_img {height: auto;}.favorite_img_card {padding: 40px 0px; width: 100%;}table thead th {font-size: 12px; white-space: nowrap;} table tbody td { font-size: 12px;white-space: nowrap;}.table_img img {width: 80%; height: 80%;object-fit: contain;}.img_date_box {position: relative;top: 0px;left: 0px;} .text-center.suceesfulmsg_textt {padding-top: 50px; padding-bottom: 50px;} } /* Tablet Portrait to Tablet Landscape */ @media (min-width: 768px) and (max-width: 1023px) { /* Tablet styles */ } /* Small Desktop / Laptop */ @media (min-width: 1024px) and (max-width: 1199px) { } /* Large Desktop */ @media (min-width: 1200px) and (max-width: 1365px) { } /* Extra Large Desktop */ @media (min-width: 1366px) and (max-width: 1919px) { } /* Full HD (1920px) to Ultra-wide */ @media (min-width: 1920px) and (max-width: 2499px) { } /* Ultra-wide 2K/4K */ @media (min-width: 2500px) { } /* Profile Photo Edit Section */ /* user interaction-card */ .puchase-card-content { padding:20px; flex-wrap: wrap; gap:20px; } .puchase-card-content img { height:120px; width:120px; } /* Form-floating: always use "focused" style (label above, reduced padding) on account forms */ /* ===================================================== ADC — Artwork buy / reproduction page (gallery-minimal) Overrides legacy gray/WA tokens on PDP + academic block. Scoped to .reproduction_main_page only. ===================================================== */ /* Academic block — same horizontal width as reproduction_section (no nested container gutters) */ /* ADC — custom width/height fields: neutral gray (WA uses beige in site-wahooart) */ /* ---- Action bar + cross-channel links (Buy print, Share, Favorites, …) ---- */ /* Monochrome icons — neutral ink (SVG assets still carry legacy WA #875D2A) */ /* ---- Metadata chips (medium, movement, year, …) ---- */ /* ---- PDP titles ---- */ /* ---- Accordions (description, size, summary, …) — band on full panel ---- */ /* Gap between description/bio block and following collapse (e.g. digital images) */ /* Configurator tabs + radios */ /* CTA buttons */ /* ---- Academic / story block ---- */ /* Unified section headings (Quick Facts, Quiz, story, sidebars, sliders) */ /* Beat global-custom .art_header h4 (24px / cream) on quiz titles */ /* Related slider — contained width, no legacy full-bleed padding */ /* Quick Facts cards */ /* Art Quiz — ADC card (reproduction academic block + digital image sidebar) */ /* List of Artworks — white band (ADC; overrides global beige #E8E2CD) */ /* View more — same secondary action as catalog group-by "See All" */ /* Table of Contents — same card surface as Art Quiz (white bg) */ /* Article sidebar — TOC flat like Browse; Quick Facts card matches reproduction #facts */ /* Collections band at bottom of buy page */ /* Optional extras (checkbox row) — Read more on its own line after label/description */ /* Read more / Read More — ADC text CTA (accordions, tabs, options) */ /* Read more placed after .accordion-body (legacy markup) — align with body inset */ /* Related articles — « Explore Article » CTA (sidebar + story) */ /* Academic block — Related Artworks inside reproduction_main_page */ /* Related artworks slider — swiper prev/next (ADC asset: round band + arrow in SVG) */ /* Below-fold sections — same horizontal inset as header/footer */ /* artworksimilarslider — artist name kicker hover */ /* artworksimilarslider — artwork title link hover color */ /* Below-fold blocks (Related Artworks, Artist Biography, …) */ main > hr { margin: 0 var(--adc-pad, 44px); padding: 0; height: 0; border: none; border-top: 1px solid var(--adc-line, #e6e6e6); opacity: 1; } /* Digital Image — « Included in Every Digital Image Order » benefits band */ /* ADC buy academic — override global-custom cream band (#E8E2CD) and WA quiz panel (#3E342A) */ /* ═══════════════════════════════════════════════════════════════════ ADC — Artist / article detail (.article_main_page) Sidebar sections, related articles, artwork sliders ═══════════════════════════════════════════════════════════════════ */ /* Sidebar — vertical rhythm between grouped sections (Browse / TOC / Quick Facts) */ /* Related artworks — left sidebar (below TOC); card + list artwork typography */ /* Headings inside card panels (title + body share one wrapper) */ /* Buy page story row — Quick Facts + Artwork Description share one heading box (beats global .art_heading) */ /* ===================================================== ADC — Custom reproduction / photo-to-painting order (/orders/custom-reproduction/ and persona URLs) Scoped to .production_form + .summery_checkout (no .reproduction_main_page wrapper). ===================================================== */ /* Read more CTAs — terracotta text + icon (beats WA brown inline/global rules) */ /* Validation / notice icons — terracotta (not WA brown PNG) */ /* Step 01 upload zone — centered (profile-page rule uses row-reverse) */ /* Browse + Table of Contents — flat vertical nav (UI Kit .acct-nav pattern) */ /* Related articles — card copy + « Explore Article » CTA */ /* Artwork sliders below biography */ /* Track height — was 450px inline; −20% for denser corpus/popular carousels */ /* ═══════════════════════════════════════════════════════════════════ ADC — Catalog list pages (/art/list, /artists/list, /museums/list, /articles/list) Scoped to .catalog-list-page (+ legacy hooks) — gallery-minimal tokens ═══════════════════════════════════════════════════════════════════ */ /* Filter sidebar — gallery-minimal tokens (match categories / similar lists) */ /* Filter panel header — align title, icon, and “Clear all” on one row */ /* Category value links (filter sidebar) — chip styling consistent with group-by Sidebar_tags + list_category. */ /* ===== catalog left sidebars (filter / categories / group-by) — UI Kit alignment ===== ADC active identity = accent text on slot tint (NOT inverted dark fill). UI Kit #catalog-sidebars: --SB-active-fill:var(--slot); --SB-active-text:var(--accent); border:var(--accent). */ /* ═══════════════════════════════════════════════════════════════════ ADC — Similar artworks browse (/art/similar//) Scoped to .artwork-similar-page — gallery-minimal tokens ═══════════════════════════════════════════════════════════════════ */ /* Page chrome — title row, sort */ /* Criteria sidebar */ /* Grid — catalog cards (list / categories / similar) */ /* Wrapper is a transparent flex passthrough — the toggle link below is the actual interactive target. No border/bg/padding on the wrapper. */ /* ═══════════════════════════════════════════════════════════════════ ADC — Catalog categories browse (list_category on all apps) Scoped to .catalog-categories-page (+ legacy hooks) — gallery-minimal tokens ═══════════════════════════════════════════════════════════════════ */ /* catalog left sidebars — UI Kit alignment: active chip = accent text on slot tint */ /* ── Pagination — SITE-WIDE, overrides global brown #875D2A (every paginated template: list, categories, search, color search). Gallery-minimal: white cell, hairline, ink text; active = inverted ink pill. ── */ /* ═══════════════════════════════════════════════════════════════════ ADC — Group-by browse (artworks, artists, museums, articles) Scoped to .catalog-groupby-page (+ legacy page hooks) — gallery-minimal tokens ═══════════════════════════════════════════════════════════════════ */ /* catalog left sidebars — UI Kit alignment: active group box = slot tint + accent border + accent left rail */ /* Group heading — match sidebar_box_title */ /* See All — secondary action */ /* ===================================================== ADC — Subject Atlas: neutral gray backgrounds Same relative luminance as museum sand / warm ADC bands. ===================================================== */ /* ===================================================== ADC — Artist Atlas / Chronicle hero (.artist-hero) Overrides global museum tokens (sand/gold/Cormorant) on Subject Atlas + Chronicle pages. ===================================================== */ /* Atlas hero band: neutral grays (L matched to warm ADC tokens above) */ /* Period under portrait duplicates .artist-kicker — keep only the kicker line */ @media (max-width: 760px) { } /* ===================================================== ADC — Atlas section typography only (.atlas-section) Fonts / weights / sizes / letter-spacing — colors unchanged. ===================================================== */ /* SVG labels (fill colours unchanged — global rules keep museum gold/ivory) */ /* ===================================================== ADC — Chronicle section typography only (.chronicle-section) Fonts / weights / sizes / letter-spacing — colors unchanged. ===================================================== */ /* ADC — Chronicle section: light gray band + ink text (header + guide cards) */ /* ===================================================== ADC — Chronicle lifeline ribbon (JS + CSS timeline colours) Chapter fills (--chr-ch-fill-*) consumed by inline JS; caption colours via .ch-label / .ch-context in .chronicle-section (tokens). --gold* remapped for axis, pins, connectors, movement bar accents. ===================================================== */ /* ===================================================== ADC — Artist timeline page (.tl-page) colour tokens ===================================================== */ /* Plate ref (NO. 01) — UI Kit mono label */ /* Year chip on artwork frame — UI Kit .adc-badge */ /* Card copy — aligned with .adc-artcard meta (UI Kit #16) */ /* ===================================================== ADC — Palette Genome header (.genome-wrap .gn-artist-head) ===================================================== */ /* ── Wheel preview, facts & gallery (UI Kit / .adc-artcard meta) ── */ /* ===================================================== ADC — Mood Room (.moom-room) typography only Archivo + UI Kit scale; dark-room palette unchanged. ===================================================== */ /* ── Gallery cards (plate, body, tags, placement) ── */ /* ── Mood dock (label + mood pills) ── */ @media (max-width: 760px) { } @media (max-width: 480px) { } /* ===================================================== ADC — Artists alphabet bar (group_by_alphabet / ofletter) ===================================================== */ /* Token root for this section — ensures var(--adc-*) resolves whether or not a parent (.adc-v2 / .search_sec.*) is present. */ /* View more — same secondary action as catalog group-by "See All" */ /* --- Profile card (artist thumbnail + name + years) --- Scoped under .art_info_section so it never bleeds into the user sidebar (.profile_name) or start_by_letter.html. Tokens: --adc-ink, --adc-ink-2, --adc-accent, --adc-line, --adc-soft, --adc-body (all defined above in this file). */ /* Circle image — keep the global 60 px size; add ADC border */ /* Artist name link — ADC ink, weighted like .artistcard .n in UI Kit */ /* Birth–death years — muted, like .artistcard .k in UI Kit */ /* ===================================================== ADC — Under the Light (.utl-reading) Remap global museum/conservator tokens → ArtsDot UI Kit. ===================================================== */ /* Breadcrumb */ /* Hero head */ /* Canvas stage */ /* Reading panel */ /* Gauges */ /* Support / medium */ /* Optical profile verdict */ @keyframes utl-flash-adc { 0% { background: rgb(179 64 42 / 12%); } 100% { background: var(--adc-band, #f5f5f5); } } @media (max-width: 1100px) { } /* ═══════════════════════════════════════════════════════════════════ ADC — Infinite Scroll (/art/infinite_scroll/) Scoped to this page via .ais-hero-banner (ADC tokens only) ═══════════════════════════════════════════════════════════════════ */ body:has(.ais-hero-banner) { --adc-carbon: #111110; --adc-accent: #b3402a; --adc-accent-dark: #93311f; --adc-matte: #f5f5f5; --adc-section: #f8f8f8; --adc-white: #ffffff; --adc-border: #e5e5e5; --adc-structural: #eeeeee; --adc-divider: #dddddd; --adc-card-border: #e0e0e0; --adc-text-2: #555555; --adc-text-3: #666666; --adc-label: #777777; --adc-muted: #888888; --adc-serif: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --adc-sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --adc-radius: 2px; --ais-max-w: 1380px; --ais-gutter: clamp(20px, 4vw, 64px); background: var(--adc-matte); color: var(--adc-carbon); font-family: var(--adc-sans); -webkit-font-smoothing: antialiased; min-height: 100vh; } body:has(.ais-hero-banner) .rake { position: fixed; inset: -20vh -30vw; z-index: 3; pointer-events: none; background: linear-gradient( 105deg, transparent 38%, rgb(255 255 255 / 45%) 48%, rgb(179 64 42 / 6%) 52%, transparent 64% ); mix-blend-mode: soft-light; transform: translateX(calc((var(--rake, .2) - .5) * 60vw)); transition: transform .4s ease-out; opacity: .75; } body:has(.ais-hero-banner) .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 1001; pointer-events: none; background: linear-gradient(90deg, var(--adc-accent-dark), var(--adc-accent)); box-shadow: 0 0 8px -1px rgb(179 64 42 / 45%); transition: width .12s linear; } body:has(.ais-hero-banner) .reveal-up { opacity: 0; transform: translateY(24px); animation: adc-ais-reveal-up .9s cubic-bezier(.16, 1, .3, 1) forwards; } @keyframes adc-ais-reveal-up { to { opacity: 1; transform: none; } } body:has(.ais-hero-banner) .feed-head { position: relative; } body:has(.ais-hero-banner) .feed-head::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--adc-accent); animation: adc-ais-draw-line 1.1s 1s cubic-bezier(.16, 1, .3, 1) forwards; } @keyframes adc-ais-draw-line { to { width: 64px; } } body:has(.ais-hero-banner) .ais-intro { background: var(--adc-white); border-bottom: 1px solid var(--adc-border); } /* ===== article_list.html — article list cards (article-list-card) ===== */ /* Scoped to .article-list-page; styling hooks are the long .article-list-* classes. Selectors chain page + grid + long class to match/exceed the global-style deep selectors (e.g. .custom_search .search_card .art-title a = 0,3,1, and .search_sec.catalog-list-page .custom_search .search_card .art-artist h2 a ~ 0,5,2). All values use the existing ADC tokens (--adc-ink/-2/-3, --adc-line/-2, --adc-band, --adc-accent, --adc-display, --adc-body, --adc-radius). */ /* Grid wrapper — layout comes from the Bootstrap .row>col-* in the markup (same as the sibling artwork/museum/artist catalog lists), which already handles the responsive column count (4/3/2/1). Do NOT set display:grid: the grid's direct child is the .row wrapper, so a grid container squeezes every card into one track. Only set the row's vertical gutter. */ /* Card shell */ /* Media + image hover zoom */ /* Body */ /* Meta — category eyebrow (uppercase accent) + year span */ /* Title link — brand title font/color + hover accent */ /* Hover-reveal panel — excerpt typography */ /* Footer + actions */ /* Read button — ADC primary (pill, ink fill) — mirrors .adc-btn */ body:has(.ais-hero-banner) .ais-intro-inner { max-width: var(--ais-max-w); margin: 0 auto; padding: 36px var(--ais-gutter) 32px; text-align: center; } body:has(.ais-hero-banner) .ais-intro-title { font-family: var(--adc-serif); font-size: clamp(22px, 2.4vw, 34px); font-weight: 700; color: var(--adc-carbon); margin-bottom: 14px; letter-spacing: -0.02em; } body:has(.ais-hero-banner) .ais-intro-desc { font-family: var(--adc-sans); font-size: clamp(15px, 1.4vw, 18px); font-weight: 400; font-style: italic; line-height: 1.75; color: var(--adc-text-3); max-width: 760px; margin: 0 auto; } body:has(.ais-hero-banner) .stage { position: relative; z-index: 2; max-width: var(--ais-max-w); margin: 0 auto; padding: 24px var(--ais-gutter) 120px; display: grid; grid-template-columns: 1fr; gap: 56px; transition: grid-template-columns .65s cubic-bezier(.45, .05, .2, 1); } body:has(.ais-hero-banner) .stage.pinned { grid-template-columns: 0.92fr 1.08fr; } body:has(.ais-hero-banner) .pinned-col { display: none; position: sticky; top: 80px; align-self: start; height: fit-content; } body:has(.ais-hero-banner) .stage.pinned .pinned-col { display: block; animation: adc-ais-pin-in .8s cubic-bezier(.16, 1, .3, 1) both; } @keyframes adc-ais-pin-in { from { opacity: 0; transform: translateY(34px) scale(.94); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } } body:has(.ais-hero-banner) .plate.grand .frame img { animation: adc-ais-breathe 14s ease-in-out infinite alternate; } @keyframes adc-ais-breathe { from { transform: scale(1); } to { transform: scale(1.035); } } body:has(.ais-hero-banner) .plate { background: var(--adc-white); border: 1px solid var(--adc-card-border); border-radius: var(--adc-radius); position: relative; overflow: hidden; } body:has(.ais-hero-banner) .plate.grand { box-shadow: 0 30px 60px -20px rgb(17 17 16 / 12%); } body:has(.ais-hero-banner) .plate .top { display: flex; align-items: flex-start; } body:has(.ais-hero-banner) .plate .mat { padding: 22px; position: relative; flex: 0 0 auto; width: 46%; max-width: 340px; } body:has(.ais-hero-banner) .plate .frame { position: relative; background: var(--adc-structural); outline: 1px solid var(--adc-divider); outline-offset: -1px; overflow: hidden; width: 100%; } body:has(.ais-hero-banner) .plate .frame img { display: block; width: 100%; height: auto; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1), opacity .9s ease, filter .9s ease; opacity: 0; filter: blur(10px); } body:has(.ais-hero-banner) .plate .frame img.loaded { opacity: 1; filter: blur(0); } body:has(.ais-hero-banner) .plate-no { position: absolute; top: 14px; left: 14px; z-index: 3; background: var(--adc-carbon); color: var(--adc-white); font-family: var(--adc-sans); font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 5px 9px; border-radius: var(--adc-radius); } body:has(.ais-hero-banner) .plate .caption { flex: 1 1 auto; min-width: 0; padding: 26px 26px 22px 8px; display: flex; flex-direction: column; justify-content: center; } body:has(.ais-hero-banner) .plate .caption .artist { font-family: var(--adc-sans); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--adc-carbon); margin-bottom: 8px; } body:has(.ais-hero-banner) .plate .caption .title { font-family: var(--adc-serif); font-style: italic; font-size: 26px; line-height: 1.2; color: var(--adc-text-2); } body:has(.ais-hero-banner) .plate .caption .facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--adc-divider); } body:has(.ais-hero-banner) .fact { display: inline-block; padding: 8px 13px; background: var(--adc-section); border: 1px solid var(--adc-border); border-radius: var(--adc-radius); font-family: var(--adc-sans); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--adc-text-2); opacity: 0; transform: translateY(8px) scale(.96); animation: adc-ais-fact-in .5s cubic-bezier(.16, 1, .3, 1) forwards; } @keyframes adc-ais-fact-in { to { opacity: 1; transform: none; } } body:has(.ais-hero-banner) a.fact { text-decoration: none; color: var(--adc-text-2); cursor: pointer; transition: border-color .3s ease, color .3s ease, background .3s ease, transform .3s ease; } body:has(.ais-hero-banner) a.fact:hover { border-color: var(--adc-accent); color: var(--adc-carbon); background: var(--adc-white); transform: translateY(-1px); } body:has(.ais-hero-banner) .plate .mat a.frame { display: block; cursor: pointer; } body:has(.ais-hero-banner) .plate .below { padding: 0 26px 26px; border-top: 1px solid var(--adc-divider); margin-top: 0; } body:has(.ais-hero-banner) .plate .below .desc { font-family: var(--adc-sans); font-size: 17px; font-weight: 400; line-height: 1.7; color: var(--adc-text-3); padding-top: 20px; } body:has(.ais-hero-banner) .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; } body:has(.ais-hero-banner) .fav-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--adc-sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--adc-text-2); background: var(--adc-white); border: 1px solid var(--adc-border); border-radius: var(--adc-radius); padding: 11px 18px; cursor: pointer; transition: transform .3s ease, border-color .3s ease, color .3s ease, background .3s ease, box-shadow .3s ease; } body:has(.ais-hero-banner) .fav-btn .heart { position: relative; width: 14px; height: 14px; display: inline-block; } body:has(.ais-hero-banner) .fav-btn .heart svg { width: 14px; height: 14px; display: block; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); } body:has(.ais-hero-banner) .fav-btn .heart svg path { fill: none; stroke: var(--adc-text-2); stroke-width: 1.4; transition: fill .35s ease, stroke .35s ease; } /* ===== search_by_color ===== */ @media (max-width: 768px) { } body:has(.ais-hero-banner) .fav-btn:hover { border-color: var(--adc-accent); color: var(--adc-carbon); transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgb(17 17 16 / 18%); } body:has(.ais-hero-banner) .fav-btn:hover .heart svg path { stroke: var(--adc-accent); } body:has(.ais-hero-banner) .fav-btn.saved { background: var(--adc-accent); border-color: var(--adc-accent); color: var(--adc-white); } body:has(.ais-hero-banner) .fav-btn.saved .heart svg path { fill: var(--adc-white); stroke: var(--adc-white); } body:has(.ais-hero-banner) .fav-btn.saved .heart svg { animation: adc-ais-heart-pop .45s cubic-bezier(.34, 1.56, .64, 1); } @keyframes adc-ais-heart-pop { 0% { transform: scale(.6); } 55% { transform: scale(1.35); } 100% { transform: scale(1); } } body:has(.ais-hero-banner) .buy-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--adc-sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; border-radius: var(--adc-radius); padding: 11px 18px; cursor: pointer; border: 1px solid var(--adc-carbon); text-decoration: none; transition: transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease; } body:has(.ais-hero-banner) .buy-btn .arrow { display: inline-block; transition: transform .35s cubic-bezier(.2, .8, .2, 1); } body:has(.ais-hero-banner) .buy-btn:hover .arrow { transform: translateX(3px); } body:has(.ais-hero-banner) .buy-btn.print { background: var(--adc-white); color: var(--adc-text-2); border-color: var(--adc-border); } body:has(.ais-hero-banner) .buy-btn.print:hover { border-color: var(--adc-accent); color: var(--adc-carbon); transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgb(17 17 16 / 18%); } body:has(.ais-hero-banner) .buy-btn.painting { background: var(--adc-accent); color: var(--adc-white); border-color: var(--adc-accent); } body:has(.ais-hero-banner) .buy-btn.painting:hover { background: var(--adc-accent-dark); border-color: var(--adc-accent-dark); transform: translateY(-1px); box-shadow: 0 10px 26px -10px rgb(179 64 42 / 45%); } body:has(.ais-hero-banner) .feed-col { min-width: 0; } body:has(.ais-hero-banner) .feed-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--adc-border); } body:has(.ais-hero-banner) .feed-head .label { font-family: var(--adc-sans); font-size: 10px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--adc-accent); } body:has(.ais-hero-banner) .work-col { display: flex; } body:has(.ais-hero-banner) .work { position: relative; display: flex; align-items: stretch; width: 100%; height: 100%; background: var(--adc-white); border: 1px solid var(--adc-card-border); border-radius: var(--adc-radius); cursor: pointer; overflow: hidden; box-shadow: 0 2px 10px -6px rgb(17 17 16 / 8%); will-change: opacity, transform; opacity: 0; transform: translateY(40px) scale(.82); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease; } body:has(.ais-hero-banner) .work.in-view { opacity: 1; transform: translateY(0) scale(1); } body:has(.ais-hero-banner) .work:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 14px 36px -16px rgb(17 17 16 / 14%); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .9s ease; } body:has(.ais-hero-banner) .work.clicked { transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease, opacity .22s ease; transform: scale(1.05) translateY(-4px); box-shadow: 0 30px 70px -18px rgb(17 17 16 / 22%); z-index: 5; } body:has(.ais-hero-banner) .work.clicked .frame img { transform: scale(1.06); } body:has(.ais-hero-banner) .work.clicked .frame::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(120deg, transparent 30%, rgb(179 64 42 / 35%) 50%, transparent 70%); background-size: 280% 100%; animation: adc-ais-shine .55s ease-out forwards; } @keyframes adc-ais-shine { from { background-position: 140% 0; } to { background-position: -140% 0; } } body:has(.ais-hero-banner) .work .badge { position: absolute; top: 10px; left: 10px; z-index: 3; background: var(--adc-white); border: 1px solid var(--adc-border); font-family: var(--adc-sans); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--adc-accent); padding: 3px 7px; border-radius: var(--adc-radius); opacity: 0; transform: translateY(-4px); transition: opacity .45s ease, transform .45s ease; } body:has(.ais-hero-banner) .work:hover .badge { opacity: 1; transform: none; } body:has(.ais-hero-banner) .work .mat { padding: 14px; position: relative; flex: 0 0 auto; width: 40%; max-width: 170px; display: flex; align-items: center; } body:has(.ais-hero-banner) .work .frame { position: relative; background: var(--adc-structural); outline: 1px solid var(--adc-divider); outline-offset: -1px; overflow: hidden; width: 100%; transition: transform .35s cubic-bezier(.2, .8, .2, 1); transform-style: preserve-3d; } body:has(.ais-hero-banner) .work .frame img { display: block; width: 100%; height: auto; transition: transform 1.3s cubic-bezier(.2, .8, .2, 1), filter .6s ease, opacity .9s ease; opacity: 0; filter: blur(8px); } body:has(.ais-hero-banner) .work .frame img.loaded { opacity: 1; filter: blur(0); } body:has(.ais-hero-banner) .work:hover .frame img { transform: scale(1.04); } body:has(.ais-hero-banner) .work .frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 120%, rgb(179 64 42 / 8%), transparent 60%); opacity: 0; transition: opacity .6s ease; } body:has(.ais-hero-banner) .work:hover .frame::after { opacity: 1; } body:has(.ais-hero-banner) .work .body { flex: 1 1 auto; min-width: 0; padding: 16px 18px 16px 6px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--adc-divider); } body:has(.ais-hero-banner) .work .body .artist { font-family: var(--adc-sans); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--adc-carbon); margin-bottom: 6px; } body:has(.ais-hero-banner) .work .body .title { font-family: var(--adc-serif); font-style: italic; font-size: 17px; line-height: 1.25; color: var(--adc-text-2); } body:has(.ais-hero-banner) .work .body .meta { font-family: var(--adc-sans); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--adc-muted); margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--adc-divider); } body:has(.ais-hero-banner) .sentinel { width: 100%; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } body:has(.ais-hero-banner) .feed.swapping { animation: adc-ais-feed-out .35s ease forwards; } @keyframes adc-ais-feed-out { to { opacity: 0; transform: translateY(10px); } } body:has(.ais-hero-banner) .feed.swap-in { animation: adc-ais-feed-in .5s cubic-bezier(.2, .8, .2, 1); } @keyframes adc-ais-feed-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (min-width: 992px) { body:has(.ais-hero-banner) .stage.pinned .feed > .work-col { flex: 0 0 50%; max-width: 50%; } } @media (max-width: 1100px) { body:has(.ais-hero-banner) .stage.pinned { grid-template-columns: 1fr; } body:has(.ais-hero-banner) .pinned-col { position: relative; top: 0; } } @media (max-width: 991px) { body:has(.ais-hero-banner) .stage.pinned .feed > .work-col { flex: 0 0 100%; max-width: 100%; } } @media (max-width: 640px) { body:has(.ais-hero-banner) .work { flex-direction: column; } body:has(.ais-hero-banner) .work .mat { width: 100%; max-width: none; } body:has(.ais-hero-banner) .work .body { border-left: none; border-top: 1px solid var(--adc-divider); padding: 16px 18px; } body:has(.ais-hero-banner) .plate .top { flex-direction: column; } body:has(.ais-hero-banner) .plate .mat { width: 100%; max-width: none; } body:has(.ais-hero-banner) .plate .caption { padding: 0 26px 22px; } } /* ===== artwork_info.html — ADC (neutral/terracotta) ===== */ .artinfo_top h4 { color: var(--adc-ink, #111110); } .art_info_details { background: var(--adc-bg, #ffffff); border: 1px solid var(--adc-line, #e6e6e6); box-shadow: none; } .art_info_inner { background: var(--adc-band, #f5f5f5); } .art_info_inner h4 { color: var(--adc-accent, #b3402a); text-transform: none; } .art_info_inner p { color: var(--adc-ink-2, #6e6c68); text-align: justify; } .artwork-info-meta-link { color: var(--adc-ink-2, #6e6c68); } .artwork-info-meta-link:hover { color: var(--adc-accent, #b3402a); } /* =================================================================== Ecard (artworks/artwork_ecard.html) — ADC ArtsDot Gallery-minimal: white surfaces, hairline rules, Archivo, terracotta accent. Scoped under .ecard-page so it never touches profile/prefs. =================================================================== */ /* ===================================================== PrintReproduction & DigitalImage buy pages — article (historicle_box) typography Structure lives in global-custom-V2.1.css; brand ink/links here. ===================================================== */ /* ============================================================ Article detail page — ArtsDot: body typography ink tokens. The sidebar/TOC/related blocks are styled above; this closes the last gap where the article body text fell back to the hardcoded beige (#3E342A) in global-custom. Scoped under .article_main_page (excludes the reproduction buy page). ============================================================ */ /* ===== END Article detail page body typography — ArtsDot ===== */ /* ===== TOP 100 PAGES (artists / artworks / museums / articles) ===== */ /* ArtsDot gallery-minimal identity: white canvas, Archivo grotesque, neutral hairlines, sharp 2px corners, ink-on-white with a sparing rust accent. Tokens consumed by the structural base in global-custom are set here from the ADC palette; component overrides below refine each group to the UI Kit. This file loads AFTER global-custom so these rules win. */ /* ---- 1. Brand tokens for the three component roots ---- */ .top100-artist-grid, .top100-artwork-list { --top100-card-bg: var(--adc-band, #f5f5f5); --top100-card-border: var(--adc-line, #e6e6e6); --top100-card-radius: 2px; --top100-ink: var(--adc-ink, #111110); --top100-muted: var(--adc-ink-2, #6e6c68); --top100-accent: var(--adc-accent, #b3402a); /* giant ghost rank number — faint warm-neutral, art provides colour */ --top100-rank-color: var(--adc-slot, #eeeeee); } /* ---- 2A. Artists portrait grid ---- */ .top100-artist-card { background: var(--adc-bg, #ffffff); border: 1px solid var(--adc-line, #e6e6e6); border-radius: 2px; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .top100-artist-card:hover { border-color: var(--adc-line-2, #d6d6d6); box-shadow: 0 6px 24px rgba(17, 17, 16, 0.07); transform: translateY(-2px); } .top100-artist-card__photo { border: 1px solid var(--adc-line, #e6e6e6); } .top100-artist-card__name { font-family: var(--adc-display, var(--font-title)); font-weight: 600; letter-spacing: -0.01em; } .top100-artist-card__name a { color: var(--adc-ink, #111110); transition: color 0.15s ease; } .top100-artist-card:hover .top100-artist-card__name a { color: var(--adc-accent, #b3402a); } .top100-artist-card__desc { font-family: var(--adc-body, var(--font-body)); font-size: 13.5px; line-height: 1.55; color: var(--adc-ink-2, #6e6c68); } /* ---- 2B. Artworks zigzag gallery ---- */ .top100-artwork-card__rank { font-family: var(--adc-display, var(--font-title)); font-weight: 600; letter-spacing: -0.02em; color: var(--adc-slot, #eeeeee); } .top100-artwork-card__inner { border-radius: 2px; } .top100-artwork-card:hover .top100-artwork-card__inner { border: 1px solid var(--adc-line, #e6e6e6); background: var(--adc-band, #f5f5f5); } .top100-artwork-card__photo { border-radius: 2px; } .top100-artwork-card__meta p, .top100-artwork-card__title, .top100-artwork-card__title a { font-family: var(--adc-display, var(--font-title)); color: var(--adc-ink, #111110); letter-spacing: -0.015em; } .top100-artwork-card__title, .top100-artwork-card__title a { font-style: italic; font-weight: 500; } .top100-artwork-card__artist a { font-family: var(--adc-body, var(--font-body)); color: var(--adc-accent, #b3402a); font-weight: 600; letter-spacing: 0.06em; transition: color 0.15s ease; } .top100-artwork-card__artist a:hover { color: var(--adc-ink, #111110); } .top100-artwork-card__year { font-family: var(--adc-body, var(--font-body)); color: var(--adc-ink-2, #6e6c68); } /* ---- 2C. Museums + Articles listing (reuses .search_card) ---- */ /* Scoped strictly under .top100-listing so the 24 other pages that share the bare .search_card component are untouched. */ /* ===== END TOP 100 PAGES — ArtsDot ===== */ /* ===== fts_search — model type badge (ADC) ===== */ /* Overrides the global default to match the ADC UI Kit overlay plate (.museum .hero .badge): small uppercase Archivo label, ink/70% overlay, white text, 2px brand radius. Keeps inherited absolute positioning. */ /* ===== artwork-catalog-card (catalog list grid card) ===== */ /* ArtsDot (ADC) — gallery-minimal identity: white canvas, hairline borders, Archivo grotesque, italic titles, terracotta accent used sparingly, sharp 2px radii on surfaces with pill buttons. Self-contained: tokens are restated on the card root so the section resolves wherever the card appears, and every selector is scoped under .custom_search + the long classes to win the cascade. */ /* ── Media / image ──────────────────────────────────────────────── */ /* ── Body: artist + title ───────────────────────────────────────── */ /* ── Hover overlay reveal — floats below card, full hairline frame aligned to card border ── */ /* ── Footer: cart + favorite ────────────────────────────────────── */ /* Buy / price button — ADC pill button on carbon ink */ /* Favorite toggle — bare icon, no pill border/background */ /* ===== END artwork-catalog-card ===== */ /* ===== photo_to_restyled_masterpiece ===== */ /* ADC (ArtsDot) gallery-minimal. Tokens: --adc-ink #111110, --adc-ink-2 #6e6c68, --adc-bg #ffffff, --adc-slot #eeeeee, --adc-line-2 #d6d6d6, --adc-accent #b3402a. Only overriding what falls back to a non-ADC default in shared chrome. */ /* Shared structural tokens read by global-custom */ /* Upload box (step 01) — ADC slot fill, not the legacy ecard grey */ /* Step number badge — ADC ink, not generic dark grey */ /* Edit-request example chips + category filter chips — ADC pill pattern: default = white bg, line-2 border, ink text; active = ink bg, white text. */ /* Style card title (step 04) — ADC kit ".art .title": italic, secondary ink */ /* ===== END photo_to_restyled_masterpiece ===== */ /* ===== museum_list (restyle8) — pagination active pill = brand accent ===== Overrides the generic global default (brown #875D2A) and the :first-child grey (#858585). Scoped to .museum-list-page only; matches the card CTA. */ /* ===== orders/art_consultation.html — step image offset shadow ===== */ /* ArtsDot: gallery-minimal — soft terracotta wash of the --adc-accent (#b3402a). */ .step .step-image { --step-image-shadow: rgba(179, 64, 42, 0.16); } /* ===== orders/art_consultation.html — ArtsDot brand colours ===== */ /* Gallery-minimal: clean slate · terracotta accent · off-white surfaces */ /* Dark photo panel — light Archivo copy above overlay_img */ /* ===== /orders/art_consultation.html — ArtsDot ===== */ /* ===== viewcart — orders/viewcart.html (ADC) ===== Gallery-minimal neutrals — no WA parchment/beige on summary or icons. */ :root { --cart-placeholder-bg: var(--adc-band, #f5f5f5); --cart-placeholder-border: var(--adc-line-2, #d6d6d6); --cart-placeholder-icon: var(--adc-ink-3, #a3a09b); --cart-alert-warning-text: #6a5414; --cart-alert-warning-bg: #faf4e6; --cart-alert-warning-border: #e8d5a0; --cart-alert-warning-accent: #c8962d; --cart-surface: var(--adc-band, #f5f5f5); --cart-surface-border: var(--adc-line-2, #d6d6d6); --cart-table-border: var(--adc-line-2, #d6d6d6); --cart-inset: var(--adc-slot, #eeeeee); --cart-icon-bg: var(--adc-slot, #eeeeee); --cart-summary-ink: var(--adc-ink, #111110); --cart-summary-ink-2: var(--adc-ink-2, #6e6c68); --cart-summary-accent: var(--adc-accent, #b3402a); --cart-th-bg: var(--adc-slot, #e8e8e8); --cart-th-color: var(--adc-ink, #111110); } /* ===== END viewcart (ADC) ===== */ /* ===== start_selling_* step-image shadow tint — ADC · soft terracotta wash ===== */ /* ===== orders/checkout ===== ArtsDot gallery-minimal: white cards framed by a hairline (--adc-line) rather than a drop shadow, ink-dark card headers, Archivo titles, terracotta (--adc-accent) accent on the saved address. All scoped under .checkout-page. */ /* ===== END orders/checkout ===== */ /* ===== customers_reviews — ADC brand tokens (structure lives in global-custom) ===== */ /* ===== collectible sell/edit — image upload + sales channels (restyle8) ===== */ @keyframes r8spin-adc { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} } /* ===== orders_page_painting_process_detailled ===== */ /* ArtsDot gallery-minimal: white canvas, Archivo grotesque, hairline rules, terracotta accent used only on the step number. Editorial (non-card) vertical sequence echoing the UI Kit's .curation .step. */ .all-painting-process-steps { --pp-ink: var(--adc-ink, #111110); --pp-ink-2: var(--adc-ink-2, #6e6c68); --pp-line: var(--adc-line, #e6e6e6); --pp-accent: var(--adc-accent, #b3402a); --pp-band: var(--adc-band, #f5f5f5); --pp-body: var(--adc-body, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif); max-width: 820px; margin-inline: auto; counter-reset: pp-step; } .painting-process-step { /* preserved baseline rhythm */ padding-top: 2vh; padding-bottom: 2vh; /* hairline editorial separators, ArtsDot-style */ border-top: 1px solid var(--pp-line); } .painting-process-step:first-child { border-top: 0; } .painting-process-step__content { display: flex; flex-direction: column; align-items: center; gap: 22px; } /* CSS-counter step number — the one spot of terracotta accent */ .painting-process-step__content::before { counter-increment: pp-step; content: counter(pp-step, decimal-leading-zero); align-self: flex-start; font-family: var(--pp-body); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; color: var(--pp-accent); padding-bottom: 2px; border-bottom: 1px solid var(--pp-accent); } .painting-process-step__image { width: 100%; max-width: 750px; display: block; margin-inline: auto; border-radius: 2px; /* kit uses sharp 0–2px radii */ box-shadow: 0 18px 40px -26px rgba(17, 17, 16, 0.45); } .painting-process-step__text { width: 100%; max-width: 60ch; margin-inline: auto; font-family: var(--pp-body); color: var(--pp-ink); font-size: 15.5px; line-height: 1.7; } .painting-process-step__text p { margin: 0; color: var(--pp-ink-2); } .painting-process-step__text p + p { margin-top: 14px; } @media (max-width: 576px) { .painting-process-step__content { gap: 16px; } .painting-process-step__image { width: 100%; } .painting-process-step__text { font-size: 14.5px; line-height: 1.62; } } /* ===== END orders_page_painting_process_detailled ===== */ /* ===== apr-thanks (art project request thank-you) ===== */ /* ADC brand tokens used here: --adc-ink: #111110 (primary text) --adc-ink-2: #6e6c68 (muted / secondary text) --adc-ink-3: #a3a09b (placeholder / very muted) --adc-line: #e6e6e6 (hairline borders) --adc-band: #f5f5f5 (surface background) --adc-slot: #eeeeee (slightly deeper surface) --adc-accent: #b3402a (terracotta — link hover) --font-title: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif --font-body: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif The --adc-* tokens are declared on the chrome selectors above; we re-declare just what this scope needs so it is self-contained and not accidentally broken if chrome selectors change. */ /* ---- card pair: shared surface ------------------------------ */ /* intro card: soft slot tint to distinguish from steps */ /* steps card: band */ /* ---- card body padding -------------------------------------- */ /* intro body: centre the text content */ /* ---- card title --------------------------------------------- */ /* specificity ≥ (0,3,0) — beats .col-md-6 .card .card-title (0,3,0) */ /* ---- card body copy ----------------------------------------- */ /* ---- steps list --------------------------------------------- */ /* ---- contact prompt ----------------------------------------- */ /* (0,2,0) — beats .text-muted a (0,2,0) via source-order; our file loads last */ /* ---- responsive -------------------------------------------- */ @media (max-width: 767px) { } @media (max-width: 390px) { } /* ===== END apr-thanks ===== */ /* ===== start_selling_* (body.start-selling-page) — ADC · ArtsDot ===== */ /* --- right CTA card "Start selling today" --- */ /* ===== Art Appraisal (body.art-appraisal-page) — ADC · ArtsDot ===== */ /* ===== Artwork Not Found Page ===== */ /* ---- breadcrumb breadcrumb-navigation-list ---------------------------------------- */ /* ---- card container --------------------------------------------- */ /* ---- heading ---------------------------------------------------- */ /* ---- body text -------------------------------------------------- */ /* ---- primary CTA button ---------------------------------------- */ /* ---- secondary button ------------------------------------------ */ /* ===== END Artwork Not Found Page ===== */ /* ===== wheel-of-affinities (similar artworks study plate) ===== ADC identity: monochrome gallery — white/light-grey plate, neutral grey frames that darken to near-black when centered, Archivo throughout. Structure lives in global-custom-V2.1.css. */ /* ===== artwork_info — action bar (Buy print, Send, Share, Favorites, Download, Similars, X-Ray, Diaporama) ===== */ /* hover/active icon recolour → ADC rust #b3402a */ /* ===== Catalog hover panel — align snippet + buy with the card body text ===== Card padding is reset globally; match __body 16px inset. Frame bleed matches card 1px border. */ /* ===== error_404.html + error_general.html — ArtsDot ===== */ /* Tokens: --adc-accent #b3402a (rust) --adc-ink #111110 --adc-ink-2 #6e6c68 --adc-muted --font-body Archivo sans */ /* ===== /error_404.html + error_general.html — ArtsDot ===== */ /* ===== Native Stripe checkout + payment received — ADC brand tokens ===== */ /* ===== artwork_preview_in_interior_room — ArtsDot tokens (structure in global-custom) ===== */ /* ===== artwork_buy_ProductAuction — auction tokens ===== */ :root { --auction-accent: var(--adc-accent, #b3402a); --auction-accent-dark: var(--adc-ink, #111110); --auction-accent-text: #ffffff; --auction-ink: var(--adc-ink, #111110); --auction-ink-mute: var(--adc-ink-3, #a3a09b); } /* ===== /artwork_buy_ProductAuction ===== */ /* ===================================================== Page side margins on non-large windows Below the large (xl) breakpoint — e.g. snapped quarter (1/4) and half (2/4) windows — Bootstrap caps .container at a fixed max-width (540/720/960px), leaving very wide empty side margins. We want the page content to use almost the full width with only a small gutter at those sizes. Scoped to in-page
content so header/top-bar/footer containers are unaffected. ===================================================== */ @media (max-width: 1199.98px) { main .container, main .container-sm, main .container-md, main .container-lg, main .container-xl { max-width: 100%; padding-left: 16px; padding-right: 16px; } } /* ===================================================== Dashboard feature spotlight — ArtsDot brand tokens (gallery-minimal grayscale, sharp 2px corners) ===================================================== */