/**
* 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, Blog, Review cards
* - 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 (Blog cards, featured cards, Ellis Presents cards)
* - 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
* ============================================================================ */
:root {
/* Component-specific Card Variables
* Core card variables are defined in foundation layer:
* --card-bg, --card-bg-hover, --card-border-color, --card-text-color, --card-text-muted,
* --card-padding-*, --card-radius-*, --card-gap-*, --card-transition-*
*
* Extended here: Additional shadows and component-specific styling
*/
/* Card Shadows */
--card-shadow-sm: 0 3px 20px 0 rgba(8, 15, 52, .06);
--card-shadow: 4px 4px 10px rgba(8, 15, 52, 0.08);
--card-shadow-lg: 0 10px 30px 0 rgba(8, 15, 52, .06);
--card-shadow-xl: 0 20px 40px 0 rgba(8, 15, 52, .08);
--card-shadow-hover: 4px 4px 10px rgba(248, 87, 87, 0.2);
/* Card Radius */
--card-radius: var(--radius-2xl, 24px);
--card-radius-sm: var(--radius-lg, 12px);
--card-radius-lg: var(--radius-2xl, 24px);
--card-radius-xl: 32px;
/* Card Padding */
--card-padding: 1.5rem;
--card-padding-sm: 1rem;
--card-padding-lg: 2rem;
--card-padding-xl: 2.5rem;
--card-image-padding: 0;
/* Card Spacing */
--card-gap: 1rem;
--card-gap-lg: 1.5rem;
--card-gap-xl: 2rem;
/* Card Text Variables */
--card-text-size: var(--font-size-md, 16px);
--card-text-line-height: var(--line-height-relaxed, 1.6);
--card-subtitle-size: var(--font-size-lg, 18px);
--card-margin-bottom-lg: var(--space-lg, 1.5rem);
/* Primary color fallback */
--primary-color: var(--color-primary, #000a4a);
/* Accent color for hover states */
--accent-color: var(--color-accent, #f85757);
--accent-color-transparent: rgba(248, 87, 87, 0.25);
/* Additional card colors */
--card-shadow-dark: var(--shadow-dark, rgba(8, 15, 52, 0.06));
--card-shadow-light: var(--shadow-light, rgba(0, 0, 0, 0.08));
--card-overlay-bg: var(--overlay-dark, rgba(0, 0, 0, 0.4));
--card-overlay-gradient: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
--card-loading-shimmer: rgba(255,255,255,0.4);
--card-badge-shadow: rgba(20, 20, 43, 0.09);
--card-info-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--card-text-dark: var(--color-text-dark, rgb(34, 34, 35));
--card-white: var(--color-white, rgb(255, 255, 255));
--card-navy: var(--color-navy, rgb(0, 10, 64));
--card-hover-link: var(--color-hover-link, #000a41);
}
/* ============================================================================
* 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);
border-radius: var(--card-radius) var(--card-radius) 0 0;
}
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 */
body.theme-pt .card .card-body {
padding: var(--card-padding);
background: var(--card-bg);
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* 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;
}
/* Common card HR styling */
body.theme-pt .card hr {
margin-top: auto;
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 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: 1;
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: 2 !important;
}
/* 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: 2;
}
/* ============================================================================
* 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;
}
/* 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 a.card.card-blog,
body.theme-pt a.card.card-blog.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 a.card.card-blog:hover,
body.theme-pt a.card.card-blog.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,
body.theme-pt a.card.card-blog .card-text,
body.theme-pt a.card.card-blog .card-meta,
body.theme-pt a.card.card-blog .shortIntro,
body.theme-pt a.card.card-blog p,
body.theme-pt a.card.card-blog .btn-link,
body.theme-pt a.card.card-blog.card-clickable .card-text,
body.theme-pt a.card.card-blog.card-clickable .card-meta,
body.theme-pt a.card.card-blog.card-clickable .shortIntro,
body.theme-pt a.card.card-blog.card-clickable p,
body.theme-pt a.card.card-blog.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,
body.theme-pt a.card.card-blog .card-title,
body.theme-pt a.card.card-blog h3.card-title,
body.theme-pt a.card.card-blog h3,
body.theme-pt a.card.card-blog.card-clickable .card-title,
body.theme-pt a.card.card-blog.card-clickable h3.card-title,
body.theme-pt a.card.card-blog.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;
}
/* ============================================================================
* BLOG CARD TYPE
* ============================================================================ */
/* Blog Card - inherits most styling from base .card class */
body.theme-pt .card.card-blog {
border: none;
height: 100%;
display: flex;
flex-direction: column;
}
body.theme-pt .card.card-blog .card-body {
display: flex;
flex-direction: column;
flex-grow: 1;
}
/* HR divider as part of footer group */
body.theme-pt .card.card-blog .card-body hr {
border-color: var(--color-border-primary);
opacity: 1;
margin-top: auto; /* Push HR and meta to bottom */
margin-bottom: var(--space-md); /* More space below HR */
}
/* Card meta as footer content */
body.theme-pt .card.card-blog .card-meta {
margin-top: 0; /* Remove top margin since HR handles spacing */
margin-bottom: var(--space-md); /* Add bottom margin for even distribution */
flex-shrink: 0;
}
body.theme-pt .card.card-blog .card-body .date {
color: var(--color-text-muted);
margin-bottom: var(--space-md);
font-size: var(--card-text-size);
}
body.theme-pt .card.card-blog .card-title {
min-height: 56px;
font-size: var(--card-subtitle-size);
line-height: 1.15;
}
body.theme-pt .card.card-blog .card-text {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
}
body.theme-pt .card.card-blog .btn-link {
text-decoration: none;
color: var(--color-text-muted);
}
/* ============================================================================
* ELLIS PRESENTS CARD TYPE
* ============================================================================ */
/* Ellis Presents Card - inherits height alignment from base .card class and utilities */
body.theme-pt .card.card-ellis-presents {
border: none;
/* Height alignment handled by base .card class: height: 100% */
/* Additional utilities can be applied via class names in HTML */
}
/* Reduced spacing card body */
body.theme-pt .card.card-ellis-presents .card-body {
display: flex;
flex-direction: column;
padding: var(--space-lg); /* Reduced from default var(--card-padding) */
}
/* Card title with reduced spacing */
body.theme-pt .card.card-ellis-presents .card-body h3 {
min-height: 56px;
margin-bottom: var(--space-sm); /* Reduced from var(--card-text-size) */
font-size: var(--heading-size-h3);
line-height: 1.15;
}
/* Content area with flex grow to push footer down */
body.theme-pt .card.card-ellis-presents .shortIntro {
margin-bottom: var(--space-sm); /* Significantly reduced from var(--card-padding) */
flex-grow: 1; /* Allows content to grow and push footer down */
}
/* Paragraph spacing within content */
body.theme-pt .card.card-ellis-presents .shortIntro p {
margin-bottom: var(--space-xs); /* Drastically reduced from var(--card-margin-bottom-lg) */
line-height: var(--body-line-height-secondary);
}
/* HR separator - part of footer group */
body.theme-pt .card.card-ellis-presents .card-body hr {
margin-top: 0; /* Override base card hr margin-top: auto */
margin-bottom: var(--space-sm); /* Reduced spacing */
border-color: var(--color-border-primary);
opacity: 1;
}
/* Footer link with no top margin */
body.theme-pt .card.card-ellis-presents .btn-link {
text-decoration: none;
color: var(--color-text-muted);
margin-top: 0; /* Remove any top margin */
}
/* ============================================================================
* 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;
border-radius: var(--card-radius) 0 0 var(--card-radius); /* Left corners rounded */
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);
}
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: 2.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-xs);
line-height: var(--heading-line-height-tight);
}
body.theme-pt .card-stats .stats-label {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: var(--font-weight-medium);
}
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-body {
flex: 1 1 auto;
padding: var(--card-padding);
}
body.theme-pt .card-footer {
padding: var(--card-padding);
border-top: 1px solid var(--card-border-color);
margin: 0;
}
body.theme-pt .card-minimal .card-footer {
padding: 0;
margin: var(--card-gap) 0 0;
border: none;
}
body.theme-pt .card-image {
position: relative;
overflow: hidden;
border-radius: var(--card-radius);
}
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 */
}
/* 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;
border-radius: 0;
}
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;
border-radius: var(--card-radius) 0 0 var(--card-radius);
}
}
@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%;
border-radius: var(--card-radius) var(--card-radius) 0 0;
}
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);
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
body.theme-pt .card,
body.theme-pt .card .card-image img,
body.theme-pt .card .overlay {
}
body.theme-pt .card:hover {
}
}
/* 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 (Blog cards, featured cards, Ellis Presents cards, author profiles)
* - 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), Blog (content-focused), Review (user feedback)
* 9. Stats cards for metrics display with variants
* 10. Responsive shadow spacing system preventing clipping
* 11. Mobile optimizations with touch-friendly interactions
* 12. 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
* Typed: Blog card
* Advanced: Featured article
*/