/* File: /css/general.css */
/*
* Page-specific styles — loaded on all non-front pages in ,
* and loaded non-blocking in the footer on the front page (cache warm-up).
*
* Contains: login form, office hours, contact page, phone numbers,
* account dashboard, lost password, adoption story templates.
*/
/* ==========================================================================
/* ==========================================================================
Custom Login Form Styles
========================================================================== */
.wl-login-container {
max-width: 400px;
margin: 40px auto;
padding: 30px;
background: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--outline-variant);
border-radius: var(--wp--custom--radius--sm);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
}
.wl-login-form {
width: 100%;
}
.wl-form-group {
margin-bottom: 20px;
}
.wl-form-group label {
display: block;
margin-bottom: 8px;
font-family: var(--wp--preset--font-family--body);
font-size: 14px;
font-weight: bold;
color: var(--wp--preset--color--on-surface);
}
.wl-form-group input[type="text"],
.wl-form-group input[type="password"],
.wl-form-group input[type="email"],
.wl-form-group input[type="tel"],
.wl-form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid var(--wp--preset--color--outline-variant);
border-radius: var(--wp--custom--radius--sm);
font-size: 16px;
font-family: var(--wp--preset--font-family--body);
box-sizing: border-box;
transition: border-color 0.3s ease;
}
.wl-form-group textarea {
resize: vertical;
min-height: 120px;
}
.wl-form-group input[type="text"]:focus,
.wl-form-group input[type="password"]:focus,
.wl-form-group input[type="email"]:focus,
.wl-form-group input[type="tel"]:focus,
.wl-form-group textarea:focus {
outline: 2px solid transparent; /* visible in forced-colors / high-contrast mode */
border-color: var(--wp--preset--color--interactive);
box-shadow: 0 0 0 2px rgba(43, 119, 199, 0.1);
}
.wl-form-checkbox label {
display: flex;
align-items: center;
font-weight: normal;
cursor: pointer;
}
.wl-form-checkbox input[type="checkbox"] {
margin-right: 8px;
cursor: pointer;
}
.wl-login-button {
width: 100%;
padding: 12px 24px;
background-color: var(--wp--preset--color--interactive);
color: var(--wp--preset--color--white);
border: none;
border-radius: var(--wp--custom--radius--sm);
font-size: 16px;
font-family: var(--wp--preset--font-family--body);
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
}
.wl-login-button:hover {
background-color: var(--wp--preset--color--interactive-dark);
}
.wl-login-button:active {
background-color: #154a85;
}
.wl-form-footer {
margin-top: 20px;
text-align: center;
}
.wl-form-footer a {
color: var(--wp--preset--color--interactive);
text-decoration: none;
font-size: 14px;
font-family: var(--wp--preset--font-family--body);
}
.wl-form-footer a:hover {
text-decoration: underline;
}
.wl-login-error {
padding: 12px 16px;
margin-bottom: 20px;
background-color: var(--wp--custom--status--error-bg);
border: 1px solid var(--wp--custom--status--error-border);
border-radius: var(--wp--custom--radius--sm);
color: var(--wp--custom--status--error-text);
font-family: var(--wp--preset--font-family--body);
font-size: 14px;
}
.wl-login-message {
padding: 12px 16px;
margin: 40px auto;
max-width: 400px;
background-color: var(--wp--custom--status--info-bg);
border: 1px solid var(--wp--custom--status--info-border);
border-radius: var(--wp--custom--radius--sm);
color: var(--wp--custom--status--info-text);
font-family: var(--wp--preset--font-family--body);
font-size: 14px;
text-align: center;
}
.wl-login-message a {
color: var(--wp--custom--status--info-text);
font-weight: bold;
}
.wl-login-message a:hover {
text-decoration: underline;
}
/* ==========================================================================
Office Hours Block Styles
========================================================================== */
.wliaa-office-hours {
background-color: var(--wp--custom--status--neutral-bg);
border: 2px solid var(--wp--preset--color--primary);
border-radius: 6px;
padding: 20px;
margin: 20px auto;
max-width: 820px;
font-family: var(--wp--preset--font-family--body);
font-size: 16px;
line-height: 1.6;
}
.wliaa-office-hours-title {
font-size: 18px;
font-weight: bold;
color: var(--wp--preset--color--primary);
margin-bottom: 10px;
}
.wliaa-office-hours-content {
color: var(--wp--preset--color--on-surface);
}
.wliaa-office-hours-content p {
margin: 0 0 10px 0;
}
.wliaa-office-hours-content p:last-child {
margin-bottom: 0;
}
/* ==========================================================================
Contact Form Styles
========================================================================== */
.wlf-hp-field {
position: absolute;
left: -9999px;
top: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.wl-contact-form {
width: 100%;
}
.wl-contact-field {
margin-bottom: 20px;
}
.wl-contact-label {
display: block;
margin-bottom: 6px;
font-weight: bold;
font-size: 14px;
}
.wl-contact-input,
.wl-contact-textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--wp--preset--color--outline-variant);
border-radius: var(--wp--custom--radius--sm);
font-size: 15px;
font-family: inherit;
box-sizing: border-box;
transition: border-color 0.2s ease;
}
.wl-contact-textarea {
resize: vertical;
min-height: 140px;
}
.wl-contact-input:focus,
.wl-contact-textarea:focus {
border-color: var(--wp--preset--color--interactive);
outline: 2px solid transparent; /* visible in forced-colors / high-contrast mode */
box-shadow: 0 0 0 2px rgba(43, 119, 199, 0.2);
}
/* Locked fields: name/email pre-filled from the logged-in user's account and
set readonly by wliaa-forms (wlf-contact-shortcode.php). */
.wl-contact-input--locked,
.wl-contact-input[readonly] {
background-color: var(--wp--preset--color--surface-container);
color: var(--wp--preset--color--on-surface-variant);
cursor: not-allowed;
}
.wl-contact-submit-wrap {
margin-top: 8px;
}
.wl-required {
color: var(--wp--custom--status--error-text);
}
.wl-contact-submit {
width: 100%;
padding: 14px 24px;
background-color: var(--wp--preset--color--interactive);
color: var(--wp--preset--color--white);
border: none;
border-radius: var(--wp--custom--radius--sm);
font-size: 16px;
font-family: var(--wp--preset--font-family--body);
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
}
.wl-contact-submit:hover {
background-color: var(--wp--preset--color--interactive-dark);
}
.wl-contact-submit:active {
background-color: #154a85;
}
.wl-contact-submit:disabled {
background-color: var(--wp--preset--color--outline-variant);
cursor: not-allowed;
}
.wl-contact-message {
padding: 16px 20px;
margin-bottom: 24px;
border-radius: var(--wp--custom--radius--sm);
font-family: var(--wp--preset--font-family--body);
font-size: 14px;
line-height: 1.5;
}
.wl-contact-message strong {
display: block;
margin-bottom: 4px;
}
.wl-contact-success {
background-color: var(--wp--custom--status--success-bg);
border: 1px solid var(--wp--custom--status--success-border);
color: var(--wp--custom--status--success-text);
}
.wl-contact-error {
background-color: var(--wp--custom--status--error-bg);
border: 1px solid var(--wp--custom--status--error-border);
color: var(--wp--custom--status--error-text);
}
/* ==========================================================================
Phone Number Styles
========================================================================== */
.wl-phone-number {
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
letter-spacing: 0.5px;
font-weight: normal;
}
p .wl-phone-number,
div .wl-phone-number,
span .wl-phone-number {
font-family: 'Courier New', Courier, monospace;
}
/* ==========================================================================
Contact Page - Tighter Spacing
========================================================================== */
.wp-block-columns .wp-block-column h3.wp-block-heading {
margin-bottom: 0.5em;
}
.wp-block-columns .wp-block-column h2.wp-block-heading {
margin-bottom: 0.75em;
}
.wp-block-columns .wp-block-column h3.wp-block-heading + p {
margin-top: 0.5em;
}
.wp-block-columns .wp-block-column h2.wp-block-heading + p {
margin-top: 0.75em;
}
/* ==========================================================================
Contact Page Layout ([wlf_contact_page] shortcode)
========================================================================== */
/* Outer wrapper.
Horizontal padding gives the page a 24px gutter on viewports at or near
max-width (e.g. iPad 11" portrait, 820px) so form fields don't sit flush
against the viewport edges. Wider viewports are unchanged because
max-width still constrains the inner content. */
.wlf-contact-page {
max-width: 820px;
margin: 0 auto;
padding: 0 var(--wp--preset--spacing--30) 40px;
}
/* Mobile call/text strip — hidden on desktop */
.wlf-contact-mobile-top {
display: none;
}
/* Two-column desktop layout */
.wlf-contact-layout {
display: flex;
gap: 48px;
align-items: flex-start;
}
/* Left info column */
.wlf-contact-info {
flex: 0 0 220px;
min-width: 0;
}
.wlf-contact-info-heading {
font-size: 1.25rem;
font-weight: bold;
margin: 0 0 20px 0;
color: var(--wp--preset--color--on-surface);
}
.wlf-contact-info-block {
margin-bottom: 20px;
}
.wlf-contact-info-label {
font-size: 14px;
font-weight: bold;
margin: 0 0 2px 0;
color: var(--wp--preset--color--on-surface);
}
.wlf-contact-info-block p,
.wlf-contact-address {
font-size: 14px;
color: var(--wp--preset--color--on-surface);
margin: 0;
line-height: 1.6;
font-style: normal; /* override italic */
}
.wlf-contact-tel {
color: var(--wp--preset--color--interactive);
text-decoration: none;
}
.wlf-contact-tel:hover {
text-decoration: underline;
}
/* Right form column */
.wlf-contact-form-col {
flex: 1;
min-width: 0;
}
.wlf-contact-form-heading {
font-size: 1.25rem;
font-weight: bold;
margin: 0 0 20px 0;
color: var(--wp--preset--color--on-surface);
}
/* Mobile-only mailing address (below form) — hidden on desktop */
.wlf-contact-mobile-address {
display: none;
}
/* ── Mobile (≤782px) ── */
@media only screen and (max-width: 782px) {
/* Show the call/text strip, hide the info column.
margin-top reduced from 75px → 24px so the call-to-action buttons
sit close to the top of the content area instead of leaving a large
empty band above them on mobile. */
.wlf-contact-mobile-top {
display: flex;
flex-direction: column;
gap: 25px;
margin-top: 24px;
margin-bottom: 28px;
}
.wlf-contact-mobile-action {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
text-decoration: none;
font-size: 17px;
font-family: var(--wp--preset--font-family--body);
font-weight: bold;
color: var(--wp--preset--color--white);
border-radius: 6px;
transition: opacity 0.2s ease;
}
.wlf-contact-mobile-action:hover {
opacity: 0.9;
color: var(--wp--preset--color--white);
}
.wlf-contact-mobile-action svg {
flex-shrink: 0;
}
.wlf-contact-mobile-call {
background-color: var(--wp--preset--color--interactive);
}
.wlf-contact-mobile-text {
background-color: #2c733c;
}
.wlf-contact-number {
white-space: nowrap;
}
/* Restore side padding on the contact page wrapper at mobile.
The style.css safety-net rule
`.entry-content > *:not(.alignfull):not(.alignwide)` (specificity 0,3,0)
zeroes horizontal padding on every direct child of .entry-content. The
doubled class trick lifts our selector to (0,3,0) so it ties on
specificity and wins on cascade order (general.css loads after style.css).
Same pattern as the login-card rule below. */
.entry-content > .wlf-contact-page.wlf-contact-page,
.wp-block-post-content > .wlf-contact-page.wlf-contact-page {
padding-left: var(--wp--preset--spacing--30);
padding-right: var(--wp--preset--spacing--30);
}
/* Stack columns, hide the info column */
.wlf-contact-layout {
flex-direction: column;
gap: 0;
}
.wlf-contact-info {
display: none;
}
/* Form column and form fill full width on mobile */
.wlf-contact-form-col {
width: 100%;
box-sizing: border-box;
}
#wl-contact-form {
width: 100%;
box-sizing: border-box;
}
.wl-contact-input,
.wl-contact-textarea {
width: 100%;
box-sizing: border-box;
}
/* Form heading on mobile */
.wlf-contact-form-heading {
margin-bottom: 16px;
}
/* Mailing address shown below form on mobile */
.wlf-contact-mobile-address {
display: block;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid #dddddd;
}
.wlf-contact-mobile-address-label {
font-size: 14px;
font-weight: bold;
margin: 0 0 6px 0;
color: var(--wp--preset--color--on-surface);
}
}
/* ==========================================================================
Responsive: Tablet Portrait (≤782px) — page-specific overrides
(Extracted from main Tablet Portrait block in style.css)
========================================================================== */
@media only screen and (max-width: 782px) {
/* Login card: add horizontal gutter so it doesn't touch viewport edges,
and tighten internal padding to balance the smaller mobile gutter.
Specificity note: style.css has a mobile safety-net rule
`.entry-content > *:not(.alignfull):not(.alignwide) { padding-left: 0; padding-right: 0 }`
whose specificity is (0,3,0) — `:not()` contributes its argument's specificity,
so the two `:not(.class)` calls add (0,2,0) on top of `.entry-content`'s (0,1,0).
A bare `.entry-content > .wl-login-container` selector is only (0,2,0) and loses.
The doubled-class trick (`.wl-login-container.wl-login-container`) lifts our
selector to (0,3,0), tying the safety-net rule, and our rule wins on cascade
order because general.css loads after style.css. */
.entry-content > .wl-login-container.wl-login-container,
.wp-block-post-content > .wl-login-container.wl-login-container {
margin: 40px 16px;
padding: 20px;
}
.wliaa-office-hours {
margin: 15px;
padding: 15px;
}
.wliaa-office-hours-title {
font-size: 16px;
}
.wliaa-office-hours-content {
font-size: 15px;
}
.wl-contact-form {
max-width: 100%;
}
.wl-form-group input[type="text"],
.wl-form-group input[type="email"],
.wl-form-group input[type="tel"],
.wl-form-group textarea {
font-size: 16px;
}
}
/* ===== Account Page — Sidebar Dashboard ===== */
.wl-account {
display: flex;
min-height: 80vh;
max-width: 1400px;
margin: 0 auto;
position: relative;
}
/* --- Mobile toggle --- */
.wl-account-mobile-toggle {
display: none;
align-items: center;
gap: 8px;
position: fixed;
top: 12px;
left: 12px;
z-index: 1010;
padding: 8px 14px;
background: var(--wp--preset--color--white);
border: 1px solid #dde1e6;
border-radius: var(--wp--custom--radius--md);
font-family: var(--wp--preset--font-family--nunito);
font-size: 14px;
font-weight: 600;
color: var(--wp--preset--color--on-surface);
cursor: pointer;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.wl-account-mobile-toggle svg {
flex-shrink: 0;
}
/* --- Sidebar --- */
.wl-account-sidebar {
width: 260px;
min-width: 260px;
background: var(--wp--preset--color--surface);
border-right: 1px solid var(--wp--preset--color--border);
display: flex;
flex-direction: column;
padding: 28px 0 20px;
}
.wl-account-journey {
padding: 0 24px 24px;
border-bottom: 1px solid var(--wp--preset--color--border);
margin-bottom: 8px;
}
.wl-account-journey-label {
display: block;
font-family: var(--wp--preset--font-family--body);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--interactive);
margin-bottom: 4px;
}
.wl-account-journey-program {
display: block;
font-family: var(--wp--preset--font-family--heading);
font-size: 16px;
font-weight: 700;
color: var(--wp--preset--color--on-surface);
line-height: 1.3;
}
.wl-account-journey-stage {
display: block;
font-family: var(--wp--preset--font-family--body);
font-size: 0.75rem;
font-weight: 400;
color: var(--wp--preset--color--on-surface-variant);
margin-top: 2px;
}
.wl-account-journey-stage-value {
display: inline-flex;
align-items: center;
gap: 3px;
font-weight: 700;
color: var(--wp--custom--status--success-text);
}
.wl-account-journey-stage-value svg {
flex-shrink: 0;
}
/* --- Navigation items --- */
.wl-account-nav {
flex: 1;
padding: 8px 12px;
}
.wl-account-nav-item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 11px 16px;
margin-bottom: 2px;
background: none;
border: none;
border-radius: var(--wp--custom--radius--md);
font-family: var(--wp--preset--font-family--nunito);
font-size: 15px;
font-weight: 600;
color: var(--wp--preset--color--on-surface);
cursor: pointer;
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
text-align: left;
}
.wl-account-nav-item:hover,
.wl-account-nav-item:focus-visible {
background: #e8ecf1;
color: var(--wp--preset--color--on-surface);
}
.wl-account-nav-item:focus-visible {
outline: 2px solid var(--wp--preset--color--interactive);
outline-offset: -2px;
}
.wl-account-nav-item.wl-account-nav-active {
background: var(--wp--preset--color--interactive);
color: var(--wp--preset--color--white);
}
.wl-account-nav-item.wl-account-nav-active svg {
color: var(--wp--preset--color--white);
}
.wl-account-nav-item svg {
flex-shrink: 0;
color: var(--wp--preset--color--on-surface-variant);
transition: color 0.15s ease;
}
.wl-account-nav-item:hover svg {
color: var(--wp--preset--color--on-surface);
}
/* --- Sidebar bottom (settings, support, logout) --- */
.wl-account-sidebar-bottom {
padding: 12px 12px 0;
border-top: 1px solid var(--wp--preset--color--border);
margin-top: auto;
}
.wl-account-nav-logout {
color: var(--wp--preset--color--on-surface-variant);
}
.wl-account-nav-logout:hover,
.wl-account-nav-logout:focus-visible {
color: var(--wp--preset--color--danger);
background: var(--wp--custom--status--error-bg);
}
.wl-account-nav-logout:hover svg,
.wl-account-nav-logout:focus-visible svg {
color: var(--wp--preset--color--danger);
}
/* --- Overlay (mobile) --- */
.wl-account-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.4);
}
/* --- Content area --- */
.wl-account-content {
flex: 1;
min-width: 0;
padding: 36px 40px;
background: var(--wp--preset--color--surface);
}
/* --- Panels --- */
.wl-account-panel {
display: none;
}
.wl-account-panel-active {
display: block;
}
.wl-account-panel-heading {
font-family: var(--wp--preset--font-family--nunito);
font-size: 28px;
font-weight: 700;
color: var(--wp--preset--color--on-surface);
margin: 0 0 16px;
}
/* --- Welcome section --- */
.wl-account-welcome {
margin-bottom: 32px;
}
.wl-account-welcome-heading {
font-family: var(--wp--preset--font-family--heading);
font-size: 34px;
font-weight: 700;
font-style: normal;
color: var(--wp--preset--color--on-surface);
margin: 0 0 8px;
line-height: 1.2;
}
.wl-account-welcome-name {
color: var(--wp--preset--color--interactive);
}
.wl-account-welcome-sub {
font-family: var(--wp--preset--font-family--body);
font-size: 16px;
color: var(--wp--preset--color--on-surface-variant);
line-height: 1.5;
margin: 0;
}
/* --- Section cards --- */
.wl-account-section {
background: #f9fafb;
border: 1px solid #e8ecf1;
border-radius: var(--wp--custom--radius--lg);
padding: 24px;
margin-bottom: 24px;
}
.wl-account-section-title {
font-family: var(--wp--preset--font-family--nunito);
font-size: 18px;
font-weight: 700;
color: var(--wp--preset--color--on-surface);
margin: 0 0 16px;
display: flex;
align-items: center;
gap: 8px;
}
/* --- Roadmap progress tracker --- */
.wl-account-roadmap-title {
font-family: var(--wp--preset--font-family--heading);
font-weight: 700;
font-size: 1.25rem;
line-height: 1.75rem;
color: var(--wp--preset--color--on-surface);
margin: 0 0 0.5rem;
}
.wl-roadmap {
display: flex;
align-items: flex-start;
padding: 16px 0 8px;
overflow-x: auto;
}
.wl-roadmap-step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
flex: 1;
min-width: 90px;
}
.wl-roadmap-circle {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--wp--preset--color--outline-variant);
background: var(--wp--preset--color--white);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
flex-shrink: 0;
}
.wl-roadmap-step-completed .wl-roadmap-circle {
background: var(--wp--preset--color--interactive);
border-color: var(--wp--preset--color--interactive);
color: var(--wp--preset--color--white);
}
/* Connector line between circles */
.wl-roadmap-connector {
position: absolute;
top: 20px;
left: calc(50% + 20px);
right: calc(-50% + 20px);
height: 2px;
background: var(--wp--preset--color--outline-variant);
z-index: 0;
}
.wl-roadmap-connector-completed {
background: var(--wp--preset--color--interactive);
}
.wl-roadmap-label {
display: block;
font-family: var(--wp--preset--font-family--body);
font-weight: 700;
font-size: 0.875rem;
line-height: 1.25rem;
color: var(--wp--preset--color--on-surface);
text-align: center;
margin-top: 10px;
}
.wl-roadmap-step:not(.wl-roadmap-step-completed) .wl-roadmap-label {
color: var(--wp--preset--color--on-surface-variant);
font-weight: 500;
}
.wl-roadmap-date {
display: block;
font-family: var(--wp--preset--font-family--body);
font-weight: 400;
font-size: 0.75rem;
line-height: 1rem;
color: var(--wp--preset--color--on-surface-variant);
text-align: center;
margin-top: 2px;
}
/* --- Card titles (matching roadmap title style) --- */
.wl-account-card-title {
font-family: var(--wp--preset--font-family--heading);
font-weight: 700;
font-size: 1.25rem;
line-height: 1.75rem;
color: var(--wp--preset--color--on-surface);
margin: 0 0 16px;
}
/* --- Recent History timeline --- */
.wl-history-timeline {
display: flex;
flex-direction: column;
gap: 20px;
}
.wl-history-entry {
display: flex;
align-items: stretch;
gap: 14px;
padding: 8px 10px;
margin: -8px -10px;
border-radius: var(--wp--custom--radius--md);
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
cursor: default;
}
.wl-history-entry:hover {
transform: scale(1.03);
background: var(--wp--preset--color--white);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.wl-history-bar {
width: 4px;
min-height: 100%;
border-radius: 2px;
background: #8b9baa;
flex-shrink: 0;
}
.wl-history-content {
display: flex;
flex-direction: column;
gap: 1px;
padding: 2px 0;
}
.wl-history-date {
font-family: var(--wp--preset--font-family--body);
font-weight: 600;
font-size: 0.7rem;
line-height: 1rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #4a6274;
}
.wl-history-comment {
font-family: var(--wp--preset--font-family--heading);
font-weight: 700;
font-size: 0.95rem;
line-height: 1.35rem;
color: var(--wp--preset--color--on-surface);
}
.wl-history-highlight {
color: var(--wp--custom--status--success-text);
}
a.wl-history-entry-link {
text-decoration: none;
color: inherit;
cursor: pointer;
}
a.wl-history-entry-link:hover .wl-history-comment,
a.wl-history-entry-link:focus-visible .wl-history-comment {
text-decoration: underline;
}
.wl-history-view-all {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 20px;
font-family: var(--wp--preset--font-family--body);
font-weight: 600;
font-size: 0.875rem;
color: var(--wp--preset--color--interactive);
text-decoration: none;
}
.wl-history-view-all:hover,
.wl-history-view-all:focus-visible {
color: var(--wp--preset--color--interactive-dark);
text-decoration: underline;
}
/* --- Two-column grid (history + documents) --- */
.wl-account-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.wl-account-grid .wl-account-section {
margin-bottom: 0;
}
/* --- Required Documents list --- */
.wl-docs-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.wl-docs-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px dashed var(--wp--preset--color--outline-variant);
border-radius: 10px;
text-decoration: none;
color: inherit;
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.wl-docs-item-action {
cursor: pointer;
}
.wl-docs-item-action:hover {
transform: scale(1.02);
background: var(--wp--preset--color--white);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.wl-docs-icon {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.wl-docs-icon-pending {
background: var(--wp--custom--status--error-bg);
color: var(--wp--preset--color--danger);
}
.wl-docs-detail {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.wl-docs-name {
font-family: var(--wp--preset--font-family--heading);
font-weight: 700;
font-size: 0.95rem;
line-height: 1.35rem;
color: var(--wp--preset--color--on-surface);
}
.wl-docs-status {
font-family: var(--wp--preset--font-family--body);
font-weight: 600;
font-size: 0.75rem;
line-height: 1rem;
}
.wl-docs-status-required {
color: var(--wp--preset--color--danger);
}
.wl-docs-action {
flex-shrink: 0;
color: var(--wp--preset--color--on-surface-variant);
}
.wl-docs-item-action:hover .wl-docs-action {
color: var(--wp--preset--color--interactive);
}
/* --- Placeholder text --- */
.wl-account-placeholder {
font-family: var(--wp--preset--font-family--nunito);
font-size: 15px;
color: var(--wp--preset--color--on-surface-variant);
margin: 0;
}
/* --- Compact header (account page only, applied via JS) --- */
.wl-compact-header .wl-nav-home-logo-icon {
display: flex;
align-items: center;
line-height: 0;
}
.wl-compact-header .wl-nav-home-logo .wp-block-navigation-item__content {
display: flex;
align-items: center;
}
.wl-compact-header .site-header {
margin-bottom: 0 !important;
}
.wl-compact-header .wp-block-template-part:has(.site-header) {
margin-bottom: 0 !important;
}
.wl-compact-header .wp-site-blocks > * + * {
margin-block-start: 0 !important;
}
/* --- Mobile bottom tab bar (hidden on desktop, shown ≤768px) --- */
.wl-account-bottom-bar {
display: none;
position: relative;
}
.wl-bar-tab {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
flex: 1;
padding: 8px 4px 6px;
background: none;
border: none;
color: var(--wp--preset--color--on-surface-variant);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: color 0.15s ease;
position: relative;
}
.wl-bar-tab:focus-visible {
outline: 2px solid var(--wp--preset--color--interactive);
outline-offset: -2px;
border-radius: var(--wp--custom--radius--sm);
}
.wl-bar-tab svg {
flex-shrink: 0;
}
.wl-bar-tab-label {
font-family: var(--wp--preset--font-family--body);
font-size: 10px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.01em;
}
.wl-bar-tab-active {
color: var(--wp--preset--color--interactive);
}
.wl-bar-tab-active::before {
content: '';
position: absolute;
top: 0;
left: 25%;
right: 25%;
height: 2px;
background: var(--wp--preset--color--interactive);
border-radius: 0 0 2px 2px;
}
/* "More" popup menu — above the bottom bar */
.wl-bar-more-menu {
position: absolute;
bottom: 100%;
right: 8px;
width: 200px;
background: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--wp--custom--radius--lg);
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
padding: 6px 0;
z-index: 110;
}
.wl-bar-more-menu[hidden] {
display: none;
}
.wl-bar-more-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 11px 16px;
background: none;
border: none;
font-family: var(--wp--preset--font-family--nunito);
font-size: 14px;
font-weight: 600;
color: var(--wp--preset--color--on-surface);
cursor: pointer;
text-decoration: none;
text-align: left;
transition: background-color 0.15s ease;
}
.wl-bar-more-item:hover,
.wl-bar-more-item:focus-visible {
background: #f0f3f7;
}
.wl-bar-more-item:focus-visible {
outline: 2px solid var(--wp--preset--color--interactive);
outline-offset: -2px;
}
.wl-bar-more-item svg {
flex-shrink: 0;
color: var(--wp--preset--color--on-surface-variant);
}
.wl-bar-more-item:hover svg {
color: var(--wp--preset--color--on-surface);
}
.wl-bar-more-logout:hover,
.wl-bar-more-logout:focus-visible {
color: var(--wp--preset--color--danger);
background: var(--wp--custom--status--error-bg);
}
.wl-bar-more-logout:hover svg,
.wl-bar-more-logout:focus-visible svg {
color: var(--wp--preset--color--danger);
}
/* Overlay behind "More" popup — closes on tap */
.wl-bar-more-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 100;
}
.wl-bar-more-open .wl-bar-more-overlay {
display: block;
}
/* Highlight the "More" toggle when a "more" panel is active */
.wl-bar-more-toggle.wl-bar-tab-active {
color: var(--wp--preset--color--interactive);
}
/* ===== Account Page — Responsive ===== */
/* Tablet: stack grid */
@media only screen and (max-width: 960px) {
.wl-account-grid {
grid-template-columns: 1fr;
}
.wl-account-content {
padding: 28px 24px;
}
.wl-account-welcome-heading {
font-size: 28px;
}
.wl-roadmap-step {
min-width: 80px;
}
.wl-roadmap-label {
font-size: 0.75rem;
}
}
/* Mobile: bottom tab bar replaces sidebar */
@media only screen and (max-width: 782px) {
.wl-account {
flex-direction: column;
}
/* Hide sidebar and its drawer toggle on mobile — bottom bar takes over */
.wl-account-mobile-toggle {
display: none;
}
.wl-account-sidebar {
display: none;
}
.wl-account-overlay {
display: none;
}
/* Show the bottom tab bar */
.wl-account-bottom-bar {
display: flex;
align-items: stretch;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
background: var(--wp--preset--color--white);
border-top: 1px solid var(--wp--preset--color--border);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.wl-account-content {
/* 60px bar height + safe-area */
padding: 20px 16px calc(68px + env(safe-area-inset-bottom, 0px));
}
.wl-account-welcome-heading {
font-size: 24px;
}
.wl-account-panel-heading {
font-size: 24px;
}
}
/* ===== Lost Password / Reset Password ===== */
.wl-login-heading {
font-family: var(--wp--preset--font-family--body);
font-size: 20px;
font-weight: bold;
color: var(--wp--preset--color--on-surface);
margin: 0 0 8px 0;
}
.wl-login-description {
font-family: var(--wp--preset--font-family--body);
font-size: 14px;
color: var(--wp--preset--color--on-surface-variant);
margin: 0 0 20px 0;
line-height: 1.5;
}
.wl-login-success {
padding: 12px 16px;
margin-bottom: 20px;
background-color: var(--wp--custom--status--success-bg);
border: 1px solid var(--wp--custom--status--success-border);
border-radius: var(--wp--custom--radius--sm);
color: var(--wp--custom--status--success-text);
font-family: var(--wp--preset--font-family--body);
font-size: 14px;
line-height: 1.5;
}
/* ==========================================================================
Adoption Story Template (page-adoption-story)
Mobile: cover image flush under header, no top spacing
========================================================================== */
@media only screen and (max-width: 782px) {
.wl-adoption-story {
padding-top: 0 !important;
}
}
/* ==========================================================================
Story Cover Block (wl/story-cover) — "Adoption Story Hero"
Structure mirrors wl/adoption-program-intro for pixel-identical alignment:
.wl-story-cover -> section, alignfull (full viewport)
.wl-story-cover-content -> max-width 1280, centered, padded
.wl-story-cover-columns-> flex columns (text + media)
========================================================================== */
.wl-story-cover {
position: relative;
display: flex;
align-items: center;
min-height: 540px;
overflow: hidden;
}
/* ---- Content wrapper: max-width + padding (canonical-equivalent) ---- */
.wl-story-cover-content {
position: relative;
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 40px 20px;
}
@media only screen and (min-width: 783px) {
.wl-story-cover-content {
padding: 64px 32px;
}
}
/* ---- Columns: flex container, badge pinned to top on desktop ---- */
.wl-story-cover-columns {
display: flex;
flex-direction: column;
gap: 2rem;
}
@media only screen and (min-width: 783px) {
.wl-story-cover-columns {
flex-direction: row;
align-items: flex-start;
gap: 3rem;
}
}
/* When only one column is rendered, let it span the full row. */
.wl-story-cover--text-only .wl-story-cover-text,
.wl-story-cover--media-only .wl-story-cover-media {
flex: 1 1 100%;
}
/* ----- Text column ------------------------------------------------------- */
.wl-story-cover-text {
display: flex;
flex-direction: column;
flex: 1 1 55%;
align-self: flex-start;
}
.wl-story-cover-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
margin: 0 0 2.5rem 0;
border-radius: var(--wp--custom--radius--pill);
background-color: var(--wp--preset--color--secondary);
color: var(--wp--preset--color--on-secondary);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
line-height: 1.2;
width: fit-content;
}
.wl-story-cover-headline {
margin: 0 0 24px 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--wp--preset--color--primary);
}
.wl-story-cover-intro {
margin: 1rem 0 2rem 0;
max-width: 36rem;
font-family: 'Manrope', sans-serif;
font-size: 1.3rem;
line-height: 1.8;
color: var(--wp--preset--color--on-surface-variant);
}
.wl-story-cover-intro a {
color: var(--wp--preset--color--primary);
text-decoration: underline;
}
.wl-story-cover-intro a:hover,
.wl-story-cover-intro a:focus-visible {
color: var(--wp--preset--color--primary-dark);
}
/* ----- Image column ------------------------------------------------------ */
.wl-story-cover-media {
flex: 1 1 45%;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media only screen and (min-width: 783px) {
.wl-story-cover-media {
gap: 2.5rem;
}
}
/* .wl-story-cover-tilt — wraps the (rotated) image + stat. Sibling
.wl-story-cover-milestones below stays upright because the rotation
is no longer on .wl-story-cover-media. */
.wl-story-cover-tilt {
position: relative;
width: 100%;
}
@media only screen and (min-width: 783px) {
.wl-story-cover-tilt {
transform: rotate(2deg);
}
}
.wl-story-cover-frame {
position: relative;
width: 100%;
aspect-ratio: 5 / 6;
overflow: hidden;
border-radius: var(--wp--custom--radius--lg);
box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.15);
background-color: var(--wp--preset--color--surface-container);
}
@media only screen and (max-width: 782px) {
.wl-story-cover-frame {
max-height: 400px;
}
}
.wl-story-cover-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Stat card — hidden on mobile (per reference design); on desktop sits at
the bottom-left, gently overlapping the image. The stat card rotates
with the image because it is positioned within .wl-story-cover-tilt. */
.wl-story-cover-stat {
display: none;
}
@media only screen and (min-width: 783px) {
.wl-story-cover-stat {
display: block;
position: absolute;
bottom: calc(-1 * var(--wp--preset--spacing--30));
left: calc(-1 * var(--wp--preset--spacing--30));
padding: var(--wp--preset--spacing--30);
background-color: var(--wp--preset--color--tertiary-fixed);
color: var(--wp--preset--color--on-tertiary-fixed);
border-radius: var(--wp--custom--radius--md);
box-shadow: var(--wp--custom--shadow--sm);
max-width: 60%;
}
}
.wl-story-cover-stat-value {
margin: 0 0 0.25rem 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.15;
color: inherit;
}
.wl-story-cover-stat-label {
margin: 0;
font-family: 'Manrope', sans-serif;
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
line-height: 1.3;
color: inherit;
opacity: 0.85;
}
/* ----- Milestones aside (frontend) ---------------------------------------
Card sits below the rotated image in .wl-story-cover-media. Stays upright.
Continuous timeline rail uses ::before on the ; dots are ::before on
each - with a 4px ring matching the card bg so they punch through the
rail visually. First/last dots use distinct colors to mark start and end.
----------------------------------------------------------------------- */
/* Scope box-sizing to the milestones subtree. Theme does not set
box-sizing globally, and width:100% block children with their own
padding overflow padded parents under content-box sizing. */
.wl-story-cover-milestones,
.wl-story-cover-milestones *,
.wl-story-cover-milestones *::before,
.wl-story-cover-milestones *::after {
box-sizing: border-box;
}
.wl-story-cover-milestones {
background-color: var(--wp--preset--color--surface-container-highest);
border-radius: var(--wp--custom--radius--lg);
padding: 1.5rem;
box-shadow: var(--wp--custom--shadow--sm);
}
@media only screen and (min-width: 783px) {
.wl-story-cover-milestones {
padding: 2rem;
}
}
.wl-story-cover-milestones-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.125rem;
font-weight: 700;
color: var(--wp--preset--color--primary);
text-transform: uppercase;
letter-spacing: -0.025em;
border-bottom: 1px solid var(--wp--preset--color--outline-variant);
padding-bottom: 1rem;
margin: 0 0 2rem 0;
}
.wl-story-cover-milestone-list {
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.wl-story-cover-milestone-list::before {
content: '';
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 2px;
background-color: var(--wp--preset--color--primary-container);
}
.wl-story-cover-milestone {
position: relative;
padding-left: 2rem;
margin: 0;
}
.wl-story-cover-milestone + .wl-story-cover-milestone {
margin-top: 2rem;
}
.wl-story-cover-milestone::before {
content: '';
position: absolute;
left: -7px;
top: 0;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: var(--wp--preset--color--secondary);
box-shadow: 0 0 0 4px var(--wp--preset--color--surface-container-highest);
}
.wl-story-cover-milestone:first-child::before {
background-color: var(--wp--preset--color--primary);
}
.wl-story-cover-milestone:last-child::before {
background-color: var(--wp--preset--color--tertiary-fixed);
}
.wl-story-cover-milestone-month {
display: block;
font-family: 'Manrope', sans-serif;
font-size: var(--wp--preset--font-size--small);
font-weight: 700;
color: var(--wp--preset--color--primary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.wl-story-cover-milestone-heading {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1rem;
font-weight: 700;
color: var(--wp--preset--color--on-surface);
margin: 0.25rem 0 0.25rem 0;
letter-spacing: -0.01em;
line-height: 1.3;
}
.wl-story-cover-milestone-body {
font-family: 'Manrope', sans-serif;
font-size: var(--wp--preset--font-size--small);
line-height: 1.6;
color: var(--wp--preset--color--on-surface-variant);
margin: 0;
}
/* CTA box at the bottom of the milestones aside. Hidden until the editor
sets ctaButtonUrl (PHP gates the button render). */
.wl-story-cover-milestones-cta {
margin-top: 2.5rem;
padding: 1.5rem;
background-color: var(--wp--preset--color--white);
border-radius: var(--wp--custom--radius--md);
}
.wl-story-cover-milestones-cta-heading {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1rem;
font-weight: 700;
color: var(--wp--preset--color--on-surface);
margin: 0 0 0.5rem 0;
}
.wl-story-cover-milestones-cta-text {
font-family: 'Manrope', sans-serif;
font-size: var(--wp--preset--font-size--small);
line-height: 1.6;
color: var(--wp--preset--color--on-surface-variant);
margin: 0 0 1rem 0;
}
.wl-story-cover-milestones-cta-button {
display: block;
width: 100%;
text-align: center;
padding: 0.75rem 1rem;
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--on-primary);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1rem;
font-weight: 700;
text-decoration: none;
border-radius: var(--wp--custom--radius--md);
transition: background-color var(--wp--custom--transition--fast) ease;
}
.wl-story-cover-milestones-cta-button:hover,
.wl-story-cover-milestones-cta-button:focus-visible {
background-color: var(--wp--preset--color--primary-dark);
color: var(--wp--preset--color--on-primary);
text-decoration: none;
}
/* ----- Editor styles ----------------------------------------------------- */
/* Editor preview mirrors the frontend three-level structure:
.wl-story-cover-editor (= section)
.wl-story-cover-editor-content (= content wrapper)
.wl-story-cover-editor-columns (= flex columns)
Rotation deliberately NOT applied in the editor so inline RichText cursors
and focus outlines stay axis-aligned with the page grid. */
.wl-story-cover-editor {
position: relative;
border: 1px dashed var(--wp--preset--color--outline-variant);
border-radius: var(--wp--custom--radius--md);
background-color: var(--wp--preset--color--surface);
}
.wl-story-cover-editor-content {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 40px 20px;
}
@media only screen and (min-width: 783px) {
.wl-story-cover-editor-content {
padding: 60px 32px;
}
}
.wl-story-cover-editor-columns {
display: flex;
flex-direction: column;
gap: 2rem;
}
@media only screen and (min-width: 783px) {
.wl-story-cover-editor-columns {
flex-direction: row;
align-items: flex-start;
gap: 3rem;
}
}
.wl-story-cover-editor-text {
display: flex;
flex-direction: column;
flex: 1 1 55%;
}
.wl-story-cover-editor-text > * {
display: block;
}
.wl-story-cover-editor-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
margin: 0 0 2.5rem 0;
border-radius: var(--wp--custom--radius--pill);
background-color: var(--wp--preset--color--secondary);
color: var(--wp--preset--color--on-secondary);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
line-height: 1.2;
width: fit-content;
}
.wl-story-cover-editor-headline {
margin: 0 0 24px 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--wp--preset--color--primary);
}
.wl-story-cover-editor-intro {
margin: 1rem 0 2rem 0;
max-width: 36rem;
font-family: 'Manrope', sans-serif;
font-size: 1.3rem;
line-height: 1.8;
color: var(--wp--preset--color--on-surface-variant);
}
.wl-story-cover-editor-media {
flex: 1 1 45%;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media only screen and (min-width: 783px) {
.wl-story-cover-editor-media {
gap: 2.5rem;
}
}
.wl-story-cover-editor-tilt {
position: relative;
width: 100%;
}
.wl-story-cover-editor-frame {
width: 100%;
aspect-ratio: 5 / 6;
overflow: hidden;
border-radius: var(--wp--custom--radius--lg);
box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.15);
background-color: var(--wp--preset--color--surface-container);
}
.wl-story-cover-editor-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.wl-story-cover-editor-img-placeholder {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.wl-story-cover-editor-stat {
margin-top: var(--wp--preset--spacing--20);
padding: var(--wp--preset--spacing--30);
background-color: var(--wp--preset--color--tertiary-fixed);
color: var(--wp--preset--color--on-tertiary-fixed);
border-radius: var(--wp--custom--radius--md);
}
@media only screen and (min-width: 783px) {
.wl-story-cover-editor-stat {
position: absolute;
bottom: calc(-1 * var(--wp--preset--spacing--30));
left: calc(-1 * var(--wp--preset--spacing--30));
margin-top: 0;
max-width: 60%;
box-shadow: var(--wp--custom--shadow--sm);
}
}
.wl-story-cover-editor-stat-value {
margin: 0 0 0.25rem 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.15;
color: inherit;
}
.wl-story-cover-editor-stat-label {
margin: 0;
font-family: 'Manrope', sans-serif;
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
line-height: 1.3;
color: inherit;
opacity: 0.85;
}
.wl-story-cover-editor-preview {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.wl-story-cover-editor-preview img {
border-radius: var(--wp--custom--radius--sm);
border: 1px solid var(--wp--preset--color--outline-variant);
}
/* ----- Milestones aside (editor mirror) -----
Same visual layout as the frontend, minus the rotation. Each milestone
item is editable inline (RichText fields) and gets a small Remove button.
An "Add milestone" button sits below the list. */
.wl-story-cover-editor-milestones,
.wl-story-cover-editor-milestones *,
.wl-story-cover-editor-milestones *::before,
.wl-story-cover-editor-milestones *::after {
box-sizing: border-box;
}
.wl-story-cover-editor-milestones {
background-color: var(--wp--preset--color--surface-container-highest);
border-radius: var(--wp--custom--radius--lg);
padding: 1.5rem;
box-shadow: var(--wp--custom--shadow--sm);
}
@media only screen and (min-width: 783px) {
.wl-story-cover-editor-milestones {
padding: 2rem;
}
}
.wl-story-cover-editor-milestones-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.125rem;
font-weight: 700;
color: var(--wp--preset--color--primary);
text-transform: uppercase;
letter-spacing: -0.025em;
border-bottom: 1px solid var(--wp--preset--color--outline-variant);
padding-bottom: 1rem;
margin: 0 0 2rem 0;
}
.wl-story-cover-editor-milestone-list {
position: relative;
list-style: none;
margin: 0 0 1rem 0;
padding: 0;
}
.wl-story-cover-editor-milestone-list::before {
content: '';
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 2px;
background-color: var(--wp--preset--color--primary-container);
}
.wl-story-cover-editor-milestone {
position: relative;
padding-left: 2rem;
margin: 0;
}
.wl-story-cover-editor-milestone + .wl-story-cover-editor-milestone {
margin-top: 2rem;
}
.wl-story-cover-editor-milestone::before {
content: '';
position: absolute;
left: -7px;
top: 0;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: var(--wp--preset--color--secondary);
box-shadow: 0 0 0 4px var(--wp--preset--color--surface-container-highest);
}
.wl-story-cover-editor-milestone:first-child::before {
background-color: var(--wp--preset--color--primary);
}
.wl-story-cover-editor-milestone:last-child::before {
background-color: var(--wp--preset--color--tertiary-fixed);
}
.wl-story-cover-editor-milestone-month {
display: block;
font-family: 'Manrope', sans-serif;
font-size: var(--wp--preset--font-size--small);
font-weight: 700;
color: var(--wp--preset--color--primary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.wl-story-cover-editor-milestone-heading {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1rem;
font-weight: 700;
color: var(--wp--preset--color--on-surface);
margin: 0.25rem 0 0.25rem 0;
letter-spacing: -0.01em;
line-height: 1.3;
}
.wl-story-cover-editor-milestone-body {
font-family: 'Manrope', sans-serif;
font-size: var(--wp--preset--font-size--small);
line-height: 1.6;
color: var(--wp--preset--color--on-surface-variant);
margin: 0;
}
.wl-story-cover-editor-milestone-remove {
margin-top: 0.25rem;
font-size: 11px !important;
}
.wl-story-cover-editor-milestone-add {
margin-top: 0.5rem;
}
.wl-story-cover-editor-milestones-cta {
margin-top: 2.5rem;
padding: 1.5rem;
background-color: var(--wp--preset--color--white);
border-radius: var(--wp--custom--radius--md);
}
.wl-story-cover-editor-milestones-cta-heading {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1rem;
font-weight: 700;
color: var(--wp--preset--color--on-surface);
margin: 0 0 0.5rem 0;
}
.wl-story-cover-editor-milestones-cta-text {
font-family: 'Manrope', sans-serif;
font-size: var(--wp--preset--font-size--small);
line-height: 1.6;
color: var(--wp--preset--color--on-surface-variant);
margin: 0 0 1rem 0;
}
.wl-story-cover-editor-milestones-cta-button {
display: block;
width: 100%;
text-align: center;
padding: 0.75rem 1rem;
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--on-primary);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1rem;
font-weight: 700;
border-radius: var(--wp--custom--radius--md);
}
/* ==========================================================================
Story Text Block (wl/story-text) — "Adoption Story Text"
Sets a consistent base font size so all paragraphs within the story
inherit the same size. Individual paragraphs flow naturally around
the floated story-cover image above.
========================================================================== */
.wl-story-text {
font-size: var(--wp--preset--font-size--medium);
}
/* ==========================================================================
Story Footer Block (wl/story-footer) — "Adoption Story Footer"
Full-bleed section. Constrained content wrapper matches wl/story-cover.
Inside: a primary-blue rounded card mirroring wl/team-member-connect
(heading, body, two CTA buttons).
========================================================================== */
/* Defensive box-sizing scope: theme does not set box-sizing globally,
and width:100% block children with their own padding overflow padded
parents under content-box sizing. */
.wl-story-footer,
.wl-story-footer *,
.wl-story-footer *::before,
.wl-story-footer *::after {
box-sizing: border-box;
}
/* Outer full-bleed section — alignfull breaks out of the constrained
post-content container the same way wl/story-cover does. */
.wl-story-footer {
width: 100%;
}
/* Constrained content wrapper — max-width 1280, mirrors padding of
.wl-story-cover-content (40/20 mobile, 64/32 desktop) so the footer
card aligns horizontally with the cover hero. */
.wl-story-footer-content {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 40px 20px;
}
@media only screen and (min-width: 783px) {
.wl-story-footer-content {
padding: 64px 32px;
}
}
/* Primary-blue rounded card — internal padding mirrors wl-tmp-connect
(2.5rem mobile, 5rem desktop). */
.wl-story-footer-card {
position: relative;
overflow: hidden;
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--on-primary);
border-radius: 0.75rem;
padding: 2.5rem;
}
@media only screen and (min-width: 783px) {
.wl-story-footer-card {
padding: 5rem;
}
}
.wl-story-footer-heading {
font-family: var(--wp--preset--font-family--heading);
font-size: clamp(1.75rem, 4vw, 3rem);
font-weight: 800;
line-height: 1.15;
color: var(--wp--preset--color--on-primary);
margin: 0 0 1.5rem 0;
}
.wl-story-footer-body {
font-family: var(--wp--preset--font-family--body);
font-size: 1.25rem;
line-height: 1.65;
color: var(--wp--preset--color--on-primary);
opacity: 0.9;
margin: 0 0 2.5rem 0;
}
.wl-story-footer-actions {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
align-items: center;
}
.wl-story-footer-cta-primary {
display: inline-flex;
padding: 1.25rem 2.5rem;
background-color: var(--wp--preset--color--secondary);
color: var(--wp--preset--color--on-secondary);
font-family: var(--wp--preset--font-family--body);
font-weight: 700;
font-size: 1rem;
border-radius: 1rem;
text-decoration: none;
transition: transform var(--wp--custom--transition--fast) ease;
}
.wl-story-footer-cta-primary:hover,
.wl-story-footer-cta-primary:focus-visible {
transform: scale(1.03);
color: var(--wp--preset--color--on-secondary);
text-decoration: none;
}
.wl-story-footer-cta-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1.25rem 2.5rem;
color: var(--wp--preset--color--on-primary);
font-family: var(--wp--preset--font-family--body);
font-weight: 700;
font-size: 1rem;
border: 2px solid var(--wp--preset--color--on-primary);
border-radius: 1rem;
text-decoration: none;
transition: background-color var(--wp--custom--transition--fast) ease,
color var(--wp--custom--transition--fast) ease,
transform var(--wp--custom--transition--fast) ease;
}
.wl-story-footer-cta-secondary:hover,
.wl-story-footer-cta-secondary:focus-visible {
background-color: var(--wp--preset--color--on-primary);
color: var(--wp--preset--color--primary);
transform: scale(1.03);
text-decoration: none;
}
/* ----- Editor mirror ------------------------------------------------------
Same visual layout as the frontend. Heading and body are inline RichText;
CTA buttons are static previews showing whatever text is set in the
Inspector. */
.wl-story-footer-editor,
.wl-story-footer-editor *,
.wl-story-footer-editor *::before,
.wl-story-footer-editor *::after {
box-sizing: border-box;
}
.wl-story-footer-editor {
width: 100%;
}
.wl-story-footer-editor-content {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 40px 20px;
}
@media only screen and (min-width: 783px) {
.wl-story-footer-editor-content {
padding: 64px 32px;
}
}
.wl-story-footer-editor-card {
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--on-primary);
border-radius: 0.75rem;
padding: 2.5rem;
}
@media only screen and (min-width: 783px) {
.wl-story-footer-editor-card {
padding: 5rem;
}
}
.wl-story-footer-editor-heading {
font-family: var(--wp--preset--font-family--heading);
font-size: clamp(1.75rem, 4vw, 3rem);
font-weight: 800;
line-height: 1.15;
color: var(--wp--preset--color--on-primary);
margin: 0 0 1.5rem 0;
}
.wl-story-footer-editor-body {
font-family: var(--wp--preset--font-family--body);
font-size: 1.25rem;
line-height: 1.65;
color: var(--wp--preset--color--on-primary);
opacity: 0.9;
margin: 0 0 2.5rem 0;
}
.wl-story-footer-editor-actions {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
align-items: center;
}
.wl-story-footer-editor-cta-primary {
display: inline-flex;
padding: 1.25rem 2.5rem;
background-color: var(--wp--preset--color--secondary);
color: var(--wp--preset--color--on-secondary);
font-family: var(--wp--preset--font-family--body);
font-weight: 700;
font-size: 1rem;
border-radius: 1rem;
}
.wl-story-footer-editor-cta-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1.25rem 2.5rem;
color: var(--wp--preset--color--on-primary);
font-family: var(--wp--preset--font-family--body);
font-weight: 700;
font-size: 1rem;
border: 2px solid var(--wp--preset--color--on-primary);
border-radius: 1rem;
}
/* ==========================================================================
Adoption Story TGF Template (page-adoption-story-tgf)
Hero cover with featured image, gradient overlay, badge, and title.
All visual styling lives here — the template HTML has no inline styles.
========================================================================== */
/* --- Hero wrapper (constrained group around the cover) --- */
.wl-story-tgf-hero-wrap {
margin-top: 0;
margin-bottom: 0;
padding: 0 var(--wp--preset--spacing--30);
background-color: var(--wp--preset--color--surface);
}
/* --- Hero cover --- */
.wl-story-tgf-hero {
overflow: hidden;
position: relative;
max-width: 820px;
height: 520px;
border-radius: var(--wp--custom--radius--lg);
padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
}
.wl-story-tgf-hero img.wp-block-cover__image-background {
object-fit: cover;
object-position: top center;
}
/* --- Badge pill --- */
.wl-story-tgf-badge {
display: inline-block;
background-color: var(--wp--preset--color--secondary);
color: var(--wp--preset--color--on-secondary);
padding: 4px 16px;
border-radius: var(--wp--custom--radius--pill);
margin: 0 0 12px;
font-family: var(--wp--preset--font-family--body);
font-size: 11px;
font-style: normal;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1.4;
}
/* --- Title (color + size via WP presets: has-white-color, has-huge-font-size) --- */
.wl-story-tgf-title {
max-width: 720px;
font-family: var(--wp--preset--font-family--heading);
font-size: 3.75rem;
line-height: 1.1;
font-style: normal;
font-weight: 800;
letter-spacing: -0.05em;
}
/* --- Content area below hero --- */
.wl-story-tgf-content {
margin-top: 0;
margin-bottom: 0;
padding-top: var(--wp--preset--spacing--40);
padding-bottom: var(--wp--preset--spacing--50);
background-color: var(--wp--preset--color--surface);
font-family: var(--wp--preset--font-family--body);
font-weight: 400;
font-size: 1.5rem;
line-height: 2rem;
color: var(--wp--preset--color--on-surface-variant);
}
.wl-story-tgf-content h1,
.wl-story-tgf-content h2,
.wl-story-tgf-content h3,
.wl-story-tgf-content h4,
.wl-story-tgf-content h5,
.wl-story-tgf-content h6 {
font-family: var(--wp--preset--font-family--body);
color: var(--wp--preset--color--primary);
}
/* --- Mobile: hero goes edge-to-edge, no border-radius --- */
@media only screen and (max-width: 782px) {
.wl-story-tgf-hero-wrap {
padding-left: 0;
padding-right: 0;
}
.wl-story-tgf-hero {
border-radius: 0;
height: 350px;
}
.wl-story-tgf-content {
padding-top: var(--wp--preset--spacing--30);
}
}
/* ==========================================================================
Humanitarian Insight Block (wl/humanitarian-insight)
Sidebar callout card for adoption story pages.
========================================================================== */
.wl-humanitarian-insight {
background-color: rgba(255, 221, 104, 0.30);
border: 1px solid var(--wp--preset--color--secondary);
border-radius: 16px;
padding: 28px;
font-family: var(--wp--preset--font-family--body);
}
.wl-humanitarian-insight-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.wl-humanitarian-insight-icon {
color: var(--wp--preset--color--on-secondary);
display: flex;
align-items: center;
flex-shrink: 0;
}
.wl-humanitarian-insight-title {
font-family: var(--wp--preset--font-family--body);
font-size: 1.25rem;
font-weight: 700;
color: var(--wp--preset--color--on-secondary);
margin: 0;
line-height: 1.3;
}
.wl-humanitarian-insight-text {
font-family: var(--wp--preset--font-family--body);
font-size: 0.95rem;
font-weight: 500;
line-height: 1.6;
color: var(--wp--preset--color--on-secondary);
margin: 0 0 20px;
}
.wl-humanitarian-insight-highlights {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.wl-humanitarian-insight-highlight {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.9rem;
font-weight: 600;
color: var(--wp--preset--color--on-surface);
}
.wl-humanitarian-insight-check {
color: var(--wp--preset--color--on-secondary);
display: flex;
align-items: center;
flex-shrink: 0;
margin-top: 1px;
}
/* ==========================================================================
Adoption Story TGF — Two-Column Layout
Pattern: wliaafse/adoption-story-tgf-layout
Left column (64%) for story text, right column (36%) for sidebar blocks.
On mobile, sidebar stacks below the story text.
========================================================================== */
.wl-story-tgf-columns {
gap: 40px !important;
}
/* --- Left column (story text) --- */
.wl-story-tgf-main {
min-width: 0;
}
/* --- Right column (sidebar blocks) --- */
.wl-story-tgf-sidebar {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Keep sidebar blocks from stretching beyond the column */
.wl-story-tgf-sidebar > * {
min-width: 0;
}
/* --- Mobile: single column, sidebar moves below --- */
@media only screen and (max-width: 782px) {
.wl-story-tgf-columns {
flex-direction: column !important;
gap: 32px !important;
}
.wl-story-tgf-columns .wp-block-column {
flex-basis: 100% !important;
}
}
/* ==========================================================================
Pillar Card Block — Our Story "Pillars of Our Promise"
========================================================================== */
.wl-pillar-card {
background-color: var(--wp--preset--color--white);
padding: 40px;
border-radius: var(--wp--custom--radius--lg);
box-shadow: var(--wp--custom--shadow--card);
transition: transform var(--wp--custom--transition--normal) ease;
}
.wl-pillar-card:hover {
transform: translateY(-4px);
}
/* Icon circle — shared base */
.wl-pillar-card__icon {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 32px;
}
.wl-pillar-card__icon svg {
display: block;
}
/* Color scheme: Primary (teal) */
.wl-pillar-card--primary .wl-pillar-card__icon {
background-color: var(--wp--preset--color--primary-container);
color: var(--wp--preset--color--primary);
}
/* Color scheme: Secondary (gold) */
.wl-pillar-card--secondary .wl-pillar-card__icon {
background-color: var(--wp--preset--color--secondary);
color: var(--wp--preset--color--on-secondary);
}
/* Color scheme: Tertiary (green) */
.wl-pillar-card--tertiary .wl-pillar-card__icon {
background-color: var(--wp--preset--color--tertiary-fixed);
color: var(--wp--preset--color--on-tertiary-fixed);
}
/* Heading */
.wl-pillar-card__heading {
font-family: var(--wp--preset--font-family--heading);
font-size: clamp(1.25rem, 1rem + 0.5vw, 1.5rem);
font-weight: 700;
color: var(--wp--preset--color--on-surface);
margin: 0 0 16px 0;
line-height: 1.3;
}
/* Body text */
.wl-pillar-card__body {
font-family: var(--wp--preset--font-family--body);
font-size: 1rem;
color: var(--wp--preset--color--on-surface-variant);
line-height: 1.7;
margin: 0;
}
/* Responsive: on mobile, cards stack via the core Columns block,
so we only adjust internal padding */
@media only screen and (max-width: 782px) {
.wl-pillar-card {
padding: 28px 24px;
}
}
/* ==========================================================================
Sticky footer — non-front pages
--------------------------------------------------------------------------
Pin the site footer to the bottom of the viewport when page content is
shorter than the screen. Lives in general.css so the front page (which
loads this file non-blocking in the footer) is not affected during the
critical render path. Front page content is always tall enough that
the rule has no visible effect there anyway.
100dvh accounts for mobile browser chrome (URL bar) on iOS/Android;
100vh is the fallback for older engines.
========================================================================== */
body {
min-height: 100vh;
min-height: 100dvh;
}
.wp-site-blocks {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
}
.wp-site-blocks > main {
flex: 1 0 auto;
}
/* ==========================================================================
Adoption Funding Block (page hero)
Block: wl/adoption-funding
Layout, constraints, and image sizing mirror wl/adoption-program-intro.
Self-contained — does NOT depend on /css/wl-adoption-programs.css.
Breakpoint: 782px (theme standard).
========================================================================== */
/* --- Buttons (self-contained, mirrors .wl-ap-btn) ---------------------- */
.wl-af-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.875rem 2rem;
border-radius: var(--wp--custom--radius--lg, 12px);
font-weight: 700;
font-size: 1.0625rem;
font-family: var(--wp--preset--font-family--heading, 'Plus Jakarta Sans', sans-serif);
text-decoration: none;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.wl-af-btn:hover {
transform: translateY(-1px);
}
.wl-af-btn:focus-visible {
outline: 3px solid var(--wp--preset--color--primary);
outline-offset: 3px;
}
.wl-af-btn-primary {
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--white);
box-shadow: 0 12px 32px rgba(0, 101, 141, 0.15);
}
.wl-af-btn-secondary {
background: var(--wp--preset--color--secondary);
color: var(--wp--preset--color--on-secondary);
}
/* --- Hero section ------------------------------------------------------ */
.wl-af-funding {
position: relative;
display: flex;
align-items: center;
min-height: 540px;
overflow: hidden;
}
.wl-af-funding-content {
position: relative;
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 64px 32px;
}
.wl-af-funding-columns {
display: flex;
align-items: center;
gap: 3rem;
}
.wl-af-funding-text {
flex: 1 1 55%;
display: flex;
flex-direction: column;
}
/* Without hero image, constrain text width. */
.wl-af-funding:not(.wl-af-funding--has-hero) .wl-af-funding-text {
max-width: 640px;
}
/* ---- Tagline ---- */
.wl-af-funding-tagline {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--wp--preset--color--tertiary-fixed);
color: var(--wp--preset--color--on-tertiary-fixed);
border-radius: var(--wp--custom--radius--pill, 9999px);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
width: fit-content;
font-family: var(--wp--preset--font-family--heading, 'Plus Jakarta Sans', sans-serif);
margin: 0 0 2.5rem 0;
}
/* ---- Heading ---- */
.wl-af-funding-heading {
font-family: var(--wp--preset--font-family--heading);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--wp--preset--color--on-surface);
margin: 0 0 24px;
}
.wl-af-funding-heading-accent {
color: var(--wp--preset--color--primary);
}
/* ---- Body text ---- */
.wl-af-funding-body {
font-size: 1.3rem;
line-height: 1.8;
color: var(--wp--preset--color--on-surface-variant);
max-width: 36rem;
margin: 1rem 0 2rem 0;
}
.wl-af-funding-body p {
margin: 0 0 1rem 0;
}
.wl-af-funding-body p:last-child {
margin-bottom: 0;
}
/* ---- CTAs ---- */
.wl-af-funding-ctas {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
/* ---- Hero image (right column) ---- */
.wl-af-funding-hero-wrap {
flex: 1 1 45%;
position: relative;
}
.wl-af-funding-hero-img {
width: 100%;
height: auto;
border-radius: var(--wp--custom--radius--lg, 12px);
aspect-ratio: 5 / 6;
object-fit: cover;
box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.15);
transform: rotate(2deg);
}
/* --- Responsive (≤782px) ---------------------------------------------- */
@media (max-width: 782px) {
.wl-af-funding {
min-height: auto;
}
.wl-af-funding-content {
padding: 40px 20px;
}
.wl-af-funding-columns {
flex-direction: column;
gap: 2rem;
}
.wl-af-funding-text,
.wl-af-funding-hero-wrap {
flex: 1 1 100%;
}
.wl-af-funding:not(.wl-af-funding--has-hero) .wl-af-funding-text {
max-width: none;
}
.wl-af-funding-hero-img {
transform: rotate(0deg);
max-height: 400px;
}
.wl-af-funding-ctas {
flex-direction: column;
}
.wl-af-funding-ctas .wl-af-btn {
width: 100%;
}
}
/* --- Editor-only preview helpers -------------------------------------- */
/* Heading accent inline preview (separate span in editor, combined in PHP). */
.wl-af-funding-heading-accent--editor {
display: inline;
color: var(--wp--preset--color--primary, #00678D);
font-family: var(--wp--preset--font-family--heading);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
}
/* Hero image placeholder (no image selected). */
.wl-af-funding-hero-placeholder {
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
background-color: var(--wp--preset--color--surface-container, #ECEEF2);
border-radius: var(--wp--custom--radius--lg, 12px);
border: 2px dashed var(--wp--preset--color--on-surface-variant, #70787F);
}
/* Heading wrap keeps h1 and accent span on same visual line in editor. */
.wl-af-funding-heading-wrap {
margin: 0 0 24px;
}
.wl-af-funding-heading-wrap .wl-af-funding-heading {
display: inline;
margin: 0;
}
/* ==========================================================================
Adoption Funding — Tax Credit Block
Block: wl/adoption-funding-tax-credit
White card centered on the page with decorative document/seal SVG (left)
and informational text (right). Block wrapper is align=full; the inner
card is constrained to 1080px and centered.
Self-contained — does NOT depend on /css/wl-adoption-programs.css.
Breakpoint: 782px (theme standard).
========================================================================== */
/* ---- Outer wrapper (full-bleed; provides vertical breathing room) --- */
.wl-aftc-section {
padding: 64px 24px;
}
/* ---- Card ------------------------------------------------------------ */
.wl-aftc-card {
max-width: 1080px;
margin: 0 auto;
padding: 64px 48px;
background: var(--wp--preset--color--white);
border-radius: var(--wp--custom--radius--lg, 12px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
box-sizing: border-box;
}
/* ---- Two-column layout (illustration + text) ------------------------- */
.wl-aftc-columns {
display: flex;
align-items: center;
gap: 3rem;
}
.wl-aftc-illustration {
flex: 0 0 38%;
max-width: 38%;
display: flex;
align-items: center;
justify-content: center;
}
.wl-aftc-svg {
width: 100%;
height: auto;
max-width: 320px;
display: block;
}
.wl-aftc-text {
flex: 1 1 62%;
min-width: 0;
}
/* ---- Typography ------------------------------------------------------ */
.wl-aftc-heading {
font-family: var(--wp--preset--font-family--heading);
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--wp--preset--color--on-surface);
margin: 0 0 1.5rem 0;
}
.wl-aftc-body {
font-size: 1.125rem;
line-height: 1.75;
color: var(--wp--preset--color--on-surface-variant);
}
.wl-aftc-body p {
margin: 0 0 1rem 0;
}
.wl-aftc-body p:last-child {
margin-bottom: 0;
}
/* ---- SVG colors (theme tokens, applied via class) -------------------- */
.wl-aftc-svg-page {
fill: var(--wp--preset--color--white, #ffffff);
stroke: var(--wp--preset--color--outline-variant);
stroke-width: 1;
}
.wl-aftc-svg-title {
fill: var(--wp--preset--color--primary);
}
.wl-aftc-svg-title-sub {
fill: var(--wp--preset--color--primary);
opacity: 0.5;
}
.wl-aftc-svg-lines rect {
fill: var(--wp--preset--color--on-surface-variant);
opacity: 0.35;
}
.wl-aftc-svg-ribbon {
fill: var(--wp--preset--color--primary);
}
.wl-aftc-svg-seal-outer {
fill: var(--wp--preset--color--primary);
}
.wl-aftc-svg-seal-inner {
fill: var(--wp--preset--color--tertiary-fixed);
}
.wl-aftc-svg-seal-star {
fill: var(--wp--preset--color--primary);
}
/* ---- Responsive (≤782px) -------------------------------------------- */
@media (max-width: 782px) {
.wl-aftc-section {
padding: 32px 16px;
}
.wl-aftc-card {
padding: 40px 24px;
}
.wl-aftc-columns {
flex-direction: column;
gap: 2rem;
}
.wl-aftc-illustration,
.wl-aftc-text {
flex: 1 1 100%;
max-width: 100%;
}
.wl-aftc-illustration {
max-width: 280px;
margin: 0 auto;
}
.wl-aftc-svg {
max-width: 280px;
}
.wl-aftc-heading {
font-size: clamp(1.5rem, 5vw, 2rem);
}
}
/* ==========================================================================
Newsletter form ([wlf_newsletter] shortcode)
--------------------------------------------------------------------------
DUPLICATE (documented §7.4 exception) — keep the .wlf-newsletter-* rules
below in sync with the identical rules in css/wl-frontpage.css.
Why duplicated: the [wlf_newsletter] form renders both inside the
front-page wl/fpm-newsletter block (styled by wl-frontpage.css, which
loads on the front page only) and via the shortcode on other pages
(styled here — wl-frontpage.css does not load off the front page).
wl-frontpage.css stays the single sheet on the front-page critical path;
general.css already loads render-blocking on every non-front page, so
this copy adds no request. If you edit one copy, edit the other.
NOTE: .wlf-hp-field (the honeypot) is intentionally NOT duplicated here.
general.css already defines .wlf-hp-field above (Contact Form Styles);
that rule also hides the newsletter honeypot on non-front pages. The
wl-frontpage.css copy keeps its own .wlf-hp-field for the front page.
========================================================================== */
.wlf-newsletter-form-wrap {
width: 100%;
}
.wlf-newsletter-message {
padding: 12px 16px;
border-radius: 6px;
margin-bottom: 1rem;
font-size: 0.9375rem;
line-height: 1.5;
}
.wlf-newsletter-success {
background-color: var(--wp--custom--status--success-bg);
color: var(--wp--custom--status--success-text);
border: 1px solid var(--wp--custom--status--success-border);
}
.wlf-newsletter-error {
background-color: var(--wp--custom--status--error-bg);
color: var(--wp--custom--status--error-text);
border: 1px solid var(--wp--custom--status--error-border);
}
.wlf-newsletter-form {
display: block;
}
/* Mobile default: stack the name + email fields vertically */
.wlf-newsletter-fields {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1rem;
}
.wlf-newsletter-field {
flex: 1;
display: flex;
flex-direction: column;
}
.wlf-newsletter-label {
font-family: var(--wp--preset--font-family--body);
font-weight: 600;
font-size: 0.875rem;
color: var(--wp--preset--color--on-surface, var(--wp--preset--color--on-surface));
margin-bottom: 0.375rem;
}
.wlf-newsletter-label .wlf-required {
color: var(--wp--custom--status--error-text);
margin-left: 2px;
}
.wlf-newsletter-input {
padding: 12px 16px;
border: 1px solid rgba(191, 199, 207, 0.6);
border-radius: var(--wp--custom--radius--md);
font-family: var(--wp--preset--font-family--body);
font-size: 0.9375rem;
color: var(--wp--preset--color--on-surface, var(--wp--preset--color--on-surface));
background: var(--wp--preset--color--white);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
width: 100%;
box-sizing: border-box;
}
.wlf-newsletter-input:focus {
outline: 2px solid transparent; /* visible in forced-colors / high-contrast mode */
border-color: var(--wp--preset--color--primary, var(--wp--preset--color--primary));
box-shadow: 0 0 0 3px rgba(0, 103, 141, 0.15);
}
.wlf-newsletter-input::placeholder {
color: rgba(64, 72, 78, 0.5);
}
.wlf-newsletter-submit-wrap {
margin-bottom: 0.75rem;
}
/* Mobile default: full-width centered submit */
.wlf-newsletter-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--wp--preset--color--primary, var(--wp--preset--color--primary));
color: var(--wp--preset--color--white);
font-family: var(--wp--preset--font-family--body);
font-weight: 700;
font-size: 16px;
padding: 14px 32px;
border-radius: var(--wp--custom--radius--md);
border: none;
cursor: pointer;
text-decoration: none;
transition: background-color 0.2s ease;
width: 100%;
}
.wlf-newsletter-submit:hover {
background-color: var(--wp--preset--color--primary-dark);
}
.wlf-newsletter-submit:focus-visible {
outline: 3px solid var(--wp--preset--color--primary, var(--wp--preset--color--primary));
outline-offset: 3px;
}
.wlf-newsletter-submit:disabled {
opacity: 0.65;
cursor: not-allowed;
}
.wlf-newsletter-privacy-note {
font-family: var(--wp--preset--font-family--body);
font-size: 0.8125rem;
font-style: italic;
color: var(--wp--preset--color--on-surface-variant, var(--wp--preset--color--on-surface-variant));
margin: 0;
line-height: 1.4;
}
/* ── Tablet / Desktop (≥ 783px) ── */
@media (min-width: 783px) {
.wlf-newsletter-fields {
flex-direction: row;
gap: 1rem;
}
.wlf-newsletter-submit {
width: auto;
justify-content: normal;
}
}