feat(child-theme): scaffold asterion-bricks v0.1.0
Initial child theme structure inheriting from Bricks parent. Token-driven, RGPD-native, mobile-first foundation ready for component and template work. What's in this commit - style.css: WP theme metadata (Template: bricks, v0.1.0) - functions.php: enqueue cascade tokens -> utilities -> components, defer-loaded main.js, font preload, theme support, image sizes (av-hero 2400x1350, av-card 800x600, av-thumb 400x300), Gutenberg default styles dequeued - theme.json: Gutenberg color/typo palette mirroring tokens - assets/css/tokens.css: full design system per Design Handoff section 2 (brand colors, neutrals, semantics, type scale + line-heights, 8pt spacing, radii, shadows, z-index, motion, prefers-reduced-motion) - assets/css/utilities.css: modern reset + .av-container, .av-skip-link, .av-sr-only, .av-stack, .av-section helpers, opinionated heading scale - assets/css/components.css: index of planned components + buttons (5 variants x 4 sizes per Design Handoff section 3.1) and links - assets/js/main.js: vanilla skeleton with header scroll, IntersectionObserver reveal, count-up, mobile drawer; respects prefers-reduced-motion - inc/cpt.php: register_post_type case_study (slug /customers/) + scenario (slug /scenarios/) + shared 'industry' taxonomy - inc/seo.php: Organization JSON-LD on home; placeholders for Product, Article, FAQPage, BreadcrumbList - assets/fonts/: Inter Variable + Italic WOFF2 self-hosted (RGPD; no Google Fonts CDN). Inter Display @font-face commented — Inter 4+ uses opsz axis from the same file. Out of scope (intentionally deferred) - Component fills: cards, forms, navigation, alerts, modals, tabs (placeholders) - Page templates: home and beyond - Bricks JSON template exports - Schema.org Product / Article / FAQPage / BreadcrumbList implementations Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
233
wp-content/themes/asterion-bricks/assets/css/components.css
Normal file
233
wp-content/themes/asterion-bricks/assets/css/components.css
Normal file
@@ -0,0 +1,233 @@
|
||||
/**
|
||||
* Asterion Bricks — Components
|
||||
*
|
||||
* Component-level styles, layered on top of tokens + utilities.
|
||||
* Loaded last in the cascade.
|
||||
*
|
||||
* Naming : `.av-<component>` base, `.av-<component>--<modifier>`,
|
||||
* `.av-<component>__<element>`, `.av-<component>.is-<state>`.
|
||||
*/
|
||||
|
||||
/* ============================================================================
|
||||
Section index (filled progressively as components ship)
|
||||
|
||||
1. Buttons .av-btn
|
||||
2. Links .av-link
|
||||
3. Forms .av-input, .av-label, .av-select, .av-textarea
|
||||
4. Cards .av-card and variants
|
||||
5. Stat callout .av-stat
|
||||
6. Navigation header .av-header, .av-nav, .av-megamenu, .av-drawer
|
||||
7. Footer .av-footer
|
||||
8. Alerts & toasts .av-alert, .av-toast
|
||||
9. Modals .av-modal
|
||||
10. Tooltips & popovers .av-tooltip
|
||||
11. Tabs & accordions .av-tabs, .av-accordion
|
||||
12. Tables .av-table
|
||||
13. Badges & tags .av-badge
|
||||
|
||||
Reference : Design Handoff Specification, section 3.
|
||||
============================================================================ */
|
||||
|
||||
|
||||
/* ============================================================================
|
||||
1. Buttons (Design Handoff section 3.1)
|
||||
|
||||
Variants : primary, secondary, ghost, on-dark, destructive
|
||||
Sizes : sm (32px), md (44px default), lg (52px), xl (60px hero only)
|
||||
States : default, hover, focus, active, disabled, loading
|
||||
Border radius : radius-sm by default (tactical aesthetic — crisp corners).
|
||||
============================================================================ */
|
||||
|
||||
.av-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
padding: 0 var(--space-5);
|
||||
height: 44px;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-body-md);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
text-decoration: none;
|
||||
border: var(--border-default) solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
background-color var(--duration-fast) var(--ease-default),
|
||||
color var(--duration-fast) var(--ease-default),
|
||||
transform var(--duration-fast) var(--ease-default),
|
||||
box-shadow var(--duration-default) var(--ease-default),
|
||||
border-color var(--duration-fast) var(--ease-default);
|
||||
}
|
||||
|
||||
.av-btn:disabled,
|
||||
.av-btn.is-disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.av-btn.is-loading {
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
/* --- Sizes --- */
|
||||
|
||||
.av-btn--sm {
|
||||
height: 32px;
|
||||
padding: 0 var(--space-3);
|
||||
font-size: var(--text-body-sm);
|
||||
}
|
||||
|
||||
.av-btn--md {
|
||||
height: 44px;
|
||||
padding: 0 var(--space-5);
|
||||
}
|
||||
|
||||
.av-btn--lg {
|
||||
height: 52px;
|
||||
padding: 0 var(--space-7, 1.75rem);
|
||||
font-size: var(--text-body-lg);
|
||||
}
|
||||
|
||||
.av-btn--xl {
|
||||
height: 60px;
|
||||
padding: 0 var(--space-9, 2.25rem);
|
||||
font-size: var(--text-h4);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
/* --- Variant : primary (gold fill, navy text) --- */
|
||||
|
||||
.av-btn--primary {
|
||||
background-color: var(--color-brand-gold);
|
||||
color: var(--color-brand-navy);
|
||||
border-color: var(--color-brand-gold);
|
||||
}
|
||||
.av-btn--primary:hover,
|
||||
.av-btn--primary:focus-visible {
|
||||
background-color: var(--color-brand-gold-soft);
|
||||
border-color: var(--color-brand-gold-soft);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-glow-gold);
|
||||
}
|
||||
.av-btn--primary:active {
|
||||
transform: translateY(0);
|
||||
filter: brightness(0.92);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* --- Variant : secondary (outlined, navy text) --- */
|
||||
|
||||
.av-btn--secondary {
|
||||
background-color: transparent;
|
||||
color: var(--color-brand-navy);
|
||||
border-color: var(--color-brand-navy);
|
||||
}
|
||||
.av-btn--secondary:hover,
|
||||
.av-btn--secondary:focus-visible {
|
||||
background-color: var(--color-brand-navy);
|
||||
color: var(--color-text-on-dark);
|
||||
}
|
||||
|
||||
/* --- Variant : ghost (navy text, no border) --- */
|
||||
|
||||
.av-btn--ghost {
|
||||
background-color: transparent;
|
||||
color: var(--color-brand-navy);
|
||||
border-color: transparent;
|
||||
}
|
||||
.av-btn--ghost:hover,
|
||||
.av-btn--ghost:focus-visible {
|
||||
background-color: var(--color-bg-subtle);
|
||||
}
|
||||
|
||||
/* --- Variant : on-dark (for dark backgrounds — text gold or white) --- */
|
||||
|
||||
.av-btn--on-dark.av-btn--primary {
|
||||
background-color: var(--color-brand-gold);
|
||||
color: var(--color-brand-navy);
|
||||
}
|
||||
.av-btn--on-dark.av-btn--secondary {
|
||||
color: var(--color-text-on-dark);
|
||||
border-color: var(--color-text-on-dark);
|
||||
}
|
||||
.av-btn--on-dark.av-btn--secondary:hover,
|
||||
.av-btn--on-dark.av-btn--secondary:focus-visible {
|
||||
background-color: var(--color-text-on-dark);
|
||||
color: var(--color-brand-navy);
|
||||
}
|
||||
.av-btn--on-dark.av-btn--ghost {
|
||||
color: var(--color-text-on-dark);
|
||||
}
|
||||
.av-btn--on-dark.av-btn--ghost:hover,
|
||||
.av-btn--on-dark.av-btn--ghost:focus-visible {
|
||||
background-color: var(--color-bg-dark-elevated);
|
||||
}
|
||||
|
||||
/* --- Variant : destructive --- */
|
||||
|
||||
.av-btn--destructive {
|
||||
background-color: var(--color-alert-red);
|
||||
color: var(--color-text-on-dark);
|
||||
border-color: var(--color-alert-red);
|
||||
}
|
||||
.av-btn--destructive:hover,
|
||||
.av-btn--destructive:focus-visible {
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================================
|
||||
2. Links (Design Handoff section 3.2)
|
||||
============================================================================ */
|
||||
|
||||
.av-link {
|
||||
color: var(--color-brand-navy);
|
||||
text-decoration: none;
|
||||
transition: color var(--duration-fast) var(--ease-default);
|
||||
}
|
||||
.av-link:hover {
|
||||
color: var(--color-brand-gold);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
.av-link--on-dark {
|
||||
color: var(--color-text-on-dark);
|
||||
}
|
||||
.av-link--on-dark:hover {
|
||||
color: var(--color-brand-gold);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================================
|
||||
3. Forms — placeholder
|
||||
To be filled from Design Handoff section 3.3 when conversion templates are built.
|
||||
============================================================================ */
|
||||
|
||||
|
||||
/* ============================================================================
|
||||
4. Cards — placeholder
|
||||
To be filled from Design Handoff section 3.4 when home solutions/industries
|
||||
sections are built.
|
||||
============================================================================ */
|
||||
|
||||
|
||||
/* ============================================================================
|
||||
5. Stat callout — placeholder
|
||||
============================================================================ */
|
||||
|
||||
|
||||
/* ============================================================================
|
||||
6. Navigation (header, mega menu, drawer) — placeholder
|
||||
============================================================================ */
|
||||
|
||||
|
||||
/* ============================================================================
|
||||
7. Footer — placeholder
|
||||
============================================================================ */
|
||||
Reference in New Issue
Block a user