extract content + template inline styles to CSS classes (Phase 4)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
@@ -869,4 +869,307 @@
|
||||
.order-summary-divider {
|
||||
border-color: var(--t-border-default);
|
||||
}
|
||||
|
||||
/* ── Content body ── */
|
||||
|
||||
.content-body {
|
||||
padding: var(--space-xl) var(--space-lg);
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content-image {
|
||||
margin-bottom: var(--space-lg);
|
||||
border-radius: var(--t-radius-image);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.content-page {
|
||||
background-color: var(--t-surface-base);
|
||||
}
|
||||
|
||||
/* ── Contact form ── */
|
||||
|
||||
.contact-form-meta {
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
.contact-form-label {
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
/* ── Accent email link ── */
|
||||
|
||||
.accent-email {
|
||||
color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
|
||||
}
|
||||
|
||||
/* ── Card shared styles (info, tracking, newsletter, social cards) ── */
|
||||
|
||||
.card-heading {
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.card-text {
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
/* ── Info card ── */
|
||||
|
||||
.info-card-list {
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
.info-card-bullet {
|
||||
color: var(--t-text-tertiary);
|
||||
}
|
||||
|
||||
.info-card-label {
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
/* ── Contact info card ── */
|
||||
|
||||
.contact-info-email {
|
||||
color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ── Email input min-width ── */
|
||||
|
||||
.email-input {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
/* ── Social links card ── */
|
||||
|
||||
.social-link-card-item {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.social-link-card-icon {
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
/* ── Social links (footer) ── */
|
||||
|
||||
.social-link {
|
||||
color: var(--t-text-secondary);
|
||||
border-radius: var(--t-radius-button);
|
||||
}
|
||||
|
||||
/* ── Trust badges ── */
|
||||
|
||||
.trust-badges {
|
||||
background-color: var(--t-surface-sunken);
|
||||
border-radius: var(--t-radius-card);
|
||||
}
|
||||
|
||||
.trust-badge-icon {
|
||||
color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
|
||||
}
|
||||
|
||||
.trust-badge-title {
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.trust-badge-text {
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
/* ── Reviews section ── */
|
||||
|
||||
.pdp-reviews {
|
||||
border-top: 1px solid var(--t-border-default);
|
||||
}
|
||||
|
||||
.reviews-summary {
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.reviews-count {
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
/* ── Review card ── */
|
||||
|
||||
.review-card {
|
||||
border-bottom: 1px solid var(--t-border-subtle);
|
||||
}
|
||||
|
||||
.review-date {
|
||||
color: var(--t-text-tertiary);
|
||||
}
|
||||
|
||||
.review-title {
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.review-body {
|
||||
color: var(--t-text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.review-author {
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.review-verified {
|
||||
background-color: var(--t-surface-sunken);
|
||||
color: var(--t-text-tertiary);
|
||||
}
|
||||
|
||||
/* ── Rich text ── */
|
||||
|
||||
.rich-text {
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.rich-text-lead {
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.rich-text-paragraph {
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
.rich-text-heading {
|
||||
font-family: var(--t-font-heading);
|
||||
font-weight: var(--t-heading-weight);
|
||||
font-size: var(--t-text-xl);
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.rich-text-list {
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
/* ── Flash messages ── */
|
||||
|
||||
.shop-flash {
|
||||
background-color: var(--t-surface-raised, #fff);
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.shop-flash--info {
|
||||
border: 1px solid var(--t-border-default);
|
||||
}
|
||||
|
||||
.shop-flash--error {
|
||||
border: 1px solid hsl(0 70% 50% / 0.3);
|
||||
}
|
||||
|
||||
.shop-flash-icon--info {
|
||||
color: var(--t-accent);
|
||||
}
|
||||
|
||||
.shop-flash-icon--error {
|
||||
color: hsl(0 70% 50%);
|
||||
}
|
||||
|
||||
/* ── Link buttons (make <a> links styled as buttons) ── */
|
||||
|
||||
.themed-button:where(a),
|
||||
.themed-button-outline:where(a) {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* ── Checkout success ── */
|
||||
|
||||
.checkout-icon {
|
||||
background-color: var(--t-accent);
|
||||
color: var(--t-accent-contrast);
|
||||
}
|
||||
|
||||
.checkout-heading {
|
||||
font-family: var(--t-font-heading);
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.checkout-meta {
|
||||
color: var(--t-text-secondary);
|
||||
|
||||
& strong {
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.checkout-items {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.checkout-item {
|
||||
border-color: var(--t-border-default);
|
||||
}
|
||||
|
||||
.checkout-item-name {
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.checkout-item-detail {
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
.checkout-item-price {
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.checkout-total-border {
|
||||
border-color: var(--t-border-default);
|
||||
}
|
||||
|
||||
.checkout-total {
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.checkout-shipping-address {
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
.checkout-pending-icon {
|
||||
background-color: var(--t-surface-sunken);
|
||||
}
|
||||
|
||||
.checkout-pending-spinner {
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
.checkout-pending-text {
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
.checkout-pending-hint {
|
||||
color: var(--t-text-tertiary);
|
||||
}
|
||||
|
||||
.checkout-contact-link {
|
||||
color: var(--t-accent);
|
||||
}
|
||||
|
||||
/* ── Error page ── */
|
||||
|
||||
.error-main {
|
||||
min-height: calc(100vh - 4rem);
|
||||
}
|
||||
|
||||
/* ── PDP variant fallback ── */
|
||||
|
||||
.pdp-variant-fallback {
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
/* ── Cart page list ── */
|
||||
|
||||
.cart-page-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user