/* * ASTRO Community CSS - Production Ready Stylesheet * * Integration Notes: * - Enqueue in WordPress: wp_enqueue_style('astro-css', get_template_directory_uri() . '/astro.css', [], '1.0.0'); * - Add body class: * - Manual dark mode: * - Manual light mode: * * Features: * - Tokenized design system with CSS custom properties * - Automatic dark mode (prefers-color-scheme) + manual override * - WCAG 2.2 AA accessible with reduced motion support * - Beaver Builder and WordPress block enhancements * - Lightweight (~12KB gzipped) with modern CSS features */ /* ========================================================================== 1. DESIGN TOKENS ========================================================================== */ :root { /* Color Palette - Light Theme (Default) */ --astro-bg: #ffffff; --astro-surface: #f6f7fb; --astro-elev: #ffffff; --astro-text: #1b2130; --astro-text-muted: #4b5675; --astro-accent: #7c5cff; --astro-accent-2: #06b6d4; --astro-warn: #f59e0b; --astro-success: #22c55e; --astro-danger: #ef4444; --astro-border: rgba(124, 92, 255, 0.18); --astro-border-subtle: rgba(27, 33, 48, 0.08); /* Typography */ --astro-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; --astro-font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Font Sizes */ --fs-300: 0.875rem; /* 14px */ --fs-400: 1rem; /* 16px */ --fs-500: 1.125rem; /* 18px */ --fs-600: 1.375rem; /* 22px */ --fs-700: 1.75rem; /* 28px */ --fs-800: 2.25rem; /* 36px */ --fs-900: 3rem; /* 48px */ /* Line Heights */ --lh-tight: 1.2; --lh-normal: 1.55; --lh-loose: 1.75; /* Spacing Scale */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* Border Radius */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; /* Shadows */ --shadow-1: 0 6px 16px rgba(8, 12, 24, 0.12); --shadow-2: 0 14px 34px rgba(8, 12, 24, 0.18); --shadow-3: 0 24px 48px rgba(8, 12, 24, 0.24); /* Motion */ --duration-fast: 120ms; --duration-med: 220ms; --duration-slow: 380ms; --easing: cubic-bezier(0.22, 0.61, 0.36, 1); /* Layout */ --container-max: 1200px; --container-padding: var(--space-4); } /* Dark Theme Tokens */ @media (prefers-color-scheme: dark) { :root { --astro-bg: #0f1224; --astro-surface: #11162b; --astro-elev: #151a33; --astro-text: #e6eaf7; --astro-text-muted: #b7bed9; --astro-border: rgba(124, 92, 255, 0.18); --astro-border-subtle: rgba(230, 234, 247, 0.08); } } /* Manual Theme Overrides */ body.astro-site.theme-dark { --astro-bg: #0f1224; --astro-surface: #11162b; --astro-elev: #151a33; --astro-text: #e6eaf7; --astro-text-muted: #b7bed9; --astro-border: rgba(124, 92, 255, 0.18); --astro-border-subtle: rgba(230, 234, 247, 0.08); } body.astro-site.theme-light { --astro-bg: #ffffff; --astro-surface: #f6f7fb; --astro-elev: #ffffff; --astro-text: #1b2130; --astro-text-muted: #4b5675; --astro-border: rgba(124, 92, 255, 0.18); --astro-border-subtle: rgba(27, 33, 48, 0.08); } /* ========================================================================== 2. BASE STYLES & RESET ========================================================================== */ body.astro-site { /* Modern CSS Reset */ box-sizing: border-box; margin: 0; padding: 0; font-family: var(--astro-font-sans); font-size: var(--fs-400); line-height: var(--lh-normal); color: var(--astro-text); background-color: var(--astro-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body.astro-site *, body.astro-site *::before, body.astro-site *::after { box-sizing: inherit; } /* Focus Styles - WCAG AA Compliant */ body.astro-site :focus-visible { outline: 2px solid var(--astro-accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* Reduced Motion Support */ @media (prefers-reduced-motion: reduce) { body.astro-site *, body.astro-site *::before, body.astro-site *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 3. TYPOGRAPHY ========================================================================== */ body.astro-site { /* Fluid Typography with clamp() */ font-size: clamp(var(--fs-400), 2.5vw, var(--fs-500)); } /* Headings */ body.astro-site h1, body.astro-site .h1 { font-size: clamp(var(--fs-700), 5vw, var(--fs-900)); line-height: var(--lh-tight); font-weight: 700; margin: 0 0 var(--space-6) 0; color: var(--astro-text); } body.astro-site h2, body.astro-site .h2 { font-size: clamp(var(--fs-600), 4vw, var(--fs-800)); line-height: var(--lh-tight); font-weight: 600; margin: 0 0 var(--space-4) 0; color: var(--astro-text); } body.astro-site h3, body.astro-site .h3 { font-size: clamp(var(--fs-500), 3vw, var(--fs-700)); line-height: var(--lh-tight); font-weight: 600; margin: 0 0 var(--space-4) 0; color: var(--astro-text); } body.astro-site h4, body.astro-site h5, body.astro-site h6 { font-size: var(--fs-500); line-height: var(--lh-normal); font-weight: 600; margin: 0 0 var(--space-3) 0; color: var(--astro-text); } /* Paragraphs */ body.astro-site p { margin: 0 0 var(--space-4) 0; max-width: 75ch; /* Optimal reading length */ color: var(--astro-text); } body.astro-site p:last-child { margin-bottom: 0; } /* Links */ body.astro-site a { color: var(--astro-accent); text-decoration: none; transition: color var(--duration-fast) var(--easing); } body.astro-site a:hover { color: var(--astro-accent-2); text-decoration: underline; } body.astro-site a:focus-visible { outline: 2px solid var(--astro-accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* Lists */ body.astro-site ul, body.astro-site ol { margin: 0 0 var(--space-4) 0; padding-left: var(--space-6); } body.astro-site li { margin-bottom: var(--space-2); } /* Blockquotes */ body.astro-site blockquote { margin: var(--space-6) 0; padding: var(--space-4) var(--space-6); border-left: 4px solid var(--astro-accent); background-color: var(--astro-surface); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-style: italic; color: var(--astro-text-muted); } /* Code */ body.astro-site code { font-family: var(--astro-font-mono); font-size: 0.9em; background-color: var(--astro-surface); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); color: var(--astro-accent); } body.astro-site pre { font-family: var(--astro-font-mono); background-color: var(--astro-surface); padding: var(--space-4); border-radius: var(--radius-md); overflow-x: auto; margin: var(--space-4) 0; } body.astro-site pre code { background: none; padding: 0; color: var(--astro-text); } /* ========================================================================== 4. LAYOUT UTILITIES ========================================================================== */ /* Container */ body.astro-site .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); } /* Grid System */ body.astro-site .grid { display: grid; gap: var(--space-6); } body.astro-site .grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } body.astro-site .grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } /* Stack (Vertical Rhythm) */ body.astro-site .stack { display: flex; flex-direction: column; gap: var(--space-4); } body.astro-site .stack-lg { gap: var(--space-6); } body.astro-site .stack-xl { gap: var(--space-8); } /* Spacing Utilities */ body.astro-site .mt-2 { margin-top: var(--space-2); } body.astro-site .mt-4 { margin-top: var(--space-4); } body.astro-site .mt-6 { margin-top: var(--space-6); } body.astro-site .mt-8 { margin-top: var(--space-8); } body.astro-site .mt-12 { margin-top: var(--space-12); } body.astro-site .mt-16 { margin-top: var(--space-16); } body.astro-site .mb-2 { margin-bottom: var(--space-2); } body.astro-site .mb-4 { margin-bottom: var(--space-4); } body.astro-site .mb-6 { margin-bottom: var(--space-6); } body.astro-site .mb-8 { margin-bottom: var(--space-8); } body.astro-site .mb-12 { margin-bottom: var(--space-12); } body.astro-site .mb-16 { margin-bottom: var(--space-16); } body.astro-site .py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); } body.astro-site .py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } body.astro-site .py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } body.astro-site .py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } body.astro-site .py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); } body.astro-site .py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); } body.astro-site .px-2 { padding-left: var(--space-2); padding-right: var(--space-2); } body.astro-site .px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } body.astro-site .px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } body.astro-site .px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } /* Visibility Utilities */ body.astro-site .visually-hidden, body.astro-site .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } body.astro-site .only-desktop { display: none; } body.astro-site .only-mobile { display: block; } @media (min-width: 768px) { body.astro-site .only-desktop { display: block; } body.astro-site .only-mobile { display: none; } } /* ========================================================================== 5. COMPONENTS ========================================================================== */ /* Header / Navigation */ body.astro-site .header { position: sticky; top: 0; z-index: 100; background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--astro-border-subtle); transition: all var(--duration-med) var(--easing); } body.astro-site .theme-dark .header { background-color: rgba(15, 18, 36, 0.9); } body.astro-site .nav { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0; } body.astro-site .nav-menu { display: flex; list-style: none; margin: 0; padding: 0; gap: var(--space-6); } body.astro-site .nav-menu a { display: block; padding: var(--space-2) var(--space-3); min-height: 44px; display: flex; align-items: center; border-radius: var(--radius-sm); transition: all var(--duration-fast) var(--easing); color: var(--astro-text); text-decoration: none; } body.astro-site .nav-menu a:hover, body.astro-site .nav-menu a:focus { background-color: var(--astro-surface); color: var(--astro-accent); text-decoration: none; } body.astro-site .nav-menu a.active { background-color: var(--astro-accent); color: white; } /* Hero Section */ body.astro-site .hero { padding: var(--space-20) 0; text-align: center; background: linear-gradient(135deg, var(--astro-bg) 0%, var(--astro-surface) 100%); position: relative; overflow: hidden; } body.astro-site .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 80%, rgba(124, 92, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.1) 0%, transparent 50%); pointer-events: none; } body.astro-site .hero-content { position: relative; z-index: 1; } body.astro-site .hero h1 { margin-bottom: var(--space-6); background: linear-gradient(135deg, var(--astro-text) 0%, var(--astro-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } body.astro-site .hero p { font-size: var(--fs-500); color: var(--astro-text-muted); max-width: 60ch; margin: 0 auto var(--space-8); } /* Buttons */ body.astro-site .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-3) var(--space-6); min-height: 44px; font-size: var(--fs-400); font-weight: 500; text-decoration: none; border: 2px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: all var(--duration-fast) var(--easing); position: relative; overflow: hidden; } body.astro-site .btn:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; } /* Primary Button */ body.astro-site .btn--primary { background-color: var(--astro-accent); color: white; border-color: var(--astro-accent); } body.astro-site .btn--primary:hover { background-color: var(--astro-accent-2); border-color: var(--astro-accent-2); transform: translateY(-1px); box-shadow: var(--shadow-1); } /* Secondary Button */ body.astro-site .btn--secondary { background-color: transparent; color: var(--astro-accent); border-color: var(--astro-accent); } body.astro-site .btn--secondary:hover { background-color: var(--astro-accent); color: white; transform: translateY(-1px); box-shadow: var(--shadow-1); } /* Ghost Button */ body.astro-site .btn--ghost { background-color: transparent; color: var(--astro-text); border-color: var(--astro-border); } body.astro-site .btn--ghost:hover { background-color: var(--astro-surface); border-color: var(--astro-accent); color: var(--astro-accent); } /* Danger Button */ body.astro-site .btn--danger { background-color: var(--astro-danger); color: white; border-color: var(--astro-danger); } body.astro-site .btn--danger:hover { background-color: #dc2626; border-color: #dc2626; transform: translateY(-1px); box-shadow: var(--shadow-1); } /* Button Sizes */ body.astro-site .btn--small { padding: var(--space-2) var(--space-4); font-size: var(--fs-300); min-height: 36px; } body.astro-site .btn--large { padding: var(--space-4) var(--space-8); font-size: var(--fs-500); min-height: 52px; } /* Cards */ body.astro-site .card { background-color: var(--astro-elev); border: 1px solid var(--astro-border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); transition: all var(--duration-med) var(--easing); position: relative; overflow: hidden; } body.astro-site .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--astro-border); } body.astro-site .card--elevated { box-shadow: var(--shadow-1); } body.astro-site .card--highlight { border-color: var(--astro-accent); box-shadow: 0 0 0 1px var(--astro-accent), var(--shadow-1); } body.astro-site .card--highlight::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--astro-accent), var(--astro-accent-2)); } /* Badges / Pills */ body.astro-site .badge { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); font-size: var(--fs-300); font-weight: 500; border-radius: var(--radius-xl); text-transform: uppercase; letter-spacing: 0.05em; } body.astro-site .badge--primary { background-color: var(--astro-accent); color: white; } body.astro-site .badge--success { background-color: var(--astro-success); color: white; } body.astro-site .badge--warn { background-color: var(--astro-warn); color: white; } body.astro-site .badge--danger { background-color: var(--astro-danger); color: white; } body.astro-site .badge--muted { background-color: var(--astro-surface); color: var(--astro-text-muted); } /* Forms */ body.astro-site .form-group { margin-bottom: var(--space-4); } body.astro-site .form-label { display: block; margin-bottom: var(--space-2); font-weight: 500; color: var(--astro-text); } body.astro-site .form-label.required::after { content: ' *'; color: var(--astro-danger); } body.astro-site .form-input, body.astro-site .form-select, body.astro-site .form-textarea { width: 100%; padding: var(--space-3) var(--space-4); font-size: var(--fs-400); font-family: inherit; border: 2px solid var(--astro-border-subtle); border-radius: var(--radius-md); background-color: var(--astro-bg); color: var(--astro-text); transition: all var(--duration-fast) var(--easing); } body.astro-site .form-input:focus, body.astro-site .form-select:focus, body.astro-site .form-textarea:focus { outline: none; border-color: var(--astro-accent); box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.1); } body.astro-site .form-input:invalid, body.astro-site .form-select:invalid, body.astro-site .form-textarea:invalid { border-color: var(--astro-danger); } body.astro-site .form-help { margin-top: var(--space-2); font-size: var(--fs-300); color: var(--astro-text-muted); } body.astro-site .form-error { margin-top: var(--space-2); font-size: var(--fs-300); color: var(--astro-danger); } /* Checkboxes and Radios */ body.astro-site .form-checkbox, body.astro-site .form-radio { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } body.astro-site .form-checkbox input, body.astro-site .form-radio input { width: 20px; height: 20px; accent-color: var(--astro-accent); } /* Tables */ body.astro-site .table-container { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--astro-border-subtle); } body.astro-site .table { width: 100%; border-collapse: collapse; font-size: var(--fs-400); } body.astro-site .table th { background-color: var(--astro-surface); padding: var(--space-3) var(--space-4); text-align: left; font-weight: 600; color: var(--astro-text); border-bottom: 1px solid var(--astro-border-subtle); position: sticky; top: 0; } body.astro-site .table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--astro-border-subtle); color: var(--astro-text); } body.astro-site .table tbody tr:hover { background-color: var(--astro-surface); } body.astro-site .table tbody tr:nth-child(even) { background-color: rgba(124, 92, 255, 0.02); } /* Accordions / FAQs */ body.astro-site .accordion { border: 1px solid var(--astro-border-subtle); border-radius: var(--radius-md); overflow: hidden; } body.astro-site .accordion-item { border-bottom: 1px solid var(--astro-border-subtle); } body.astro-site .accordion-item:last-child { border-bottom: none; } body.astro-site .accordion-trigger { width: 100%; padding: var(--space-4); background: none; border: none; text-align: left; font-size: var(--fs-500); font-weight: 600; color: var(--astro-text); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background-color var(--duration-fast) var(--easing); } body.astro-site .accordion-trigger:hover { background-color: var(--astro-surface); } body.astro-site .accordion-trigger::after { content: '+'; font-size: var(--fs-600); transition: transform var(--duration-fast) var(--easing); } body.astro-site .accordion-trigger[aria-expanded="true"]::after { transform: rotate(45deg); } body.astro-site .accordion-content { padding: 0 var(--space-4) var(--space-4); color: var(--astro-text-muted); } /* Notifications */ body.astro-site .notification { padding: var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-4); display: flex; align-items: flex-start; gap: var(--space-3); position: relative; } body.astro-site .notification--info { background-color: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.2); color: var(--astro-accent-2); } body.astro-site .notification--success { background-color: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.2); color: var(--astro-success); } body.astro-site .notification--warn { background-color: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.2); color: var(--astro-warn); } body.astro-site .notification--danger { background-color: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: var(--astro-danger); } body.astro-site .notification-close { position: absolute; top: var(--space-2); right: var(--space-2); background: none; border: none; font-size: var(--fs-500); cursor: pointer; color: inherit; opacity: 0.7; transition: opacity var(--duration-fast) var(--easing); } body.astro-site .notification-close:hover { opacity: 1; } /* Footer */ body.astro-site .footer { background-color: var(--astro-surface); padding: var(--space-16) 0 var(--space-8); margin-top: var(--space-20); border-top: 1px solid var(--astro-border-subtle); } body.astro-site .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-8); margin-bottom: var(--space-8); } body.astro-site .footer-section h3 { margin-bottom: var(--space-4); color: var(--astro-text); } body.astro-site .footer-section ul { list-style: none; padding: 0; margin: 0; } body.astro-site .footer-section li { margin-bottom: var(--space-2); } body.astro-site .footer-section a { color: var(--astro-text-muted); text-decoration: none; transition: color var(--duration-fast) var(--easing); } body.astro-site .footer-section a:hover { color: var(--astro-accent); } body.astro-site .footer-bottom { padding-top: var(--space-8); border-top: 1px solid var(--astro-border-subtle); text-align: center; color: var(--astro-text-muted); font-size: var(--fs-300); } /* ========================================================================== 6. WORDPRESS & BEAVER BUILDER ENHANCEMENTS ========================================================================== */ /* Beaver Builder Enhancements */ body.astro-site .fl-row { margin-bottom: var(--space-6); } body.astro-site .fl-col { padding: 0 var(--space-2); } body.astro-site .fl-heading { margin-bottom: var(--space-4); } body.astro-site .fl-heading.fl-heading-h1 { font-size: clamp(var(--fs-700), 5vw, var(--fs-900)); line-height: var(--lh-tight); font-weight: 700; } body.astro-site .fl-heading.fl-heading-h2 { font-size: clamp(var(--fs-600), 4vw, var(--fs-800)); line-height: var(--lh-tight); font-weight: 600; } body.astro-site .fl-heading.fl-heading-h3 { font-size: clamp(var(--fs-500), 3vw, var(--fs-700)); line-height: var(--lh-tight); font-weight: 600; } body.astro-site .fl-button { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-3) var(--space-6); min-height: 44px; font-size: var(--fs-400); font-weight: 500; text-decoration: none; border: 2px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: all var(--duration-fast) var(--easing); background-color: var(--astro-accent); color: white; border-color: var(--astro-accent); } body.astro-site .fl-button:hover { background-color: var(--astro-accent-2); border-color: var(--astro-accent-2); transform: translateY(-1px); box-shadow: var(--shadow-1); text-decoration: none; } body.astro-site .fl-button.fl-button-small { padding: var(--space-2) var(--space-4); font-size: var(--fs-300); min-height: 36px; } body.astro-site .fl-button.fl-button-large { padding: var(--space-4) var(--space-8); font-size: var(--fs-500); min-height: 52px; } body.astro-site .fl-photo { border-radius: var(--radius-md); overflow: hidden; } body.astro-site .fl-photo img { transition: transform var(--duration-med) var(--easing); } body.astro-site .fl-photo:hover img { transform: scale(1.05); } /* WordPress Block Enhancements */ body.astro-site .wp-block-buttons { display: flex; gap: var(--space-4); flex-wrap: wrap; } body.astro-site .wp-block-button .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-3) var(--space-6); min-height: 44px; font-size: var(--fs-400); font-weight: 500; text-decoration: none; border: 2px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: all var(--duration-fast) var(--easing); background-color: var(--astro-accent); color: white; border-color: var(--astro-accent); } body.astro-site .wp-block-button .wp-block-button__link:hover { background-color: var(--astro-accent-2); border-color: var(--astro-accent-2); transform: translateY(-1px); box-shadow: var(--shadow-1); text-decoration: none; } body.astro-site .wp-block-button.is-style-outline .wp-block-button__link { background-color: transparent; color: var(--astro-accent); border-color: var(--astro-accent); } body.astro-site .wp-block-button.is-style-outline .wp-block-button__link:hover { background-color: var(--astro-accent); color: white; } body.astro-site .wp-block-columns { gap: var(--space-6); } body.astro-site .wp-block-image { margin: var(--space-6) 0; } body.astro-site .wp-block-image figcaption { margin-top: var(--space-2); font-size: var(--fs-300); color: var(--astro-text-muted); text-align: center; font-style: italic; } body.astro-site .wp-block-quote { margin: var(--space-6) 0; padding: var(--space-4) var(--space-6); border-left: 4px solid var(--astro-accent); background-color: var(--astro-surface); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-style: italic; color: var(--astro-text-muted); } body.astro-site .wp-block-table { margin: var(--space-6) 0; overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--astro-border-subtle); } body.astro-site .wp-block-table table { width: 100%; border-collapse: collapse; } body.astro-site .wp-block-table th { background-color: var(--astro-surface); padding: var(--space-3) var(--space-4); text-align: left; font-weight: 600; color: var(--astro-text); border-bottom: 1px solid var(--astro-border-subtle); } body.astro-site .wp-block-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--astro-border-subtle); color: var(--astro-text); } body.astro-site .wp-block-table tbody tr:hover { background-color: var(--astro-surface); } /* ========================================================================== 7. PRINT STYLES ========================================================================== */ @media print { body.astro-site { background: white !important; color: black !important; font-size: 12pt; line-height: 1.4; } body.astro-site .header, body.astro-site .footer, body.astro-site .btn, body.astro-site .nav { display: none !important; } body.astro-site h1, body.astro-site h2, body.astro-site h3, body.astro-site h4, body.astro-site h5, body.astro-site h6 { page-break-after: avoid; color: black !important; } body.astro-site p, body.astro-site li { orphans: 3; widows: 3; } body.astro-site .card { border: 1px solid #ccc !important; box-shadow: none !important; page-break-inside: avoid; } body.astro-site a { color: black !important; text-decoration: underline !important; } body.astro-site a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 10pt; color: #666; } }