/* Theme Name: Art Division Theme URI: https://artdivision.co.uk Author: Art Division Author URI: https://artdivision.co.uk Description: A lightweight WordPress theme for Art Division. Version: 1.0.350 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: art-division Tags: minimal, lightweight, blog, portfolio */ /* === Reset === */ *, *::before, *::after { box-sizing: border-box; } /* === Variables === */ :root { --color-primary: #1a1a2e; --color-bg: #ffffff; --color-surface: #f8f8f8; --color-title: #111111; --color-eyebrow: #1a1a2e; --color-text: #111111; --color-muted: #666666; --color-accent: #1a1a2e; --color-accent-hover: #16213e; --color-border: #e0e0e0; --color-alternate: #f5f5f5; --color-navbar-bg: #ffffff; --color-navbar-link: #666666; --color-navbar-link-hover: #111111; --color-navbar-transparent-link: #ffffff; --color-navbar-transparent-link-hover: #cccccc; --color-menu-bg: #ffffff; --color-menu-link: #111111; --color-menu-link-hover: #1a1a2e; --color-menu-overlay: rgba(0,0,0,0.6); --color-btn-primary-text: #ffffff; --color-btn-primary-border: #1a1a2e; --color-btn-primary-bg: #1a1a2e; --color-btn-primary-text-hover: #ffffff; --color-btn-primary-border-hover: #16213e; --color-btn-primary-bg-hover: #16213e; --color-btn-secondary-text: #ffffff; --color-btn-secondary-border: #666666; --color-btn-secondary-bg: #666666; --color-btn-secondary-text-hover: #ffffff; --color-btn-secondary-border-hover: #1a1a2e; --color-btn-secondary-bg-hover: #1a1a2e; --color-btn-outline-text: #1a1a2e; --color-btn-outline-border: #1a1a2e; --color-btn-outline-text-hover: #ffffff; --color-btn-outline-border-hover: #1a1a2e; --color-btn-outline-bg-hover: #1a1a2e; --btn-font-weight: 400; --btn-text-transform: none; --color-footer-bg: #333333; --color-footer-heading: #ffffff; --color-footer-text: #ffffff; --color-footer-link: #ffffff; --color-footer-link-hover: #b1c6ff; --color-footer-top-bg: #333333; --color-footer-top-heading: #ffffff; --color-footer-top-text: #ffffff; --color-footer-top-link: #ffffff; --color-footer-top-link-hover: #b1c6ff; --color-footer-bottom-bg: #333333; --color-footer-bottom-heading: #ffffff; --color-footer-bottom-text: #ffffff; --color-footer-bottom-link: #ffffff; --color-footer-bottom-link-hover: #b1c6ff; --color-footer-info-bg: #ffffff; --color-footer-info-text: #666666; --color-footer-info-link: #666666; --color-footer-info-link-hover: #b1c6ff; --font-base: 'Inter', system-ui, -apple-system, sans-serif; --font-base-weight: 400; --font-heading: var(--font-base); --font-heading-weight: normal; --font-heading-style: normal; --font-heading-transform: none; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --text-base: 1rem; --text-sm: 0.875rem; --text-lg: 1.125rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.75rem; --line-height-body: 1.6; --line-height-heading: 1.2; --art-radius: 0; --art-radius-round: 0; --art-max-width: 1562px; --art-navbar-max-width: 1562px; --art-site-max-width: 2560px; --spacing: 1.5rem; } /* --art- prefixed aliases for the plugin-facing custom property contract documented in .github/copilot-instructions.md (Colours / Type scale / Spacing). This theme's own TODO list still calls for renaming the vars above in place; until that happens, these aliases let art-division-* plugins (Page Modules etc.) read live theme values — including the fluid clamp() overrides art_division_visual_language_css() writes for the type scale — without waiting on that rename. Delete once the rename lands. */ :root { --art-color-primary: var(--color-primary); --art-color-bg: var(--color-bg); --art-color-surface: var(--color-surface); --art-color-title: var(--color-title); --art-color-eyebrow: var(--color-eyebrow); --art-color-text: var(--color-text); --art-color-muted: var(--color-muted); --art-color-accent: var(--color-accent); --art-color-accent-hover: var(--color-accent-hover); --art-color-border: var(--color-border); --art-color-alternate: var(--color-alternate); /* Auto-derived by art_division_readable_text_color() (theme-settings.php) from --color-primary/--color-accent - whichever of white/dark text contrasts better against that colour, so plugins rendering text on top of an admin-chosen background (e.g. Property Modules' active department tab) stay readable without a per-client override, however light or dark that colour is picked. No var()-only fallback needed here since the PHP side always emits both when the source colour resolves - see art_division_visual_language_css(). */ --art-color-on-primary: var(--color-on-primary, #ffffff); --art-color-on-accent: var(--color-on-accent, #ffffff); /* No dedicated "active" colour in the theme's own style settings - the accent colour reads as the natural choice for an active/selected state (e.g. Property Modules' active department tab), so alias it rather than leaving plugins to fall back to their own hardcoded colour. */ --art-color-dept-active: var(--color-accent); --art-font-base: var(--font-base); --art-font-heading: var(--font-heading); --art-text-sm: var(--text-sm); --art-text-base: var(--text-base); --art-text-lg: var(--text-lg); --art-text-xl: var(--text-xl); --art-text-2xl: var(--text-2xl); --art-text-3xl: var(--text-3xl); --art-line-height-body: var(--line-height-body); --art-line-height-heading: var(--line-height-heading); --art-spacing: var(--spacing); } /* === Base === */ html { font-size: 16px; scroll-behavior: smooth; /* Reserves the scrollbar's track permanently so clientWidth never changes when body.menu-is-open sets overflow: hidden — without this, anything sized against the viewport directly (a position: fixed sticky header, the slide-in nav panel) shifts by the scrollbar's width when it disappears, since the body padding-right compensation in main.js only reaches normal in-flow content. */ scrollbar-gutter: stable; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-base); font-size: var(--text-base); font-weight: var(--font-base-weight); line-height: var(--line-height-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-style: var(--font-heading-style); text-transform: var(--font-heading-transform); line-height: var(--line-height-heading); } h2, .is-h2 { color: var(--color-title); } /* Subheadings in running text sit with the text they introduce: more space above (after the previous paragraph or list) than below. Without this the browser's equal 1em above and below left each heading floating midway. :where() keeps these at zero specificity, so any component or module that sets its own heading margins with a class still wins. */ :where(h2, h3, h4, h5, h6) { margin-bottom: 0.6em; } :where(p, ul, ol, dl, blockquote, table, figure, pre) + :where(h2, h3, h4, h5, h6) { margin-top: 1.6em; } :where(h2, h3, h4, h5, h6) + :where(p, ul, ol, dl) { margin-top: 0; } a { color: var(--color-accent); text-decoration: none; } a:hover { color: var(--color-accent-hover); text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } /* === Layout === */ .site { display: flex; flex-direction: column; margin-left: auto; margin-right: auto; max-width: var(--art-site-max-width); min-height: 100vh; } .site-content { flex: 1; } .container { max-width: var(--art-max-width); margin: 0 auto; padding: 0 15px; } /* === Header === */ .site-header { background-color: var(--color-navbar-bg); padding: 1rem 0; } /* === Sticky Navbar === */ /* position: sticky by default - the header reserves its own height in normal document flow natively, with no JS-computed #content padding needed for it at all. Only overridden to position: fixed below for the two cases sticky genuinely can't do: autohide (sticky keeps its reserved space even while transformed off-screen, leaving a gap) and Transparent Navbar on (needs to reserve zero space so the page can flow up behind it - sticky always reserves its space while in flow; independent of whether a hero itself is actually present, see the inline script below). Both .navbar-autohide and .hero-nav-transparent are server-side body classes (see functions.php's body_class filters), so this never has to wait on JS to know which positioning a given page needs. */ .navbar-sticky .site-header { position: sticky; /* --art-topbar-height is 0px unless an .art-topbar element is present AND currently visible (e.g. Art Division Areas We Cover's Area Top Bar) - see the inline script below and the .art-topbar rules further down. Pushes the header down to sit below the topbar instead of underneath it, and JS zeroes it back out once the topbar auto-hides on scroll so the header slides up to fill the gap. */ top: var(--art-topbar-height, 0px); left: 0; right: 0; z-index: 1000; background-color: var(--color-navbar-bg); transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease, top 0.3s ease; } /* .art-navbar-force-fixed: a generic escape hatch for "this page wants the fixed header behaviour without the transparent/overlay look" - unlike .hero-nav-transparent (which also zeroes out #content's top padding so the page flows up behind it), this only changes position. The theme adds it to property pages (art_division_navbar_body_classes() in functions.php), which structurally can never carry the Hero Sidebar's own Transparent Navbar toggle; a child theme can add it anywhere else. See the matching needsFixed/needsFixedHeader checks in this file's inline header script and main.js's updateOffset(). */ .navbar-sticky.navbar-autohide .site-header, .navbar-sticky.hero-nav-transparent .site-header, .navbar-sticky.art-navbar-force-fixed .site-header { position: fixed; } /* === Above-header bar (e.g. Areas We Cover's Area Top Bar) === A generic convention, not specific to any one plugin: any element with this class renders as a fixed bar pinned above the sticky header. Plugins opt in by adding this class alongside their own BEM class. Auto-hides once the page is scrolled away from the very top (see main.js) - unlike the header's own .is-hidden, which is direction-based, this is purely position-based: visible at scrollY 0, hidden otherwise. */ .navbar-sticky .art-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; transition: transform 0.3s ease; } .navbar-sticky .art-topbar.is-hidden { transform: translateY(-100%); } /* === Transparent Navbar (hero option) === */ .hero-nav-transparent .site-header { background-color: transparent; /* Same specificity (2 classes) as .navbar-sticky .site-header's own transition list, and this rule comes later in the cascade - the `transition` shorthand doesn't merge across rules, so whichever one wins replaces the whole list. Repeating the full list here (not just background-color) keeps top easing consistent instead of snapping instantly the moment .is-scrolled is removed at the top of the page. */ transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease, top 0.3s ease; } .hero-nav-transparent .site-header.is-scrolled { background-color: var(--color-navbar-bg); } .navbar-sticky .site-header.is-hidden { transform: translateY(-100%); } /* Fixed positioning ignores the margin-top the WP admin bar adds to , so a logged-in visitor sees a fixed header (and topbar, which is always fixed) pinned under the admin bar instead of below it. Offset to match the admin bar's own height/breakpoint - the header's offset stacks on top of the topbar's own height, same as the unauthenticated var(--art-topbar-height, 0px) above. Only scoped to the fixed-header cases (autohide / hero-nav-transparent) - the default sticky header sits correctly in normal flow already and would get an extra unwanted 32px here otherwise. */ body.admin-bar.navbar-sticky.navbar-autohide .site-header, body.admin-bar.navbar-sticky.hero-nav-transparent .site-header { top: calc(32px + var(--art-topbar-height, 0px)); } body.admin-bar.navbar-sticky .art-topbar { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar.navbar-sticky.navbar-autohide .site-header, body.admin-bar.navbar-sticky.hero-nav-transparent .site-header { top: calc(46px + var(--art-topbar-height, 0px)); } body.admin-bar.navbar-sticky .art-topbar { top: 46px; } } /* Content offset for sticky header. --art-header-offset is set by an inline script immediately after the header HTML so the value is available before #content is first painted - no CLS. */ body.navbar-sticky #content { padding-top: var(--art-header-offset, 0px); } /* A full-width Page Modules Hero is printed before #content, beside the header - so with the header fixed (Hide on Scroll) and no Transparent Navbar, the header covered the top of the hero, and the space reserved for it opened up below the hero instead. The space goes above the hero. */ body.navbar-sticky:not(.hero-nav-transparent) .site-header ~ .art-pm-hero { margin-top: var(--art-header-offset, 0px); } body.navbar-sticky:not(.hero-nav-transparent) .site-header ~ .art-pm-hero ~ #content { padding-top: 0; } .site-header .container { max-width: var(--art-navbar-max-width, 1562px); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .site-branding a { font-size: var(--text-xl); letter-spacing: -0.02em; color: var(--color-text); text-decoration: none; display: inline-block; } .site-branding .tagline { font-size: var(--text-sm); color: var(--color-muted); margin-top: 0.125rem; } /* === Navigation === */ .main-navigation ul { list-style: none; display: flex; gap: 1.5rem; } .main-navigation a { font-size: var(--text-sm); color: var(--color-muted); text-decoration: none; transition: color 0.2s; } .main-navigation a:hover, .main-navigation .current-menu-item > a { color: var(--color-text); } /* === Posts === */ .posts-list { display: flex; flex-direction: column; gap: 2.5rem; } .post-card { padding-bottom: 2.5rem; } .post-meta { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: 0.5rem; } .post-meta__updated { margin-left: 0.5em; } .post-title { font-family: var(--font-heading); font-size: var(--text-xl); letter-spacing: -0.02em; margin-bottom: 0.75rem; } .post-title a { color: var(--color-text); text-decoration: none; } .post-title a:hover { color: var(--color-accent); } .post-excerpt { color: var(--color-muted); margin-bottom: 1rem; } .read-more { font-size: var(--text-sm); color: var(--color-accent); } /* === Single Post === */ /* Qualified with the main element (not just .single-post) because WordPress's own body_class() adds "single-post" to on every single blog post - unrelated to the single-post class this theme also puts on
. Since is an ancestor of the ENTIRE page, a bare ".single-post .container" selector was also matching the header's own internal .container (used for its nav row), pushing that down and making the header render taller on post pages specifically. */ main.single-post .container { padding-top: 2.5rem; } /* --art-sticky-clearance: shared `top` offset for this template's sticky columns (.single-post-sidebar, .art-toc-wrap below). Deliberately NOT --art-header-offset - that var is 0 for the default position:sticky header by design (see its own doc comment: #content sits right after it in flow and needs no extra padding there), which is the wrong semantic here - a sticky column still needs to clear the header's real visual height to avoid sticking underneath it, regardless of whether the header itself is sticky or fixed. --art-header-height is never zeroed for exactly this kind of consumer. Mirrors the site's own admin-bar-aware header offset pattern (32px / 46px below 782px) since this account for the WP admin bar too, unlike --art-header-offset. */ :root { --art-sticky-clearance: calc(var(--art-header-height, 0px) + var(--art-topbar-height, 0px) + 2rem); } body.admin-bar { --art-sticky-clearance: calc(32px + var(--art-header-height, 0px) + var(--art-topbar-height, 0px) + 2rem); } @media screen and (max-width: 782px) { body.admin-bar { --art-sticky-clearance: calc(46px + var(--art-header-height, 0px) + var(--art-topbar-height, 0px) + 2rem); } } .single-post-layout { display: flex; flex-direction: column; gap: 2rem; } .single-post-layout__main { min-width: 0; } /* === Single Post — Content Row (article + sidebar) === Below 1200px: stacked flex column, article capped/centred on its own. From 1200px: a 3-column grid with the article as a FIXED 750px centre column, flanked by two equal minmax(300px, 1fr) tracks - because both side tracks share the exact same track definition, they always render at the same pixel width as each other (regardless of what does or doesn't occupy them), which keeps the article on the page's true centre axis at all times. The sidebar (always present, a real widget area - see inc/post-sidebar.php) fills the right track; the Table of Contents, when enabled, fills the left one once it becomes a row member at 1500px+ (see the "Single Post — Table of Contents" section) - an unoccupied side track just renders as empty space, which is what keeps the article fixed whether the TOC is showing or not, rather than the article's own centre shifting to accommodate it. */ .single-post-content-row { display: flex; flex-direction: column; gap: 2rem; } .single-post-content-row__article { min-width: 0; max-width: 750px; margin: 0 auto; } @media (min-width: 1200px) { .single-post-content-row { display: grid; grid-template-columns: minmax(300px, 1fr) 750px minmax(300px, 1fr); column-gap: 3rem; align-items: start; } .single-post-content-row__article { grid-column: 2; grid-row: 1; max-width: none; margin: 0; } .single-post-sidebar { grid-column: 3; grid-row: 1; position: sticky; top: var(--art-sticky-clearance); } } /* === Single Post — Breadcrumbs === */ .art-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-size: var(--text-sm); color: var(--color-muted); } .art-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; list-style: none; margin: 0; padding: 0; } .art-breadcrumbs__item:not(:last-child)::after { content: "\203A"; margin-left: 0.4rem; color: var(--color-muted); } .art-breadcrumbs__item a { color: var(--color-muted); text-decoration: none; } .art-breadcrumbs__item a:hover { color: var(--color-accent); } .art-breadcrumbs--page { margin-bottom: 0; padding-block: 0.75rem; } .art-breadcrumbs__item [aria-current="page"] { color: var(--color-text); } .art-breadcrumbs__read-time::before { content: "|"; margin-right: 0.5rem; color: var(--color-muted); } .single-post .post-header { margin-bottom: 2rem; } .single-post .post-title { font-size: var(--post-title-size, var(--text-3xl)); margin-bottom: 1rem; } /* .single-post-sidebar--share-only renders instead of the normal widget sidebar when 'sidebar-1' has no widgets (see art_division_render_post_sidebar() in inc/post-sidebar.php) - still a .single-post-sidebar, so it gets the exact same sticky right-hand-track positioning as the real sidebar (see the Content Row rules above), just with the Share block unboxed and restyled as a plain icon row instead of the sidebar's boxed circular row. Below 1200px the sidebar is a full-width block stacked under the article (see the Content Row rules above), so the icons stay in the same horizontal row .art-post-share uses by default; only from 1200px, once this becomes the narrow sticky side column, do they switch to a vertical stack. */ .single-post-sidebar--share-only .art-post-share { align-items: center; gap: 0.5rem; padding: 0 15px; } .single-post-sidebar--share-only .art-post-share__link { border: 0; width: auto; height: auto; color: var(--color-muted); } .single-post-sidebar--share-only .art-post-share__link svg { width: 24px; height: 24px; } @media (min-width: 1200px) { .single-post-sidebar--share-only .art-post-share { flex-direction: column; padding: 0; } .single-post-sidebar--share-only .art-post-share__icons { flex-direction: column; } } /* === Single Post — Header Meta Card === */ .post-header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--text-sm); color: var(--color-muted); } .post-header-meta__avatar img { display: block; border-radius: 50%; width: 40px; height: 40px; } .post-header-meta__by a { color: var(--color-text); font-weight: 600; text-decoration: underline; } .post-header-meta__divider { color: var(--color-border); } .post-header-meta__date { display: inline-flex; align-items: center; gap: 0.35rem; } /* === Single Post — Share === Renders inside the sidebar's share box (see art_division_render_post_share() in inc/social-share.php) - circular outline buttons in a horizontal row. */ .art-post-share { display: flex; align-items: center; gap: 0.6rem; } .art-post-share__label { font-size: var(--text-sm); color: var(--color-muted); } .art-post-share__icons { display: flex; gap: 0.5rem; } .art-post-share__link { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-text); transition: color 0.15s ease, border-color 0.15s ease; } .art-post-share__link:hover { color: var(--color-accent); border-color: var(--color-accent); } .art-post-share__link svg { width: 16px; height: 16px; } /* === Single Post — Sidebar === The 'sidebar-1' widget area (editable via Appearance → Widgets, seeded with a real Search + Categories widget the first time it's empty - see art_division_seed_sidebar1_widgets() in inc/post-sidebar.php) + the Share row. .widget below is every widget's own wrapper (see before_widget/before_title in art_division_widgets_init()); the rest of this section styles WordPress core's own Search/Categories widget markup to match that box look, since - unlike an earlier hardcoded fallback - these are real widgets and can be freely removed/replaced/reordered, so whatever a client actually adds needs to look consistent, not just these two. Stacks below the article until 1200px, see the Content Row rules above for the sticky right-hand column it becomes from there. */ .single-post-sidebar { display: flex; flex-direction: column; gap: 1.5rem; } .single-post-sidebar__box, .single-post-sidebar .widget { border: 1px solid var(--color-border); border-radius: var(--art-radius, 0); padding: 1.25rem; } .single-post-sidebar .widget-title { font-family: var(--font-heading); font-size: var(--text-lg); margin: 0 0 0.75rem; } .single-post-sidebar .search-form { display: flex; gap: 0.5rem; } .single-post-sidebar .search-form .search-field { flex: 1 1 auto; min-width: 0; border: 1px solid var(--color-border); border-radius: var(--art-radius, 0); padding: 0.5rem 0.75rem; } .single-post-sidebar .search-form .search-submit { border: 1px solid var(--color-border); border-radius: var(--art-radius, 0); background: var(--color-accent); color: var(--color-on-accent, #fff); padding: 0.5rem 1rem; cursor: pointer; } .single-post-sidebar .widget ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .single-post-sidebar .widget ul a { color: var(--color-text); text-decoration: none; font-size: var(--text-sm); } .single-post-sidebar .widget ul a:hover { color: var(--color-accent); } .single-post-sidebar__box--share { text-align: center; } /* === Single Post — Author Bio === */ .post-author-bio { display: flex; gap: 1.25rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--color-border); } .post-author-bio__avatar img { display: block; border-radius: 50%; width: 80px; height: 80px; } .post-author-bio__body { min-width: 0; flex: 1; } .post-author-bio__name { font-family: var(--font-heading); font-size: var(--text-lg); margin: 0 0 0.5rem; } .post-author-bio__name a { color: var(--color-text); text-decoration: none; } .post-author-bio__text { margin: 0; color: var(--color-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-author-bio__text.is-expanded { display: block; -webkit-line-clamp: unset; overflow: visible; } .post-author-bio__toggle { background: none; border: 0; padding: 0; margin-top: 0.35rem; color: var(--color-accent); font-size: var(--text-sm); cursor: pointer; } .post-author-bio__follow { display: flex; align-items: center; gap: 0.6rem; margin: 1rem 0 0; font-size: var(--text-sm); color: var(--color-muted); } .post-author-bio__follow-link { display: inline-flex; color: var(--color-text); } .post-author-bio__follow-link:hover { color: var(--color-accent); } .post-author-bio__follow-link svg { width: 16px; height: 16px; } /* === Single Post — Adjacent Nav === */ .single-post-adjacent-nav { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; } @media (min-width: 640px) { .single-post-adjacent-nav { flex-direction: row; } } .single-post-adjacent-nav__card { display: flex; align-items: center; gap: 0.75rem; flex: 1 1 0; border: 1px solid var(--color-border); border-radius: var(--art-radius, 0); padding: 1rem 1.25rem; text-decoration: none; color: var(--color-text); } .single-post-adjacent-nav__card--next { justify-content: space-between; } .single-post-adjacent-nav__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--color-accent); color: #fff; } .single-post-adjacent-nav__body { min-width: 0; display: flex; flex-direction: column; } .single-post-adjacent-nav__label { font-size: var(--text-sm); color: var(--color-muted); } .single-post-adjacent-nav__title { font-weight: 600; } .single-post-adjacent-nav__card:hover .single-post-adjacent-nav__title { color: var(--color-accent); } /* === Single Post — Related Posts === .art-pm-module__blog-cards/.art-pm-module__blog-card* are Art Division Page Modules' own classes (see art_division_page_modules_render_blog_card(), reused here so the cards look identical to a Blog module card - only this section's own heading/spacing is styled here. */ .single-post-related { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-border); } .single-post-related__title { font-family: var(--font-heading); font-size: var(--text-2xl); margin: 0 0 1.5rem; } /* === Single Post — Table of Contents === single.php places .art-toc-wrap as the FIRST child of .single-post-content-row (before the article), not as a separate sidebar-level element - positioning/behaviour differs entirely by breakpoint via CSS only: - <768px: normal flow. order:3 (see below) puts it after the article/ sidebar, stacked at the bottom, matching pre-sidebar behaviour. - >=768px: detached floating panel anchored to the viewport edge - DOM/flex order is irrelevant here since position:fixed removes it from flow entirely. - >=1500px: a genuine grid item in .single-post-content-row's left track (grid-column: 1), sticky, sharing that row's height with the sidebar (NOT including Related Posts below the row) so both stop being sticky at the same scroll point. Because the row's two side tracks are always equally sized regardless of what occupies them (see the "Single Post — Content Row" section), the article's own centre never moves whether the TOC is showing or not - unlike an earlier attempt that centred the TOC+article+sidebar row as one combined unit, which left the article's centre shifting depending on whether the TOC was present. */ .art-toc-wrap { order: 3; } .art-toc__toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; padding: 0.875rem 1.25rem; background: var(--color-accent); color: #fff; border: 0; border-radius: var(--art-radius, 0); font-size: var(--text-sm); font-weight: 600; cursor: pointer; } .art-toc { background: var(--color-alternate); padding: 1.5rem; margin-top: 0.5rem; } .art-toc-wrap.is-collapsed .art-toc { display: none; } .art-toc__title { font-family: var(--font-heading); font-size: var(--text-lg); margin: 0 0 1rem; } .art-toc__list { display: flex; flex-direction: column; gap: 0.6rem; list-style: none; margin: 0; padding: 0; } .art-toc__link { border-left: 2px solid transparent; color: var(--color-text); display: block; font-size: var(--text-sm); padding-left: 0.75rem; text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease; } .art-toc__link:hover { color: var(--color-accent); } .art-toc__link.is-active { border-left-color: var(--color-accent); color: var(--color-accent); font-weight: 600; } /* Mobile: the bar's home stays at the bottom of the article (order: 3 above), but position: sticky pins it to the bottom of the screen while the reader is anywhere above that home, and it settles back into place once they scroll down to it - sticky keeps its space in the flow, so nothing jumps. table-of-contents.js adds .is-floating while it's pinned and .is-revealed once the post title has scrolled away; until then a pinned bar is slid off the bottom of the screen, so it animates in as reading starts. --art-toc-float-bottom lifts it clear of anything else docked to the bottom of the screen (e.g. a chat widget's button). */ @media (max-width: 767.98px) { .art-toc-wrap { bottom: var(--art-toc-float-bottom, 0.75rem); position: sticky; z-index: 40; } /* Slide/fade lives on the children, not .art-toc-wrap itself, so the wrap's own box (which the JS measures to detect pinning) never moves. .is-float-ready (added by the JS after its first check) keeps the bar from visibly fading out on page load. */ .art-toc-wrap.is-float-ready > * { transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s; } .art-toc-wrap.is-floating .art-toc__toggle, .art-toc-wrap.is-floating .art-toc { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } .art-toc-wrap.is-floating .art-toc { max-height: min(60vh, 420px); overflow-y: auto; } .art-toc-wrap.is-floating:not(.is-revealed) { pointer-events: none; } .art-toc-wrap.is-floating:not(.is-revealed) > * { opacity: 0; transform: translateY(calc(100% + var(--art-toc-float-bottom, 0.75rem))); visibility: hidden; } .art-toc-wrap.is-float-ready.is-floating:not(.is-revealed) > * { transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; } } @media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { .art-toc-wrap.is-float-ready > *, .art-toc-wrap.is-float-ready.is-floating:not(.is-revealed) > * { transition: none; } } /* Tablet: floating side panel, detached from document flow. */ @media (min-width: 768px) { .art-toc-wrap { bottom: 1.5rem; max-width: calc(100vw - 3rem); position: fixed; right: 1.5rem; width: 280px; z-index: 40; } .art-toc-wrap .art-toc { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); max-height: min(60vh, 420px); overflow-y: auto; } } /* Desktop: TOC becomes a real grid item in .single-post-content-row's left track (grid-column: 1), sticky, hugging the article's edge via justify-self: end - the track itself stays the same width (empty or not), so this never affects the article's own position. See the "Single Post — Content Row" section for the symmetric-track rationale. */ @media (min-width: 1500px) { .art-toc-wrap { bottom: auto; grid-column: 1; grid-row: 1; justify-self: end; max-width: none; position: sticky; right: auto; top: var(--art-sticky-clearance); width: 240px; z-index: auto; } .art-toc-wrap .art-toc { box-shadow: none; display: block !important; max-height: none; overflow: visible; } .art-toc__toggle { display: none; } } /* :not(.art-bcta__title) on h2 excludes Blog CTAs' injected title, same reasoning as the font-size override below - it keeps its own fixed margin (Art Division Blog CTAs' art-division-blog-ctas.css) regardless of this generic post-content heading rule. Previously only the font-size rule carried this exclusion - this margin rule was still winning via its own higher specificity (.post-content h2 beats a bare .art-bcta__title), leaking a 2rem top margin into the CTA title that its own margin:0 could never override. */ .post-content h1, .post-content h2:not(.art-bcta__title), .post-content h3, .post-content h4 { font-family: var(--font-heading); letter-spacing: -0.02em; margin: 2rem 0 0.75rem; } .post-content h2 { font-size: var(--text-2xl); } .post-content h3 { font-size: var(--text-xl); } .post-content h4 { font-size: var(--text-lg); } /* .post-content is shared with page-blocks.php, page-saved-search.php and template-parts/content-page.php - these two overrides are scoped to .single-post so the blog article's H2/H3 can be sized independently of those other templates, which stay on the shared --text-2xl/--text-xl. :not(.art-bcta__title) excludes Blog CTAs' injected h2 (the_content filter - see Art Division Blog CTAs' class-art-division-blog-ctas-injector.php), which keeps its own fixed styling regardless of this setting. */ .single-post .post-content h2:not(.art-bcta__title) { font-size: var(--post-h2-size, var(--text-2xl)); } .single-post .post-content h3 { font-size: var(--post-h3-size, var(--text-xl)); } .post-content p, .post-content ul, .post-content ol, .post-content blockquote, .post-content pre { margin-bottom: 1.25rem; } .post-content ul, .post-content ol { padding-left: 1.5rem; } .post-content blockquote { border-left: 3px solid var(--color-accent); padding: 0.5rem 0 0.5rem 1.25rem; color: var(--color-muted); font-style: italic; } .post-content pre { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--art-radius, 0); padding: 1rem 1.25rem; overflow-x: auto; font-family: var(--font-mono); font-size: var(--text-sm); } .post-content code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-surface); padding: 0.1em 0.35em; border-radius: 3px; } .post-content pre code { background: none; padding: 0; } /* FAQ accordion - the exact markup Content Generator's "Generate FAQs" feature emits (see Art Division Content Generator), also read by the Schema plugin for JSON-LD. Toggle behaviour lives in main.js. .wp-block-art-division-faq is Art Division Blocks' AD FAQ block - it emits the same schema-faq/-section/-question/-answer class names alongside its own art-blocks-faq-* ones specifically to plug into this same accordion, so it's included on every rule here rather than given a separate copy of this block. */ .schema-faq.wp-block-yoast-faq-block, .schema-faq.wp-block-art-division-faq { margin: 20px 0; } .schema-faq.wp-block-yoast-faq-block .schema-faq-section, .schema-faq.wp-block-art-division-faq .schema-faq-section { margin-bottom: 10px; } .schema-faq.wp-block-yoast-faq-block .schema-faq-section:last-child, .schema-faq.wp-block-art-division-faq .schema-faq-section:last-child { margin-bottom: 0; } .schema-faq.wp-block-yoast-faq-block .schema-faq-question, .schema-faq.wp-block-art-division-faq .schema-faq-question { display: block; cursor: pointer; padding: 1em 4em 1em 1.25em; background: var(--color-alternate); position: relative; font-size: var(--text-lg); color: var(--color-text); /* Yoast's/Content Generator's markup wraps the question in , which has no default margin, so this was never needed until AD FAQ (Art Division Blocks) started using a heading tag here for proper heading semantics - headings carry a browser default margin that otherwise pushed each question/answer pair further apart than the 10px .schema-faq-section gap intends. */ margin: 0; /* Explicit normal weight, not just "no override" - both (Yoast's/Content Generator's markup) and h1-h6 (AD FAQ's markup) are bold by browser default, so removing a weight rule here entirely would make the question bolder, not lighter. */ font-weight: normal; } .schema-faq.wp-block-yoast-faq-block .schema-faq-question::after, .schema-faq.wp-block-art-division-faq .schema-faq-question::after { content: "+"; position: absolute; top: 50%; right: 1em; transform: translateY(-50%); line-height: 1; font-weight: 600; font-size: 38px; color: var(--color-accent); } .schema-faq.wp-block-yoast-faq-block .schema-faq-section.active .schema-faq-question::after, .schema-faq.wp-block-art-division-faq .schema-faq-section.active .schema-faq-question::after { content: "-"; } /* margin-top (not the section's own margin-bottom) is what creates the visible gap between the question bar and its answer panel while open - it still applies at height: 0 when closed, so it doubles as the closed- state row spacing without a separate rule. This element carries NO padding of its own and only ever transitions height - box-sizing: border-box can't shrink height below the element's own padding (confirmed live via DevTools: the content area clamped to zero, but the box still stayed 36px tall, exactly its padding-top + padding-bottom), and transitioning padding alongside height to work around that caused its own visible jerk (each animated property fires its own transitionend, racing the one that flips height to auto). The actual padding/background live on .schema-faq-answer-inner, an unclipped wrapper main.js injects around this element's content on init - height just reveals more or less of that fixed-size inner box, so nothing about its own box model ever has to move. */ .schema-faq.wp-block-yoast-faq-block .schema-faq-answer, .schema-faq.wp-block-art-division-faq .schema-faq-answer { height: 0; overflow: hidden; margin: 8px 0 0; transition: height 0.4s ease; } .schema-faq.wp-block-yoast-faq-block .schema-faq-answer-inner, .schema-faq.wp-block-art-division-faq .schema-faq-answer-inner { padding: 1em 1.25em; background: var(--color-bg); } /* === Site Policy (Privacy Policy / Terms & Conditions / Cookie Policy) === */ .page-template-page-site-policy main { margin: 0 auto; max-width: var(--art-pm-content-max-width); } /* Dedicated typography for long-form legal text, applied via the Site Policy page template (page-site-policy.php). A neutral sans stack is used deliberately instead of --font-base, distinct from the brand typeface, for a plain, formal legal-document read. */ .art-site-policy h2, .art-site-policy h3, .art-site-policy h4, .art-site-policy h5, .art-site-policy h6 { color: var(--color-title); font-family: Arial, Helvetica, sans-serif; text-transform: capitalize; } .art-site-policy h2 { font-size: 1.25rem; line-height: 1.25; } .art-site-policy h3 { font-size: var(--text-lg); line-height: 1.25; } .art-site-policy p, .art-site-policy li, .art-site-policy td, .art-site-policy th { font-family: Arial, Helvetica, sans-serif; font-size: var(--text-base); } .art-site-policy li a, .art-site-policy p a { font-family: Arial, Helvetica, sans-serif; font-size: var(--text-base); text-decoration: underline; } .art-site-policy ul { list-style-position: outside; padding-bottom: 1.25rem; } .art-site-policy table ul { padding-left: 0; } /* Numbered clause references, e.g. "1.2.3" — nested
    counters. */ .art-site-policy ol { counter-reset: item; } .art-site-policy ol > li { counter-increment: item; } .art-site-policy ol ol > li { display: block; } .art-site-policy ol ol > li::before { content: counters(item, ".") ". "; margin-left: -20px; } /* === Author Archive === .art-pm-module__blog-cards/.art-pm-module__blog-card* are Art Division Page Modules' own classes (see art_division_page_modules_render_blog_card(), reused here for both the featured latest-post card and the "More articles" grid so both look identical to a Blog module card - only the column count/sizing modifiers below are this theme's own. */ .author-page__bio { display: flex; gap: 1.5rem; align-items: flex-start; border: 1px solid var(--color-border); border-radius: var(--art-radius, 0); padding: 1.75rem; margin-bottom: 2.5rem; } .author-page__bio-avatar img { display: block; border-radius: 50%; width: 80px; height: 80px; } .author-page__bio-body { min-width: 0; } .author-page__bio-name { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; margin: 0 0 0.75rem; } .author-page__bio-follow-link { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-accent); } .author-page__bio-follow-link:hover { background: var(--color-accent); color: var(--color-on-accent, #fff); } .author-page__bio-follow-link svg { width: 14px; height: 14px; } .author-page__bio-text { margin: 0; color: var(--color-muted); } .author-page__highlight { display: grid; gap: 2rem; margin-bottom: 3rem; } @media (min-width: 1024px) { .author-page__highlight { grid-template-columns: 2fr 1fr; align-items: start; } } .author-page__feature.art-pm-module__blog-cards { grid-template-columns: 1fr; } .author-page__feature .art-pm-module__blog-title { font-size: var(--text-xl); } .author-page__recommended { border: 1px solid var(--color-border); border-radius: var(--art-radius, 0); padding: 1.5rem; } .author-page__recommended-title { font-family: var(--font-heading); font-size: var(--text-lg); margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); } .author-page__recommended-empty { color: var(--color-muted); font-size: var(--text-sm); margin: 0; } .author-page__recommended-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; } .author-page__recommended-item { display: flex; gap: 0.75rem; } .author-page__recommended-thumb { display: block; flex-shrink: 0; } .author-page__recommended-thumb-img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: var(--art-radius, 0); } .author-page__recommended-body { min-width: 0; display: flex; flex-direction: column; } .author-page__recommended-name a { color: var(--color-text); font-weight: 600; text-decoration: none; } .author-page__recommended-name a:hover { color: var(--color-accent); } .author-page__recommended-bio { color: var(--color-muted); font-size: var(--text-sm); margin-top: 0.15rem; } .author-page__grid-title { font-family: var(--font-heading); font-size: var(--text-2xl); margin: 0 0 1.5rem; } .author-page__grid.art-pm-module__blog-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1200px) { .author-page__grid.art-pm-module__blog-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1023px) { .author-page__grid.art-pm-module__blog-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .author-page__bio { flex-direction: column; } .author-page__grid.art-pm-module__blog-cards { grid-template-columns: 1fr; } } /* === Page === */ .page-title { font-family: var(--font-heading); font-size: var(--text-2xl); letter-spacing: -0.02em; margin-bottom: 1.5rem; } /* === Pagination === */ .pagination { display: flex; gap: 0.5rem; margin-top: 3rem; justify-content: center; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.5rem; border: 1px solid var(--color-border); border-radius: var(--art-radius, 0); font-size: var(--text-sm); color: var(--color-text); text-decoration: none; transition: background 0.2s; } .pagination a:hover, .pagination .current { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } /* === Footer === */ .site-footer { background-color: var(--color-footer-bg); } .site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6 { color: var(--color-footer-heading); } .site-footer p, .site-footer li, .site-footer dd, .site-footer dt { color: var(--color-footer-text); font-size: var(--text-base); } .site-footer a { color: var(--color-footer-link); } .site-footer a:hover { color: var(--color-footer-link-hover); } .site-footer .widget_nav_menu ul { list-style: none; padding-left: 0; } /* Above Page — full-width before #page wrapper */ .widget-area--above-page { width: 100%; } /* Above Footer — full-width between #content and footer */ .widget-area--above-footer { width: 100%; } /* Footer Top — spans the full footer width, above columns */ .widget-area--footer-top { background-color: var(--color-footer-top-bg); padding: 2rem 0; } .widget-area--footer-top h1, .widget-area--footer-top h2, .widget-area--footer-top h3, .widget-area--footer-top h4, .widget-area--footer-top h5, .widget-area--footer-top h6 { color: var(--color-footer-top-heading); } .widget-area--footer-top p, .widget-area--footer-top li, .widget-area--footer-top dd, .widget-area--footer-top dt { color: var(--color-footer-top-text); } .widget-area--footer-top a { color: var(--color-footer-top-link); } .widget-area--footer-top a:hover { color: var(--color-footer-top-link-hover); } /* Footer — multi-column widget grid */ .widget-area--footer { padding: 3rem 0; } .widget-area--footer .container { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .widget-area--footer .widget { margin-bottom: 0; } /* Below the width where the auto-fit grid above collapses to a single column, footer widget columns stack vertically instead of sitting side by side. A Nav Menu widget with a blank Title falls back to a screen- reader-only heading using the menu's own name (see art_division_nav_menu_widget_title_fallback() in functions.php) - never shown to sighted users. That's fine side by side, where the columns' own left-edge alignment is enough to read as separate groups, but once stacked the invisible

    still carries the browser's default heading margin even with zero visible content, leaving an unlabelled dead gap between each stacked list instead of a proper section break. Un-hide the fallback text here instead of just zeroing that margin - it's a real, meaningful label (the actual menu name), just never surfaced visually until now. */ @media (max-width: 480px) { .widget-area--footer .widget-title { font-size: var(--text-base); margin: 0 0 0.75rem; } .widget-area--footer .widget-title .screen-reader-text { clip: auto; height: auto; overflow: visible; position: static; width: auto; } } /* Footer Bottom — below the main footer widget columns */ .widget-area--footer-bottom { background-color: var(--color-footer-bottom-bg); padding: 2rem 0; } .widget-area--footer-bottom h1, .widget-area--footer-bottom h2, .widget-area--footer-bottom h3, .widget-area--footer-bottom h4, .widget-area--footer-bottom h5, .widget-area--footer-bottom h6 { color: var(--color-footer-bottom-heading); } .widget-area--footer-bottom p, .widget-area--footer-bottom li, .widget-area--footer-bottom dd, .widget-area--footer-bottom dt { color: var(--color-footer-bottom-text); } .widget-area--footer-bottom a { color: var(--color-footer-bottom-link); } .widget-area--footer-bottom a:hover { color: var(--color-footer-bottom-link-hover); } /* Footer Info — legal/credit bar below Footer Bottom (Copyright, Navigation, Art Division credit blocks); widgets/blocks placed here lay out as a wrapping row. */ .widget-area--footer-info { background-color: var(--color-footer-info-bg); padding: 1.5rem 0; } .widget-area--footer-info .widget { margin-bottom: 0; } .widget-area--footer-info .widgettitle, .widget-area--footer-info .widget-title { margin: 0; } .widget-area--footer-info p, .widget-area--footer-info li, .widget-area--footer-info dd, .widget-area--footer-info dt { color: var(--color-footer-info-text); font-size: var(--text-sm); } .widget-area--footer-info a { color: var(--color-footer-info-link); } .widget-area--footer-info a:hover { color: var(--color-footer-info-link-hover); } .widget-area--footer-info .widget_nav_menu ul { display: flex; flex-wrap: wrap; margin: 0; } .widget-area--footer-info .widget_nav_menu ul li + li::before { content: "|"; margin: 0 0.5rem; } /* Footer Accordion — collapsible menu section above the footer, built from up to four registered nav menu locations (Footer Nav 1-4). The trigger bar and panel backgrounds are full-bleed (no .container on the button/nav itself); their content is wrapped in .container so it lines up with the rest of the site's max content width while the background spans edge to edge. Uses a grid-template-rows 0fr/1fr transition so it animates smoothly; the panel's inner padding lives on its last child (not the content wrapper itself) to avoid bottom-padding bleed while collapsed. */ .art-footer-accordion-area { width: 100%; } .art-footer-accordion__trigger { display: block; width: 100%; padding: 0; background-color: var(--color-surface); border: none; font: inherit; color: var(--color-text); cursor: pointer; text-align: left; } .art-footer-accordion__trigger-inner { display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; padding-top: 1rem; padding-bottom: 1rem; } .art-footer-accordion__title { font-size: var(--text-sm); } .art-footer-accordion__trigger-inner::after { content: ''; flex-shrink: 0; width: 0.5em; height: 0.5em; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(135deg); transition: transform 0.3s ease; } .art-footer-accordion__trigger[aria-expanded="true"] .art-footer-accordion__trigger-inner::after { transform: rotate(-45deg); } .art-footer-accordion__panel { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.3s ease; } .art-footer-accordion__trigger[aria-expanded="true"] + .art-footer-accordion__panel { grid-template-rows: 1fr; } .art-footer-accordion__content { min-height: 0; overflow: hidden; } .art-footer-accordion__content > .container { padding-top: 1.5rem; padding-bottom: 1.5rem; } .art-footer-accordion__columns { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1.5rem 3rem; } .art-footer-accordion__column { flex: 0 1 240px; } .art-footer-accordion__menu { list-style: none; margin: 0; padding: 0; } .art-footer-accordion__menu li { margin: 0 0 0.5rem; } .art-footer-accordion__menu li:last-child { margin-bottom: 0; } .art-footer-accordion__menu a { display: inline-flex; align-items: center; gap: 0.4em; color: var(--color-text); text-decoration: none; } .art-footer-accordion__menu a:hover { color: var(--color-accent); } .art-footer-accordion__menu a::before { content: ''; flex-shrink: 0; width: 0.4em; height: 0.4em; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); } /* === Utilities === */ /* Boxed text callout — inserted via the "boxed" Quicktags button added to every WYSIWYG editor's Text-mode toolbar (see functions.php), wrapping the selection in
    . Neutral default so it looks reasonable on every site out of the box; child themes override the background/radius to match their own branding. */ .art-boxed-text { background: var(--color-alternate); border-radius: var(--art-radius, 0); padding: 1.5rem 2rem; } .art-boxed-text > *:first-child { margin-top: 0; } .art-boxed-text > *:last-child { margin-bottom: 0; } /* Checklist — swaps a list's bullets for a checkmark icon. Two markup shapes both need to match: the Text-mode Quicktags button (functions.php) wraps a selected