/* ============================================================================
* CSS VARIABLES/DESIGN TOKENS POLICY
* All CSS variables MUST be defined in 01-foundation.css ONLY
* Do not define new variables in this file - add them to foundation
* ============================================================================ */
/**
* Base Card System - Core Card Components & Common Types
*
* ============================================================================
* ITCSS LAYER: CARDS BASE (06)
* ============================================================================
*
* This layer contains the core card system and most common card types including:
* - Card system variables extending the foundation layer
* - Base .card class and core functionality (display, structure, spacing)
* - Generic card components (.card-image, .card-body, .card-title, etc.)
* - Card style modifiers (.card-minimal, .card-elevated, .card-outlined, etc.)
* - Card size modifiers (.card-sm, .card-lg, .card-xl)
* - Card overlay patterns for clickable cards
* - Card states (loading, disabled, clickable, selected, etc.)
* - Common card types: Info, Review cards
* - Content utilities (truncation, spacing modifiers)
* - Stats cards and metrics display
* - Card layout and responsive utilities
* - Accessibility enhancements and print styles
*
* CONSOLIDATED FROM:
* - assets/css/cards.css (Complete card system with base functionality)
* - assets/css/cards-info.css (Info cards with gradient styling)
* - assets/css/cards-blog.css (Featured cards, blog content utilities)
* - assets/css/cards-review.css (Review cards with Google reviews integration)
*
* LOAD ORDER: Sixth (after Foundation, Utilities, Typography, Interactive, Layout)
* DEPENDENCIES: Previous layers (uses variables, utilities, and layout)
* DEPENDENTS: Specialized card layer and page templates build upon this system
*/
/* ============================================================================
* CARD SYSTEM VARIABLES
* ============================================================================ */
/* All card variables moved to 01-foundation.css per consolidation policy */
/* ============================================================================
* BASE CARD CLASS - CORE FUNCTIONALITY
* ============================================================================ */
/* Base card - consolidated with default card properties from all card types */
body.theme-pt .card {
position: relative;
display: flex;
flex-direction: column;
background: var(--card-bg);
border-radius: var(--card-radius);
overflow: hidden;
word-wrap: break-word;
border: 1px solid var(--color-border-primary);
padding: 0;
box-shadow: var(--card-shadow);
margin-bottom: var(--card-margin-bottom);
height: 100%;
}
/* Consolidated hover effects for all clickable cards */
body.theme-pt .card.card-clickable:hover {
box-shadow: var(--card-shadow-hover);
border: 1px solid var(--accent-color-transparent);
}
/* ============================================================================
* GENERIC CARD COMPONENTS
* ============================================================================ */
/* Card Image */
body.theme-pt .card .card-image {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
margin: 0;
margin-bottom: 0;
padding: var(--card-image-padding);
}
body.theme-pt .card .card-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
border-radius: 0;
padding: 0;
margin: 0;
border: none;
}
/* Card Body - Enhanced with universal footer alignment */
body.theme-pt .card .card-body {
padding: var(--card-padding);
background: var(--card-bg);
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Card Content - Universal expandable content area for sophisticated footer alignment */
body.theme-pt .card .card-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
}
/* Card Title */
body.theme-pt .card .card-body h3,
body.theme-pt .card .card-title {
font-size: var(--heading-size-h3);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-sm);
color: var(--heading-color-primary);
line-height: var(--heading-line-height-h3);
}
body.theme-pt .card .card-body h3 a,
body.theme-pt .card .card-title a {
color: var(--color-primary);
text-decoration: none;
}
body.theme-pt .card .card-body h3 a:hover,
body.theme-pt .card .card-title a:hover {
color: var(--color-accent);
text-decoration: underline;
}
/* Card Text */
body.theme-pt .card .card-body p,
body.theme-pt .card .card-text {
color: var(--color-text-primary);
line-height: var(--body-line-height-secondary);
margin-bottom: var(--space-lg);
font-size: var(--body-text-secondary);
}
/* Card Meta */
body.theme-pt .card .card-meta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
font-size: var(--body-text-small);
color: var(--card-text-muted);
margin-bottom: var(--card-margin-bottom-lg);
line-height: var(--body-line-height-small);
}
body.theme-pt .card .card-meta h6 {
margin: 0;
font-size: var(--body-text-small);
color: var(--card-text-muted);
font-weight: var(--font-weight-normal);
line-height: var(--body-line-height-small);
}
/* Short Intro Text */
body.theme-pt .card .shortIntro {
color: var(--color-text-primary);
line-height: var(--body-line-height-secondary);
margin-bottom: var(--space-lg);
font-size: var(--body-text-secondary);
flex-grow: 1;
}
/* Card Links */
body.theme-pt .card .btn-link {
color: var(--primary-color);
text-decoration: none;
font-weight: var(--font-weight-medium);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
body.theme-pt .card .btn-link:hover {
color: var(--primary-color);
text-decoration: none;
}
body.theme-pt .card .btn-link img {
width: var(--card-icon-size-sm);
height: var(--card-icon-size-sm);
aspect-ratio: auto;
}
/* Safer HR styling for card-body only */
body.theme-pt .card .card-body > hr:last-child {
margin-top: auto;
margin-bottom: var(--space-xl);
border-color: var(--color-border-primary);
opacity: 1;
width: 100%;
min-height: 1px;
}
/* Card footer HR without auto top margin */
body.theme-pt .card .card-footer hr {
margin-top: 0;
margin-bottom: var(--space-xl);
border-color: var(--color-border-primary);
opacity: 1;
width: 100%;
min-height: 1px;
}
/* ============================================================================
* CARD STYLE MODIFIERS
* ============================================================================ */
/* Minimal Card - Clean minimal styling */
body.theme-pt .card.card-minimal {
box-shadow: none;
border: none;
padding: 0;
margin-bottom: var(--card-margin-bottom);
}
body.theme-pt .card.card-minimal:hover {
box-shadow: none;
border: none;
}
/* Elevated Card - Enhanced shadows and hover effects */
body.theme-pt .card.card-elevated {
box-shadow: var(--card-shadow-lg);
border: none;
padding: var(--card-padding);
margin-bottom: var(--card-margin-bottom-lg); /* Uses larger margin for larger shadow */
}
body.theme-pt .card.card-elevated:hover {
box-shadow: var(--card-shadow-xl);
}
/* Outlined Card - Border focus */
body.theme-pt .card.card-outlined {
background: transparent;
border: var(--border-width-interactive) solid var(--card-border-color);
box-shadow: none;
padding: var(--card-padding);
margin-bottom: var(--card-margin-bottom);
}
body.theme-pt .card.card-outlined:hover {
border-color: var(--primary-color);
box-shadow: none;
}
/* Flat Card - Subtle styling */
body.theme-pt .card.card-flat {
box-shadow: none;
border: var(--border-width-structural) solid var(--card-border-color);
padding: var(--card-padding);
margin-bottom: var(--card-margin-bottom-sm); /* Pre-allocate space for hover shadow */
}
body.theme-pt .card.card-flat:hover {
box-shadow: var(--card-shadow-sm);
}
/* Padded Card - Explicit padding variant */
body.theme-pt .card.card-padded {
padding: var(--card-padding);
margin-bottom: var(--card-margin-bottom);
}
/* ============================================================================
* CARD SIZE MODIFIERS
* ============================================================================ */
/* Small Card */
body.theme-pt .card.card-sm {
padding: var(--card-padding-sm);
border-radius: var(--card-radius-sm);
}
body.theme-pt .card.card-sm .card-body {
padding: var(--card-padding-sm);
}
body.theme-pt .card.card-sm .card-title {
font-size: var(--font-size-lg);
}
/* Large Card */
body.theme-pt .card.card-lg {
padding: var(--card-padding-lg);
border-radius: var(--card-radius-lg);
}
body.theme-pt .card.card-lg .card-body {
padding: var(--card-padding-lg);
}
body.theme-pt .card.card-lg .card-title {
font-size: var(--font-size-2xl);
}
/* Extra Large Card */
body.theme-pt .card.card-xl {
padding: var(--card-padding-xl);
border-radius: var(--card-radius-xl);
}
body.theme-pt .card.card-xl .card-body {
padding: var(--card-padding-xl);
}
/* ============================================================================
* CARD LAYOUT MODIFIERS - ORIENTATION CONTROL
* ============================================================================ */
/*
* Enhanced Footer Alignment System
*
* The card system now includes universal footer alignment capabilities:
* - .card-body uses flex: 1 1 auto to expand within card container
* - .card-content provides expandable content area within card-body
* - .card-footer uses flex-shrink: 0 and margin-top: auto for sticky footer behavior
*
* This system works with all card types and ensures consistent footer positioning
* regardless of content length, extracted from the sophisticated card-team-profile pattern.
*/
/* Enhanced Card Vertical - Universal vertical card base */
body.theme-pt .card.card-vertical {
display: flex;
flex-direction: column;
height: 100%;
}
body.theme-pt .card.card-vertical .card-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
body.theme-pt .card.card-vertical .card-image {
flex-shrink: 0;
height: auto;
aspect-ratio: var(--card-image-aspect-natural, 16/10);
overflow: hidden;
}
/* Content-specific aspect ratio support for card-vertical images */
body.theme-pt .card.card-vertical .card-image.card-image-blog {
aspect-ratio: var(--card-image-aspect-blog, 4/5);
}
body.theme-pt .card.card-vertical .card-image.card-image-people {
aspect-ratio: var(--card-image-aspect-people, 1/1);
}
body.theme-pt .card.card-vertical .card-image.card-image-properties {
aspect-ratio: var(--card-image-aspect-properties, 3/2);
}
body.theme-pt .card.card-vertical .card-image.card-image-ellis {
aspect-ratio: var(--card-image-aspect-ellis, 16/9);
}
body.theme-pt .card.card-vertical .card-image.card-image-cities {
aspect-ratio: var(--card-image-aspect-cities, 16/9);
}
/* Fallback support for older browsers */
@supports not (aspect-ratio: 1) {
body.theme-pt .card.card-vertical .card-image {
height: calc(100vw * 10 / 16); /* 16:10 fallback */
max-height: var(--card-vertical-image-height);
}
body.theme-pt .card.card-vertical .card-image.card-image-blog {
height: calc(100vw * 5 / 4); /* 4:5 fallback */
}
body.theme-pt .card.card-vertical .card-image.card-image-people {
height: calc(100vw * 1 / 1); /* 1:1 fallback */
}
body.theme-pt .card.card-vertical .card-image.card-image-properties {
height: calc(100vw * 2 / 3); /* 3:2 fallback */
}
body.theme-pt .card.card-vertical .card-image.card-image-ellis {
height: calc(100vw * 9 / 16); /* 16:9 fallback */
}
body.theme-pt .card.card-vertical .card-image.card-image-cities {
height: calc(100vw * 9 / 16); /* 16:9 fallback */
}
/* Responsive adjustments for fallback */
@media (min-width: 768px) {
body.theme-pt .card.card-vertical .card-image {
height: calc(25vw * 10 / 16); /* Adjust for grid layout */
}
body.theme-pt .card.card-vertical .card-image.card-image-blog {
height: calc(25vw * 5 / 4);
}
body.theme-pt .card.card-vertical .card-image.card-image-people {
height: calc(25vw * 1 / 1);
}
body.theme-pt .card.card-vertical .card-image.card-image-properties {
height: calc(25vw * 2 / 3);
}
body.theme-pt .card.card-vertical .card-image.card-image-ellis {
height: calc(25vw * 9 / 16);
}
body.theme-pt .card.card-vertical .card-image.card-image-cities {
height: calc(25vw * 9 / 16);
}
}
}
body.theme-pt .card.card-vertical .card-content {
flex: 1 1 auto;
}
body.theme-pt .card.card-vertical .card-footer {
flex-shrink: 0;
margin-top: auto;
padding-top: var(--card-padding);
padding-bottom: 0;
}
/* Remove bottom margin from p elements in vertical card footers */
body.theme-pt .card.card-vertical .card-footer p {
margin-bottom: 0;
}
/* Remove bottom margin from card-text in vertical cards */
body.theme-pt .card.card-vertical .card-text {
margin-bottom: 0;
}
/* Bootstrap flex utility integration for card-vertical */
body.theme-pt .card.card-vertical .d-flex {
display: flex !important;
}
body.theme-pt .card.card-vertical .justify-content-between {
justify-content: space-between !important;
}
body.theme-pt .card.card-vertical .align-items-center {
align-items: center !important;
}
/* Card Horizontal Layout - Bootstrap grid compatible */
body.theme-pt .card.card-horizontal {
align-items: stretch;
}
body.theme-pt .card.card-horizontal .card-image {
width: 100%;
height: auto;
max-height: none;
}
body.theme-pt .card.card-horizontal .card-body {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 30px !important;
}
/* Contact info horizontal layout for all card-horizontal cards */
body.theme-pt .card.card-horizontal .contact-info {
display: flex;
flex-direction: row;
gap: var(--space-lg);
align-items: center;
flex-wrap: wrap;
}
/* Ensure cinfo items stay together */
body.theme-pt .card.card-horizontal .contact-info .cinfo {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-shrink: 0;
}
/* Icon sizing within horizontal cards */
body.theme-pt .card.card-horizontal .contact-info .cinfo img {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Responsive horizontal cards - stack vertically on mobile */
@media (max-width: 767.98px) {
body.theme-pt .card.card-horizontal {
flex-direction: column;
}
body.theme-pt .card.card-horizontal .card-image {
flex: 0 0 auto;
width: 100%;
height: auto;
position: relative;
overflow: hidden;
}
body.theme-pt .card.card-horizontal .card-body {
flex: 1 1 auto;
width: 100%;
}
/* Stack contact info vertically on mobile */
body.theme-pt .card.card-horizontal .contact-info {
flex-direction: column;
align-items: flex-start;
gap: var(--space-sm);
}
}
/* ============================================================================
* CARD OVERLAY PATTERN FOR CLICKABLE CARDS
* ============================================================================ */
/* Make clickable cards position relative for overlay */
body.theme-pt .card-clickable {
position: relative;
cursor: pointer;
}
/* Invisible overlay link that covers entire card */
body.theme-pt .card-link-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-index-card-overlay);
text-decoration: none;
/* Make it invisible but clickable */
opacity: 0;
display: block;
}
/* Buttons sit above the overlay */
body.theme-pt .card.card-clickable .btn {
position: relative !important;
z-index: var(--z-index-card-focus);
}
/* Legacy contact-link styles (deprecated - use .btn classes instead) */
body.theme-pt .card-clickable .contact-link {
position: relative;
z-index: 2;
color: var(--color-text-primary);
text-decoration: none;
cursor: pointer;
display: inline-block;
}
body.theme-pt .card-clickable .contact-link:hover {
color: var(--primary-color);
text-decoration: underline;
}
/* Ensure all card content except links are below overlay */
body.theme-pt .card-clickable .card-image,
body.theme-pt .card-clickable .card-body > *:not(.contact-info) {
position: relative;
z-index: 0;
}
/* Contact info needs higher z-index for links to work */
body.theme-pt .card-clickable .contact-info {
position: relative;
z-index: var(--z-index-card-interactive);
}
body.theme-pt .card-clickable .contact-info a {
position: relative;
z-index: var(--z-index-card-focus);
}
/* Ensure all interactive elements in cards are clickable */
body.theme-pt .card-clickable button,
body.theme-pt .card-clickable .btn,
body.theme-pt .card-clickable a.btn,
body.theme-pt .card-clickable input[type="button"],
body.theme-pt .card-clickable input[type="submit"] {
position: relative;
z-index: var(--z-index-card-focus);
}
/* ============================================================================
* CARD LINK WRAPPER STYLES
* ============================================================================ */
/* Card Link - No underline or color change on hover */
body.theme-pt .card-link {
color: inherit;
text-decoration: none;
}
body.theme-pt .card-link:hover {
color: inherit;
text-decoration: none;
}
body.theme-pt .card-link:focus {
outline: none;
}
/* ============================================================================
* TYPE-SPECIFIC CARD DEPRECATION NOTICE
* Type-specific card classes (card-blog, card-ellis-presents, card-team, etc.)
* are deprecated in favor of the unified base system with layout modifiers
* (card-vertical, etc.) and content utilities (card--truncate-3, card--compact).
* ============================================================================ */
/* When tag is used as card wrapper OR div with overlay - Override global a:hover styles */
body.theme-pt a.card,
body.theme-pt a.card.card-clickable,
body.theme-pt div.card.card-clickable {
color: inherit;
text-decoration: none;
border: 1px solid var(--color-border-primary);
cursor: pointer;
}
body.theme-pt a.card:hover,
body.theme-pt a.card.card-clickable:hover,
body.theme-pt div.card.card-clickable:hover {
color: inherit;
text-decoration: none;
border: 1px solid var(--accent-color-transparent);
border-bottom: 1px solid var(--accent-color-transparent);
}
body.theme-pt a.card:focus,
body.theme-pt a.card.card-clickable:focus {
outline: none;
}
/* Ensure specific text elements inside card links maintain consistent color */
body.theme-pt a.card .card-text,
body.theme-pt a.card .card-meta,
body.theme-pt a.card .shortIntro,
body.theme-pt a.card p,
body.theme-pt a.card .btn-link,
body.theme-pt a.card.card-clickable .card-text,
body.theme-pt a.card.card-clickable .card-meta,
body.theme-pt a.card.card-clickable .shortIntro,
body.theme-pt a.card.card-clickable p,
body.theme-pt a.card.card-clickable .btn-link {
color: inherit;
text-decoration: none;
}
/* Override for card titles to use primary color */
body.theme-pt a.card .card-title,
body.theme-pt a.card h3.card-title,
body.theme-pt a.card h3,
body.theme-pt a.card.card-clickable .card-title,
body.theme-pt a.card.card-clickable h3.card-title,
body.theme-pt a.card.card-clickable h3 {
color: var(--color-primary);
}
/* ============================================================================
* CARD STATES
* ============================================================================ */
/* Loading State */
body.theme-pt .card-loading {
position: relative;
pointer-events: none;
opacity: 0.7;
}
body.theme-pt .card-loading::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: var(--border-width-emphasis) solid var(--color-border-primary);
border-top-color: var(--color-primary);
border-radius: 50%;
z-index: 10;
}
/* Disabled State */
body.theme-pt .card-disabled {
opacity: 0.5;
pointer-events: none;
filter: grayscale(100%);
cursor: not-allowed;
}
body.theme-pt .card-disabled .card-body {
color: var(--color-text-muted);
}
body.theme-pt .card-disabled .card-title {
color: var(--color-text-muted);
}
/* Clickable State */
body.theme-pt .card-clickable {
cursor: pointer;
}
body.theme-pt .card-clickable:hover {
box-shadow: var(--card-shadow-hover);
border: 1px solid var(--accent-color-transparent);
}
/* Selected State */
body.theme-pt .card-selected {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px var(--color-primary-transparent);
}
/* ============================================================================
* INFO CARD TYPE
* ============================================================================ */
body.theme-pt .card.card-info {
background: var(--card-info-gradient);
color: white;
border: none;
}
body.theme-pt .card.card-info .card-text,
body.theme-pt .card.card-info .card-title {
color: white;
}
/* ============================================================================
* CARD CONTENT UTILITIES & MODIFIERS
* ============================================================================ */
/* Text Truncation Utilities */
body.theme-pt .card--truncate-3 .card-text {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
}
body.theme-pt .card--truncate-2 .card-text {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Compact Card Modifier - Reduced spacing throughout */
body.theme-pt .card--compact .card-body {
padding: var(--space-lg);
}
body.theme-pt .card--compact .card-title {
margin-bottom: var(--space-sm);
}
body.theme-pt .card--compact .card-text,
body.theme-pt .card--compact .shortIntro {
margin-bottom: var(--space-sm);
}
body.theme-pt .card--compact .shortIntro p {
margin-bottom: var(--space-xs);
line-height: var(--body-line-height-secondary);
}
body.theme-pt .card--compact .card-body hr {
margin-top: 0;
margin-bottom: var(--space-sm);
}
/* Title Height Utilities */
body.theme-pt .card--title-fixed .card-title {
min-height: 56px;
font-size: var(--card-subtitle-size);
line-height: 1.15;
}
/* ============================================================================
* FEATURED CARD TYPE
* ============================================================================ */
/* Featured Card - Horizontal layout for featured articles */
body.theme-pt .card.card-featured {
background: var(--card-bg);
border: 1px solid var(--color-border-primary);
box-shadow: var(--card-shadow-lg);
border-radius: var(--card-radius);
padding: 0;
overflow: hidden;
}
/* Remove Bootstrap gutters from featured card columns */
body.theme-pt .card.card-featured .row > * {
padding-right: 0;
padding-left: 0;
}
/* Featured card image - extends to edges like horizontal card */
body.theme-pt .card.card-featured .card-image {
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
height: 100%; /* Fill card height from top to bottom borders */
min-height: 300px; /* Ensure minimum height for good proportions */
}
body.theme-pt .card.card-featured .card-image img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
/* Featured card body */
body.theme-pt .card.card-featured .card-body {
padding: var(--card-padding-lg);
display: flex;
flex-direction: column;
justify-content: center;
}
/* Badge styling for featured cards */
body.theme-pt .card.card-featured .badge {
font-size: var(--badge-font-size);
padding: var(--badge-padding-vertical) var(--badge-padding-horizontal);
font-weight: var(--badge-font-weight);
border-radius: var(--badge-border-radius);
}
body.theme-pt .card.card-featured .badge.bg-primary {
background-color: var(--badge-primary) !important;
color: var(--badge-text-color) !important;
border: none;
}
body.theme-pt .card.card-featured .badge.bg-secondary {
background-color: var(--badge-secondary) !important;
color: var(--badge-text-color) !important;
border: none;
}
/* Category-specific badge colors */
body.theme-pt .badge.badge-category.badge-buyer-questions {
background-color: var(--badge-buyer-questions) !important;
color: var(--badge-text-color) !important;
border: none;
}
body.theme-pt .badge.badge-category.badge-seller-questions {
background-color: var(--badge-seller-questions) !important;
color: var(--badge-text-color) !important;
border: none;
}
/* Override bg-secondary for category badges in featured card */
body.theme-pt .card.card-featured .badge.bg-secondary.badge-buyer-questions {
background-color: var(--badge-buyer-questions) !important;
color: var(--badge-text-color) !important;
border: none;
}
body.theme-pt .card.card-featured .badge.bg-secondary.badge-seller-questions {
background-color: var(--badge-seller-questions) !important;
color: var(--badge-text-color) !important;
border: none;
}
/* ============================================================================
* REVIEW CARD TYPE
* ============================================================================ */
body.theme-pt .card.card-review,
body.theme-pt .reviews .grw-review {
position: relative;
}
body.theme-pt .reviews .grw-review-inner {
background: var(--card-bg);
border: none;
border-radius: var(--card-radius);
padding: var(--card-padding);
display: flex;
flex-direction: column;
height: 100%;
flex: 1;
}
body.theme-pt .card.card-review .review-author,
body.theme-pt .reviews .wp-google-left {
display: flex;
align-items: flex-start;
margin-bottom: var(--card-gap);
line-height: 1;
}
body.theme-pt .card.card-review .review-avatar,
body.theme-pt .reviews .grw-review-avatar {
border-radius: 50%;
width: 50px;
height: 50px;
margin-right: var(--space-sm);
flex-shrink: 0;
object-fit: cover;
}
body.theme-pt .card.card-review .review-name,
body.theme-pt .reviews .wp-google-name {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
text-decoration: none;
display: block;
margin-bottom: var(--space-xs);
}
body.theme-pt .reviews .grw-review .grw-review-inner .wp-google-left a.wp-google-name,
body.theme-pt .reviews .grw-review .wp-google-left a.wp-google-name,
body.theme-pt .reviews .grw-review a.wp-google-name,
body.theme-pt .reviews .grw-reviews .grw-review .wp-google-name,
body.theme-pt section.reviews .grw-review .wp-google-left a.wp-google-name {
font-size: 20px !important;
font-weight: 600 !important;
margin: 0 0 var(--space-xs) 0 !important;
color: var(--color-primary) !important;
display: block !important;
}
body.theme-pt .card.card-review .review-name:hover,
body.theme-pt .reviews .wp-google-name:hover {
color: var(--color-accent);
text-decoration: underline;
}
body.theme-pt .card.card-review .review-time,
body.theme-pt .reviews .wp-google-time {
font-size: var(--font-size-sm);
color: var(--card-text-muted);
margin-bottom: var(--space-sm);
line-height: var(--line-height-normal);
}
body.theme-pt .card.card-review .review-stars,
body.theme-pt .reviews .wp-google-stars {
margin-bottom: var(--space-sm);
}
body.theme-pt .card.card-review .review-stars svg,
body.theme-pt .reviews .wp-star svg {
fill: #ffd700;
width: var(--font-size-lg);
height: var(--font-size-lg);
margin-right: var(--space-xs);
}
body.theme-pt .card.card-review .review-text,
body.theme-pt .reviews .wp-google-feedback {
flex-grow: 1;
margin-bottom: var(--card-gap);
}
body.theme-pt .card.card-review .review-text p,
body.theme-pt .reviews .wp-google-text {
color: var(--card-text-muted);
line-height: var(--card-text-line-height);
font-size: var(--card-text-size);
margin: 0;
}
body.theme-pt .card.card-review .read-more,
body.theme-pt .reviews .wp-more-toggle {
cursor: pointer;
color: var(--color-primary);
font-weight: var(--font-weight-medium);
display: inline-block;
margin-left: var(--space-xs);
}
body.theme-pt .card.card-review .read-more:hover,
body.theme-pt .reviews .wp-more-toggle:hover {
color: var(--color-accent);
text-decoration: underline;
}
body.theme-pt .card.card-review .card-footer {
margin-top: auto;
padding-top: var(--card-gap);
border-top: 1px solid var(--card-border-color);
display: flex;
align-items: center;
justify-content: flex-end;
}
body.theme-pt .card.card-review .review-source svg,
body.theme-pt .reviews .grw-review-inner > svg:last-child {
width: var(--font-size-lg);
height: var(--font-size-lg);
fill: currentColor;
opacity: 0.6;
}
/* Review Grid Layout */
body.theme-pt .reviews .grw-reviews {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(var(--card-grid-min-width), 1fr)) !important;
gap: var(--card-gap-lg) !important;
overflow: visible !important;
}
body.theme-pt .reviews .grw-review {
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
body.theme-pt .reviews .grw-review-inner {
box-shadow: var(--card-shadow) !important;
border: 1px solid var(--color-border-primary) !important;
}
body.theme-pt .reviews .grw-review-inner:hover {
box-shadow: 4px 4px 10px rgba(248, 87, 87, 0.2) !important;
}
body.theme-pt .reviews .wp-gr .grw-review-inner.grw-backgnd.grw-round {
box-shadow: var(--card-shadow) !important;
border: 1px solid var(--color-border-primary) !important;
}
body.theme-pt .reviews .wp-gr.wpac .grw-reviews .grw-review .grw-review-inner.grw-backgnd.grw-round {
box-shadow: var(--card-shadow) !important;
border: 1px solid var(--color-border-primary) !important;
}
body.theme-pt .reviews .wp-google-feedback {
max-height: none !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
flex-grow: 1 !important;
height: auto !important;
}
body.theme-pt .reviews .wp-google-feedback .wp-google-text {
color: var(--card-text-muted) !important;
margin: 0 0 1rem 0 !important;
font-size: inherit !important;
line-height: 1.6 !important;
max-height: none !important;
overflow: visible !important;
display: block !important;
height: auto !important;
white-space: normal !important;
word-wrap: break-word !important;
}
/* ============================================================================
* STATS CARDS
* ============================================================================ */
/* Stats Card Base */
body.theme-pt .card-stats {
text-align: center;
padding: var(--space-xl);
background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
border: none;
box-shadow: var(--card-shadow);
border-radius: var(--card-radius);
}
/* Individual stat item spacing */
body.theme-pt .card-stats .row > div {
margin-bottom: var(--space-md);
}
body.theme-pt .card-stats .stats-icon {
font-size: 3rem;
color: var(--color-primary);
margin-bottom: var(--space-md);
display: block;
}
body.theme-pt .card-stats .stats-number {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: var(--font-weight-bold);
color: var(--color-accent);
margin-bottom: var(--space-xs);
line-height: var(--heading-line-height-tight);
display: block;
}
body.theme-pt .card-stats .stats-label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: var(--font-weight-semibold);
line-height: 1.4;
margin-bottom: var(--space-lg);
}
body.theme-pt .card-stats .stats-change {
font-size: var(--font-size-xs);
margin-top: var(--space-xs);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
}
body.theme-pt .card-stats .stats-change.positive {
color: var(--color-success);
}
body.theme-pt .card-stats .stats-change.negative {
color: var(--color-danger);
}
/* ============================================================================
* CARD UTILITIES & HELPERS
* ============================================================================ */
/* Responsive image handling */
body.theme-pt .card img {
max-width: 100%;
height: auto;
display: block;
}
/* Links within cards */
body.theme-pt .card a {
color: inherit;
text-decoration: none;
}
body.theme-pt .card a:hover {
color: var(--primary-color);
}
/* Card Components - Additional Elements */
body.theme-pt .card-header {
padding: var(--card-padding);
border-bottom: 1px solid var(--card-border-color);
margin: 0;
margin-bottom: 0;
}
body.theme-pt .card-minimal .card-header {
padding: 0;
margin: 0;
margin-bottom: var(--card-gap);
border: none;
}
body.theme-pt .card .card-footer {
padding: var(--card-padding);
margin: 0;
margin-top: auto;
flex-shrink: 0;
background: transparent;
border-top: 1px solid var(--color-border-primary);
font-weight: var(--font-weight-normal);
font-size: var(--font-size-md);
}
body.theme-pt .card.card-minimal .card-footer {
padding: 0;
margin: var(--card-gap) 0 0;
border: none;
}
body.theme-pt .card-image {
position: relative;
overflow: hidden;
}
body.theme-pt .card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
body.theme-pt .card-meta {
display: flex;
flex-wrap: wrap;
gap: var(--card-gap);
font-size: var(--body-text-small);
color: var(--card-text-muted);
margin-bottom: var(--card-gap);
line-height: var(--body-line-height-small);
}
body.theme-pt .card-meta > * {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
body.theme-pt .card-actions {
display: flex;
gap: var(--card-gap);
margin-top: var(--card-gap);
}
body.theme-pt .card-actions.card-actions-center {
justify-content: center;
}
body.theme-pt .card-actions.card-actions-end {
justify-content: flex-end;
}
body.theme-pt .card-title {
font-size: var(--heading-size-h3);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--card-gap);
color: var(--heading-color-primary);
line-height: var(--heading-line-height-h3);
}
body.theme-pt .card-text {
color: var(--card-text-muted);
line-height: var(--body-line-height-secondary);
font-size: var(--body-text-secondary);
}
/* ============================================================================
* RESPONSIVE SHADOW SPACING & MOBILE OPTIMIZATIONS
* ============================================================================ */
/* Universal Grid Shadow Spacing - Ensures shadows are visible in all grid layouts */
body.theme-pt .row[class*="row-cols"] .card,
body.theme-pt .row .col .card,
body.theme-pt [class*="row-cols"] .card {
margin-bottom: var(--card-margin-bottom); /* Ensure shadow spacing in grid layouts */
}
/* Blog Section Specific Shadow Spacing - Higher specificity for blog cards */
body.theme-pt .innerblog .row[class*="row-cols"] .card,
body.theme-pt .innerblog .row .col .card,
body.theme-pt .innerblog [class*="row-cols"] .card {
margin-bottom: var(--card-margin-bottom); /* Proper shadow spacing for blog cards */
}
/* .innerblog specific styles are handled in 07-cards-specialized.css */
/*
body.theme-pt section.innerblog.section-spacing .card.card-vertical.card-clickable .card-image {
height: auto !important;
max-height: var(--card-vertical-image-height);
padding: var(--card-image-padding);
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.theme-pt section.innerblog.section-spacing .card.card-vertical.card-clickable .card-image img {
object-fit: contain;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
*/
/* Cards with larger shadows need proportionally larger margins */
body.theme-pt .row[class*="row-cols"] .card.card-elevated,
body.theme-pt .row .col .card.card-elevated,
body.theme-pt [class*="row-cols"] .card.card-elevated {
margin-bottom: var(--card-margin-bottom-lg);
}
/* Mobile Card Spacing - Global Overrides for Better Mobile Experience */
@media (max-width: 767.98px) {
body.theme-pt .card {
margin-bottom: var(--card-margin-bottom); /* Mobile shadow margins handled via responsive variables */
box-shadow: var(--card-shadow-sm);
}
body.theme-pt .card .card-body {
padding: var(--space-md);
}
body.theme-pt .card .card-title,
body.theme-pt .card .card-body h3 {
font-size: var(--heading-size-h3);
line-height: var(--heading-line-height-h3);
}
body.theme-pt .card .card-text,
body.theme-pt .card .card-body p,
body.theme-pt .card .shortIntro {
font-size: var(--body-text-secondary);
line-height: var(--body-line-height-secondary);
}
body.theme-pt .card .card-image {
height: auto;
}
body.theme-pt .card .card-image img {
height: auto;
min-height: 200px;
max-height: 300px;
object-fit: cover;
}
/* Reviews responsive */
.reviews .container {
padding-left: 24px !important;
padding-right: 24px !important;
}
}
/* Small Mobile Optimizations */
@media (max-width: 575.98px) {
body.theme-pt .card {
margin-bottom: var(--card-margin-bottom);
border-radius: var(--radius-md);
}
body.theme-pt .card .card-body {
padding: var(--space-sm) var(--space-md);
}
body.theme-pt .card .card-title,
body.theme-pt .card .card-body h3 {
font-size: var(--heading-size-h3);
margin-bottom: var(--space-xs);
line-height: var(--heading-line-height-h3);
}
body.theme-pt .card .card-text,
body.theme-pt .card .card-body p,
body.theme-pt .card .shortIntro {
font-size: var(--body-text-secondary);
line-height: var(--body-line-height-secondary);
}
body.theme-pt .card .card-footer {
padding: var(--space-sm) var(--space-md);
}
body.theme-pt .card .card-image img {
min-height: 180px;
max-height: 250px;
}
}
/* Featured Card Responsive Layouts */
@media (min-width: 768px) and (max-width: 991px) {
body.theme-pt .card.card-featured .card-image {
height: 100%;
min-height: 280px;
}
}
@media (max-width: 767.98px) {
body.theme-pt .card.card-featured .row {
flex-direction: column;
}
body.theme-pt .card.card-featured .col-lg-3.col-md-4.col-12 {
flex: 0 0 auto;
width: 100%;
}
body.theme-pt .card.card-featured .col-lg-9.col-md-8.col-12 {
flex: 0 0 auto;
width: 100%;
}
body.theme-pt .card.card-featured .card-image {
height: auto;
min-height: auto;
width: 100%;
}
body.theme-pt .card.card-featured .card-image img {
min-height: auto;
max-height: none;
height: auto;
width: 100%;
object-fit: contain;
object-position: center;
}
}
/* Review Grid Responsive */
@media (max-width: 768px) {
body.theme-pt .reviews .grw-reviews {
grid-template-columns: 1fr !important;
}
}
@media (min-width: 769px) and (max-width: 991px) {
body.theme-pt .reviews .grw-reviews {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (min-width: 992px) {
body.theme-pt .reviews .grw-reviews {
grid-template-columns: repeat(3, 1fr) !important;
}
}
/* ============================================================================
* ACCESSIBILITY & PERFORMANCE
* ============================================================================ */
/* High contrast support */
@media (prefers-contrast: high) {
body.theme-pt .card {
border-width: 2px;
border-color: var(--color-text-primary);
}
}
body.theme-pt .card:focus-within {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Touch-friendly hover states for mobile */
@media (hover: none) and (pointer: coarse) {
body.theme-pt .card:hover {
box-shadow: var(--card-shadow);
}
}
/* Mobile performance optimizations */
@media (max-width: 767.98px) {
body.theme-pt .card .card-image img {
will-change: auto;
}
body.theme-pt .card {
backface-visibility: hidden;
}
}
/* Print Styles */
@media print {
body.theme-pt .card {
box-shadow: none !important;
border: 1px solid #ddd !important;
break-inside: avoid;
margin-bottom: var(--space-md) !important;
}
body.theme-pt .card-loading::before {
display: none !important;
}
body.theme-pt .card:hover {
box-shadow: none !important;
}
}
/* ============================================================================
* SYSTEM DOCUMENTATION
* ============================================================================ */
/**
* This base card system consolidates:
* - cards.css (Complete card system with base functionality and utilities)
* - cards-info.css (Info cards with gradient styling)
* - cards-blog.css (Featured cards, content utilities extracted)
* - cards-review.css (Review cards with Google reviews integration)
*
* Base Card System Features:
* 1. Comprehensive card variables extending foundation design tokens
* 2. Flexible base .card class with semantic structure and spacing
* 3. Complete component system (image, body, title, meta, footer, etc.)
* 4. Style modifiers (minimal, elevated, outlined, flat, padded)
* 5. Size modifiers (sm, lg, xl) with proportional scaling
* 6. Sophisticated overlay pattern for clickable cards with proper z-indexing
* 7. Complete state management (loading, disabled, clickable, selected)
* 8. Common card types: Info (gradient), Review (user feedback), Featured (horizontal)
* 9. Content utilities: truncation (card--truncate-3), spacing (card--compact), title sizing (card--title-fixed)
* 10. Stats cards for metrics display with variants
* 11. Responsive shadow spacing system preventing clipping
* 12. Mobile optimizations with touch-friendly interactions
* 13. Complete accessibility support and print styles
*
* Card System Architecture:
* - Base class provides core structure and defaults
* - Modifier classes extend functionality without breaking inheritance
* - Component classes provide semantic structure
* - Utility classes offer fine-grained control
* - Responsive system ensures cards work across all devices
* - Type-specific classes handle specialized card variants
*
* Usage Examples:
* Basic:
* Styled: Enhanced card
* Utilities: Compact truncated card
* Advanced: Featured article
*/