diff --git a/style.css b/style.css
index e0a2c02..50ea0a2 100644
--- a/style.css
+++ b/style.css
@@ -1,3407 +1,3173 @@
-/*
-Theme Name: Peptide Starter
-Theme URI: https://github.com/peptiderepo/peptide-starter
-Description: Premium, accessible WordPress theme for scientific peptide reference database
-Author: Peptide Repo
-Author URI: https://peptiderepo.com
-Version: 2.1.6
-License: GPL v2 or later
-License URI: https://www.gnu.org/licenses/gpl-2.0.html
-Text Domain: peptide-starter
-Domain Path: /languages
-Requires at least: 6.0
-Requires PHP: 7.4
-*/
-
-/* ============================================================================
- CSS ARCHITECTURE
- ============================================================================
-
- This stylesheet organizes theme styles in the following order:
- 1. CSS Reset
- 2. CSS Custom Properties (design tokens)
- 3. Typography & Font Loading
- 4. Global Styles & Layout
- 5. Components (buttons, cards, forms, badges)
- 6. Regions (header, footer, main)
- 7. Pages (home, archive, single)
- 8. Animations & Transitions
- 9. Accessibility (focus, reduced motion)
- 10. Dark Mode (color overrides)
- 11. Responsive (mobile-first breakpoints)
-
- Philosophy:
- - Use CSS custom properties for all design tokens
- - Avoid !important on global elements (breaks plugins)
- - Scope styles with specificity, not cascade tricks
- - Respect plugin namespaces (.pn-*, .ps-*)
- - Mobile-first responsive approach
-
- ============================================================================ */
-
-/* ============================================================================
- 1. CSS RESET
- ============================================================================ */
-
-*,
-*::before,
-*::after {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
-}
-
-body {
- margin: 0;
- padding: 0;
- line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
- margin: 0;
- padding: 0;
-}
-
-p {
- margin: 0;
-}
-
-ul, ol {
- list-style: none;
-}
-
-a {
- color: inherit;
- text-decoration: none;
-}
-
-button, input, textarea, select {
- font: inherit;
- color: inherit;
-}
-
-img, svg {
- max-width: 100%;
- display: block;
-}
-
-/* ============================================================================
- 2. CSS CUSTOM PROPERTIES (Design Tokens)
- ============================================================================ */
-
-:root {
- /* ---- FONT FAMILIES ---- */
- --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
- --font-mono: "Monaco", "Menlo", "Ubuntu Mono", "Courier New", monospace;
-
- /* ---- TYPOGRAPHY SCALE (tightened for better content density) ---- */
- /* H1 */
- --text-h1: 36px;
- --text-h1-weight: 700;
- --text-h1-lh: 1.2;
- --text-h1-ls: -0.02em;
-
- /* H2 */
- --text-h2: 30px;
- --text-h2-weight: 700;
- --text-h2-lh: 1.25;
- --text-h2-ls: -0.015em;
-
- /* H3 */
- --text-h3: 24px;
- --text-h3-weight: 600;
- --text-h3-lh: 1.3;
- --text-h3-ls: -0.01em;
-
- /* H4 */
- --text-h4: 20px;
- --text-h4-weight: 600;
- --text-h4-lh: 1.35;
- --text-h4-ls: 0;
-
- /* H5 */
- --text-h5: 17px;
- --text-h5-weight: 700;
- --text-h5-lh: 1.4;
- --text-h5-ls: 0;
-
- /* H6 */
- --text-h6: 15px;
- --text-h6-weight: 500;
- --text-h6-lh: 1.4;
- --text-h6-ls: 0;
-
- /* Body (slightly smaller for density — still readable) */
- --text-body-lg: 15px;
- --text-body-md: 13px;
- --text-body-sm: 12px;
-
- /* Labels & Captions */
- --text-label: 11px;
- --text-label-weight: 500;
- --text-caption: 11px;
- --text-overline: 10px;
- --text-overline-weight: 600;
-
- /* Code */
- --text-code-inline: 14px;
- --text-code-block: 13px;
- --text-code-lh: 1.6;
-
- /* ---- SPACING SCALE (8px base grid) ---- */
- --spacing-xs: 4px;
- --spacing-sm: 8px;
- --spacing-md: 16px;
- --spacing-lg: 24px;
- --spacing-xl: 32px;
- --spacing-2xl: 48px;
- --spacing-3xl: 64px;
- --spacing-4xl: 80px;
- --spacing-5xl: 96px;
-
- /* ---- BUTTON PADDING (unified per Design Director) ---- */
- --btn-padding-y: var(--spacing-md);
- --btn-padding-x: var(--spacing-xl);
-
- /* ---- LIGHT MODE COLOR PALETTE ---- */
- /* Brand Colors */
- --color-brand-primary: var(--teal-500); /* Brand rebrand v2.0.0 — Direction C */
- --color-brand-hover: var(--teal-600);
- --color-status-success: #059669;
- --color-status-warning: #F59E0B;
- --color-status-error: #DC2626;
-
- /* Accent Colors (Clawdiverse-inspired warm tints for cards/categories) */
- --color-accent-warm: #F59E0B;
- --color-accent-mint: #D1FAE5;
- --color-accent-lavender: #EDE9FE;
- --color-accent-peach: #FEE2D5;
- --color-accent-sky: #DBEAFE;
-
- /* Featured badge */
- --color-featured-bg: #FEF3C7;
- --color-featured-text: #92400E;
-
- /* Text Colors */
- --color-text-primary: #111827;
- --color-text-secondary: #6B7280;
- --color-text-tertiary: #9CA3AF;
-
- /* Border Colors */
- --color-border-default: #E5E7EB;
- --color-border-subtle: #F3F4F6;
-
- /* Background Colors (warm off-white base, à la Clawdiverse) */
- --color-bg-primary: #FAFAF7;
- --color-bg-secondary: #F5F3EE;
- --color-bg-tertiary: #EDEAE3;
-
- /* Component-Specific Colors */
- --color-input-focus: var(--teal-500);
- --color-link-hover: var(--teal-600);
- --color-badge-bg: var(--teal-50);
- --color-badge-text: var(--teal-700);
- --color-code-bg: #F3F4F6;
- --color-code-text: #111827;
-
- /* ---- SHADOWS & ELEVATION ---- */
- --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
- --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
- --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
- --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
-
- /* ---- BORDERS & RADIUS ---- */
- --radius-sm: 4px;
- --radius-md: 8px;
- --radius-lg: 12px;
-
- /* ---- TRANSITIONS ---- */
- --transition-fast: 150ms ease-out;
- --transition-normal: 200ms ease-out;
- --transition-slow: 300ms ease-in-out;
-
- /* ---- FOCUS RING (per Design Director fix: 15% opacity) ---- */
- --focus-color: var(--teal-500);
- --focus-width: 2px;
- --focus-offset: 2px;
- --focus-shadow: 0 0 0 3px rgba(27, 138, 146, 0.15);
-
- /* ---- CONTAINER WIDTHS ---- */
- --container-sm: 640px;
- --container-md: 768px;
- --container-lg: 900px;
- --container-xl: 1024px;
- --container-2xl: 1280px;
-
- /* ---- Z-INDEX SCALE ---- */
- --z-dropdown: 10;
- --z-sticky: 20;
- --z-fixed: 30;
- --z-modal-backdrop: 40;
- --z-modal: 50;
-}
-
-/* ============================================================================
- 3. TYPOGRAPHY & FONT LOADING
- ============================================================================ */
-
-/* Load Inter from Google Fonts */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-
-/* Base typography */
-body {
- font-family: var(--font-sans);
- font-size: var(--text-body-md);
- line-height: 1.6;
- color: var(--color-text-primary);
- background-color: var(--color-bg-primary);
-}
-
-/* Headings */
-h1 {
- font-size: var(--text-h1);
- font-weight: var(--text-h1-weight);
- line-height: var(--text-h1-lh);
- letter-spacing: var(--text-h1-ls);
- color: var(--color-text-primary);
- margin-bottom: var(--spacing-md);
-}
-
-h2 {
- font-size: var(--text-h2);
- font-weight: var(--text-h2-weight);
- line-height: var(--text-h2-lh);
- letter-spacing: var(--text-h2-ls);
- color: var(--color-text-primary);
- margin-bottom: var(--spacing-md);
- margin-top: var(--spacing-lg);
-}
-
-h3 {
- font-size: var(--text-h3);
- font-weight: var(--text-h3-weight);
- line-height: var(--text-h3-lh);
- letter-spacing: var(--text-h3-ls);
- color: var(--color-text-primary);
- margin-bottom: var(--spacing-sm);
- margin-top: var(--spacing-lg);
-}
-
-h4 {
- font-size: var(--text-h4);
- font-weight: var(--text-h4-weight);
- line-height: var(--text-h4-lh);
- color: var(--color-text-primary);
- margin-bottom: var(--spacing-sm);
- margin-top: var(--spacing-md);
-}
-
-h5 {
- font-size: var(--text-h5);
- font-weight: var(--text-h5-weight);
- line-height: var(--text-h5-lh);
- color: var(--color-text-primary);
- margin-bottom: var(--spacing-sm);
-}
-
-h6 {
- font-size: var(--text-h6);
- font-weight: var(--text-h6-weight);
- line-height: var(--text-h6-lh);
- color: var(--color-text-primary);
- margin-bottom: var(--spacing-sm);
-}
-
-/* Paragraph */
-p {
- font-size: var(--text-body-md);
- line-height: 1.6;
- color: var(--color-text-primary);
- margin-bottom: var(--spacing-md);
-}
-
-/* Small text */
-small, .text-small {
- font-size: var(--text-body-sm);
- color: var(--color-text-secondary);
-}
-
-/* Code */
-code {
- font-family: var(--font-mono);
- font-size: var(--text-code-inline);
- background-color: var(--color-code-bg);
- color: var(--color-code-text);
- padding: 2px 6px;
- border-radius: var(--radius-sm);
-}
-
-pre {
- font-family: var(--font-mono);
- font-size: var(--text-code-block);
- line-height: var(--text-code-lh);
- background-color: var(--color-code-bg);
- color: var(--color-code-text);
- padding: var(--spacing-md);
- border-radius: var(--radius-md);
- overflow-x: auto;
- margin-bottom: var(--spacing-md);
-}
-
-pre code {
- background: none;
- padding: 0;
- border-radius: 0;
-}
-
-/* ============================================================================
- 4. GLOBAL STYLES & LAYOUT
- ============================================================================ */
-
-html {
- scroll-behavior: smooth;
- overflow-x: hidden;
-}
-
-body {
- display: flex;
- flex-direction: column;
- min-height: 100vh;
-}
-
-/* Skip Link (accessibility) */
-.skip-link {
- position: absolute;
- left: -9999px;
- z-index: var(--z-modal);
- padding: var(--spacing-md);
- background: var(--color-brand-primary);
- color: white;
- text-decoration: none;
- border-radius: var(--radius-sm);
-}
-
-.skip-link:focus {
- left: var(--spacing-md);
- top: var(--spacing-md);
-}
-
-/* Main content area */
-#main {
- flex: 1;
- width: 100%;
-}
-
-/* Container for page content */
-.ps-container {
- max-width: var(--container-lg);
- margin: 0 auto;
- padding: 0 var(--spacing-lg);
- width: 100%;
-}
-
-.ps-container-wide {
- max-width: var(--container-2xl);
- margin: 0 auto;
- padding: 0 var(--spacing-lg);
- width: 100%;
-}
-
-/* ============================================================================
- 5. LINK STYLING (Scope: body content vs navigation)
- ============================================================================ */
-
-/* Body content links: underlined */
-.site-content a,
-.post-content a,
-article a,
-.page-content a {
- color: var(--color-brand-primary);
- text-decoration: underline;
- text-decoration-thickness: 1px;
- text-underline-offset: 3px;
- transition: color var(--transition-normal);
-}
-
-.site-content a:hover,
-.post-content a:hover,
-article a:hover,
-.page-content a:hover {
- color: var(--color-link-hover);
-}
-
-.site-content a:focus,
-.post-content a:focus,
-article a:focus,
-.page-content a:focus {
- outline: var(--focus-width) solid var(--focus-color);
- outline-offset: var(--focus-offset);
-}
-
-/* Footer links: underlined */
-.site-footer a {
- color: var(--color-brand-primary);
- text-decoration: underline;
- text-decoration-thickness: 1px;
- text-underline-offset: 3px;
- transition: color var(--transition-normal);
-}
-
-.site-footer a:hover {
- color: var(--color-link-hover);
-}
-
-/* Navigation links: NO underline (context is clear) */
-nav a {
- text-decoration: none;
-}
-
-/* ============================================================================
- 6. COMPONENTS
- ============================================================================ */
-
-/* ---- BUTTONS ---- */
-
-.ps-btn {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- gap: var(--spacing-sm);
- padding: var(--btn-padding-y) var(--btn-padding-x);
- border: none;
- border-radius: var(--radius-md);
- font-family: var(--font-sans);
- font-size: var(--text-body-md);
- font-weight: 500;
- cursor: pointer;
- transition: all var(--transition-normal);
- text-decoration: none;
- white-space: nowrap;
- user-select: none;
-}
-
-.ps-btn:disabled {
- opacity: 0.5;
- cursor: not-allowed;
-}
-
-.ps-btn:focus {
- outline: none;
- box-shadow: var(--focus-shadow);
-}
-
-/* Primary Button */
-.ps-btn-primary {
- background-color: var(--color-brand-primary);
- color: white;
-}
-
-.ps-btn-primary:hover {
- background-color: var(--color-link-hover);
- transform: translateY(-1px);
- box-shadow: 0 4px 16px rgba(27, 138, 146, 0.2);
-}
-
-.ps-btn-primary:active {
- transform: translateY(0);
-}
-
-/* Secondary Button (ghost/outline style) */
-.ps-btn-secondary {
- background-color: transparent;
- color: var(--color-text-primary);
- border: 1px solid var(--color-border-default);
- border-radius: var(--radius-lg);
-}
-
-.ps-btn-secondary:hover {
- background-color: var(--color-bg-secondary);
- border-color: var(--color-brand-primary);
- color: var(--color-brand-primary);
-}
-
-/* Tertiary Button */
-.ps-btn-tertiary {
- background-color: transparent;
- color: var(--color-brand-primary);
- border: 1px solid var(--color-brand-primary);
-}
-
-.ps-btn-tertiary:hover {
- background-color: var(--color-brand-primary);
- color: white;
-}
-
-/* Button Sizes */
-.ps-btn-sm {
- padding: var(--spacing-sm) var(--spacing-md);
- font-size: var(--text-body-sm);
-}
-
-.ps-btn-lg {
- padding: var(--spacing-lg) var(--spacing-2xl);
- font-size: var(--text-body-lg);
-}
-
-.ps-btn-full {
- width: 100%;
-}
-
-/* ---- CARDS ---- */
-
-.ps-card {
- background-color: var(--color-bg-primary);
- border: 1px solid var(--color-border-default);
- border-radius: var(--radius-lg);
- padding: var(--spacing-lg);
- transition: all var(--transition-normal);
-}
-
-.ps-card:hover {
- border-color: var(--color-brand-primary);
- box-shadow: 0 4px 12px rgba(27, 138, 146, 0.1);
-}
-
-.ps-card-header {
- margin-bottom: var(--spacing-md);
-}
-
-.ps-card-title {
- font-size: var(--text-h5);
- font-weight: 600;
- color: var(--color-text-primary);
- margin-bottom: var(--spacing-sm);
-}
-
-.ps-card-meta {
- font-size: var(--text-caption);
- color: var(--color-text-secondary);
-}
-
-.ps-card-content {
- font-size: var(--text-body-md);
- line-height: 1.6;
- color: var(--color-text-primary);
-}
-
-/* ---- FEATURED IMAGES ---- */
-
-.ps-featured-image {
- width: 100%;
- text-align: center;
- border-radius: var(--radius-lg);
- overflow: hidden;
-}
-
-.ps-featured-image img {
- display: block;
- width: 100%;
- max-width: 100%;
- height: auto;
- margin: 0 auto;
- border-radius: var(--radius-lg);
-}
-
-/* ---- BADGES & TAGS ---- */
-
-.ps-badge {
- display: inline-block;
- padding: 4px 8px;
- border-radius: var(--radius-md);
- font-size: var(--text-label);
- font-weight: var(--text-label-weight);
- background-color: var(--color-badge-bg);
- color: var(--color-badge-text);
- white-space: nowrap;
-}
-
-.ps-badge-success {
- background-color: #D1FAE5;
- color: var(--color-status-success);
-}
-
-.ps-badge-warning {
- background-color: #FEF3C7;
- color: var(--color-status-warning);
-}
-
-.ps-badge-error {
- background-color: #FEE2E2;
- color: var(--color-status-error);
-}
-
-.ps-tag {
- display: inline-flex;
- align-items: center;
- gap: var(--spacing-xs);
- padding: 4px 8px;
- border-radius: var(--radius-md);
- font-size: var(--text-label);
- background-color: var(--color-bg-tertiary);
- color: var(--color-text-primary);
- cursor: pointer;
- transition: all var(--transition-normal);
-}
-
-.ps-tag:hover {
- background-color: var(--color-border-default);
-}
-
-.ps-tag-close {
- width: 16px;
- height: 16px;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- font-weight: 600;
-}
-
-/* ---- FORMS ---- */
-
-input[type="text"],
-input[type="email"],
-input[type="password"],
-input[type="search"],
-input[type="number"],
-input[type="url"],
-textarea,
-select {
- width: 100%;
- padding: var(--spacing-md);
- border: 1px solid var(--color-border-default);
- border-radius: var(--radius-md);
- font-family: var(--font-sans);
- font-size: var(--text-body-md);
- background-color: var(--color-bg-primary);
- color: var(--color-text-primary);
- transition: all var(--transition-normal);
-}
-
-input[type="text"]:focus,
-input[type="email"]:focus,
-input[type="password"]:focus,
-input[type="search"]:focus,
-input[type="number"]:focus,
-input[type="url"]:focus,
-textarea:focus,
-select:focus {
- outline: none;
- border-color: var(--color-brand-primary);
- box-shadow: var(--focus-shadow);
- background-color: var(--color-bg-secondary);
-}
-
-/* Form labels */
-label {
- display: block;
- margin-bottom: var(--spacing-sm);
- font-size: var(--text-label);
- font-weight: var(--text-label-weight);
- color: var(--color-text-primary);
-}
-
-/* Form groups */
-.ps-form-group {
- margin-bottom: var(--spacing-lg);
-}
-
-/* Form error state (per Design Director) */
-input.ps-error,
-textarea.ps-error,
-select.ps-error {
- border-color: var(--color-status-error);
- background-color: rgba(220, 38, 38, 0.02);
-}
-
-.ps-form-error {
- color: var(--color-status-error);
- font-size: var(--text-caption);
- margin-top: 4px;
- font-weight: var(--text-label-weight);
-}
-
-/* Checkboxes & Radios */
-input[type="checkbox"],
-input[type="radio"] {
- width: 18px;
- height: 18px;
- margin: 0;
- margin-right: var(--spacing-sm);
- cursor: pointer;
- accent-color: var(--color-brand-primary);
-}
-
-/* ---- ALERTS & CALLOUTS ---- */
-
-.ps-alert {
- padding: var(--spacing-lg);
- border-radius: var(--radius-md);
- border-left: 4px solid;
- margin-bottom: var(--spacing-md);
-}
-
-.ps-alert-info {
- background-color: var(--teal-50);
- border-color: var(--color-brand-primary);
- color: var(--teal-700);
-}
-
-.ps-alert-success {
- background-color: #D1FAE5;
- border-color: var(--color-status-success);
- color: #065F46;
-}
-
-.ps-alert-warning {
- background-color: #FEF3C7;
- border-color: var(--color-status-warning);
- color: #78350F;
-}
-
-.ps-alert-error {
- background-color: #FEE2E2;
- border-color: var(--color-status-error);
- color: #7F1D1D;
-}
-
-/* ---- SEARCH FORM ---- */
-
-.ps-search-form {
- position: relative;
- width: 100%;
-}
-
-.ps-search-input {
- width: 100%;
- padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-lg);
- border: 1px solid var(--color-border-default);
- border-radius: var(--radius-lg);
- font-size: var(--text-body-md);
-}
-
-.ps-search-input:focus {
- outline: none;
- border-color: var(--color-brand-primary);
- box-shadow: var(--focus-shadow);
-}
-
-.ps-search-icon {
- position: absolute;
- right: var(--spacing-md);
- top: 50%;
- transform: translateY(-50%);
- color: var(--color-text-secondary);
- pointer-events: none;
-}
-
-/* ---- PAGINATION ---- */
-
-.ps-pagination {
- display: flex;
- gap: var(--spacing-sm);
- align-items: center;
- justify-content: center;
- margin: var(--spacing-2xl) 0;
- flex-wrap: wrap;
-}
-
-.ps-pagination a,
-.ps-pagination span {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- min-width: 40px;
- height: 40px;
- padding: 0 var(--spacing-sm);
- border: 1px solid var(--color-border-default);
- border-radius: var(--radius-md);
- text-decoration: none;
- color: var(--color-text-primary);
- transition: all var(--transition-normal);
-}
-
-.ps-pagination a:hover {
- border-color: var(--color-brand-primary);
- background-color: var(--color-brand-primary);
- color: white;
-}
-
-.ps-pagination .current {
- background-color: var(--color-brand-primary);
- border-color: var(--color-brand-primary);
- color: white;
-}
-
-/* ============================================================================
- 7. REGIONS (Header, Footer, Main)
- ============================================================================ */
-
-/* ---- HEADER ---- */
-
-.site-header {
- background-color: var(--color-bg-primary);
- border-bottom: 1px solid var(--color-border-subtle);
- padding: var(--spacing-lg) var(--spacing-xl);
- position: sticky;
- top: 0;
- z-index: var(--z-sticky);
- box-shadow: var(--shadow-sm);
-}
-
-/* Account for WP admin bar when logged in */
-.admin-bar .site-header {
- top: 32px;
-}
-
-@media screen and (max-width: 782px) {
- .admin-bar .site-header {
- top: 46px;
- }
-}
-
-.site-header-wrapper {
- max-width: var(--container-2xl);
- margin: 0 auto;
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: var(--spacing-lg);
-}
-
-/* Logo */
-.site-logo {
- flex: 0 0 auto;
- font-size: 24px;
- font-weight: 700;
- color: var(--color-brand-primary);
- text-decoration: none;
- line-height: 1;
- transition: color var(--transition-normal);
-}
-
-.site-logo:hover {
- color: var(--color-link-hover);
-}
-
-.site-logo img {
- height: 32px;
- width: auto;
-}
-
-/* Primary Navigation */
-.primary-navigation {
- display: flex;
- align-items: center;
- flex: 1;
- margin-left: var(--spacing-lg);
- margin-right: auto;
-}
-
-.primary-navigation ul {
- display: flex;
- gap: var(--spacing-xl);
- align-items: center;
- list-style: none;
- margin: 0;
- padding: 0;
-}
-
-.primary-navigation li {
- display: flex;
- align-items: center;
-}
-
-.primary-navigation a {
- font-size: var(--text-body-md);
- font-weight: 500;
- color: var(--color-text-primary);
- text-decoration: none;
- position: relative;
- transition: color var(--transition-normal);
-}
-
-.primary-navigation a:hover {
- color: var(--color-brand-primary);
-}
-
-.primary-navigation a::after {
- content: '';
- position: absolute;
- bottom: -2px;
- left: 0;
- right: 0;
- height: 2px;
- background: var(--color-brand-primary);
- transform: scaleX(0);
- transform-origin: right;
- transition: transform var(--transition-normal);
-}
-
-.primary-navigation a:hover::after,
-.primary-navigation a.active::after {
- transform: scaleX(1);
- transform-origin: left;
-}
-
-/* Header Icons */
-.header-icons {
- display: flex;
- align-items: center;
- gap: var(--spacing-md);
-}
-
-.header-icon-btn {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 40px;
- height: 40px;
- border: none;
- background: none;
- color: var(--color-text-primary);
- cursor: pointer;
- transition: color var(--transition-normal);
- padding: 0;
-}
-
-.header-icon-btn:hover {
- color: var(--color-brand-primary);
-}
-
-.header-icon-btn:focus {
- outline: none;
- box-shadow: var(--focus-shadow);
- border-radius: var(--radius-md);
-}
-
-/* Header CTA button — hidden on mobile */
-.ps-header-cta {
- display: none;
- border-radius: var(--radius-lg);
-}
-
-@media (min-width: 768px) {
- .ps-header-cta {
- display: inline-flex;
- }
-}
-
-/* Hamburger Menu */
-.menu-toggle {
- display: none;
- width: 40px;
- height: 40px;
- border: none;
- background: none;
- cursor: pointer;
- padding: 0;
- color: var(--color-text-primary);
-}
-
-/* Mobile Navigation */
-.nav-overlay {
- position: fixed;
- inset: 0;
- background: rgba(0, 0, 0, 0.3);
- opacity: 0;
- pointer-events: none;
- z-index: var(--z-modal-backdrop);
- transition: opacity var(--transition-slow);
-}
-
-.nav-overlay.active {
- opacity: 1;
- pointer-events: auto;
-}
-
-/* ---- FOOTER ---- */
-
-.site-footer {
- background-color: var(--color-bg-secondary);
- border-top: 1px solid var(--color-border-subtle);
- padding: var(--spacing-3xl) var(--spacing-lg);
- margin-top: auto;
-}
-
-.footer-wrapper {
- max-width: var(--container-2xl);
- margin: 0 auto;
-}
-
-.footer-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
- gap: var(--spacing-2xl);
- margin-bottom: var(--spacing-3xl);
-}
-
-.footer-section h3 {
- font-size: var(--text-h5);
- margin-bottom: var(--spacing-lg);
-}
-
-.footer-section ul {
- list-style: none;
- display: flex;
- flex-direction: column;
- gap: var(--spacing-md);
-}
-
-.footer-section a {
- color: var(--color-brand-primary);
- text-decoration: underline;
- transition: color var(--transition-normal);
-}
-
-.footer-section a:hover {
- color: var(--color-link-hover);
-}
-
-.footer-newsletter {
- background-color: var(--color-bg-tertiary);
- padding: var(--spacing-2xl);
- border-radius: var(--radius-lg);
- margin-bottom: var(--spacing-3xl);
-}
-
-.footer-newsletter h3 {
- margin-top: 0;
-}
-
-.newsletter-form {
- display: flex;
- gap: var(--spacing-sm);
- margin-top: var(--spacing-lg);
-}
-
-.newsletter-form input {
- flex: 1;
- min-width: 200px;
-}
-
-.newsletter-form button {
- flex: 0 0 auto;
-}
-
-.footer-bottom {
- border-top: 1px solid var(--color-border-default);
- padding-top: var(--spacing-2xl);
- text-align: center;
- color: var(--color-text-secondary);
- font-size: var(--text-body-sm);
-}
-
-/* ============================================================================
- 8. PAGES
- ============================================================================ */
-
-/* ---- HOME PAGE / HERO ---- */
-
-.hero-section {
- background-color: var(--color-bg-primary);
- padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-2xl);
- text-align: center;
- position: relative;
- overflow: hidden;
-}
-
-/* Decorative geometric shapes (Clawdiverse-inspired) */
-.hero-section::before,
-.hero-section::after {
- content: '';
- position: absolute;
- border-radius: 50%;
- pointer-events: none;
- z-index: 0;
-}
-
-/* Soft pink circle — top left */
-.hero-section::before {
- width: 200px;
- height: 200px;
- background: rgba(27, 138, 146, 0.07);
- top: 8%;
- left: -4%;
-}
-
-/* Mint/teal shape — right side */
-.hero-section::after {
- width: 260px;
- height: 260px;
- background: rgba(127, 214, 0, 0.07);
- top: 20%;
- right: -6%;
-}
-
-.hero-content {
- max-width: var(--container-lg);
- margin: 0 auto;
- position: relative;
- z-index: 1;
-}
-
-.hero-title {
- font-size: 48px;
- font-weight: 800;
- margin-bottom: var(--spacing-md);
- color: var(--color-text-primary);
- letter-spacing: -0.03em;
- line-height: 1.1;
-}
-
-/* Accent word in hero title */
-.hero-title .ps-hero-accent {
- color: var(--color-brand-primary);
- position: relative;
- display: inline-block;
-}
-
-/* Wavy underline on accent word */
-.hero-title .ps-hero-accent::after {
- content: '';
- position: absolute;
- bottom: -4px;
- left: 0;
- right: 0;
- height: 6px;
- background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8'%3E%3Cpath d='M0 4 Q12.5 0 25 4 T50 4 T75 4 T100 4' fill='none' stroke='%231B8A92' stroke-width='2'/%3E%3C/svg%3E") repeat-x;
- background-size: 50px 6px;
-}
-
-.hero-subtitle {
- font-size: var(--text-body-lg);
- color: var(--color-text-secondary);
- margin-bottom: var(--spacing-lg);
- max-width: 600px;
- margin-left: auto;
- margin-right: auto;
- line-height: 1.7;
-}
-
-.hero-search {
- margin-bottom: var(--spacing-lg);
-}
-
-/* Legacy theme search form (fallback when PSA plugin is not active) */
-.hero-search .ps-search-form {
- max-width: 560px;
- margin: 0 auto;
-}
-
-.hero-search .ps-search-input {
- width: 100%;
- padding: var(--spacing-md) var(--spacing-lg);
- padding-right: 48px;
- background-color: #FFFFFF;
- color: var(--color-text-primary);
- border: 1px solid var(--color-border-default);
- border-radius: var(--radius-lg);
- box-shadow: var(--shadow-sm);
-}
-
-/* ---- PEPTIDE SEARCH AI PLUGIN INTEGRATION ---- */
-
-/* Hero search — constrain the PSA form to match hero layout */
-.hero-search .psa-search-wrap {
- max-width: 560px;
- margin: 0 auto;
-}
-
-.hero-search .psa-search-input {
- background-color: #FFFFFF;
- color: var(--color-text-primary);
- border: 1px solid var(--color-border-default);
- border-radius: var(--radius-lg);
- font-size: var(--text-body-lg);
- padding: var(--spacing-md) var(--spacing-lg);
- box-shadow: var(--shadow-sm);
-}
-
-.hero-search .psa-search-input::placeholder {
- color: var(--color-text-tertiary);
-}
-
-.hero-search .psa-search-input:focus {
- outline: none;
- border-color: var(--color-brand-primary);
- box-shadow: var(--focus-shadow);
-}
-
-.hero-search .psa-search-btn {
- background-color: var(--lime-500); /* CMO brief §6: lime submit in hero */
- color: var(--color-ink);
- border: none;
- border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
- cursor: pointer;
- font-family: "Poppins", sans-serif;
- font-weight: 600;
- transition: background-color var(--transition-normal);
-}
-
-.hero-search .psa-search-btn:hover {
- background-color: var(--lime-600);
-}
-
-.hero-search .psa-search-results {
- text-align: left;
- max-height: 400px;
- overflow-y: auto;
- border-radius: var(--radius-lg);
- box-shadow: var(--shadow-lg);
- background-color: var(--color-bg-primary);
- border: 1px solid var(--color-border-default);
-}
-
-/* Search overlay — full-screen overlay triggered from header search icon */
-.search-overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.6);
- backdrop-filter: blur(4px);
- z-index: var(--z-modal, 1000);
- display: flex;
- align-items: flex-start;
- justify-content: center;
- padding-top: 120px;
- opacity: 0;
- visibility: hidden;
- transition: opacity var(--transition-normal), visibility var(--transition-normal);
-}
-
-.search-overlay.active {
- opacity: 1;
- visibility: visible;
-}
-
-.search-overlay-inner {
- background-color: var(--color-bg-primary);
- border-radius: var(--radius-xl);
- padding: var(--spacing-xl);
- width: 90%;
- max-width: 600px;
- position: relative;
- box-shadow: var(--shadow-xl);
- transform: translateY(-20px);
- transition: transform var(--transition-normal);
-}
-
-.search-overlay.active .search-overlay-inner {
- transform: translateY(0);
-}
-
-.search-overlay-close {
- position: absolute;
- top: var(--spacing-md);
- right: var(--spacing-md);
- background: none;
- border: none;
- color: var(--color-text-secondary);
- cursor: pointer;
- padding: var(--spacing-xs);
- border-radius: var(--radius-md);
- transition: color var(--transition-normal), background-color var(--transition-normal);
- z-index: 1;
-}
-
-.search-overlay-close:hover {
- color: var(--color-text-primary);
- background-color: var(--color-bg-secondary);
-}
-
-.search-overlay-content {
- padding-top: var(--spacing-sm);
-}
-
-/* PSA plugin styling inside the overlay */
-.search-overlay .psa-search-input {
- background-color: var(--color-bg-secondary);
- color: var(--color-text-primary);
- border: 1px solid var(--color-border-default);
- border-radius: var(--radius-lg);
- font-size: var(--text-body-md);
- padding: var(--spacing-md) var(--spacing-lg);
-}
-
-.search-overlay .psa-search-input::placeholder {
- color: var(--color-text-tertiary);
-}
-
-.search-overlay .psa-search-input:focus {
- outline: none;
- border-color: var(--color-brand-primary);
- box-shadow: var(--focus-shadow);
-}
-
-.search-overlay .psa-search-btn {
- background-color: var(--color-brand-primary);
- color: white;
- border: none;
- border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
- cursor: pointer;
- transition: background-color var(--transition-normal);
-}
-
-.search-overlay .psa-search-btn:hover {
- background-color: var(--color-brand-hover);
-}
-
-.search-overlay .psa-search-results {
- max-height: 350px;
- overflow-y: auto;
- border-radius: var(--radius-lg);
- margin-top: var(--spacing-md);
-}
-
-.search-overlay .psa-checking,
-.search-overlay .psa-pending,
-.search-overlay .psa-invalid,
-.search-overlay .psa-error {
- margin-top: var(--spacing-md);
- border-radius: var(--radius-lg);
-}
-
-
-/* ---- VERDICT TAXONOMY EXPLAINER (homepage) ---- */
-
-.hero-verdict-explainer {
- background: var(--bg-inset, var(--gray-100));
- padding: var(--spacing-2xl) var(--spacing-xl);
- border-top: 1px solid var(--border-default, #E8E8E8);
-}
-
-.hero-verdict-explainer__heading {
- text-align: center;
- font-family: "Poppins", sans-serif;
- font-weight: 600;
- font-size: 16px;
- color: var(--text-secondary, var(--color-text-secondary));
- margin-bottom: var(--spacing-xl);
- letter-spacing: 0.01em;
-}
-
-.hero-verdict-explainer__grid {
- display: grid;
- grid-template-columns: repeat(5, 1fr);
- gap: var(--spacing-md);
- max-width: var(--container-xl);
- margin: 0 auto var(--spacing-xl);
- align-items: start;
-}
-
-.hero-verdict-explainer__item {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: var(--spacing-sm);
- text-align: center;
-}
-
-.hero-verdict-explainer__desc {
- font-family: "Inter", sans-serif;
- font-size: 12px;
- color: var(--text-muted, var(--color-text-tertiary));
- line-height: 1.5;
- max-width: 160px;
-}
-
-.hero-verdict-explainer__cta-line {
- text-align: center;
-}
-
-/* ---- FEATURED VERDICT CARDS (homepage) ---- */
-
-.hero-featured-verdicts {
- padding: var(--spacing-3xl) var(--spacing-xl);
- background: var(--bg-surface, #FFFFFF);
-}
-
-.hero-featured-verdicts__title {
- text-align: center;
- font-family: "Poppins", sans-serif;
- font-weight: 700;
- font-size: 28px;
- color: var(--text-primary, var(--color-text-primary));
- margin-bottom: var(--spacing-sm);
- margin-top: 0;
-}
-
-.hero-featured-verdicts__subtitle {
- text-align: center;
- font-size: 15px;
- color: var(--text-secondary, var(--color-text-secondary));
- margin-bottom: var(--spacing-2xl);
-}
-
-.hero-featured-verdicts__grid {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: var(--spacing-2xl);
- max-width: var(--container-xl);
- margin: 0 auto var(--spacing-xl);
-}
-
-.hero-verdict-card {
- background: var(--bg-surface, #FFFFFF);
- border: 1px solid var(--border-default, #E8E8E8);
- border-radius: var(--radius-lg, 12px);
- padding: var(--spacing-xl);
- box-shadow: 0 1px 2px rgba(13, 13, 13, 0.04), 0 2px 8px rgba(13, 13, 13, 0.04);
- display: flex;
- flex-direction: column;
- gap: var(--spacing-md);
- transition: box-shadow var(--transition-normal);
-}
-
-.hero-verdict-card:hover {
- box-shadow: 0 2px 4px rgba(13, 13, 13, 0.06), 0 8px 16px rgba(13, 13, 13, 0.06);
-}
-
-.hero-verdict-card__badge {
- align-self: flex-start;
-}
-
-.hero-verdict-card__title {
- font-family: "Poppins", sans-serif;
- font-weight: 700;
- font-size: 20px;
- color: var(--text-primary, var(--color-text-primary));
- /* Pull title closer to badge — badge is conceptually a label for the title.
- Card uses gap: --spacing-md (16px); this offsets by --spacing-sm (8px)
- so effective badge→title gap = 16 - 8 = 8px. */
- margin: calc(var(--spacing-sm) - var(--spacing-md)) 0 0;
- line-height: 1.3;
-}
-
-.hero-verdict-card__title a {
- color: inherit;
- text-decoration: none;
-}
-
-.hero-verdict-card__title a:hover {
- color: var(--teal-600, var(--color-brand-primary));
-}
-
-.hero-verdict-card__summary {
- font-family: "Inter", sans-serif;
- font-size: 14px;
- line-height: 1.65;
- color: var(--text-secondary, var(--color-text-secondary));
- flex: 1;
-}
-
-.hero-verdict-card__signals {
- list-style: none;
- background: var(--bg-inset, var(--gray-100));
- border-radius: var(--radius-md, 8px);
- padding: var(--spacing-md) var(--spacing-lg);
- margin: 0;
- display: flex;
- flex-direction: column;
- gap: var(--spacing-sm);
-}
-
-.hero-verdict-card__signal-item {
- display: flex;
- align-items: flex-start;
- gap: var(--spacing-sm);
- font-family: "Inter", sans-serif;
- font-size: 13px;
- color: var(--text-primary, var(--color-text-primary));
- line-height: 1.4;
-}
-
-.hero-verdict-card__signal-glyph {
- flex-shrink: 0;
- font-weight: 600;
- width: 16px;
- text-align: center;
-}
-
-.hero-verdict-card__link {
- font-family: "Poppins", sans-serif;
- font-weight: 600;
- font-size: 14px;
- color: var(--teal-600, var(--color-brand-primary));
- text-decoration: none;
- align-self: flex-start;
- margin-top: auto;
-}
-
-.hero-verdict-card__link:hover {
- color: var(--teal-700);
- text-decoration: underline;
-}
-
-.hero-featured-verdicts__footer {
- text-align: center;
-}
-
-/* Responsive: verdict explainer → 2-col on tablet, 1-col on mobile */
-@media (max-width: 900px) {
- .hero-verdict-explainer__grid {
- grid-template-columns: repeat(3, 1fr);
- }
-
- .hero-featured-verdicts__grid {
- grid-template-columns: repeat(2, 1fr);
- }
-}
-
-@media (max-width: 600px) {
- .hero-verdict-explainer__grid {
- grid-template-columns: repeat(2, 1fr);
- }
-
- .hero-featured-verdicts__grid {
- grid-template-columns: 1fr;
- }
-
- .hero-verdict-explainer__desc {
- max-width: none;
- }
-}
-
-/* ---- PEPTIDE NEWS PLUGIN OVERRIDES ---- */
-/* Remove line-clamp so full article summaries are visible.
- Uses body prefix for specificity to beat the plugin's own stylesheet
- which loads after the theme. */
-body .pn-article-excerpt,
-body p.pn-article-excerpt {
- -webkit-line-clamp: unset;
- -webkit-box-orient: unset;
- display: block;
- overflow: visible;
- font-size: var(--text-body-md);
- line-height: 1.6;
-}
-
-/* Tighten article card title for density */
-body .pn-article-title {
- font-size: var(--text-h4);
- line-height: 1.3;
-}
-
-.hero-ctas {
- display: flex;
- gap: var(--spacing-md);
- justify-content: center;
- flex-wrap: wrap;
-}
-
-.hero-ctas .ps-btn {
- padding: var(--btn-padding-y) var(--btn-padding-x);
-}
-
-/* News Feed Area */
-.news-feed-section {
- padding: var(--spacing-2xl) var(--spacing-lg);
- background-color: var(--color-bg-primary);
-}
-
-.news-feed-header {
- max-width: var(--container-lg);
- margin: 0 auto var(--spacing-2xl);
- text-align: center;
-}
-
-.news-feed-title {
- font-size: var(--text-h2);
- margin-bottom: var(--spacing-md);
-}
-
-.news-feed-description {
- color: var(--color-text-secondary);
- font-size: var(--text-body-md);
-}
-
-/* ---- ARCHIVE PAGE ---- */
-
-.archive-header {
- padding: var(--spacing-3xl) var(--spacing-lg) var(--spacing-2xl);
- background-color: var(--color-bg-primary);
- position: relative;
- overflow: hidden;
-}
-
-/* Decorative shape on archive header */
-.archive-header::after {
- content: '';
- position: absolute;
- width: 180px;
- height: 180px;
- background: rgba(127, 214, 0, 0.07);
- border-radius: 50%;
- top: -40px;
- right: -40px;
- pointer-events: none;
-}
-
-.archive-title {
- max-width: var(--container-lg);
- margin: 0 auto;
- font-size: var(--text-h2);
- color: var(--color-text-primary);
-}
-
-.archive-content {
- padding: var(--spacing-2xl) var(--spacing-lg);
-}
-
-.archive-filters {
- max-width: var(--container-lg);
- margin: 0 auto var(--spacing-2xl);
- display: flex;
- gap: var(--spacing-md);
- flex-wrap: wrap;
- align-items: center;
-}
-
-.archive-search {
- flex: 1;
- min-width: 200px;
-}
-
-.archive-grid {
- max-width: var(--container-lg);
- margin: 0 auto;
- display: grid;
- grid-template-columns: 1fr;
- gap: var(--spacing-2xl);
-}
-
-.peptides-grid {
- max-width: var(--container-2xl);
- margin: 0 auto;
- display: grid;
- grid-template-columns: 1fr;
- gap: var(--spacing-lg);
- padding: var(--spacing-xl) var(--spacing-lg);
-}
-
-/* Peptide Card (Clawdiverse-inspired: white card, tinted left border, soft shadow) */
-.peptide-card {
- background-color: var(--color-bg-primary);
- border: 1px solid var(--color-border-default);
- border-left: 3px solid var(--color-accent-mint);
- border-radius: var(--radius-lg);
- padding: var(--spacing-xl);
- display: flex;
- flex-direction: column;
- transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
- position: relative;
-}
-
-.peptide-card:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
- border-left-width: 4px;
-}
-
-/* Category-coded left borders via nth-child for visual variety */
-.peptide-card:nth-child(4n+1) { border-left-color: var(--color-accent-mint); }
-.peptide-card:nth-child(4n+2) { border-left-color: var(--color-accent-sky); }
-.peptide-card:nth-child(4n+3) { border-left-color: var(--color-accent-lavender); }
-.peptide-card:nth-child(4n+4) { border-left-color: var(--color-accent-peach); }
-
-.peptide-card__header {
- margin-bottom: var(--spacing-md);
-}
-
-.peptide-card__title {
- font-size: var(--text-h5);
- font-weight: 600;
- line-height: 1.3;
- margin: 0 0 var(--spacing-sm) 0;
-}
-
-.peptide-card__title a {
- color: var(--color-text-primary);
- text-decoration: none;
- transition: color var(--transition-fast);
-}
-
-.peptide-card__title a:hover {
- color: var(--color-brand-primary);
-}
-
-.peptide-card__meta {
- display: flex;
- gap: var(--spacing-xs);
- flex-wrap: wrap;
-}
-
-/* Category tag pills (Clawdiverse-style colored pills) */
-.peptide-card__badge {
- display: inline-flex;
- align-items: center;
- gap: 4px;
- font-size: 11px;
- font-weight: 600;
- letter-spacing: 0.3px;
- padding: 3px 10px;
- border-radius: 100px;
- background-color: var(--color-accent-mint);
- color: #065F46;
-}
-
-/* Cycle badge colors to match card border */
-.peptide-card:nth-child(4n+2) .peptide-card__badge {
- background-color: var(--color-accent-sky);
- color: #1E3A5F;
-}
-
-.peptide-card:nth-child(4n+3) .peptide-card__badge {
- background-color: var(--color-accent-lavender);
- color: #4C1D95;
-}
-
-.peptide-card:nth-child(4n+4) .peptide-card__badge {
- background-color: var(--color-accent-peach);
- color: #7C2D12;
-}
-
-.peptide-card__excerpt {
- font-size: var(--text-body-md);
- line-height: 1.65;
- color: var(--color-text-secondary);
- margin-bottom: var(--spacing-lg);
- flex: 1;
- overflow: hidden;
-}
-
-.peptide-card__footer {
- margin-top: auto;
- padding-top: var(--spacing-md);
- border-top: 1px solid var(--color-border-subtle);
-}
-
-.peptide-card__link {
- display: inline-flex;
- align-items: center;
- gap: var(--spacing-xs);
- font-size: var(--text-body-sm);
- font-weight: 600;
- color: var(--color-brand-primary);
- text-decoration: none;
- transition: gap var(--transition-fast), color var(--transition-fast);
-}
-
-.peptide-card__link:hover {
- color: var(--color-link-hover);
- gap: var(--spacing-sm);
-}
-
-.peptide-card__link svg {
- transition: transform var(--transition-fast);
-}
-
-.peptide-card__link:hover svg {
- transform: translateX(2px);
-}
-
-.archive-empty {
- text-align: center;
- padding: var(--spacing-4xl) var(--spacing-lg);
-}
-
-.archive-empty h2 {
- margin-top: 0;
-}
-
-.archive-empty p {
- color: var(--color-text-secondary);
- margin-bottom: var(--spacing-2xl);
-}
-
-/* ---- SINGLE PAGE / PEPTIDE ---- */
-
-.page-header {
- padding: var(--spacing-3xl) var(--spacing-lg) var(--spacing-2xl);
- background-color: var(--color-bg-primary);
- position: relative;
- overflow: hidden;
-}
-
-/* Decorative accent on page header */
-.page-header::after {
- content: '';
- position: absolute;
- width: 160px;
- height: 160px;
- background: rgba(27, 138, 146, 0.07);
- border-radius: 50%;
- top: -30px;
- right: -30px;
- pointer-events: none;
-}
-
-.page-title {
- max-width: var(--container-lg);
- margin: 0 auto;
- font-size: var(--text-h1);
- font-weight: 800;
- letter-spacing: -0.02em;
- position: relative;
- z-index: 1;
-}
-
-.page-content {
- max-width: var(--container-lg);
- margin: 0 auto;
- padding: var(--spacing-3xl) var(--spacing-lg);
-}
-
-.page-content h2 {
- font-size: var(--text-h3);
- margin-top: var(--spacing-2xl);
- margin-bottom: var(--spacing-md);
-}
-
-.page-content h3 {
- font-size: var(--text-h4);
- margin-top: var(--spacing-xl);
- margin-bottom: var(--spacing-md);
-}
-
-.page-content ul,
-.page-content ol {
- margin-left: var(--spacing-lg);
- margin-bottom: var(--spacing-md);
-}
-
-.page-content li {
- margin-bottom: var(--spacing-sm);
-}
-
-
-/* ---- BACK LINK (breadcrumb-style) ---- */
-
-.ps-back-link {
- display: inline-flex;
- align-items: center;
- gap: var(--spacing-xs);
- font-size: var(--text-body-sm);
- font-weight: 500;
- color: var(--color-text-secondary);
- text-decoration: none;
- margin-bottom: var(--spacing-lg);
- transition: color var(--transition-fast);
-}
-
-.ps-back-link:hover {
- color: var(--color-brand-primary);
-}
-
-/* ---- FEATURED BADGE ---- */
-
-.ps-featured-badge {
- display: inline-flex;
- align-items: center;
- gap: 4px;
- padding: 4px 12px;
- border-radius: 100px;
- font-size: var(--text-label);
- font-weight: 700;
- background-color: var(--color-featured-bg);
- color: var(--color-featured-text);
- margin-bottom: var(--spacing-md);
-}
-
-/* ---- PEPTIDE META CARDS (single page) ---- */
-
-.peptide-meta-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- gap: var(--spacing-md);
- margin-top: var(--spacing-2xl);
-}
-
-.peptide-meta-card {
- background-color: var(--color-bg-secondary);
- border: 1px solid var(--color-border-subtle);
- border-radius: var(--radius-lg);
- padding: var(--spacing-lg);
-}
-
-.peptide-meta-card dt {
- font-size: var(--text-label);
- font-weight: 600;
- color: var(--color-text-secondary);
- text-transform: uppercase;
- letter-spacing: 0.5px;
- margin-bottom: var(--spacing-xs);
-}
-
-.peptide-meta-card dd {
- font-size: var(--text-body-md);
- font-weight: 500;
- color: var(--color-text-primary);
-}
-
-.peptide-meta-card dd code {
- font-size: var(--text-body-sm);
-}
-
-/* ---- PEPTIDE CONTENT BOX (description block on single page) ---- */
-
-.peptide-content-box {
- background-color: var(--color-bg-secondary);
- border: 1px solid var(--color-border-subtle);
- border-radius: var(--radius-lg);
- padding: var(--spacing-xl);
- margin-bottom: var(--spacing-2xl);
-}
-
-/* ---- SECTION HEADING WITH ICON (Clawdiverse-style) ---- */
-
-.ps-section-heading {
- display: flex;
- align-items: center;
- gap: var(--spacing-sm);
- font-size: var(--text-h3);
- font-weight: 700;
- margin-bottom: var(--spacing-lg);
- color: var(--color-text-primary);
-}
-
-.ps-section-heading .ps-section-icon {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: 32px;
- height: 32px;
- border-radius: 50%;
- font-size: 16px;
-}
-
-/* ---- DECORATIVE BODY SHAPES ---- */
-/* Geometric accents on the main content area for visual warmth */
-
-body > .site-main {
- position: relative;
-}
-
-/* Large peach blob — left side of body */
-body > .site-main::before {
- content: '';
- position: absolute;
- width: 300px;
- height: 300px;
- background: rgba(254, 226, 213, 0.15);
- border-radius: 50%;
- top: 40%;
- left: -8%;
- pointer-events: none;
- z-index: 0;
-}
-
-/* Lavender ring — right side of body */
-body > .site-main::after {
- content: '';
- position: absolute;
- width: 200px;
- height: 200px;
- border: 30px solid rgba(237, 233, 254, 0.12);
- border-radius: 50%;
- top: 65%;
- right: -3%;
- pointer-events: none;
- z-index: 0;
-}
-
-/* ---- 404 PAGE ---- */
-
-.error-404 {
- text-align: center;
- padding: var(--spacing-4xl) var(--spacing-lg);
-}
-
-.error-404 h1 {
- font-size: var(--text-h1);
- margin-bottom: var(--spacing-lg);
-}
-
-.error-404 p {
- color: var(--color-text-secondary);
- margin-bottom: var(--spacing-2xl);
- font-size: var(--text-body-md);
-}
-
-/* ============================================================================
- 9. ANIMATIONS & TRANSITIONS
- ============================================================================ */
-
-/* Fade in animation */
-@keyframes fadeIn {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-.fade-in {
- animation: fadeIn var(--transition-slow) ease-out;
-}
-
-/* Slide in from left */
-@keyframes slideInLeft {
- from {
- transform: translateX(-100%);
- opacity: 0;
- }
- to {
- transform: translateX(0);
- opacity: 1;
- }
-}
-
-.slide-in-left {
- animation: slideInLeft var(--transition-slow) ease-out;
-}
-
-/* Skeleton loading animation */
-@keyframes shimmer {
- 0% {
- background-position: -1000px 0;
- }
- 100% {
- background-position: 1000px 0;
- }
-}
-
-.ps-skeleton {
- background: linear-gradient(
- 90deg,
- var(--color-bg-tertiary) 25%,
- var(--color-border-default) 50%,
- var(--color-bg-tertiary) 75%
- );
- background-size: 1000px 100%;
- animation: shimmer 1.5s infinite;
- border-radius: var(--radius-md);
-}
-
-/* ============================================================================
- 10. ACCESSIBILITY
- ============================================================================ */
-
-/* Focus visible style (keyboard focus) */
-*:focus-visible {
- outline: var(--focus-width) solid var(--focus-color);
- outline-offset: var(--focus-offset);
-}
-
-/* Skip to main content link */
-.skip-to-main {
- position: absolute;
- top: -40px;
- left: 0;
- background: var(--color-brand-primary);
- color: white;
- padding: var(--spacing-md);
- text-decoration: none;
- z-index: var(--z-modal);
-}
-
-.skip-to-main:focus {
- top: 0;
-}
-
-/* Visually hidden but accessible to screen readers */
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border-width: 0;
-}
-
-/* Reduced motion preferences */
-@media (prefers-reduced-motion: reduce) {
- *,
- *::before,
- *::after {
- animation-duration: 0.01ms !important;
- animation-iteration-count: 1 !important;
- transition-duration: 0.01ms !important;
- scroll-behavior: auto !important;
- }
-}
-
-/* ============================================================================
- 11. DARK MODE
- ============================================================================
-
- Precedence (highest to lowest):
- 1. html[data-theme="light"] or html[data-theme="dark"] (explicit user choice)
- 2. @media (prefers-color-scheme: dark) (system preference)
- 3. Default light mode (above)
-
- Plugin dark mode coordination:
- - Theme broadcasts dark mode changes via data-theme attribute on
- - Plugin must watch this attribute and update colors accordingly
- - Plugin can also use CSS custom properties which theme controls
-
- ============================================================================ */
-
-@media (prefers-color-scheme: dark) {
- :root {
- /* Brand Colors */
- --color-brand-primary: #3B82F6;
- --color-status-success: #10B981;
- --color-status-warning: #F59E0B;
- --color-status-error: #EF4444;
-
- /* Accent Colors (muted for dark mode) */
- --color-accent-warm: #D97706;
- --color-accent-mint: #064E3B;
- --color-accent-lavender: #312E81;
- --color-accent-peach: #7C2D12;
- --color-accent-sky: #1E3A5F;
- --color-featured-bg: #78350F;
- --color-featured-text: #FEF3C7;
-
- /* Text Colors */
- --color-text-primary: #F9FAFB;
- --color-text-secondary: #D1D5DB;
- --color-text-tertiary: #9CA3AF;
-
- /* Border Colors */
- --color-border-default: #374151;
- --color-border-subtle: #1F2937;
-
- /* Background Colors */
- --color-bg-primary: #111827;
- --color-bg-secondary: #1F2937;
- --color-bg-tertiary: #374151;
-
- /* Component-Specific Colors */
- --color-input-focus: #3B82F6;
- --color-link-hover: #60A5FA;
- --color-badge-bg: #0F172A;
- --color-badge-text: #60A5FA;
- --color-code-bg: #1F2937;
- --color-code-text: #F9FAFB;
-
- /* Focus shadow adjusted for dark mode */
- --focus-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
- }
-}
-
-/* Allow manual dark mode toggle (explicit override) */
-html[data-theme="dark"] {
- --color-brand-primary: #3B82F6;
- --color-status-success: #10B981;
- --color-status-warning: #F59E0B;
- --color-status-error: #EF4444;
- --color-accent-warm: #D97706;
- --color-accent-mint: #064E3B;
- --color-accent-lavender: #312E81;
- --color-accent-peach: #7C2D12;
- --color-accent-sky: #1E3A5F;
- --color-featured-bg: #78350F;
- --color-featured-text: #FEF3C7;
- --color-text-primary: #F9FAFB;
- --color-text-secondary: #D1D5DB;
- --color-text-tertiary: #9CA3AF;
- --color-border-default: #374151;
- --color-border-subtle: #1F2937;
- --color-bg-primary: #111827;
- --color-bg-secondary: #1F2937;
- --color-bg-tertiary: #374151;
- --color-input-focus: #3B82F6;
- --color-link-hover: #60A5FA;
- --color-badge-bg: #0F172A;
- --color-badge-text: #60A5FA;
- --color-code-bg: #1F2937;
- --color-code-text: #F9FAFB;
- --focus-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
-}
-
-html[data-theme="light"] {
- --color-brand-primary: var(--teal-500); /* Brand rebrand v2.0.0 — Direction C */
- --color-brand-hover: var(--teal-600);
- --color-status-success: #059669;
- --color-status-warning: #F59E0B;
- --color-status-error: #DC2626;
- --color-accent-warm: #F59E0B;
- --color-accent-mint: #D1FAE5;
- --color-accent-lavender: #EDE9FE;
- --color-accent-peach: #FEE2D5;
- --color-accent-sky: #DBEAFE;
- --color-featured-bg: #FEF3C7;
- --color-featured-text: #92400E;
- --color-text-primary: #111827;
- --color-text-secondary: #6B7280;
- --color-text-tertiary: #9CA3AF;
- --color-border-default: #E5E7EB;
- --color-border-subtle: #F3F4F6;
- --color-bg-primary: #FAFAF7;
- --color-bg-secondary: #F5F3EE;
- --color-bg-tertiary: #EDEAE3;
- --color-input-focus: var(--teal-500);
- --color-link-hover: var(--teal-600);
- --color-badge-bg: var(--teal-50);
- --color-badge-text: var(--teal-700);
- --color-code-bg: #F3F4F6;
- --color-code-text: #111827;
- --focus-shadow: 0 0 0 3px rgba(27, 138, 146, 0.15);
-}
-
-/* Dark mode alert colors */
-@media (prefers-color-scheme: dark) {
- .ps-alert-info {
- background-color: #0C2340;
- border-color: #3B82F6;
- color: #BFDBFE;
- }
-
- .ps-alert-success {
- background-color: #064E3B;
- border-color: #10B981;
- color: #DCFCE7;
- }
-
- .ps-alert-warning {
- background-color: #78350F;
- border-color: #F59E0B;
- color: #FEF3C7;
- }
-
- .ps-alert-error {
- background-color: #7F1D1D;
- border-color: #EF4444;
- color: #FEE2E2;
- }
-
- .footer-newsletter {
- background-color: var(--color-bg-secondary);
- }
-}
-
-/* ============================================================================
- 12. RESPONSIVE DESIGN (Mobile-first)
- ============================================================================ */
-
-/* Hide decorative shapes on small screens */
-@media (max-width: 767px) {
- .hero-section::before,
- .hero-section::after,
- .archive-header::after,
- .page-header::after,
- body > .site-main::before,
- body > .site-main::after {
- display: none;
- }
-}
-
-/* Extra Small (320px - 479px) */
-@media (max-width: 479px) {
- .hero-section {
- padding: var(--spacing-2xl) var(--spacing-md);
- }
-
- .hero-title {
- font-size: 32px;
- }
-
- .hero-ctas {
- gap: var(--spacing-sm);
- }
-
- .hero-ctas .ps-btn {
- padding: var(--spacing-sm) var(--spacing-lg);
- font-size: var(--text-body-sm);
- }
-
- .page-content {
- padding: var(--spacing-lg) var(--spacing-md);
- }
-
- .peptides-grid {
- padding: var(--spacing-2xl) var(--spacing-md);
- }
-
- .news-feed-section {
- padding: var(--spacing-2xl) var(--spacing-md);
- }
-
- h1 {
- font-size: 32px;
- }
-
- h2 {
- font-size: 24px;
- }
-
- .site-header-wrapper {
- gap: var(--spacing-sm);
- }
-
- .primary-navigation {
- display: none;
- }
-
- .menu-toggle {
- display: flex;
- }
-
- .header-icons {
- gap: var(--spacing-sm);
- }
-
- .newsletter-form {
- flex-direction: column;
- }
-
- .newsletter-form button {
- width: 100%;
- }
-
- .footer-grid {
- grid-template-columns: 1fr;
- gap: var(--spacing-lg);
- }
-}
-
-/* Small (480px - 767px) */
-@media (min-width: 480px) {
- .site-header {
- padding: var(--spacing-lg) var(--spacing-lg);
- }
-}
-
-/* Medium (768px - 1023px) */
-@media (min-width: 768px) {
- .menu-toggle {
- display: none;
- }
-
- .primary-navigation {
- display: flex !important;
- position: static;
- width: auto;
- height: auto;
- flex-direction: row;
- background: none;
- padding: 0;
- transition: none;
- }
-
- .nav-overlay {
- display: none;
- }
-
- .peptides-grid {
- grid-template-columns: repeat(2, 1fr);
- }
-
- .archive-grid {
- grid-template-columns: repeat(2, 1fr);
- }
-
- .hero-title {
- font-size: 44px;
- }
-
- .newsletter-form {
- flex-direction: row;
- }
-
- .newsletter-form button {
- width: auto;
- }
-}
-
-/* Large (1024px - 1439px) */
-@media (min-width: 1024px) {
- .peptides-grid {
- grid-template-columns: repeat(3, 1fr);
- }
-
- .archive-grid {
- grid-template-columns: repeat(3, 1fr);
- }
-
- .site-header {
- padding: var(--spacing-lg) var(--spacing-xl);
- }
-
- .footer-grid {
- grid-template-columns: repeat(4, 1fr);
- }
-}
-
-/* Extra Large (1440px+) */
-@media (min-width: 1440px) {
- .peptides-grid {
- grid-template-columns: repeat(4, 1fr);
- }
-
- .site-header {
- padding: var(--spacing-lg) var(--spacing-2xl);
- }
-}
-
-/* ============================================================================
- 13. UTILITY CLASSES
- ============================================================================ */
-
-/* 404 Page Utilities */
-.ps-404-search-form {
- margin: var(--spacing-2xl) 0;
-}
-
-.ps-404-cta-group {
- display: flex;
- gap: var(--spacing-md);
- justify-content: center;
- flex-wrap: wrap;
-}
-
-/* ============================================================================
- 14. TOOL PAGES — Generic wrapper for plugin shortcode templates
- ============================================================================ */
-
-.ps-tool-page {
- padding: var(--spacing-3xl) var(--spacing-lg);
- min-height: 60vh;
-}
-
-.ps-tool-fallback {
- text-align: center;
- padding: var(--spacing-4xl) 0;
-}
-
-.ps-tool-fallback h1 {
- margin-bottom: var(--spacing-md);
-}
-
-.ps-tool-fallback p {
- color: var(--color-text-secondary);
- margin-bottom: var(--spacing-2xl);
-}
-
-/* ============================================================================
- 15. RESEARCH MODULE CARDS — Front page grid
- ============================================================================ */
-
-.ps-modules-section {
- padding: var(--spacing-3xl) var(--spacing-lg);
- background-color: var(--color-bg-secondary);
-}
-
-.ps-modules-header {
- text-align: center;
- margin-bottom: var(--spacing-2xl);
-}
-
-.ps-modules-title {
- font-size: var(--text-h2);
- margin-bottom: var(--spacing-sm);
- margin-top: 0;
-}
-
-.ps-modules-subtitle {
- color: var(--color-text-secondary);
- font-size: var(--text-body-md);
-}
-
-.ps-modules-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
- gap: var(--spacing-lg);
- max-width: var(--container-2xl);
- margin: 0 auto;
-}
-
-.ps-module-card {
- display: flex;
- flex-direction: column;
- padding: var(--spacing-xl);
- background-color: var(--color-bg-primary);
- border: 1px solid var(--color-border-default);
- border-radius: var(--radius-lg);
- text-decoration: none;
- color: var(--color-text-primary);
- transition: all var(--transition-normal);
- position: relative; /* Required for .ps-module-card__badge absolute positioning */
-}
-
-.ps-module-card:hover {
- border-color: var(--color-brand-primary);
- box-shadow: 0 4px 16px rgba(27, 138, 146, 0.1);
- transform: translateY(-2px);
-}
-
-.ps-module-card--inactive {
- opacity: 0.5;
- pointer-events: none;
-}
-
-/*
- * "Coming soon" badge — overlays top-right corner of inactive tool cards.
- * Layered on top of --inactive treatment (dim + no-hover); does not replace it.
- * Spec: Inter 600, 10px, --gray-200 bg, --gray-700 text, pill shape.
- */
-.ps-module-card__badge {
- position: absolute;
- top: var(--spacing-md);
- right: var(--spacing-md);
- padding: 2px 8px;
- background-color: var(--gray-200);
- color: var(--gray-700);
- border-radius: var(--radius-pill);
- font-family: var(--font-sans);
- font-size: 10px;
- font-weight: 600;
- letter-spacing: 0.03em;
- line-height: 1.6;
- pointer-events: none; /* Badge is presentational; card's pointer-events handles clicks */
-}
-
-.ps-module-card__icon {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 48px;
- height: 48px;
- border-radius: 50%;
- background-color: rgba(27, 138, 146, 0.1);
- color: var(--color-brand-primary);
- margin-bottom: var(--spacing-md);
-}
-
-.ps-module-card__title {
- font-size: var(--text-h4);
- font-weight: 600;
- margin-bottom: var(--spacing-sm);
- margin-top: 0;
-}
-
-.ps-module-card__description {
- font-size: var(--text-body-md);
- color: var(--color-text-secondary);
- line-height: 1.6;
- flex: 1;
- margin-bottom: var(--spacing-md);
-}
-
-.ps-module-card__link {
- font-size: var(--text-body-sm);
- font-weight: 600;
- color: var(--color-brand-primary);
-}
-
-/* ============================================================================
- 16. DOCUMENTATION PAGE — Two-column layout with ToC sidebar
- ============================================================================ */
-
-.ps-docs-layout {
- display: grid;
- grid-template-columns: 240px 1fr;
- gap: var(--spacing-2xl);
- max-width: var(--container-2xl);
- margin: 0 auto;
- align-items: start;
-}
-
-.ps-docs-sidebar {
- position: sticky;
- top: 100px;
- max-height: calc(100vh - 120px);
- overflow-y: auto;
- padding: var(--spacing-lg) 0;
-}
-
-.ps-docs-sidebar-inner {
- padding-right: var(--spacing-lg);
- border-right: 1px solid var(--color-border-subtle);
-}
-
-.ps-docs-toc-title {
- font-size: var(--text-h6);
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- color: var(--color-text-secondary);
- margin-bottom: var(--spacing-md);
- margin-top: 0;
- cursor: default;
-}
-
-.ps-docs-toc ul {
- list-style: none;
- display: flex;
- flex-direction: column;
- gap: var(--spacing-xs);
-}
-
-.ps-docs-toc-link {
- display: block;
- padding: var(--spacing-xs) var(--spacing-sm);
- font-size: var(--text-body-sm);
- color: var(--color-text-secondary);
- text-decoration: none;
- border-radius: var(--radius-sm);
- transition: all var(--transition-fast);
- border-left: 2px solid transparent;
-}
-
-.ps-docs-toc-link:hover {
- color: var(--color-brand-primary);
- background-color: var(--color-bg-secondary);
-}
-
-.ps-docs-toc-link--active {
- color: var(--color-brand-primary);
- border-left-color: var(--color-brand-primary);
- background-color: var(--color-bg-secondary);
- font-weight: 500;
-}
-
-.ps-docs-content {
- min-width: 0;
-}
-
-.ps-docs-header {
- margin-bottom: var(--spacing-2xl);
-}
-
-.ps-docs-header h1 {
- margin-bottom: var(--spacing-md);
-}
-
-.ps-docs-intro {
- font-size: var(--text-body-lg);
- color: var(--color-text-secondary);
- line-height: 1.7;
-}
-
-.ps-docs-body h2 {
- margin-top: var(--spacing-3xl);
- padding-top: var(--spacing-lg);
- border-top: 1px solid var(--color-border-subtle);
-}
-
-.ps-docs-body h2:first-child {
- margin-top: 0;
- padding-top: 0;
- border-top: none;
-}
-
-/* Documentation step styling for SOPs */
-.ps-docs-step {
- counter-increment: step-counter;
- position: relative;
- padding-left: var(--spacing-2xl);
- margin-bottom: var(--spacing-xl);
-}
-
-.ps-docs-step::before {
- content: counter(step-counter);
- position: absolute;
- left: 0;
- top: 0;
- width: 28px;
- height: 28px;
- background-color: var(--color-brand-primary);
- color: white;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: var(--text-body-sm);
- font-weight: 700;
-}
-
-/* Warning callout for docs */
-.ps-docs-warning {
- padding: var(--spacing-lg);
- background-color: #FEF3C7;
- border-left: 4px solid var(--color-status-warning);
- border-radius: var(--radius-md);
- margin: var(--spacing-lg) 0;
- color: #78350F;
-}
-
-/* Documentation tables */
-.ps-docs-table {
- width: 100%;
- border-collapse: collapse;
- margin: var(--spacing-lg) 0;
-}
-
-.ps-docs-table th,
-.ps-docs-table td {
- padding: var(--spacing-sm) var(--spacing-md);
- border: 1px solid var(--color-border-default);
- text-align: left;
- font-size: var(--text-body-md);
-}
-
-.ps-docs-table th {
- background-color: var(--color-bg-secondary);
- font-weight: 600;
-}
-
-/* Mobile: collapse sidebar to dropdown */
-@media (max-width: 1023px) {
- .ps-docs-layout {
- grid-template-columns: 1fr;
- }
-
- .ps-docs-sidebar {
- position: static;
- max-height: none;
- border-bottom: 1px solid var(--color-border-subtle);
- padding-bottom: var(--spacing-md);
- margin-bottom: var(--spacing-lg);
- }
-
- .ps-docs-sidebar-inner {
- border-right: none;
- padding-right: 0;
- }
-
- .ps-docs-toc-title {
- cursor: pointer;
- }
-
- .ps-docs-toc-title::after {
- content: ' ▾';
- }
-
- .ps-docs-toc {
- display: none;
- }
-
- .ps-docs-sidebar--open .ps-docs-toc {
- display: block;
- }
-}
-
-/* ============================================================================
- 17. AUTH PAGE — Sign-in / Register forms
- ============================================================================ */
-
-.ps-auth-page {
- display: flex;
- align-items: center;
- justify-content: center;
- min-height: 70vh;
-}
-
-.ps-auth-container {
- max-width: 440px;
-}
-
-.ps-auth-card {
- background-color: var(--color-bg-primary);
- border: 1px solid var(--color-border-default);
- border-radius: var(--radius-lg);
- padding: var(--spacing-2xl);
- box-shadow: var(--shadow-md);
-}
-
-.ps-auth-card h1 {
- font-size: var(--text-h3);
- margin-bottom: var(--spacing-lg);
-}
-
-.ps-auth-info {
- margin-bottom: var(--spacing-lg);
-}
-
-.ps-auth-info p {
- margin-bottom: 0;
- font-size: var(--text-body-sm);
-}
-
-.ps-auth-form .ps-form-group {
- margin-bottom: var(--spacing-md);
-}
-
-.ps-auth-link {
- text-align: center;
- margin-top: var(--spacing-md);
- font-size: var(--text-body-sm);
-}
-
-.ps-auth-toggle {
- text-align: center;
- margin-top: var(--spacing-lg);
- padding-top: var(--spacing-lg);
- border-top: 1px solid var(--color-border-subtle);
- font-size: var(--text-body-sm);
- color: var(--color-text-secondary);
-}
-
-.ps-auth-toggle a {
- color: var(--color-brand-primary);
- font-weight: 500;
-}
-
-.ps-auth-form-wrap--hidden {
- display: none;
-}
-
-.ps-auth-messages {
- margin-bottom: var(--spacing-md);
-}
-
-.ps-form-hint {
- display: block;
- font-size: var(--text-caption);
- color: var(--color-text-tertiary);
- margin-top: 4px;
-}
-
-/* Password strength */
-.ps-password-strength {
- margin-top: 4px;
- font-size: var(--text-caption);
- font-weight: 500;
-}
-
-.ps-strength-weak { color: var(--color-status-error); }
-.ps-strength-fair { color: var(--color-status-warning); }
-.ps-strength-strong { color: var(--color-status-success); }
-
-/* ============================================================================
- 18. NEWSLETTER SECTION — Standalone signup CTA
- ============================================================================ */
-
-.ps-newsletter-section {
- background-color: var(--color-bg-tertiary);
- padding: var(--spacing-3xl) var(--spacing-lg);
-}
-
-.ps-newsletter-inner {
- max-width: var(--container-md);
- margin: 0 auto;
- text-align: center;
-}
-
-.ps-newsletter-title {
- font-size: var(--text-h2);
- margin-bottom: var(--spacing-sm);
- margin-top: 0;
-}
-
-.ps-newsletter-subtitle {
- color: var(--color-text-secondary);
- margin-bottom: var(--spacing-lg);
-}
-
-.ps-newsletter-form-row {
- display: flex;
- gap: var(--spacing-sm);
- max-width: 480px;
- margin: 0 auto;
-}
-
-.ps-newsletter-input {
- flex: 1;
- min-width: 0;
-}
-
-.ps-newsletter-status {
- margin-top: var(--spacing-md);
- text-align: left;
- max-width: 480px;
- margin-left: auto;
- margin-right: auto;
-}
-
-.ps-newsletter-learn-more {
- margin-top: var(--spacing-md);
- font-size: var(--text-body-sm);
-}
-
-.ps-newsletter-learn-more a {
- color: var(--color-brand-primary);
-}
-
-@media (max-width: 479px) {
- .ps-newsletter-form-row {
- flex-direction: column;
- }
-}
-
-/* ============================================================================
- 19. USER MENU — Logged-in dropdown in header
- ============================================================================ */
-
-.ps-user-menu {
- position: relative;
-}
-
-.ps-user-menu__toggle {
- display: flex;
- align-items: center;
- gap: var(--spacing-xs);
- background: none;
- border: 1px solid var(--color-border-default);
- border-radius: var(--radius-md);
- padding: var(--spacing-sm) var(--spacing-md);
- font-size: var(--text-body-sm);
- font-weight: 500;
- color: var(--color-text-primary);
- cursor: pointer;
- transition: all var(--transition-fast);
-}
-
-.ps-user-menu__toggle:hover {
- border-color: var(--color-brand-primary);
-}
-
-.ps-user-menu__name {
- max-width: 120px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.ps-user-menu__dropdown {
- display: none;
- position: absolute;
- top: 100%;
- right: 0;
- margin-top: var(--spacing-xs);
- background-color: var(--color-bg-primary);
- border: 1px solid var(--color-border-default);
- border-radius: var(--radius-md);
- box-shadow: var(--shadow-lg);
- min-width: 180px;
- z-index: var(--z-dropdown);
- padding: var(--spacing-xs) 0;
-}
-
-.ps-user-menu:hover .ps-user-menu__dropdown,
-.ps-user-menu__toggle:focus + .ps-user-menu__dropdown {
- display: block;
-}
-
-.ps-user-menu__dropdown a {
- display: block;
- padding: var(--spacing-sm) var(--spacing-md);
- font-size: var(--text-body-sm);
- color: var(--color-text-primary);
- text-decoration: none;
- transition: background-color var(--transition-fast);
-}
-
-.ps-user-menu__dropdown a:hover {
- background-color: var(--color-bg-secondary);
- color: var(--color-brand-primary);
-}
-
-/* ============================================================================
- 20. SETTINGS PANEL — Slide-out support panel
- ============================================================================ */
-
-.ps-settings-overlay {
- position: fixed;
- inset: 0;
- background: rgba(0, 0, 0, 0.4);
- z-index: var(--z-modal-backdrop);
- opacity: 0;
- visibility: hidden;
- transition: opacity var(--transition-slow), visibility var(--transition-slow);
-}
-
-.ps-settings-overlay--active {
- opacity: 1;
- visibility: visible;
-}
-
-.ps-settings-panel {
- position: fixed;
- top: 0;
- right: -400px;
- width: 380px;
- max-width: 90vw;
- height: 100vh;
- background-color: var(--color-bg-primary);
- border-left: 1px solid var(--color-border-default);
- box-shadow: var(--shadow-xl);
- z-index: var(--z-modal);
- overflow-y: auto;
- transition: right var(--transition-slow);
- display: flex;
- flex-direction: column;
-}
-
-.ps-settings-panel--open {
- right: 0;
-}
-
-.ps-settings-panel__header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: var(--spacing-lg) var(--spacing-xl);
- border-bottom: 1px solid var(--color-border-subtle);
-}
-
-.ps-settings-panel__header h2 {
- font-size: var(--text-h4);
- margin: 0;
-}
-
-.ps-settings-panel__close {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 32px;
- height: 32px;
- background: none;
- border: none;
- color: var(--color-text-secondary);
- cursor: pointer;
- border-radius: var(--radius-sm);
- transition: all var(--transition-fast);
-}
-
-.ps-settings-panel__close:hover {
- color: var(--color-text-primary);
- background-color: var(--color-bg-secondary);
-}
-
-.ps-settings-panel__body {
- padding: var(--spacing-xl);
- flex: 1;
-}
-
-.ps-settings-section {
- margin-bottom: var(--spacing-2xl);
-}
-
-.ps-settings-section h3 {
- font-size: var(--text-h5);
- margin-bottom: var(--spacing-md);
- margin-top: 0;
-}
-
-.ps-settings-disclaimer {
- font-size: var(--text-body-sm);
- color: var(--color-text-secondary);
-}
-
-.ps-settings-disclaimer p {
- font-size: var(--text-body-sm);
- line-height: 1.6;
-}
-
-.ps-contact-form .ps-form-group {
- margin-bottom: var(--spacing-md);
-}
-
-.ps-contact-status {
- margin-top: var(--spacing-md);
-}
-
-/* ============================================================================
- 21. LANGUAGE PLACEHOLDER — Header icon
- ============================================================================ */
-
-.ps-lang-placeholder {
- display: flex;
- align-items: center;
- gap: 2px;
- color: var(--color-text-secondary);
- font-size: var(--text-body-sm);
- font-weight: 500;
- cursor: default;
-}
-
-.ps-lang-code {
- font-size: var(--text-label);
-}
-
-@media (max-width: 767px) {
- .ps-lang-placeholder {
- display: none;
- }
-}
-
-/* ============================================================================
- 22. FOOTER UPDATES — Disclaimer and language links
- ============================================================================ */
-
-.footer-disclaimer {
- font-size: var(--text-caption);
- color: var(--color-text-tertiary);
- max-width: var(--container-md);
- margin: var(--spacing-md) auto;
- line-height: 1.5;
-}
-
-.footer-languages {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: var(--spacing-md);
- margin-top: var(--spacing-md);
- font-size: var(--text-body-sm);
- flex-wrap: wrap;
-}
-
-.footer-languages-label {
- font-weight: 500;
- color: var(--color-text-secondary);
-}
-
-.footer-languages a {
- color: var(--color-brand-primary);
-}
-
-/* ============================================================================
- 23. PROFILE PAGE — Basic profile fallback
- ============================================================================ */
-
-.ps-profile-basic {
- text-align: center;
- padding: var(--spacing-2xl) 0;
-}
-
-.ps-profile-basic h1 {
- margin-bottom: var(--spacing-md);
-}
-
-.ps-profile-links {
- display: flex;
- gap: var(--spacing-md);
- justify-content: center;
- flex-wrap: wrap;
- margin-top: var(--spacing-xl);
-}
-
-/* Science Feed header */
-.ps-science-feed-header {
- text-align: center;
- margin-bottom: var(--spacing-2xl);
-}
-
-.ps-science-feed-header h1 {
- margin-bottom: var(--spacing-md);
-}
-
-.ps-science-feed-header p {
- color: var(--color-text-secondary);
-}
-
-/* ============================================================================
- 24. DARK MODE — Additions for new components
- ============================================================================ */
-
-html[data-theme="dark"] .ps-module-card__icon {
- background-color: rgba(59, 130, 246, 0.15);
-}
-
-html[data-theme="dark"] .ps-module-card:hover {
- box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
-}
-
-html[data-theme="dark"] .ps-docs-warning {
- background-color: #78350F;
- border-color: #F59E0B;
- color: #FEF3C7;
-}
-
-html[data-theme="dark"] .ps-auth-card {
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-}
-
-html[data-theme="dark"] .ps-newsletter-section {
- background-color: var(--color-bg-secondary);
-}
-
-html[data-theme="dark"] .ps-settings-overlay {
- background: rgba(0, 0, 0, 0.6);
-}
-
-html[data-theme="dark"] .ps-modules-section {
- background-color: var(--color-bg-secondary);
-}
-
-/* Dropdown submenu support for primary navigation */
-.primary-navigation li.menu-item-has-children {
- position: relative;
-}
-
-.primary-navigation .sub-menu {
- display: none;
- position: absolute;
- top: 100%;
- left: 0;
- background-color: var(--color-bg-primary);
- border: 1px solid var(--color-border-default);
- border-radius: var(--radius-md);
- box-shadow: var(--shadow-lg);
- min-width: 200px;
- z-index: var(--z-dropdown);
- padding: var(--spacing-xs) 0;
- margin-top: var(--spacing-sm);
-}
-
-.primary-navigation li.menu-item-has-children:hover > .sub-menu {
- display: flex;
- flex-direction: column;
-}
-
-.primary-navigation .sub-menu li {
- display: block;
-}
-
-.primary-navigation .sub-menu a {
- display: block;
- padding: var(--spacing-sm) var(--spacing-md);
- font-size: var(--text-body-sm);
- white-space: nowrap;
-}
-
-.primary-navigation .sub-menu a:hover {
- background-color: var(--color-bg-secondary);
-}
-
-.primary-navigation .sub-menu a::after {
- display: none;
-}
-
-/* ============================================================================
- 25. RESPONSIVE — Additions for new components
- ============================================================================ */
-
-@media (max-width: 767px) {
- .ps-user-menu__toggle {
- padding: var(--spacing-xs) var(--spacing-sm);
- font-size: var(--text-caption);
- }
-
- .ps-user-menu__name {
- display: none;
- }
-
- .ps-modules-grid {
- grid-template-columns: 1fr;
- }
-}
-
-@media (min-width: 768px) {
- .ps-modules-grid {
- grid-template-columns: repeat(2, 1fr);
- }
-}
-
-@media (min-width: 1024px) {
- .ps-modules-grid {
- grid-template-columns: repeat(3, 1fr);
- }
-}
-
-/* ============================================================================
- END OF STYLESHEET
- ============================================================================ */
-
-/* =====================================================================
- Section 26 — v1.5.1 security/UX additions
- ===================================================================== */
-
-/* Visually hidden honeypot wrapper — off-screen, keyboard-skipped, bot-visible. */
-.ps-hp-wrap {
- position: absolute;
- left: -9999px;
- top: auto;
- width: 1px;
- height: 1px;
- overflow: hidden;
- pointer-events: none;
-}
-
-/* Email verification banner on /profile */
-.ps-verify-required {
- padding: var(--spacing-md);
- margin-bottom: var(--spacing-lg);
- border-left: 4px solid #F59E0B;
- background-color: #FEF3C7;
- color: #78350F;
- border-radius: 6px;
-}
-
-html[data-theme="dark"] .ps-verify-required {
- background-color: #451A03;
- color: #FEF3C7;
- border-left-color: #F59E0B;
-}
-
-.ps-verify-required h3 {
- margin: 0 0 var(--spacing-xs) 0;
- font-size: 1.05rem;
-}
-
-.ps-verify-resend {
- margin-top: var(--spacing-sm);
- display: flex;
- align-items: center;
- gap: var(--spacing-sm);
-}
-
-.ps-verify-resend-status {
- font-size: 0.9rem;
- color: inherit;
-}
-
-/* Newsletter consent + privacy link */
-.ps-newsletter-consent {
- display: flex;
- align-items: flex-start;
- gap: var(--spacing-xs);
- margin-top: var(--spacing-sm);
- font-size: 0.9rem;
- line-height: 1.5;
-}
-
-.ps-newsletter-consent input[type="checkbox"] {
- margin-top: 0.25em;
- flex-shrink: 0;
-}
-
-.ps-newsletter-privacy {
- margin-top: var(--spacing-xs);
- font-size: 0.85rem;
- opacity: 0.85;
-}
-
-/* Footer translations note */
-.footer-languages-note {
- margin-top: var(--spacing-sm);
- font-size: 0.85rem;
- opacity: 0.7;
-}
-
-/* ─── Cookie Notice brand alignment ─────────────────────────────────────────
- * The Cookie Notice plugin (Hu-manity.co) renders Accept/Privacy buttons with
- * an inline style="background-color: #00a99d" (plugin default teal). Override
- * with !important to match brand teal. Inline styles beat selectors without it.
- */
-#cn-accept-cookie,
-#cn-more-info {
- background-color: var(--teal-500) !important; /* #1B8A92 — overrides plugin's #00a99d inline style */
-}
-#cn-accept-cookie:hover,
-#cn-more-info:hover {
- background-color: var(--teal-600) !important;
-}
+/*
+Theme Name: Peptide Starter
+Theme URI: https://github.com/peptiderepo/peptide-starter
+Description: Premium, accessible WordPress theme for scientific peptide reference database
+Author: Peptide Repo
+Author URI: https://peptiderepo.com
+Version: 2.1.7
+License: GPL v2 or later
+License URI: https://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: peptide-starter
+Domain Path: /languages
+Requires at least: 6.0
+Requires PHP: 7.4
+*/
+
+/* ============================================================================
+ CSS ARCHITECTURE
+ ============================================================================
+
+ This stylesheet organizes theme styles in the following order:
+ 1. CSS Reset
+ 2. CSS Custom Properties (design tokens)
+ 3. Typography & Font Loading
+ 4. Global Styles & Layout
+ 5. Components (buttons, cards, forms, badges)
+ 6. Regions (header, footer, main)
+ 7. Pages (home, archive, single)
+ 8. Animations & Transitions
+ 9. Accessibility (focus, reduced motion)
+ 10. Dark Mode (color overrides)
+ 11. Responsive (mobile-first breakpoints)
+
+ Philosophy:
+ - Use CSS custom properties for all design tokens
+ - Avoid !important on global elements (breaks plugins)
+ - Scope styles with specificity, not cascade tricks
+ - Respect plugin namespaces (.pn-*, .ps-*)
+ - Mobile-first responsive approach
+
+ ============================================================================ */
+
+/* ============================================================================
+ 1. CSS RESET
+ ============================================================================ */
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ line-height: 1.5;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ margin: 0;
+ padding: 0;
+}
+
+p {
+ margin: 0;
+}
+
+ul, ol {
+ list-style: none;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+button, input, textarea, select {
+ font: inherit;
+ color: inherit;
+}
+
+img, svg {
+ max-width: 100%;
+ display: block;
+}
+
+/* ============================================================================
+ 2. CSS CUSTOM PROPERTIES (Design Tokens)
+ ============================================================================ */
+
+:root {
+ /* ---- FONT FAMILIES ---- */
+ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
+ --font-mono: "Monaco", "Menlo", "Ubuntu Mono", "Courier New", monospace;
+
+ /* ---- TYPOGRAPHY SCALE (tightened for better content density) ---- */
+ /* H1 */
+ --text-h1: 36px;
+ --text-h1-weight: 700;
+ --text-h1-lh: 1.2;
+ --text-h1-ls: -0.02em;
+
+ /* H2 */
+ --text-h2: 30px;
+ --text-h2-weight: 700;
+ --text-h2-lh: 1.25;
+ --text-h2-ls: -0.015em;
+
+ /* H3 */
+ --text-h3: 24px;
+ --text-h3-weight: 600;
+ --text-h3-lh: 1.3;
+ --text-h3-ls: -0.01em;
+
+ /* H4 */
+ --text-h4: 20px;
+ --text-h4-weight: 600;
+ --text-h4-lh: 1.35;
+ --text-h4-ls: 0;
+
+ /* H5 */
+ --text-h5: 17px;
+ --text-h5-weight: 700;
+ --text-h5-lh: 1.4;
+ --text-h5-ls: 0;
+
+ /* H6 */
+ --text-h6: 15px;
+ --text-h6-weight: 500;
+ --text-h6-lh: 1.4;
+ --text-h6-ls: 0;
+
+ /* Body (slightly smaller for density — still readable) */
+ --text-body-lg: 15px;
+ --text-body-md: 13px;
+ --text-body-sm: 12px;
+
+ /* Labels & Captions */
+ --text-label: 11px;
+ --text-label-weight: 500;
+ --text-caption: 11px;
+ --text-overline: 10px;
+ --text-overline-weight: 600;
+
+ /* Code */
+ --text-code-inline: 14px;
+ --text-code-block: 13px;
+ --text-code-lh: 1.6;
+
+ /* ---- SPACING SCALE (8px base grid) ---- */
+ --spacing-xs: 4px;
+ --spacing-sm: 8px;
+ --spacing-md: 16px;
+ --spacing-lg: 24px;
+ --spacing-xl: 32px;
+ --spacing-2xl: 48px;
+ --spacing-3xl: 64px;
+ --spacing-4xl: 80px;
+ --spacing-5xl: 96px;
+
+ /* ---- BUTTON PADDING (unified per Design Director) ---- */
+ --btn-padding-y: var(--spacing-md);
+ --btn-padding-x: var(--spacing-xl);
+
+ /* ---- LIGHT MODE COLOR PALETTE ---- */
+ /* Brand Colors */
+ --color-brand-primary: #0066CC;
+ --color-status-success: #059669;
+ --color-status-warning: #F59E0B;
+ --color-status-error: #DC2626;
+
+ /* Accent Colors (Clawdiverse-inspired warm tints for cards/categories) */
+ --color-accent-warm: #F59E0B;
+ --color-accent-mint: #D1FAE5;
+ --color-accent-lavender: #EDE9FE;
+ --color-accent-peach: #FEE2D5;
+ --color-accent-sky: #DBEAFE;
+
+ /* Featured badge */
+ --color-featured-bg: #FEF3C7;
+ --color-featured-text: #92400E;
+
+ /* Text Colors */
+ --color-text-primary: #111827;
+ --color-text-secondary: #6B7280;
+ --color-text-tertiary: #9CA3AF;
+
+ /* Border Colors */
+ --color-border-default: #E5E7EB;
+ --color-border-subtle: #F3F4F6;
+
+ /* Background Colors (warm off-white base, à la Clawdiverse) */
+ --color-bg-primary: #FAFAF7;
+ --color-bg-secondary: #F5F3EE;
+ --color-bg-tertiary: #EDEAE3;
+
+ /* Component-Specific Colors */
+ --color-input-focus: #0066CC;
+ --color-link-hover: #0052A3;
+ --color-badge-bg: #DBEAFE;
+ --color-badge-text: #0066CC;
+ --color-code-bg: #F3F4F6;
+ --color-code-text: #111827;
+
+ /* ---- SHADOWS & ELEVATION ---- */
+ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+ --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+ --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+ --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
+
+ /* ---- BORDERS & RADIUS ---- */
+ --radius-sm: 4px;
+ --radius-md: 8px;
+ --radius-lg: 12px;
+
+ /* ---- TRANSITIONS ---- */
+ --transition-fast: 150ms ease-out;
+ --transition-normal: 200ms ease-out;
+ --transition-slow: 300ms ease-in-out;
+
+ /* ---- FOCUS RING (per Design Director fix: 15% opacity) ---- */
+ --focus-color: #0066CC;
+ --focus-width: 2px;
+ --focus-offset: 2px;
+ --focus-shadow: 0 0 0 4px rgba(0, 102, 204, 0.15);
+
+ /* ---- CONTAINER WIDTHS ---- */
+ --container-sm: 640px;
+ --container-md: 768px;
+ --container-lg: 900px;
+ --container-xl: 1024px;
+ --container-2xl: 1280px;
+
+ /* ---- Z-INDEX SCALE ---- */
+ --z-dropdown: 10;
+ --z-sticky: 20;
+ --z-fixed: 30;
+ --z-modal-backdrop: 40;
+ --z-modal: 50;
+}
+
+/* ============================================================================
+ 3. TYPOGRAPHY & FONT LOADING
+ ============================================================================ */
+
+/* Load Inter from Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+/* Base typography */
+body {
+ font-family: var(--font-sans);
+ font-size: var(--text-body-md);
+ line-height: 1.6;
+ color: var(--color-text-primary);
+ background-color: var(--color-bg-primary);
+}
+
+/* Headings */
+h1 {
+ font-size: var(--text-h1);
+ font-weight: var(--text-h1-weight);
+ line-height: var(--text-h1-lh);
+ letter-spacing: var(--text-h1-ls);
+ color: var(--color-text-primary);
+ margin-bottom: var(--spacing-md);
+}
+
+h2 {
+ font-size: var(--text-h2);
+ font-weight: var(--text-h2-weight);
+ line-height: var(--text-h2-lh);
+ letter-spacing: var(--text-h2-ls);
+ color: var(--color-text-primary);
+ margin-bottom: var(--spacing-md);
+ margin-top: var(--spacing-lg);
+}
+
+h3 {
+ font-size: var(--text-h3);
+ font-weight: var(--text-h3-weight);
+ line-height: var(--text-h3-lh);
+ letter-spacing: var(--text-h3-ls);
+ color: var(--color-text-primary);
+ margin-bottom: var(--spacing-sm);
+ margin-top: var(--spacing-lg);
+}
+
+h4 {
+ font-size: var(--text-h4);
+ font-weight: var(--text-h4-weight);
+ line-height: var(--text-h4-lh);
+ color: var(--color-text-primary);
+ margin-bottom: var(--spacing-sm);
+ margin-top: var(--spacing-md);
+}
+
+h5 {
+ font-size: var(--text-h5);
+ font-weight: var(--text-h5-weight);
+ line-height: var(--text-h5-lh);
+ color: var(--color-text-primary);
+ margin-bottom: var(--spacing-sm);
+}
+
+h6 {
+ font-size: var(--text-h6);
+ font-weight: var(--text-h6-weight);
+ line-height: var(--text-h6-lh);
+ color: var(--color-text-primary);
+ margin-bottom: var(--spacing-sm);
+}
+
+/* Paragraph */
+p {
+ font-size: var(--text-body-md);
+ line-height: 1.6;
+ color: var(--color-text-primary);
+ margin-bottom: var(--spacing-md);
+}
+
+/* Small text */
+small, .text-small {
+ font-size: var(--text-body-sm);
+ color: var(--color-text-secondary);
+}
+
+/* Code */
+code {
+ font-family: var(--font-mono);
+ font-size: var(--text-code-inline);
+ background-color: var(--color-code-bg);
+ color: var(--color-code-text);
+ padding: 2px 6px;
+ border-radius: var(--radius-sm);
+}
+
+pre {
+ font-family: var(--font-mono);
+ font-size: var(--text-code-block);
+ line-height: var(--text-code-lh);
+ background-color: var(--color-code-bg);
+ color: var(--color-code-text);
+ padding: var(--spacing-md);
+ border-radius: var(--radius-md);
+ overflow-x: auto;
+ margin-bottom: var(--spacing-md);
+}
+
+pre code {
+ background: none;
+ padding: 0;
+ border-radius: 0;
+}
+
+/* ============================================================================
+ 4. GLOBAL STYLES & LAYOUT
+ ============================================================================ */
+
+html {
+ scroll-behavior: smooth;
+ overflow-x: hidden;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+/* Skip Link (accessibility) */
+.skip-link {
+ position: absolute;
+ left: -9999px;
+ z-index: var(--z-modal);
+ padding: var(--spacing-md);
+ background: var(--color-brand-primary);
+ color: white;
+ text-decoration: none;
+ border-radius: var(--radius-sm);
+}
+
+.skip-link:focus {
+ left: var(--spacing-md);
+ top: var(--spacing-md);
+}
+
+/* Main content area */
+#main {
+ flex: 1;
+ width: 100%;
+}
+
+/* Container for page content */
+.ps-container {
+ max-width: var(--container-lg);
+ margin: 0 auto;
+ padding: 0 var(--spacing-lg);
+ width: 100%;
+}
+
+.ps-container-wide {
+ max-width: var(--container-2xl);
+ margin: 0 auto;
+ padding: 0 var(--spacing-lg);
+ width: 100%;
+}
+
+/* ============================================================================
+ 5. LINK STYLING (Scope: body content vs navigation)
+ ============================================================================ */
+
+/* Body content links: underlined */
+.site-content a,
+.post-content a,
+article a,
+.page-content a {
+ color: var(--color-brand-primary);
+ text-decoration: underline;
+ text-decoration-thickness: 1px;
+ text-underline-offset: 3px;
+ transition: color var(--transition-normal);
+}
+
+.site-content a:hover,
+.post-content a:hover,
+article a:hover,
+.page-content a:hover {
+ color: var(--color-link-hover);
+}
+
+.site-content a:focus,
+.post-content a:focus,
+article a:focus,
+.page-content a:focus {
+ outline: var(--focus-width) solid var(--focus-color);
+ outline-offset: var(--focus-offset);
+}
+
+/* Footer links: underlined */
+.site-footer a {
+ color: var(--color-brand-primary);
+ text-decoration: underline;
+ text-decoration-thickness: 1px;
+ text-underline-offset: 3px;
+ transition: color var(--transition-normal);
+}
+
+.site-footer a:hover {
+ color: var(--color-link-hover);
+}
+
+/* Navigation links: NO underline (context is clear) */
+nav a {
+ text-decoration: none;
+}
+
+/* ============================================================================
+ 6. COMPONENTS
+ ============================================================================ */
+
+/* ---- BUTTONS ---- */
+
+.ps-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--spacing-sm);
+ padding: var(--btn-padding-y) var(--btn-padding-x);
+ border: none;
+ border-radius: var(--radius-md);
+ font-family: var(--font-sans);
+ font-size: var(--text-body-md);
+ font-weight: 500;
+ cursor: pointer;
+ transition: all var(--transition-normal);
+ text-decoration: none;
+ white-space: nowrap;
+ user-select: none;
+}
+
+.ps-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.ps-btn:focus {
+ outline: none;
+ box-shadow: var(--focus-shadow);
+}
+
+/* Primary Button */
+.ps-btn-primary {
+ background-color: var(--color-brand-primary);
+ color: white;
+}
+
+.ps-btn-primary:hover {
+ background-color: var(--color-link-hover);
+ transform: translateY(-1px);
+ box-shadow: 0 4px 16px rgba(0, 102, 204, 0.2);
+}
+
+.ps-btn-primary:active {
+ transform: translateY(0);
+}
+
+/* Secondary Button (ghost/outline style) */
+.ps-btn-secondary {
+ background-color: transparent;
+ color: var(--color-text-primary);
+ border: 1px solid var(--color-border-default);
+ border-radius: var(--radius-lg);
+}
+
+.ps-btn-secondary:hover {
+ background-color: var(--color-bg-secondary);
+ border-color: var(--color-brand-primary);
+ color: var(--color-brand-primary);
+}
+
+/* Tertiary Button */
+.ps-btn-tertiary {
+ background-color: transparent;
+ color: var(--color-brand-primary);
+ border: 1px solid var(--color-brand-primary);
+}
+
+.ps-btn-tertiary:hover {
+ background-color: var(--color-brand-primary);
+ color: white;
+}
+
+/* Button Sizes */
+.ps-btn-sm {
+ padding: var(--spacing-sm) var(--spacing-md);
+ font-size: var(--text-body-sm);
+}
+
+.ps-btn-lg {
+ padding: var(--spacing-lg) var(--spacing-2xl);
+ font-size: var(--text-body-lg);
+}
+
+.ps-btn-full {
+ width: 100%;
+}
+
+/* ---- CARDS ---- */
+
+.ps-card {
+ background-color: var(--color-bg-primary);
+ border: 1px solid var(--color-border-default);
+ border-radius: var(--radius-lg);
+ padding: var(--spacing-lg);
+ transition: all var(--transition-normal);
+}
+
+.ps-card:hover {
+ border-color: var(--color-brand-primary);
+ box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1);
+}
+
+.ps-card-header {
+ margin-bottom: var(--spacing-md);
+}
+
+.ps-card-title {
+ font-size: var(--text-h5);
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin-bottom: var(--spacing-sm);
+}
+
+.ps-card-meta {
+ font-size: var(--text-caption);
+ color: var(--color-text-secondary);
+}
+
+.ps-card-content {
+ font-size: var(--text-body-md);
+ line-height: 1.6;
+ color: var(--color-text-primary);
+}
+
+/* ---- FEATURED IMAGES ---- */
+
+.ps-featured-image {
+ width: 100%;
+ text-align: center;
+ border-radius: var(--radius-lg);
+ overflow: hidden;
+}
+
+.ps-featured-image img {
+ display: block;
+ width: 100%;
+ max-width: 100%;
+ height: auto;
+ margin: 0 auto;
+ border-radius: var(--radius-lg);
+}
+
+/* ---- BADGES & TAGS ---- */
+
+.ps-badge {
+ display: inline-block;
+ padding: 4px 8px;
+ border-radius: var(--radius-md);
+ font-size: var(--text-label);
+ font-weight: var(--text-label-weight);
+ background-color: var(--color-badge-bg);
+ color: var(--color-badge-text);
+ white-space: nowrap;
+}
+
+.ps-badge-success {
+ background-color: #D1FAE5;
+ color: var(--color-status-success);
+}
+
+.ps-badge-warning {
+ background-color: #FEF3C7;
+ color: var(--color-status-warning);
+}
+
+.ps-badge-error {
+ background-color: #FEE2E2;
+ color: var(--color-status-error);
+}
+
+.ps-tag {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--spacing-xs);
+ padding: 4px 8px;
+ border-radius: var(--radius-md);
+ font-size: var(--text-label);
+ background-color: var(--color-bg-tertiary);
+ color: var(--color-text-primary);
+ cursor: pointer;
+ transition: all var(--transition-normal);
+}
+
+.ps-tag:hover {
+ background-color: var(--color-border-default);
+}
+
+.ps-tag-close {
+ width: 16px;
+ height: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ font-weight: 600;
+}
+
+/* ---- FORMS ---- */
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="number"],
+input[type="url"],
+textarea,
+select {
+ width: 100%;
+ padding: var(--spacing-md);
+ border: 1px solid var(--color-border-default);
+ border-radius: var(--radius-md);
+ font-family: var(--font-sans);
+ font-size: var(--text-body-md);
+ background-color: var(--color-bg-primary);
+ color: var(--color-text-primary);
+ transition: all var(--transition-normal);
+}
+
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+input[type="search"]:focus,
+input[type="number"]:focus,
+input[type="url"]:focus,
+textarea:focus,
+select:focus {
+ outline: none;
+ border-color: var(--color-brand-primary);
+ box-shadow: var(--focus-shadow);
+ background-color: var(--color-bg-secondary);
+}
+
+/* Form labels */
+label {
+ display: block;
+ margin-bottom: var(--spacing-sm);
+ font-size: var(--text-label);
+ font-weight: var(--text-label-weight);
+ color: var(--color-text-primary);
+}
+
+/* Form groups */
+.ps-form-group {
+ margin-bottom: var(--spacing-lg);
+}
+
+/* Form error state (per Design Director) */
+input.ps-error,
+textarea.ps-error,
+select.ps-error {
+ border-color: var(--color-status-error);
+ background-color: rgba(220, 38, 38, 0.02);
+}
+
+.ps-form-error {
+ color: var(--color-status-error);
+ font-size: var(--text-caption);
+ margin-top: 4px;
+ font-weight: var(--text-label-weight);
+}
+
+/* Checkboxes & Radios */
+input[type="checkbox"],
+input[type="radio"] {
+ width: 18px;
+ height: 18px;
+ margin: 0;
+ margin-right: var(--spacing-sm);
+ cursor: pointer;
+ accent-color: var(--color-brand-primary);
+}
+
+/* ---- ALERTS & CALLOUTS ---- */
+
+.ps-alert {
+ padding: var(--spacing-lg);
+ border-radius: var(--radius-md);
+ border-left: 4px solid;
+ margin-bottom: var(--spacing-md);
+}
+
+.ps-alert-info {
+ background-color: #DBEAFE;
+ border-color: var(--color-brand-primary);
+ color: #0652CD;
+}
+
+.ps-alert-success {
+ background-color: #D1FAE5;
+ border-color: var(--color-status-success);
+ color: #065F46;
+}
+
+.ps-alert-warning {
+ background-color: #FEF3C7;
+ border-color: var(--color-status-warning);
+ color: #78350F;
+}
+
+.ps-alert-error {
+ background-color: #FEE2E2;
+ border-color: var(--color-status-error);
+ color: #7F1D1D;
+}
+
+/* ---- SEARCH FORM ---- */
+
+.ps-search-form {
+ position: relative;
+ width: 100%;
+}
+
+.ps-search-input {
+ width: 100%;
+ padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-lg);
+ border: 1px solid var(--color-border-default);
+ border-radius: var(--radius-lg);
+ font-size: var(--text-body-md);
+}
+
+.ps-search-input:focus {
+ outline: none;
+ border-color: var(--color-brand-primary);
+ box-shadow: var(--focus-shadow);
+}
+
+.ps-search-icon {
+ position: absolute;
+ right: var(--spacing-md);
+ top: 50%;
+ transform: translateY(-50%);
+ color: var(--color-text-secondary);
+ pointer-events: none;
+}
+
+/* ---- PAGINATION ---- */
+
+.ps-pagination {
+ display: flex;
+ gap: var(--spacing-sm);
+ align-items: center;
+ justify-content: center;
+ margin: var(--spacing-2xl) 0;
+ flex-wrap: wrap;
+}
+
+.ps-pagination a,
+.ps-pagination span {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 40px;
+ height: 40px;
+ padding: 0 var(--spacing-sm);
+ border: 1px solid var(--color-border-default);
+ border-radius: var(--radius-md);
+ text-decoration: none;
+ color: var(--color-text-primary);
+ transition: all var(--transition-normal);
+}
+
+.ps-pagination a:hover {
+ border-color: var(--color-brand-primary);
+ background-color: var(--color-brand-primary);
+ color: white;
+}
+
+.ps-pagination .current {
+ background-color: var(--color-brand-primary);
+ border-color: var(--color-brand-primary);
+ color: white;
+}
+
+/* ============================================================================
+ 7. REGIONS (Header, Footer, Main)
+ ============================================================================ */
+
+/* ---- HEADER ---- */
+
+.site-header {
+ background-color: var(--color-bg-primary);
+ border-bottom: 1px solid var(--color-border-subtle);
+ padding: var(--spacing-lg) var(--spacing-xl);
+ position: sticky;
+ top: 0;
+ z-index: var(--z-sticky);
+ box-shadow: var(--shadow-sm);
+}
+
+/* Account for WP admin bar when logged in */
+.admin-bar .site-header {
+ top: 32px;
+}
+
+@media screen and (max-width: 782px) {
+ .admin-bar .site-header {
+ top: 46px;
+ }
+}
+
+.site-header-wrapper {
+ max-width: var(--container-2xl);
+ margin: 0 auto;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--spacing-lg);
+}
+
+/* Logo */
+.site-logo {
+ flex: 0 0 auto;
+ font-size: 24px;
+ font-weight: 700;
+ color: var(--color-brand-primary);
+ text-decoration: none;
+ line-height: 1;
+ transition: color var(--transition-normal);
+}
+
+.site-logo:hover {
+ color: var(--color-link-hover);
+}
+
+.site-logo img {
+ height: 32px;
+ width: auto;
+}
+
+/* Primary Navigation */
+.primary-navigation {
+ display: flex;
+ align-items: center;
+ flex: 1;
+ margin-left: var(--spacing-lg);
+ margin-right: auto;
+}
+
+.primary-navigation ul {
+ display: flex;
+ gap: var(--spacing-xl);
+ align-items: center;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.primary-navigation li {
+ display: flex;
+ align-items: center;
+}
+
+.primary-navigation a {
+ font-size: var(--text-body-md);
+ font-weight: 500;
+ color: var(--color-text-primary);
+ text-decoration: none;
+ position: relative;
+ transition: color var(--transition-normal);
+}
+
+.primary-navigation a:hover {
+ color: var(--color-brand-primary);
+}
+
+.primary-navigation a::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ right: 0;
+ height: 2px;
+ background: var(--color-brand-primary);
+ transform: scaleX(0);
+ transform-origin: right;
+ transition: transform var(--transition-normal);
+}
+
+.primary-navigation a:hover::after,
+.primary-navigation a.active::after {
+ transform: scaleX(1);
+ transform-origin: left;
+}
+
+/* Header Icons */
+.header-icons {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-md);
+}
+
+.header-icon-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ border: none;
+ background: none;
+ color: var(--color-text-primary);
+ cursor: pointer;
+ transition: color var(--transition-normal);
+ padding: 0;
+}
+
+.header-icon-btn:hover {
+ color: var(--color-brand-primary);
+}
+
+.header-icon-btn:focus {
+ outline: none;
+ box-shadow: var(--focus-shadow);
+ border-radius: var(--radius-md);
+}
+
+/* Header CTA button — hidden on mobile */
+.ps-header-cta {
+ display: none;
+ border-radius: var(--radius-lg);
+}
+
+@media (min-width: 768px) {
+ .ps-header-cta {
+ display: inline-flex;
+ }
+}
+
+/* Hamburger Menu */
+.menu-toggle {
+ display: none;
+ width: 40px;
+ height: 40px;
+ border: none;
+ background: none;
+ cursor: pointer;
+ padding: 0;
+ color: var(--color-text-primary);
+}
+
+/* Mobile Navigation */
+.nav-overlay {
+ position: fixed;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.3);
+ opacity: 0;
+ pointer-events: none;
+ z-index: var(--z-modal-backdrop);
+ transition: opacity var(--transition-slow);
+}
+
+.nav-overlay.active {
+ opacity: 1;
+ pointer-events: auto;
+}
+
+/* ---- FOOTER ---- */
+
+.site-footer {
+ background-color: var(--color-bg-secondary);
+ border-top: 1px solid var(--color-border-subtle);
+ padding: var(--spacing-3xl) var(--spacing-lg);
+ margin-top: auto;
+}
+
+.footer-wrapper {
+ max-width: var(--container-2xl);
+ margin: 0 auto;
+}
+
+.footer-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: var(--spacing-2xl);
+ margin-bottom: var(--spacing-3xl);
+}
+
+.footer-section h3 {
+ font-size: var(--text-h5);
+ margin-bottom: var(--spacing-lg);
+}
+
+.footer-section ul {
+ list-style: none;
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-md);
+}
+
+.footer-section a {
+ color: var(--color-brand-primary);
+ text-decoration: underline;
+ transition: color var(--transition-normal);
+}
+
+.footer-section a:hover {
+ color: var(--color-link-hover);
+}
+
+.footer-newsletter {
+ background-color: var(--color-bg-tertiary);
+ padding: var(--spacing-2xl);
+ border-radius: var(--radius-lg);
+ margin-bottom: var(--spacing-3xl);
+}
+
+.footer-newsletter h3 {
+ margin-top: 0;
+}
+
+.newsletter-form {
+ display: flex;
+ gap: var(--spacing-sm);
+ margin-top: var(--spacing-lg);
+}
+
+.newsletter-form input {
+ flex: 1;
+ min-width: 200px;
+}
+
+.newsletter-form button {
+ flex: 0 0 auto;
+}
+
+.footer-bottom {
+ border-top: 1px solid var(--color-border-default);
+ padding-top: var(--spacing-2xl);
+ text-align: center;
+ color: var(--color-text-secondary);
+ font-size: var(--text-body-sm);
+}
+
+/* ============================================================================
+ 8. PAGES
+ ============================================================================ */
+
+/* ---- HOME PAGE / HERO ---- */
+
+.hero-section {
+ background-color: var(--color-bg-primary);
+ padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-2xl);
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+}
+
+/* Decorative geometric shapes (Clawdiverse-inspired) */
+.hero-section::before,
+.hero-section::after {
+ content: '';
+ position: absolute;
+ border-radius: 50%;
+ pointer-events: none;
+ z-index: 0;
+}
+
+/* Soft pink circle — top left */
+.hero-section::before {
+ width: 200px;
+ height: 200px;
+ background: rgba(244, 114, 182, 0.10);
+ top: 8%;
+ left: -4%;
+}
+
+/* Mint/teal shape — right side */
+.hero-section::after {
+ width: 260px;
+ height: 260px;
+ background: rgba(52, 211, 153, 0.08);
+ top: 20%;
+ right: -6%;
+}
+
+.hero-content {
+ max-width: var(--container-lg);
+ margin: 0 auto;
+ position: relative;
+ z-index: 1;
+}
+
+.hero-title {
+ font-size: 48px;
+ font-weight: 800;
+ margin-bottom: var(--spacing-md);
+ color: var(--color-text-primary);
+ letter-spacing: -0.03em;
+ line-height: 1.1;
+}
+
+/* Accent word in hero title */
+.hero-title .ps-hero-accent {
+ color: var(--color-brand-primary);
+ position: relative;
+ display: inline-block;
+}
+
+/* Wavy underline on accent word */
+.hero-title .ps-hero-accent::after {
+ content: '';
+ position: absolute;
+ bottom: -4px;
+ left: 0;
+ right: 0;
+ height: 6px;
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8'%3E%3Cpath d='M0 4 Q12.5 0 25 4 T50 4 T75 4 T100 4' fill='none' stroke='%230066CC' stroke-width='2'/%3E%3C/svg%3E") repeat-x;
+ background-size: 50px 6px;
+}
+
+.hero-subtitle {
+ font-size: var(--text-body-lg);
+ color: var(--color-text-secondary);
+ margin-bottom: var(--spacing-lg);
+ max-width: 600px;
+ margin-left: auto;
+ margin-right: auto;
+ line-height: 1.7;
+}
+
+.hero-search {
+ margin-bottom: var(--spacing-lg);
+}
+
+/* Legacy theme search form (fallback when PSA plugin is not active) */
+.hero-search .ps-search-form {
+ max-width: 560px;
+ margin: 0 auto;
+}
+
+.hero-search .ps-search-input {
+ width: 100%;
+ padding: var(--spacing-md) var(--spacing-lg);
+ padding-right: 48px;
+ background-color: #FFFFFF;
+ color: var(--color-text-primary);
+ border: 1px solid var(--color-border-default);
+ border-radius: var(--radius-lg);
+ box-shadow: var(--shadow-sm);
+}
+
+/* ---- PEPTIDE SEARCH AI PLUGIN INTEGRATION ---- */
+
+/* Hero search — constrain the PSA form to match hero layout */
+.hero-search .psa-search-wrap {
+ max-width: 560px;
+ margin: 0 auto;
+}
+
+.hero-search .psa-search-input {
+ background-color: #FFFFFF;
+ color: var(--color-text-primary);
+ border: 1px solid var(--color-border-default);
+ border-radius: var(--radius-lg);
+ font-size: var(--text-body-lg);
+ padding: var(--spacing-md) var(--spacing-lg);
+ box-shadow: var(--shadow-sm);
+}
+
+.hero-search .psa-search-input::placeholder {
+ color: var(--color-text-tertiary);
+}
+
+.hero-search .psa-search-input:focus {
+ outline: none;
+ border-color: var(--color-brand-primary);
+ box-shadow: var(--focus-shadow);
+}
+
+.hero-search .psa-search-btn {
+ background-color: var(--color-brand-primary);
+ color: white;
+ border: none;
+ border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
+ cursor: pointer;
+ transition: background-color var(--transition-normal);
+}
+
+.hero-search .psa-search-btn:hover {
+ background-color: var(--color-brand-hover);
+}
+
+.hero-search .psa-search-results {
+ text-align: left;
+ max-height: 400px;
+ overflow-y: auto;
+ border-radius: var(--radius-lg);
+ box-shadow: var(--shadow-lg);
+ background-color: var(--color-bg-primary);
+ border: 1px solid var(--color-border-default);
+}
+
+/* Search overlay — full-screen overlay triggered from header search icon */
+.search-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.6);
+ backdrop-filter: blur(4px);
+ z-index: var(--z-modal, 1000);
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ padding-top: 120px;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity var(--transition-normal), visibility var(--transition-normal);
+}
+
+.search-overlay.active {
+ opacity: 1;
+ visibility: visible;
+}
+
+.search-overlay-inner {
+ background-color: var(--color-bg-primary);
+ border-radius: var(--radius-xl);
+ padding: var(--spacing-xl);
+ width: 90%;
+ max-width: 600px;
+ position: relative;
+ box-shadow: var(--shadow-xl);
+ transform: translateY(-20px);
+ transition: transform var(--transition-normal);
+}
+
+.search-overlay.active .search-overlay-inner {
+ transform: translateY(0);
+}
+
+.search-overlay-close {
+ position: absolute;
+ top: var(--spacing-md);
+ right: var(--spacing-md);
+ background: none;
+ border: none;
+ color: var(--color-text-secondary);
+ cursor: pointer;
+ padding: var(--spacing-xs);
+ border-radius: var(--radius-md);
+ transition: color var(--transition-normal), background-color var(--transition-normal);
+ z-index: 1;
+}
+
+.search-overlay-close:hover {
+ color: var(--color-text-primary);
+ background-color: var(--color-bg-secondary);
+}
+
+.search-overlay-content {
+ padding-top: var(--spacing-sm);
+}
+
+/* PSA plugin styling inside the overlay */
+.search-overlay .psa-search-input {
+ background-color: var(--color-bg-secondary);
+ color: var(--color-text-primary);
+ border: 1px solid var(--color-border-default);
+ border-radius: var(--radius-lg);
+ font-size: var(--text-body-md);
+ padding: var(--spacing-md) var(--spacing-lg);
+}
+
+.search-overlay .psa-search-input::placeholder {
+ color: var(--color-text-tertiary);
+}
+
+.search-overlay .psa-search-input:focus {
+ outline: none;
+ border-color: var(--color-brand-primary);
+ box-shadow: var(--focus-shadow);
+}
+
+.search-overlay .psa-search-btn {
+ background-color: var(--color-brand-primary);
+ color: white;
+ border: none;
+ border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
+ cursor: pointer;
+ transition: background-color var(--transition-normal);
+}
+
+.search-overlay .psa-search-btn:hover {
+ background-color: var(--color-brand-hover);
+}
+
+.search-overlay .psa-search-results {
+ max-height: 350px;
+ overflow-y: auto;
+ border-radius: var(--radius-lg);
+ margin-top: var(--spacing-md);
+}
+
+.search-overlay .psa-checking,
+.search-overlay .psa-pending,
+.search-overlay .psa-invalid,
+.search-overlay .psa-error {
+ margin-top: var(--spacing-md);
+ border-radius: var(--radius-lg);
+}
+
+/* ---- PEPTIDE NEWS PLUGIN OVERRIDES ---- */
+/* Remove line-clamp so full article summaries are visible.
+ Uses body prefix for specificity to beat the plugin's own stylesheet
+ which loads after the theme. */
+body .pn-article-excerpt,
+body p.pn-article-excerpt {
+ -webkit-line-clamp: unset;
+ -webkit-box-orient: unset;
+ display: block;
+ overflow: visible;
+ font-size: var(--text-body-md);
+ line-height: 1.6;
+}
+
+/* Tighten article card title for density */
+body .pn-article-title {
+ font-size: var(--text-h4);
+ line-height: 1.3;
+}
+
+.hero-ctas {
+ display: flex;
+ gap: var(--spacing-md);
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+.hero-ctas .ps-btn {
+ padding: var(--btn-padding-y) var(--btn-padding-x);
+}
+
+/* News Feed Area */
+.news-feed-section {
+ padding: var(--spacing-2xl) var(--spacing-lg);
+ background-color: var(--color-bg-primary);
+}
+
+.news-feed-header {
+ max-width: var(--container-lg);
+ margin: 0 auto var(--spacing-2xl);
+ text-align: center;
+}
+
+.news-feed-title {
+ font-size: var(--text-h2);
+ margin-bottom: var(--spacing-md);
+}
+
+.news-feed-description {
+ color: var(--color-text-secondary);
+ font-size: var(--text-body-md);
+}
+
+/* ---- ARCHIVE PAGE ---- */
+
+.archive-header {
+ padding: var(--spacing-3xl) var(--spacing-lg) var(--spacing-2xl);
+ background-color: var(--color-bg-primary);
+ position: relative;
+ overflow: hidden;
+}
+
+/* Decorative shape on archive header */
+.archive-header::after {
+ content: '';
+ position: absolute;
+ width: 180px;
+ height: 180px;
+ background: rgba(52, 211, 153, 0.08);
+ border-radius: 50%;
+ top: -40px;
+ right: -40px;
+ pointer-events: none;
+}
+
+.archive-title {
+ max-width: var(--container-lg);
+ margin: 0 auto;
+ font-size: var(--text-h2);
+ color: var(--color-text-primary);
+}
+
+.archive-content {
+ padding: var(--spacing-2xl) var(--spacing-lg);
+}
+
+.archive-filters {
+ max-width: var(--container-lg);
+ margin: 0 auto var(--spacing-2xl);
+ display: flex;
+ gap: var(--spacing-md);
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.archive-search {
+ flex: 1;
+ min-width: 200px;
+}
+
+.archive-grid {
+ max-width: var(--container-lg);
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--spacing-2xl);
+}
+
+.peptides-grid {
+ max-width: var(--container-2xl);
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--spacing-lg);
+ padding: var(--spacing-xl) var(--spacing-lg);
+}
+
+/* Peptide Card (Clawdiverse-inspired: white card, tinted left border, soft shadow) */
+.peptide-card {
+ background-color: var(--color-bg-primary);
+ border: 1px solid var(--color-border-default);
+ border-left: 3px solid var(--color-accent-mint);
+ border-radius: var(--radius-lg);
+ padding: var(--spacing-xl);
+ display: flex;
+ flex-direction: column;
+ transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+ position: relative;
+}
+
+.peptide-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+ border-left-width: 4px;
+}
+
+/* Category-coded left borders via nth-child for visual variety */
+.peptide-card:nth-child(4n+1) { border-left-color: var(--color-accent-mint); }
+.peptide-card:nth-child(4n+2) { border-left-color: var(--color-accent-sky); }
+.peptide-card:nth-child(4n+3) { border-left-color: var(--color-accent-lavender); }
+.peptide-card:nth-child(4n+4) { border-left-color: var(--color-accent-peach); }
+
+.peptide-card__header {
+ margin-bottom: var(--spacing-md);
+}
+
+.peptide-card__title {
+ font-size: var(--text-h5);
+ font-weight: 600;
+ line-height: 1.3;
+ margin: 0 0 var(--spacing-sm) 0;
+}
+
+.peptide-card__title a {
+ color: var(--color-text-primary);
+ text-decoration: none;
+ transition: color var(--transition-fast);
+}
+
+.peptide-card__title a:hover {
+ color: var(--color-brand-primary);
+}
+
+.peptide-card__meta {
+ display: flex;
+ gap: var(--spacing-xs);
+ flex-wrap: wrap;
+}
+
+/* Category tag pills (Clawdiverse-style colored pills) */
+.peptide-card__badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 11px;
+ font-weight: 600;
+ letter-spacing: 0.3px;
+ padding: 3px 10px;
+ border-radius: 100px;
+ background-color: var(--color-accent-mint);
+ color: #065F46;
+}
+
+/* Cycle badge colors to match card border */
+.peptide-card:nth-child(4n+2) .peptide-card__badge {
+ background-color: var(--color-accent-sky);
+ color: #1E3A5F;
+}
+
+.peptide-card:nth-child(4n+3) .peptide-card__badge {
+ background-color: var(--color-accent-lavender);
+ color: #4C1D95;
+}
+
+.peptide-card:nth-child(4n+4) .peptide-card__badge {
+ background-color: var(--color-accent-peach);
+ color: #7C2D12;
+}
+
+.peptide-card__excerpt {
+ font-size: var(--text-body-md);
+ line-height: 1.65;
+ color: var(--color-text-secondary);
+ margin-bottom: var(--spacing-lg);
+ flex: 1;
+ overflow: hidden;
+}
+
+.peptide-card__footer {
+ margin-top: auto;
+ padding-top: var(--spacing-md);
+ border-top: 1px solid var(--color-border-subtle);
+}
+
+.peptide-card__link {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--spacing-xs);
+ font-size: var(--text-body-sm);
+ font-weight: 600;
+ color: var(--color-brand-primary);
+ text-decoration: none;
+ transition: gap var(--transition-fast), color var(--transition-fast);
+}
+
+.peptide-card__link:hover {
+ color: var(--color-link-hover);
+ gap: var(--spacing-sm);
+}
+
+.peptide-card__link svg {
+ transition: transform var(--transition-fast);
+}
+
+.peptide-card__link:hover svg {
+ transform: translateX(2px);
+}
+
+.archive-empty {
+ text-align: center;
+ padding: var(--spacing-4xl) var(--spacing-lg);
+}
+
+.archive-empty h2 {
+ margin-top: 0;
+}
+
+.archive-empty p {
+ color: var(--color-text-secondary);
+ margin-bottom: var(--spacing-2xl);
+}
+
+/* ---- SINGLE PAGE / PEPTIDE ---- */
+
+.page-header {
+ padding: var(--spacing-3xl) var(--spacing-lg) var(--spacing-2xl);
+ background-color: var(--color-bg-primary);
+ position: relative;
+ overflow: hidden;
+}
+
+/* Decorative accent on page header */
+.page-header::after {
+ content: '';
+ position: absolute;
+ width: 160px;
+ height: 160px;
+ background: rgba(244, 114, 182, 0.08);
+ border-radius: 50%;
+ top: -30px;
+ right: -30px;
+ pointer-events: none;
+}
+
+.page-title {
+ max-width: var(--container-lg);
+ margin: 0 auto;
+ font-size: var(--text-h1);
+ font-weight: 800;
+ letter-spacing: -0.02em;
+ position: relative;
+ z-index: 1;
+}
+
+.page-content {
+ max-width: var(--container-lg);
+ margin: 0 auto;
+ padding: var(--spacing-3xl) var(--spacing-lg);
+}
+
+.page-content h2 {
+ font-size: var(--text-h3);
+ margin-top: var(--spacing-2xl);
+ margin-bottom: var(--spacing-md);
+}
+
+.page-content h3 {
+ font-size: var(--text-h4);
+ margin-top: var(--spacing-xl);
+ margin-bottom: var(--spacing-md);
+}
+
+.page-content ul,
+.page-content ol {
+ margin-left: var(--spacing-lg);
+ margin-bottom: var(--spacing-md);
+}
+
+.page-content li {
+ margin-bottom: var(--spacing-sm);
+}
+
+/* Collapse empty Elementor/page-builder containers that add phantom space */
+.page-content .elementor-section:empty,
+.page-content .elementor-widget-wrap:empty,
+.page-content .elementor-element:empty,
+.page-content div:empty:not([data-peptide-news-feed]) {
+ display: none;
+}
+
+/* ---- BACK LINK (breadcrumb-style) ---- */
+
+.ps-back-link {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--spacing-xs);
+ font-size: var(--text-body-sm);
+ font-weight: 500;
+ color: var(--color-text-secondary);
+ text-decoration: none;
+ margin-bottom: var(--spacing-lg);
+ transition: color var(--transition-fast);
+}
+
+.ps-back-link:hover {
+ color: var(--color-brand-primary);
+}
+
+/* ---- FEATURED BADGE ---- */
+
+.ps-featured-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ padding: 4px 12px;
+ border-radius: 100px;
+ font-size: var(--text-label);
+ font-weight: 700;
+ background-color: var(--color-featured-bg);
+ color: var(--color-featured-text);
+ margin-bottom: var(--spacing-md);
+}
+
+/* ---- PEPTIDE META CARDS (single page) ---- */
+
+.peptide-meta-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: var(--spacing-md);
+ margin-top: var(--spacing-2xl);
+}
+
+.peptide-meta-card {
+ background-color: var(--color-bg-secondary);
+ border: 1px solid var(--color-border-subtle);
+ border-radius: var(--radius-lg);
+ padding: var(--spacing-lg);
+}
+
+.peptide-meta-card dt {
+ font-size: var(--text-label);
+ font-weight: 600;
+ color: var(--color-text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ margin-bottom: var(--spacing-xs);
+}
+
+.peptide-meta-card dd {
+ font-size: var(--text-body-md);
+ font-weight: 500;
+ color: var(--color-text-primary);
+}
+
+.peptide-meta-card dd code {
+ font-size: var(--text-body-sm);
+}
+
+/* ---- PEPTIDE CONTENT BOX (description block on single page) ---- */
+
+.peptide-content-box {
+ background-color: var(--color-bg-secondary);
+ border: 1px solid var(--color-border-subtle);
+ border-radius: var(--radius-lg);
+ padding: var(--spacing-xl);
+ margin-bottom: var(--spacing-2xl);
+}
+
+/* ---- SECTION HEADING WITH ICON (Clawdiverse-style) ---- */
+
+.ps-section-heading {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-sm);
+ font-size: var(--text-h3);
+ font-weight: 700;
+ margin-bottom: var(--spacing-lg);
+ color: var(--color-text-primary);
+}
+
+.ps-section-heading .ps-section-icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ font-size: 16px;
+}
+
+/* ---- DECORATIVE BODY SHAPES ---- */
+/* Geometric accents on the main content area for visual warmth */
+
+body > .site-main {
+ position: relative;
+}
+
+/* Large peach blob — left side of body */
+body > .site-main::before {
+ content: '';
+ position: absolute;
+ width: 300px;
+ height: 300px;
+ background: rgba(254, 226, 213, 0.15);
+ border-radius: 50%;
+ top: 40%;
+ left: -8%;
+ pointer-events: none;
+ z-index: 0;
+}
+
+/* Lavender ring — right side of body */
+body > .site-main::after {
+ content: '';
+ position: absolute;
+ width: 200px;
+ height: 200px;
+ border: 30px solid rgba(237, 233, 254, 0.12);
+ border-radius: 50%;
+ top: 65%;
+ right: -3%;
+ pointer-events: none;
+ z-index: 0;
+}
+
+/* ---- 404 PAGE ---- */
+
+.error-404 {
+ text-align: center;
+ padding: var(--spacing-4xl) var(--spacing-lg);
+}
+
+.error-404 h1 {
+ font-size: var(--text-h1);
+ margin-bottom: var(--spacing-lg);
+}
+
+.error-404 p {
+ color: var(--color-text-secondary);
+ margin-bottom: var(--spacing-2xl);
+ font-size: var(--text-body-md);
+}
+
+/* ============================================================================
+ 9. ANIMATIONS & TRANSITIONS
+ ============================================================================ */
+
+/* Fade in animation */
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+.fade-in {
+ animation: fadeIn var(--transition-slow) ease-out;
+}
+
+/* Slide in from left */
+@keyframes slideInLeft {
+ from {
+ transform: translateX(-100%);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+.slide-in-left {
+ animation: slideInLeft var(--transition-slow) ease-out;
+}
+
+/* Skeleton loading animation */
+@keyframes shimmer {
+ 0% {
+ background-position: -1000px 0;
+ }
+ 100% {
+ background-position: 1000px 0;
+ }
+}
+
+.ps-skeleton {
+ background: linear-gradient(
+ 90deg,
+ var(--color-bg-tertiary) 25%,
+ var(--color-border-default) 50%,
+ var(--color-bg-tertiary) 75%
+ );
+ background-size: 1000px 100%;
+ animation: shimmer 1.5s infinite;
+ border-radius: var(--radius-md);
+}
+
+/* ============================================================================
+ 10. ACCESSIBILITY
+ ============================================================================ */
+
+/* Focus visible style (keyboard focus) */
+*:focus-visible {
+ outline: var(--focus-width) solid var(--focus-color);
+ outline-offset: var(--focus-offset);
+}
+
+/* Skip to main content link */
+.skip-to-main {
+ position: absolute;
+ top: -40px;
+ left: 0;
+ background: var(--color-brand-primary);
+ color: white;
+ padding: var(--spacing-md);
+ text-decoration: none;
+ z-index: var(--z-modal);
+}
+
+.skip-to-main:focus {
+ top: 0;
+}
+
+/* Visually hidden but accessible to screen readers */
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+/* Reduced motion preferences */
+@media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behavior: auto !important;
+ }
+}
+
+/* ============================================================================
+ 11. DARK MODE
+ ============================================================================
+
+ Precedence (highest to lowest):
+ 1. html[data-theme="light"] or html[data-theme="dark"] (explicit user choice)
+ 2. @media (prefers-color-scheme: dark) (system preference)
+ 3. Default light mode (above)
+
+ Plugin dark mode coordination:
+ - Theme broadcasts dark mode changes via data-theme attribute on
+ - Plugin must watch this attribute and update colors accordingly
+ - Plugin can also use CSS custom properties which theme controls
+
+ ============================================================================ */
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ /* Brand Colors */
+ --color-brand-primary: #3B82F6;
+ --color-status-success: #10B981;
+ --color-status-warning: #F59E0B;
+ --color-status-error: #EF4444;
+
+ /* Accent Colors (muted for dark mode) */
+ --color-accent-warm: #D97706;
+ --color-accent-mint: #064E3B;
+ --color-accent-lavender: #312E81;
+ --color-accent-peach: #7C2D12;
+ --color-accent-sky: #1E3A5F;
+ --color-featured-bg: #78350F;
+ --color-featured-text: #FEF3C7;
+
+ /* Text Colors */
+ --color-text-primary: #F9FAFB;
+ --color-text-secondary: #D1D5DB;
+ --color-text-tertiary: #9CA3AF;
+
+ /* Border Colors */
+ --color-border-default: #374151;
+ --color-border-subtle: #1F2937;
+
+ /* Background Colors */
+ --color-bg-primary: #111827;
+ --color-bg-secondary: #1F2937;
+ --color-bg-tertiary: #374151;
+
+ /* Component-Specific Colors */
+ --color-input-focus: #3B82F6;
+ --color-link-hover: #60A5FA;
+ --color-badge-bg: #0F172A;
+ --color-badge-text: #60A5FA;
+ --color-code-bg: #1F2937;
+ --color-code-text: #F9FAFB;
+
+ /* Focus shadow adjusted for dark mode */
+ --focus-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
+ }
+}
+
+/* Allow manual dark mode toggle (explicit override) */
+html[data-theme="dark"] {
+ --color-brand-primary: #3B82F6;
+ --color-status-success: #10B981;
+ --color-status-warning: #F59E0B;
+ --color-status-error: #EF4444;
+ --color-accent-warm: #D97706;
+ --color-accent-mint: #064E3B;
+ --color-accent-lavender: #312E81;
+ --color-accent-peach: #7C2D12;
+ --color-accent-sky: #1E3A5F;
+ --color-featured-bg: #78350F;
+ --color-featured-text: #FEF3C7;
+ --color-text-primary: #F9FAFB;
+ --color-text-secondary: #D1D5DB;
+ --color-text-tertiary: #9CA3AF;
+ --color-border-default: #374151;
+ --color-border-subtle: #1F2937;
+ --color-bg-primary: #111827;
+ --color-bg-secondary: #1F2937;
+ --color-bg-tertiary: #374151;
+ --color-input-focus: #3B82F6;
+ --color-link-hover: #60A5FA;
+ --color-badge-bg: #0F172A;
+ --color-badge-text: #60A5FA;
+ --color-code-bg: #1F2937;
+ --color-code-text: #F9FAFB;
+ --focus-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
+}
+
+html[data-theme="light"] {
+ --color-brand-primary: #0066CC;
+ --color-status-success: #059669;
+ --color-status-warning: #F59E0B;
+ --color-status-error: #DC2626;
+ --color-accent-warm: #F59E0B;
+ --color-accent-mint: #D1FAE5;
+ --color-accent-lavender: #EDE9FE;
+ --color-accent-peach: #FEE2D5;
+ --color-accent-sky: #DBEAFE;
+ --color-featured-bg: #FEF3C7;
+ --color-featured-text: #92400E;
+ --color-text-primary: #111827;
+ --color-text-secondary: #6B7280;
+ --color-text-tertiary: #9CA3AF;
+ --color-border-default: #E5E7EB;
+ --color-border-subtle: #F3F4F6;
+ --color-bg-primary: #FAFAF7;
+ --color-bg-secondary: #F5F3EE;
+ --color-bg-tertiary: #EDEAE3;
+ --color-input-focus: #0066CC;
+ --color-link-hover: #0052A3;
+ --color-badge-bg: #DBEAFE;
+ --color-badge-text: #0066CC;
+ --color-code-bg: #F3F4F6;
+ --color-code-text: #111827;
+ --focus-shadow: 0 0 0 4px rgba(0, 102, 204, 0.15);
+}
+
+/* Dark mode alert colors */
+@media (prefers-color-scheme: dark) {
+ .ps-alert-info {
+ background-color: #0C2340;
+ border-color: #3B82F6;
+ color: #BFDBFE;
+ }
+
+ .ps-alert-success {
+ background-color: #064E3B;
+ border-color: #10B981;
+ color: #DCFCE7;
+ }
+
+ .ps-alert-warning {
+ background-color: #78350F;
+ border-color: #F59E0B;
+ color: #FEF3C7;
+ }
+
+ .ps-alert-error {
+ background-color: #7F1D1D;
+ border-color: #EF4444;
+ color: #FEE2E2;
+ }
+
+ .footer-newsletter {
+ background-color: var(--color-bg-secondary);
+ }
+}
+
+/* ============================================================================
+ 12. RESPONSIVE DESIGN (Mobile-first)
+ ============================================================================ */
+
+/* Hide decorative shapes on small screens */
+@media (max-width: 767px) {
+ .hero-section::before,
+ .hero-section::after,
+ .archive-header::after,
+ .page-header::after,
+ body > .site-main::before,
+ body > .site-main::after {
+ display: none;
+ }
+}
+
+/* Extra Small (320px - 479px) */
+@media (max-width: 479px) {
+ .hero-section {
+ padding: var(--spacing-2xl) var(--spacing-md);
+ }
+
+ .hero-title {
+ font-size: 32px;
+ }
+
+ .hero-ctas {
+ gap: var(--spacing-sm);
+ }
+
+ .hero-ctas .ps-btn {
+ padding: var(--spacing-sm) var(--spacing-lg);
+ font-size: var(--text-body-sm);
+ }
+
+ .page-content {
+ padding: var(--spacing-lg) var(--spacing-md);
+ }
+
+ .peptides-grid {
+ padding: var(--spacing-2xl) var(--spacing-md);
+ }
+
+ .news-feed-section {
+ padding: var(--spacing-2xl) var(--spacing-md);
+ }
+
+ h1 {
+ font-size: 32px;
+ }
+
+ h2 {
+ font-size: 24px;
+ }
+
+ .site-header-wrapper {
+ gap: var(--spacing-sm);
+ }
+
+ .primary-navigation {
+ display: none;
+ }
+
+ .menu-toggle {
+ display: flex;
+ }
+
+ .header-icons {
+ gap: var(--spacing-sm);
+ }
+
+ .newsletter-form {
+ flex-direction: column;
+ }
+
+ .newsletter-form button {
+ width: 100%;
+ }
+
+ .footer-grid {
+ grid-template-columns: 1fr;
+ gap: var(--spacing-lg);
+ }
+}
+
+/* Small (480px - 767px) */
+@media (min-width: 480px) {
+ .site-header {
+ padding: var(--spacing-lg) var(--spacing-lg);
+ }
+}
+
+/* Medium (768px - 1023px) */
+@media (min-width: 768px) {
+ .menu-toggle {
+ display: none;
+ }
+
+ .primary-navigation {
+ display: flex !important;
+ position: static;
+ width: auto;
+ height: auto;
+ flex-direction: row;
+ background: none;
+ padding: 0;
+ transition: none;
+ }
+
+ .nav-overlay {
+ display: none;
+ }
+
+ .peptides-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .archive-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .hero-title {
+ font-size: 44px;
+ }
+
+ .newsletter-form {
+ flex-direction: row;
+ }
+
+ .newsletter-form button {
+ width: auto;
+ }
+}
+
+/* Large (1024px - 1439px) */
+@media (min-width: 1024px) {
+ .peptides-grid {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ .archive-grid {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ .site-header {
+ padding: var(--spacing-lg) var(--spacing-xl);
+ }
+
+ .footer-grid {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+
+/* Extra Large (1440px+) */
+@media (min-width: 1440px) {
+ .peptides-grid {
+ grid-template-columns: repeat(4, 1fr);
+ }
+
+ .site-header {
+ padding: var(--spacing-lg) var(--spacing-2xl);
+ }
+}
+
+/* ============================================================================
+ 13. UTILITY CLASSES
+ ============================================================================ */
+
+/* 404 Page Utilities */
+.ps-404-search-form {
+ margin: var(--spacing-2xl) 0;
+}
+
+.ps-404-cta-group {
+ display: flex;
+ gap: var(--spacing-md);
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+/* ============================================================================
+ 14. TOOL PAGES — Generic wrapper for plugin shortcode templates
+ ============================================================================ */
+
+.ps-tool-page {
+ padding: var(--spacing-3xl) var(--spacing-lg);
+ min-height: 60vh;
+}
+
+.ps-tool-fallback {
+ text-align: center;
+ padding: var(--spacing-4xl) 0;
+}
+
+.ps-tool-fallback h1 {
+ margin-bottom: var(--spacing-md);
+}
+
+.ps-tool-fallback p {
+ color: var(--color-text-secondary);
+ margin-bottom: var(--spacing-2xl);
+}
+
+/* ============================================================================
+ 15. RESEARCH MODULE CARDS — Front page grid
+ ============================================================================ */
+
+.ps-modules-section {
+ padding: var(--spacing-3xl) var(--spacing-lg);
+ background-color: var(--color-bg-secondary);
+}
+
+.ps-modules-header {
+ text-align: center;
+ margin-bottom: var(--spacing-2xl);
+}
+
+.ps-modules-title {
+ font-size: var(--text-h2);
+ margin-bottom: var(--spacing-sm);
+ margin-top: 0;
+}
+
+.ps-modules-subtitle {
+ color: var(--color-text-secondary);
+ font-size: var(--text-body-md);
+}
+
+.ps-modules-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: var(--spacing-lg);
+ max-width: var(--container-2xl);
+ margin: 0 auto;
+}
+
+.ps-module-card {
+ display: flex;
+ flex-direction: column;
+ padding: var(--spacing-xl);
+ background-color: var(--color-bg-primary);
+ border: 1px solid var(--color-border-default);
+ border-radius: var(--radius-lg);
+ text-decoration: none;
+ color: var(--color-text-primary);
+ transition: all var(--transition-normal);
+}
+
+.ps-module-card:hover {
+ border-color: var(--color-brand-primary);
+ box-shadow: 0 4px 16px rgba(0, 102, 204, 0.1);
+ transform: translateY(-2px);
+}
+
+.ps-module-card--inactive {
+ opacity: 0.5;
+ pointer-events: none;
+}
+
+.ps-module-card__icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ background-color: rgba(0, 102, 204, 0.1);
+ color: var(--color-brand-primary);
+ margin-bottom: var(--spacing-md);
+}
+
+.ps-module-card__title {
+ font-size: var(--text-h4);
+ font-weight: 600;
+ margin-bottom: var(--spacing-sm);
+ margin-top: 0;
+}
+
+.ps-module-card__description {
+ font-size: var(--text-body-md);
+ color: var(--color-text-secondary);
+ line-height: 1.6;
+ flex: 1;
+ margin-bottom: var(--spacing-md);
+}
+
+.ps-module-card__link {
+ font-size: var(--text-body-sm);
+ font-weight: 600;
+ color: var(--color-brand-primary);
+}
+
+/* ============================================================================
+ 16. DOCUMENTATION PAGE — Two-column layout with ToC sidebar
+ ============================================================================ */
+
+.ps-docs-layout {
+ display: grid;
+ grid-template-columns: 240px 1fr;
+ gap: var(--spacing-2xl);
+ max-width: var(--container-2xl);
+ margin: 0 auto;
+ align-items: start;
+}
+
+.ps-docs-sidebar {
+ position: sticky;
+ top: 100px;
+ max-height: calc(100vh - 120px);
+ overflow-y: auto;
+ padding: var(--spacing-lg) 0;
+}
+
+.ps-docs-sidebar-inner {
+ padding-right: var(--spacing-lg);
+ border-right: 1px solid var(--color-border-subtle);
+}
+
+.ps-docs-toc-title {
+ font-size: var(--text-h6);
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ color: var(--color-text-secondary);
+ margin-bottom: var(--spacing-md);
+ margin-top: 0;
+ cursor: default;
+}
+
+.ps-docs-toc ul {
+ list-style: none;
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-xs);
+}
+
+.ps-docs-toc-link {
+ display: block;
+ padding: var(--spacing-xs) var(--spacing-sm);
+ font-size: var(--text-body-sm);
+ color: var(--color-text-secondary);
+ text-decoration: none;
+ border-radius: var(--radius-sm);
+ transition: all var(--transition-fast);
+ border-left: 2px solid transparent;
+}
+
+.ps-docs-toc-link:hover {
+ color: var(--color-brand-primary);
+ background-color: var(--color-bg-secondary);
+}
+
+.ps-docs-toc-link--active {
+ color: var(--color-brand-primary);
+ border-left-color: var(--color-brand-primary);
+ background-color: var(--color-bg-secondary);
+ font-weight: 500;
+}
+
+.ps-docs-content {
+ min-width: 0;
+}
+
+.ps-docs-header {
+ margin-bottom: var(--spacing-2xl);
+}
+
+.ps-docs-header h1 {
+ margin-bottom: var(--spacing-md);
+}
+
+.ps-docs-intro {
+ font-size: var(--text-body-lg);
+ color: var(--color-text-secondary);
+ line-height: 1.7;
+}
+
+.ps-docs-body h2 {
+ margin-top: var(--spacing-3xl);
+ padding-top: var(--spacing-lg);
+ border-top: 1px solid var(--color-border-subtle);
+}
+
+.ps-docs-body h2:first-child {
+ margin-top: 0;
+ padding-top: 0;
+ border-top: none;
+}
+
+/* Documentation step styling for SOPs */
+.ps-docs-step {
+ counter-increment: step-counter;
+ position: relative;
+ padding-left: var(--spacing-2xl);
+ margin-bottom: var(--spacing-xl);
+}
+
+.ps-docs-step::before {
+ content: counter(step-counter);
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 28px;
+ height: 28px;
+ background-color: var(--color-brand-primary);
+ color: white;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: var(--text-body-sm);
+ font-weight: 700;
+}
+
+/* Warning callout for docs */
+.ps-docs-warning {
+ padding: var(--spacing-lg);
+ background-color: #FEF3C7;
+ border-left: 4px solid var(--color-status-warning);
+ border-radius: var(--radius-md);
+ margin: var(--spacing-lg) 0;
+ color: #78350F;
+}
+
+/* Documentation tables */
+.ps-docs-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: var(--spacing-lg) 0;
+}
+
+.ps-docs-table th,
+.ps-docs-table td {
+ padding: var(--spacing-sm) var(--spacing-md);
+ border: 1px solid var(--color-border-default);
+ text-align: left;
+ font-size: var(--text-body-md);
+}
+
+.ps-docs-table th {
+ background-color: var(--color-bg-secondary);
+ font-weight: 600;
+}
+
+/* Mobile: collapse sidebar to dropdown */
+@media (max-width: 1023px) {
+ .ps-docs-layout {
+ grid-template-columns: 1fr;
+ }
+
+ .ps-docs-sidebar {
+ position: static;
+ max-height: none;
+ border-bottom: 1px solid var(--color-border-subtle);
+ padding-bottom: var(--spacing-md);
+ margin-bottom: var(--spacing-lg);
+ }
+
+ .ps-docs-sidebar-inner {
+ border-right: none;
+ padding-right: 0;
+ }
+
+ .ps-docs-toc-title {
+ cursor: pointer;
+ }
+
+ .ps-docs-toc-title::after {
+ content: ' ▾';
+ }
+
+ .ps-docs-toc {
+ display: none;
+ }
+
+ .ps-docs-sidebar--open .ps-docs-toc {
+ display: block;
+ }
+}
+
+/* ============================================================================
+ 17. AUTH PAGE — Sign-in / Register forms
+ ============================================================================ */
+
+.ps-auth-page {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 70vh;
+}
+
+.ps-auth-container {
+ max-width: 440px;
+}
+
+.ps-auth-card {
+ background-color: var(--color-bg-primary);
+ border: 1px solid var(--color-border-default);
+ border-radius: var(--radius-lg);
+ padding: var(--spacing-2xl);
+ box-shadow: var(--shadow-md);
+}
+
+.ps-auth-card h1 {
+ font-size: var(--text-h3);
+ margin-bottom: var(--spacing-lg);
+}
+
+.ps-auth-info {
+ margin-bottom: var(--spacing-lg);
+}
+
+.ps-auth-info p {
+ margin-bottom: 0;
+ font-size: var(--text-body-sm);
+}
+
+.ps-auth-form .ps-form-group {
+ margin-bottom: var(--spacing-md);
+}
+
+.ps-auth-link {
+ text-align: center;
+ margin-top: var(--spacing-md);
+ font-size: var(--text-body-sm);
+}
+
+.ps-auth-toggle {
+ text-align: center;
+ margin-top: var(--spacing-lg);
+ padding-top: var(--spacing-lg);
+ border-top: 1px solid var(--color-border-subtle);
+ font-size: var(--text-body-sm);
+ color: var(--color-text-secondary);
+}
+
+.ps-auth-toggle a {
+ color: var(--color-brand-primary);
+ font-weight: 500;
+}
+
+.ps-auth-form-wrap--hidden {
+ display: none;
+}
+
+.ps-auth-messages {
+ margin-bottom: var(--spacing-md);
+}
+
+.ps-form-hint {
+ display: block;
+ font-size: var(--text-caption);
+ color: var(--color-text-tertiary);
+ margin-top: 4px;
+}
+
+/* Password strength */
+.ps-password-strength {
+ margin-top: 4px;
+ font-size: var(--text-caption);
+ font-weight: 500;
+}
+
+.ps-strength-weak { color: var(--color-status-error); }
+.ps-strength-fair { color: var(--color-status-warning); }
+.ps-strength-strong { color: var(--color-status-success); }
+
+/* ============================================================================
+ 18. NEWSLETTER SECTION — Standalone signup CTA
+ ============================================================================ */
+
+.ps-newsletter-section {
+ background-color: var(--color-bg-tertiary);
+ padding: var(--spacing-3xl) var(--spacing-lg);
+}
+
+.ps-newsletter-inner {
+ max-width: var(--container-md);
+ margin: 0 auto;
+ text-align: center;
+}
+
+.ps-newsletter-title {
+ font-size: var(--text-h2);
+ margin-bottom: var(--spacing-sm);
+ margin-top: 0;
+}
+
+.ps-newsletter-subtitle {
+ color: var(--color-text-secondary);
+ margin-bottom: var(--spacing-lg);
+}
+
+.ps-newsletter-form-row {
+ display: flex;
+ gap: var(--spacing-sm);
+ max-width: 480px;
+ margin: 0 auto;
+}
+
+.ps-newsletter-input {
+ flex: 1;
+ min-width: 0;
+}
+
+.ps-newsletter-status {
+ margin-top: var(--spacing-md);
+ text-align: left;
+ max-width: 480px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.ps-newsletter-learn-more {
+ margin-top: var(--spacing-md);
+ font-size: var(--text-body-sm);
+}
+
+.ps-newsletter-learn-more a {
+ color: var(--color-brand-primary);
+}
+
+@media (max-width: 479px) {
+ .ps-newsletter-form-row {
+ flex-direction: column;
+ }
+}
+
+/* ============================================================================
+ 19. USER MENU — Logged-in dropdown in header
+ ============================================================================ */
+
+.ps-user-menu {
+ position: relative;
+}
+
+.ps-user-menu__toggle {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-xs);
+ background: none;
+ border: 1px solid var(--color-border-default);
+ border-radius: var(--radius-md);
+ padding: var(--spacing-sm) var(--spacing-md);
+ font-size: var(--text-body-sm);
+ font-weight: 500;
+ color: var(--color-text-primary);
+ cursor: pointer;
+ transition: all var(--transition-fast);
+}
+
+.ps-user-menu__toggle:hover {
+ border-color: var(--color-brand-primary);
+}
+
+.ps-user-menu__name {
+ max-width: 120px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.ps-user-menu__dropdown {
+ display: none;
+ position: absolute;
+ top: 100%;
+ right: 0;
+ margin-top: var(--spacing-xs);
+ background-color: var(--color-bg-primary);
+ border: 1px solid var(--color-border-default);
+ border-radius: var(--radius-md);
+ box-shadow: var(--shadow-lg);
+ min-width: 180px;
+ z-index: var(--z-dropdown);
+ padding: var(--spacing-xs) 0;
+}
+
+.ps-user-menu:hover .ps-user-menu__dropdown,
+.ps-user-menu__toggle:focus + .ps-user-menu__dropdown {
+ display: block;
+}
+
+.ps-user-menu__dropdown a {
+ display: block;
+ padding: var(--spacing-sm) var(--spacing-md);
+ font-size: var(--text-body-sm);
+ color: var(--color-text-primary);
+ text-decoration: none;
+ transition: background-color var(--transition-fast);
+}
+
+.ps-user-menu__dropdown a:hover {
+ background-color: var(--color-bg-secondary);
+ color: var(--color-brand-primary);
+}
+
+/* ============================================================================
+ 20. SETTINGS PANEL — Slide-out support panel
+ ============================================================================ */
+
+.ps-settings-overlay {
+ position: fixed;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.4);
+ z-index: var(--z-modal-backdrop);
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity var(--transition-slow), visibility var(--transition-slow);
+}
+
+.ps-settings-overlay--active {
+ opacity: 1;
+ visibility: visible;
+}
+
+.ps-settings-panel {
+ position: fixed;
+ top: 0;
+ right: -400px;
+ width: 380px;
+ max-width: 90vw;
+ height: 100vh;
+ background-color: var(--color-bg-primary);
+ border-left: 1px solid var(--color-border-default);
+ box-shadow: var(--shadow-xl);
+ z-index: var(--z-modal);
+ overflow-y: auto;
+ transition: right var(--transition-slow);
+ display: flex;
+ flex-direction: column;
+}
+
+.ps-settings-panel--open {
+ right: 0;
+}
+
+.ps-settings-panel__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: var(--spacing-lg) var(--spacing-xl);
+ border-bottom: 1px solid var(--color-border-subtle);
+}
+
+.ps-settings-panel__header h2 {
+ font-size: var(--text-h4);
+ margin: 0;
+}
+
+.ps-settings-panel__close {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ background: none;
+ border: none;
+ color: var(--color-text-secondary);
+ cursor: pointer;
+ border-radius: var(--radius-sm);
+ transition: all var(--transition-fast);
+}
+
+.ps-settings-panel__close:hover {
+ color: var(--color-text-primary);
+ background-color: var(--color-bg-secondary);
+}
+
+.ps-settings-panel__body {
+ padding: var(--spacing-xl);
+ flex: 1;
+}
+
+.ps-settings-section {
+ margin-bottom: var(--spacing-2xl);
+}
+
+.ps-settings-section h3 {
+ font-size: var(--text-h5);
+ margin-bottom: var(--spacing-md);
+ margin-top: 0;
+}
+
+.ps-settings-disclaimer {
+ font-size: var(--text-body-sm);
+ color: var(--color-text-secondary);
+}
+
+.ps-settings-disclaimer p {
+ font-size: var(--text-body-sm);
+ line-height: 1.6;
+}
+
+.ps-contact-form .ps-form-group {
+ margin-bottom: var(--spacing-md);
+}
+
+.ps-contact-status {
+ margin-top: var(--spacing-md);
+}
+
+/* ============================================================================
+ 21. LANGUAGE PLACEHOLDER — Header icon
+ ============================================================================ */
+
+.ps-lang-placeholder {
+ display: flex;
+ align-items: center;
+ gap: 2px;
+ color: var(--color-text-secondary);
+ font-size: var(--text-body-sm);
+ font-weight: 500;
+ cursor: default;
+}
+
+.ps-lang-code {
+ font-size: var(--text-label);
+}
+
+@media (max-width: 767px) {
+ .ps-lang-placeholder {
+ display: none;
+ }
+}
+
+/* ============================================================================
+ 22. FOOTER UPDATES — Disclaimer and language links
+ ============================================================================ */
+
+.footer-disclaimer {
+ font-size: var(--text-caption);
+ color: var(--color-text-tertiary);
+ max-width: var(--container-md);
+ margin: var(--spacing-md) auto;
+ line-height: 1.5;
+}
+
+.footer-languages {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--spacing-md);
+ margin-top: var(--spacing-md);
+ font-size: var(--text-body-sm);
+ flex-wrap: wrap;
+}
+
+.footer-languages-label {
+ font-weight: 500;
+ color: var(--color-text-secondary);
+}
+
+.footer-languages a {
+ color: var(--color-brand-primary);
+}
+
+/* ============================================================================
+ 23. PROFILE PAGE — Basic profile fallback
+ ============================================================================ */
+
+.ps-profile-basic {
+ text-align: center;
+ padding: var(--spacing-2xl) 0;
+}
+
+.ps-profile-basic h1 {
+ margin-bottom: var(--spacing-md);
+}
+
+.ps-profile-links {
+ display: flex;
+ gap: var(--spacing-md);
+ justify-content: center;
+ flex-wrap: wrap;
+ margin-top: var(--spacing-xl);
+}
+
+/* Science Feed header */
+.ps-science-feed-header {
+ text-align: center;
+ margin-bottom: var(--spacing-2xl);
+}
+
+.ps-science-feed-header h1 {
+ margin-bottom: var(--spacing-md);
+}
+
+.ps-science-feed-header p {
+ color: var(--color-text-secondary);
+}
+
+/* ============================================================================
+ 24. DARK MODE — Additions for new components
+ ============================================================================ */
+
+html[data-theme="dark"] .ps-module-card__icon {
+ background-color: rgba(59, 130, 246, 0.15);
+}
+
+html[data-theme="dark"] .ps-module-card:hover {
+ box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
+}
+
+html[data-theme="dark"] .ps-docs-warning {
+ background-color: #78350F;
+ border-color: #F59E0B;
+ color: #FEF3C7;
+}
+
+html[data-theme="dark"] .ps-auth-card {
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+html[data-theme="dark"] .ps-newsletter-section {
+ background-color: var(--color-bg-secondary);
+}
+
+html[data-theme="dark"] .ps-settings-overlay {
+ background: rgba(0, 0, 0, 0.6);
+}
+
+html[data-theme="dark"] .ps-modules-section {
+ background-color: var(--color-bg-secondary);
+}
+
+/* Dropdown submenu support for primary navigation */
+.primary-navigation li.menu-item-has-children {
+ position: relative;
+}
+
+.primary-navigation .sub-menu {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ background-color: var(--color-bg-primary);
+ border: 1px solid var(--color-border-default);
+ border-radius: var(--radius-md);
+ box-shadow: var(--shadow-lg);
+ min-width: 200px;
+ z-index: var(--z-dropdown);
+ padding: var(--spacing-xs) 0;
+ margin-top: var(--spacing-sm);
+}
+
+.primary-navigation li.menu-item-has-children:hover > .sub-menu {
+ display: flex;
+ flex-direction: column;
+}
+
+.primary-navigation .sub-menu li {
+ display: block;
+}
+
+.primary-navigation .sub-menu a {
+ display: block;
+ padding: var(--spacing-sm) var(--spacing-md);
+ font-size: var(--text-body-sm);
+ white-space: nowrap;
+}
+
+.primary-navigation .sub-menu a:hover {
+ background-color: var(--color-bg-secondary);
+}
+
+.primary-navigation .sub-menu a::after {
+ display: none;
+}
+
+/* ============================================================================
+ 25. RESPONSIVE — Additions for new components
+ ============================================================================ */
+
+@media (max-width: 767px) {
+ .ps-user-menu__toggle {
+ padding: var(--spacing-xs) var(--spacing-sm);
+ font-size: var(--text-caption);
+ }
+
+ .ps-user-menu__name {
+ display: none;
+ }
+
+ .ps-modules-grid {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (min-width: 768px) {
+ .ps-modules-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (min-width: 1024px) {
+ .ps-modules-grid {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
+
+/* ============================================================================
+ END OF STYLESHEET
+ ============================================================================ */
+
+/* =====================================================================
+ Section 26 — v1.5.1 security/UX additions
+ ===================================================================== */
+
+/* Visually hidden honeypot wrapper — off-screen, keyboard-skipped, bot-visible. */
+.ps-hp-wrap {
+ position: absolute;
+ left: -9999px;
+ top: auto;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ pointer-events: none;
+}
+
+/* Email verification banner on /profile */
+.ps-verify-required {
+ padding: var(--spacing-md);
+ margin-bottom: var(--spacing-lg);
+ border-left: 4px solid #F59E0B;
+ background-color: #FEF3C7;
+ color: #78350F;
+ border-radius: 6px;
+}
+
+html[data-theme="dark"] .ps-verify-required {
+ background-color: #451A03;
+ color: #FEF3C7;
+ border-left-color: #F59E0B;
+}
+
+.ps-verify-required h3 {
+ margin: 0 0 var(--spacing-xs) 0;
+ font-size: 1.05rem;
+}
+
+.ps-verify-resend {
+ margin-top: var(--spacing-sm);
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-sm);
+}
+
+.ps-verify-resend-status {
+ font-size: 0.9rem;
+ color: inherit;
+}
+
+/* Newsletter consent + privacy link */
+.ps-newsletter-consent {
+ display: flex;
+ align-items: flex-start;
+ gap: var(--spacing-xs);
+ margin-top: var(--spacing-sm);
+ font-size: 0.9rem;
+ line-height: 1.5;
+}
+
+.ps-newsletter-consent input[type="checkbox"] {
+ margin-top: 0.25em;
+ flex-shrink: 0;
+}
+
+.ps-newsletter-privacy {
+ margin-top: var(--spacing-xs);
+ font-size: 0.85rem;
+ opacity: 0.85;
+}
+
+/* Footer translations note */
+.footer-languages-note {
+ margin-top: var(--spacing-sm);
+ font-size: 0.85rem;
+ opacity: 0.7;
+}