/* ===================================================================== ATLANTA CANCER CARE — BASE File: salient-child/css/acc/acc-base.css Needs: acc-tokens.css Contents 01 Global type (fonts, headings, body copy, lists) 02 Links 03 Layout: containers, sections, grids, stacks 04 Text helpers: kicker, lead, measure, rich text 05 Buttons 06 Forms 07 Images and media 08 Focus, skip link, screen-reader text, reduced motion Specificity rule: global element styles use :where() so they stay easy to override and never fight Salient. Everything that adds layout or decoration is a class that starts with "acc-". ===================================================================== */ /* ===================================================================== 01 GLOBAL TYPE ===================================================================== */ /* Body text: sitewide. Salient sets body fonts from its options panel with selectors like "body, p"; this file loads after it. */ body, body :where(p, li, dd, dt, td, th, blockquote, figcaption, label, input, select, textarea, button) { font-family: var(--acc-font-body); } /* Body copy weight (600). Low specificity on purpose: anything with its own class (labels, badges, buttons, cards) keeps the weight it sets. */ body, body :where(p, li, dd, td, th, blockquote, figcaption) { font-weight: var(--acc-fw-body); } body { color: var(--acc-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body :where(h1, h2, h3, h4, h5, h6) { font-family: var(--acc-font-head); color: var(--acc-heading); letter-spacing: -0.005em; text-transform: none; } /* Sizes and rhythm apply inside ACC components and templates only, so legacy WPBakery pages keep their current heading sizes until migrated. */ .acc :where(h1, h2, h3, h4, h5, h6) { margin: 0 0 var(--acc-space-4); padding: 0; font-weight: var(--acc-fw-medium); text-wrap: balance; } .acc :where(h1) { font-size: var(--acc-fs-h1); line-height: var(--acc-lh-tight); font-weight: var(--acc-fw-bold); letter-spacing: -0.015em; } .acc :where(h2) { font-size: var(--acc-fs-h2); line-height: 1.15; } .acc :where(h3) { font-size: var(--acc-fs-h3); line-height: var(--acc-lh-snug); } .acc :where(h4) { font-size: var(--acc-fs-h4); line-height: var(--acc-lh-snug); } /* h5/h6 switch to the text face: at small sizes the serif loses clarity */ .acc :where(h5) { font-size: var(--acc-fs-h5); line-height: 1.4; font-family: var(--acc-font-body); font-weight: var(--acc-fw-bold); } .acc :where(h6) { font-size: var(--acc-fs-h6); line-height: 1.4; font-family: var(--acc-font-body); font-weight: var(--acc-fw-bold); } .acc :where(p, ul, ol, dl, blockquote, figure, address) { margin: 0 0 var(--acc-space-4); } .acc :where(p, li, dd) { font-size: var(--acc-fs-base); line-height: var(--acc-lh-body); color: inherit; /* inherit (not a fixed color) so text inside colored WPBakery boxes stays readable */ } .acc :where(ul, ol) { padding-left: 1.25em; } .acc :where(li + li) { margin-top: var(--acc-space-1); } .acc :where(strong, b) { font-weight: var(--acc-fw-bold); } .acc :where(address) { font-style: normal; } .acc :where(small) { font-size: var(--acc-fs-sm); } .acc :where(hr) { border: 0; border-top: 1px solid var(--acc-line); margin: var(--acc-space-6) 0; } .acc :where(p:last-child, ul:last-child, ol:last-child) { margin-bottom: 0; } /* ===================================================================== 02 LINKS Underlined by default in running text (WCAG 1.4.1: don't rely on color). ===================================================================== */ .acc :where(a) { color: var(--acc-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--acc-dur) var(--acc-ease), text-decoration-color var(--acc-dur) var(--acc-ease); } .acc :where(a:hover) { color: var(--acc-link-hover); text-decoration-thickness: 2px; } /* Links that are components (cards, buttons, nav) opt out */ .acc :where(.acc-btn, .acc-card, .acc-card a, .acc-nav-list a, .acc-tag) { text-decoration: none; } /* Arrow link: "View all physicians →" */ .acc-link-arrow { display: inline-flex; align-items: center; gap: 0.4em; font-weight: var(--acc-fw-bold); font-size: var(--acc-fs-sm); color: var(--acc-link) !important; text-decoration: none !important; } .acc-link-arrow::after { content: "\2192"; transition: transform var(--acc-dur) var(--acc-ease); } .acc-link-arrow:hover { color: var(--acc-link-hover) !important; } .acc-link-arrow:hover::after { transform: translateX(3px); } /* ===================================================================== 03 LAYOUT ===================================================================== */ /* Every new template's outer wrapper carries .acc. It also neutralises Salient's container-wrap padding so templates control their own spacing. */ .acc { background: var(--acc-bg); color: var(--acc-text); } .container-wrap.acc, #ajax-content-wrap .container-wrap.acc { padding-top: 0 !important; padding-bottom: 0 !important; background-color: var(--acc-bg) !important; } .acc *, .acc *::before, .acc *::after { box-sizing: border-box; } .acc-container { width: 100%; max-width: calc(var(--acc-container) + 2 * var(--acc-gutter)); margin-inline: auto; padding-inline: var(--acc-gutter); } .acc-container--wide { max-width: calc(var(--acc-container-wide) + 2 * var(--acc-gutter)); } .acc-container--narrow { max-width: calc(var(--acc-container-narrow) + 2 * var(--acc-gutter)); } .acc-section { padding-block: var(--acc-section-y); } .acc-section--tight { padding-block: var(--acc-section-y-tight); } .acc-section--flush-top { padding-top: 0; } .acc-section--white { background: var(--acc-white); } .acc-section--warm { background: var(--acc-card); } .acc-section--sage { background: var(--acc-sage-light); } .acc-section--dark { background: var(--acc-dark-green); color: var(--acc-on-dark); } .acc-section:not([class*="--"]) + .acc-section:not([class*="--"]) { padding-top: 0; } /* two plain cream sections share one gap */ .acc-section--rule { border-top: 1px solid var(--acc-line); } /* Section heading block: kicker + h2 + intro + optional link on the right */ .acc-section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--acc-space-4) var(--acc-space-6); margin-bottom: var(--acc-space-6); } .acc-section__head > div { max-width: 46rem; } .acc-section__head h2 { margin-bottom: var(--acc-space-2); } .acc-section__head p { color: var(--acc-muted); margin: 0; } .acc-section__head--center { justify-content: center; text-align: center; } .acc-section__head--center > div { margin-inline: auto; } /* Auto-fitting card grid. Set --acc-min on the element to change the card width. */ .acc-grid { display: grid; gap: var(--acc-grid-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--acc-min, 260px)), 1fr)); list-style: none; margin: 0; padding: 0; } .acc-grid > li { margin: 0; } .acc-grid--2 { --acc-min: 340px; } .acc-grid--3 { --acc-min: 280px; } .acc-grid--4 { --acc-min: 220px; } .acc-split { display: grid; gap: var(--acc-space-7); grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .acc-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } .acc-split--main-side { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: start; } .acc-split--wide-left { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } } .acc-stack > * + * { margin-top: var(--acc-space-4); } .acc-stack--lg > * + * { margin-top: var(--acc-space-6); } .acc-cluster { display: flex; flex-wrap: wrap; gap: var(--acc-space-3); align-items: center; } /* ===================================================================== 04 TEXT HELPERS ===================================================================== */ /* Kicker: small label above a heading, with a short gold rule before it. */ .acc-kicker { display: inline-flex; align-items: center; gap: 0.6em; margin: 0 0 var(--acc-space-3); font-family: var(--acc-font-body); font-size: var(--acc-fs-xs); font-weight: var(--acc-fw-bold); letter-spacing: var(--acc-tracking-label); text-transform: uppercase; color: var(--acc-green-ink); } .acc-kicker::before { content: ""; width: 1.75em; height: 2px; background: var(--acc-accent); flex: none; } .acc-section--dark .acc-kicker, .acc-on-dark .acc-kicker { color: var(--acc-sage-pale); } .acc-lead { font-size: var(--acc-fs-lg) !important; line-height: 1.6 !important; color: var(--acc-muted) !important; max-width: 40em; } .acc-measure { max-width: var(--acc-measure); } .acc-muted { color: var(--acc-muted); } .acc-label { display: block; font-size: var(--acc-fs-xs); font-weight: var(--acc-fw-bold); letter-spacing: 0.05em; text-transform: uppercase; color: var(--acc-muted); margin-bottom: var(--acc-space-1); } /* Rich text from the editor (bios, service content) */ .acc-prose { max-width: var(--acc-measure); } .acc-prose > * + * { margin-top: var(--acc-space-4); } /* Nested blocks too (WPBakery wraps text in several divs) */ .acc-prose :where(p, ul, ol, blockquote, figure, table, div) + :where(p, ul, ol, blockquote, figure, table) { margin-top: var(--acc-space-4); } .acc-prose h2 { font-size: var(--acc-fs-h3); margin-top: var(--acc-space-7); } .acc-prose h3 { font-size: var(--acc-fs-h4); margin-top: var(--acc-space-6); } .acc-prose h2:first-child, .acc-prose h3:first-child { margin-top: 0; } .acc-prose :is(h2, h3)[id] { scroll-margin-top: calc(var(--acc-header-h) + 1rem); } .acc-prose ul li::marker { color: var(--acc-green); } .acc-prose blockquote { border-left: 3px solid var(--acc-green); padding-left: var(--acc-space-5); font-family: var(--acc-font-head); font-size: var(--acc-fs-h4); color: var(--acc-heading); } .acc-prose iframe, .acc-prose video { display: block; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; border: 0; border-radius: var(--acc-radius); } /* Embeds pasted with the old "padding-top:56.25%" wrapper */ .acc-prose div[style*="56.25%"] { padding: 0 !important; position: static !important; } .acc-prose div[style*="56.25%"] iframe { position: static !important; } /* ===================================================================== 05 BUTTONS .acc-btn is solid dark green (matches the class already used on the homepage). Modifiers change the style. Minimum 44px tall for touch. ===================================================================== */ .acc-btn, a.acc-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 44px; padding: 0.8em 1.5em; border: 1px solid var(--acc-dark-green); border-radius: var(--acc-radius-sm); background: var(--acc-dark-green); color: var(--acc-white) !important; font-family: var(--acc-font-body); font-size: var(--acc-fs-sm); font-weight: var(--acc-fw-bold); line-height: 1.2; letter-spacing: 0.01em; text-align: center; text-decoration: none !important; text-transform: none; cursor: pointer; transition: background-color var(--acc-dur) var(--acc-ease), color var(--acc-dur) var(--acc-ease), border-color var(--acc-dur) var(--acc-ease); -webkit-appearance: none; appearance: none; } .acc-btn:hover { background: var(--acc-forest-deep); border-color: var(--acc-forest-deep); color: var(--acc-white) !important; } .acc-btn svg { width: 1.1em; height: 1.1em; flex: none; } .acc-btn--outline, a.acc-btn-outline { background: transparent; color: var(--acc-dark-green) !important; } .acc-btn--outline:hover, a.acc-btn-outline:hover { background: var(--acc-sage-light); color: var(--acc-dark-green) !important; border-color: var(--acc-dark-green); } .acc-btn--green { background: var(--acc-green); border-color: var(--acc-green); } .acc-btn--green:hover { background: var(--acc-green-ink); border-color: var(--acc-green-ink); } /* On dark green backgrounds */ .acc-btn--light { background: var(--acc-cream); border-color: var(--acc-cream); color: var(--acc-dark-green) !important; } .acc-btn--light:hover { background: var(--acc-white); border-color: var(--acc-white); color: var(--acc-dark-green) !important; } .acc-btn--ghost-light { background: transparent; border-color: rgba(250, 246, 238, 0.6); color: var(--acc-cream) !important; } .acc-btn--ghost-light:hover { background: rgba(250, 246, 238, 0.1); border-color: var(--acc-cream); color: var(--acc-white) !important; } .acc-btn--sm { min-height: 38px; padding: 0.55em 1em; font-size: var(--acc-fs-xs); } .acc-btn--lg { min-height: 52px; padding: 1em 1.9em; font-size: var(--acc-fs-base); } .acc-btn--block { display: flex; width: 100%; } .acc-btn[disabled], .acc-btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; } .acc-btn-row { display: flex; flex-wrap: wrap; gap: var(--acc-space-3); align-items: center; } @media (max-width: 600px) { .acc-btn-row--stack-mobile { flex-direction: column; align-items: stretch; } .acc-btn-row--stack-mobile .acc-btn { width: 100%; } } /* ===================================================================== 06 FORMS Scoped to .acc-form, plus Gravity Forms / Contact Form 7 wrappers so the existing Contact page matches without editing the form itself. Labels are always visible; placeholders are hints only. ===================================================================== */ :is(.acc-form, .gform_wrapper, .wpcf7-form) :is(label, .gfield_label, legend) { display: block; margin: 0 0 var(--acc-space-2); font-family: var(--acc-font-body); font-size: var(--acc-fs-sm); font-weight: var(--acc-fw-bold); color: var(--acc-heading); text-transform: none; letter-spacing: 0; } :is(.acc-form, .gform_wrapper, .wpcf7-form) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], input[type="number"], input[type="date"], input[type="password"], select, textarea) { width: 100%; min-height: 48px; padding: 0.7em 0.9em !important; border: 1px solid var(--acc-line-strong) !important; border-radius: var(--acc-radius-sm) !important; background: var(--acc-white) !important; color: var(--acc-ink) !important; font-family: var(--acc-font-body) !important; font-size: 1rem !important; /* 16px stops iOS zooming on focus */ line-height: 1.4 !important; box-shadow: none !important; transition: border-color var(--acc-dur) var(--acc-ease), box-shadow var(--acc-dur) var(--acc-ease); } :is(.acc-form, .gform_wrapper, .wpcf7-form) textarea { min-height: 140px; resize: vertical; } :is(.acc-form, .gform_wrapper, .wpcf7-form) :is(input, select, textarea):hover { border-color: var(--acc-muted) !important; } :is(.acc-form, .gform_wrapper, .wpcf7-form) :is(input, select, textarea):focus { outline: none !important; border-color: var(--acc-dark-green) !important; box-shadow: 0 0 0 3px rgba(29, 95, 191, 0.35) !important; } :is(.acc-form, .gform_wrapper, .wpcf7-form) ::placeholder { color: #7B8279; opacity: 1; } :is(.acc-form, .gform_wrapper, .wpcf7-form) select { -webkit-appearance: none; appearance: none; padding-right: 2.5em !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316291F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 0.8em center !important; background-size: 1.1em !important; } :is(.acc-form, .gform_wrapper, .wpcf7-form) :is(input[type="checkbox"], input[type="radio"]) { width: 1.2em; height: 1.2em; accent-color: var(--acc-dark-green); } .acc-form__row { margin-bottom: var(--acc-space-5); } .acc-form__hint { font-size: var(--acc-fs-sm); color: var(--acc-muted); margin-top: var(--acc-space-1); } .acc-form__required { color: var(--acc-red); margin-left: 0.15em; } :is(.acc-form, .gform_wrapper, .wpcf7-form) :is(.acc-form__error, .gfield_validation_message, .validation_message, .wpcf7-not-valid-tip) { color: var(--acc-red-deep) !important; font-size: var(--acc-fs-sm) !important; font-weight: var(--acc-fw-medium); margin-top: var(--acc-space-1); background: none !important; border: 0 !important; padding: 0 !important; } :is(.acc-form, .gform_wrapper, .wpcf7-form) :is([aria-invalid="true"], .gfield_error input, .gfield_error select, .gfield_error textarea) { border-color: var(--acc-red) !important; } :is(.gform_wrapper, .wpcf7-form) :is(input[type="submit"], button[type="submit"], .gform_button) { min-height: 48px; padding: 0.8em 1.8em !important; border: 1px solid var(--acc-dark-green) !important; border-radius: var(--acc-radius-sm) !important; background: var(--acc-dark-green) !important; color: var(--acc-white) !important; font-family: var(--acc-font-body) !important; font-size: var(--acc-fs-sm) !important; font-weight: var(--acc-fw-bold) !important; text-transform: none !important; letter-spacing: 0.01em !important; cursor: pointer; } :is(.gform_wrapper, .wpcf7-form) :is(input[type="submit"], button[type="submit"], .gform_button):hover { background: var(--acc-forest-deep) !important; } /* ===================================================================== 07 IMAGES AND MEDIA ===================================================================== */ .acc img { max-width: 100%; height: auto; } .acc-media { position: relative; overflow: hidden; border-radius: var(--acc-radius); background: var(--acc-card); } .acc-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .acc-media--portrait { aspect-ratio: 4 / 5; } .acc-media--landscape { aspect-ratio: 3 / 2; } .acc-media--wide { aspect-ratio: 16 / 9; } .acc-media--square { aspect-ratio: 1 / 1; } /* Physician headshots are cropped tall; keep faces in frame */ .acc-media--person img { object-position: 50% 18%; } /* ===================================================================== 08 ACCESSIBILITY ===================================================================== */ /* Visible focus for keyboard users on every interactive element, sitewide. :focus-visible leaves mouse clicks alone. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--acc-focus) !important; outline-offset: 2px !important; box-shadow: none; } :where(.acc-section--dark, .acc-on-dark, #footer-outer, .acc-cta--dark) :where(a, button, summary):focus-visible { outline-color: var(--acc-focus-on-dark) !important; } .acc-sr-only, .acc .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Salient's skip link: make it visible and on-brand when focused */ .nectar-skip-to-content:focus { background: var(--acc-dark-green) !important; color: var(--acc-white) !important; padding: 0.75em 1.25em !important; font-weight: var(--acc-fw-bold); z-index: 100000; } /* Anchor targets land below the sticky header */ .acc :where([id]) { scroll-margin-top: calc(var(--acc-header-h) + 1rem); } @media (prefers-reduced-motion: reduce) { .acc *, .acc *::before, .acc *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ===================================================================== SALIENT INSULATION Salient's dynamic CSS and the Custom CSS box style bare elements with rules that win over plain class selectors: body weight 200 (the Muli setting), `body h1 { text-transform: capitalize }`, `h1, h2, h3 { uppercase }`, `ul li { list-style: disc }`, `p, li, a { font-family: … !important }`, and button[type=submit] fills. Inside .acc (the new templates, the pre-footer and [acc_*] shortcodes) these rules put the design system back in charge. #ajax-content-wrap is Salient's page wrapper, so none of this reaches the header, footer or other pages. ===================================================================== */ #ajax-content-wrap .acc { font-weight: var(--acc-fw-body); color: var(--acc-text); } /* (0,1,0): beats Salient's `body h1` / `h1, h2, h3`, loses to any component class */ .acc :where(h1, h2, h3, h4, h5, h6) { text-transform: none; color: var(--acc-heading); } .acc :where(.acc-section--dark, .acc-cta--dark, .acc-on-dark) :where(h1, h2, h3, h4, h5, h6) { color: var(--acc-cream); } /* Links inside headings (card names) keep the heading face */ #ajax-content-wrap .acc :is(h1, h2, h3, h4, h5, h6) a { font-family: inherit !important; } /* Component lists (every ul/ol with a class) have no bullets; prose lists keep them */ #ajax-content-wrap .acc :is(ul, ol)[class] { margin-left: 0; list-style: none; } #ajax-content-wrap .acc :is(ul, ol)[class] > li { list-style: none; margin-left: 0; } #ajax-content-wrap .acc .acc-breadcrumbs ol { margin: 0 !important; padding: 0 !important; } #ajax-content-wrap .acc .acc-breadcrumbs li { list-style: none !important; } #ajax-content-wrap .acc dd { margin-left: 0 !important; padding-left: 0 !important; } #ajax-content-wrap .acc p { padding-bottom: 0; } /* Salient adds 27px under every p; spacing comes from the layout instead */ #ajax-content-wrap .acc .acc-prose ul:not([class]) > li { list-style: disc; } #ajax-content-wrap .acc .acc-prose ol:not([class]) > li { list-style: decimal; } /* Buttons: and