/* ═══════════════════════════════════════════════════ ALP COMPONENT LIBRARY ───────────────────────────────────────────────── Reusable, framework-free component classes built on alp-tokens.css. Additive layer for the remaining pages in the migration roadmap (Home / Products / Compare / About / Contact / Magazine / Search). Does NOT alter existing product.html / product.css / core.js selectors (.btn-primary, .color-btn, .thumb, .faq-item, etc.). Everything here is namespaced under `.alp-` to avoid collisions with the current product-page implementation. RTL-first: this file assumes as already set in product.html, and uses logical properties (margin-inline / padding-inline / inset-inline) throughout. Load order (load-bearing, do not reorder): main.css → product.css → alp-tokens.css → alp-components.css ═══════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════ 1. SECTION / CONTAINER SYSTEM ───────────────────────────────────────────── Mirrors the existing .container width contract in product.css so pages line up on one shared grid. ═══════════════════════════════════════════════ */ .alp-container { width: min(1200px, calc(100% - 32px)); margin-inline: auto; position: relative; } .alp-section { padding-block-start: var(--alp-space-6); } .alp-section + .alp-section { margin-top: var(--alp-space-6); } /* Section Label → Headline → Supporting Description (Brand Guide Ch.06) */ .alp-section__header { display: flex; flex-direction: column; gap: var(--alp-space-1); margin-bottom: var(--alp-space-5); text-align: right; } .alp-section__label { font-family: var(--alp-font); font-size: var(--alp-fs-label); font-weight: var(--alp-fw-bold); letter-spacing: .16em; text-transform: uppercase; color: var(--alp-accent); } .alp-section__title { margin: 0; font-family: var(--alp-font); font-size: var(--alp-fs-h2); font-weight: var(--alp-fw-black); color: var(--alp-text); } .alp-section__desc { margin: 0; font-family: var(--alp-font); color: var(--alp-text-muted); font-size: var(--alp-fs-body); line-height: 1.85; max-width: 68ch; } /* ═══════════════════════════════════════════════ 2. LAYOUT / GRID SYSTEM (RTL-first) ───────────────────────────────────────────── Breakpoints match product.css (980 / 640) so pages built with this system share one responsive rhythm. ═══════════════════════════════════════════════ */ .alp-grid { display: grid; gap: var(--alp-space-4); } .alp-grid--2 { grid-template-columns: repeat(2, 1fr); } .alp-grid--3 { grid-template-columns: repeat(3, 1fr); } .alp-grid--4 { grid-template-columns: repeat(4, 1fr); } /* Product-page hero proportions (1.15fr / .85fr), reusable on any page that needs a "gallery + info" layout. */ .alp-product-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--alp-space-4); align-items: start; } @media (max-width: 980px) { .alp-grid--3, .alp-grid--4 { grid-template-columns: repeat(2, 1fr); } .alp-product-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .alp-grid--2, .alp-grid--3, .alp-grid--4 { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════ 3. ALP TRIANGULAR PATTERN SYSTEM ───────────────────────────────────────────── Base geometry: equilateral triangles, only two orientations (▲▼), generated — never illustrated. Implemented as three overlapping line families at 0° / 60° / -60°, which tessellate into a triangular lattice. Kept low-contrast per Brand Guide Ch.02/09: "the pattern should be discovered, not announced." Usage: add `.alp-pattern-bg` to a positioned container. Content must be a direct child so it stacks above the pattern layer (handled automatically via z-index). ═══════════════════════════════════════════════ */ .alp-pattern-bg { position: relative; isolation: isolate; } .alp-pattern-bg::before { content: ""; position: absolute; inset: 0; z-index: var(--alp-z-base); pointer-events: none; opacity: var(--alp-pattern-opacity); background-image: repeating-linear-gradient(60deg, var(--alp-pattern-color) 0 1px, transparent 1px calc(var(--alp-pattern-size) / 2)), repeating-linear-gradient(-60deg, var(--alp-pattern-color) 0 1px, transparent 1px calc(var(--alp-pattern-size) / 2)), repeating-linear-gradient(0deg, var(--alp-pattern-color) 0 1px, transparent 1px calc(var(--alp-pattern-size) / 2)); background-size: var(--alp-pattern-size) var(--alp-pattern-size); } .alp-pattern-bg > * { position: relative; z-index: calc(var(--alp-z-base) + 1); } /* Density variants — recommended usage per Brand Guide: hero backgrounds at very low opacity, empty states, panel textures. Never behind body text, never as a high-contrast overlay. */ .alp-pattern-bg--faint { --alp-pattern-opacity: .45; } .alp-pattern-bg--dense { --alp-pattern-size: 30px; } /* ═══════════════════════════════════════════════ 4. PANEL / CARD SYSTEM ───────────────────────────────────────────── "Imagine powder-coated steel plates mounted onto a frame." Structural containers, not decorative boxes — separation comes from spacing and alignment first. ═══════════════════════════════════════════════ */ .alp-panel { background: var(--alp-surface-1); border: 1px solid var(--alp-line); border-radius: var(--alp-radius-m); box-shadow: var(--alp-shadow-s); padding: var(--alp-space-4); transition: border-color var(--alp-duration-fast) var(--alp-ease-out), box-shadow var(--alp-duration-fast) var(--alp-ease-out); } .alp-panel--content { background: var(--alp-surface-2); } .alp-panel--interactive { cursor: pointer; } .alp-panel--interactive:hover { border-color: rgba(198,40,40,.35); box-shadow: var(--alp-shadow-m); } .alp-panel--interactive:active { transform: translateY(1px); } /* Chamfered accent corner — cut top inline-end corner only. Used sparingly: panel headers, feature callouts, CTA blocks. Never on data tables or long-form content. */ .alp-panel--chamfered { border-radius: 0; clip-path: polygon( 0 0, calc(100% - var(--alp-chamfer)) 0, 100% var(--alp-chamfer), 100% 100%, 0 100% ); } html[dir="rtl"] .alp-panel--chamfered { clip-path: polygon( var(--alp-chamfer) 0, 100% 0, 100% 100%, 0 100%, 0 var(--alp-chamfer) ); } .alp-panel__header { display: flex; align-items: center; justify-content: space-between; gap: var(--alp-space-2); padding-bottom: var(--alp-space-2); margin-bottom: var(--alp-space-3); border-bottom: 1px solid var(--alp-line); } .alp-panel__title { margin: 0; font-family: var(--alp-font); font-size: var(--alp-fs-h3); font-weight: var(--alp-fw-bold); color: var(--alp-text); } /* Angular structural divider — a "seam" between assemblies, not a decorative rule. RTL-first: fades toward reading end. */ .alp-divider { height: 1px; border: none; margin-block: var(--alp-space-4); background: linear-gradient(to left, var(--alp-line) 0%, transparent 100%); } .alp-divider--accent { height: 2px; background: linear-gradient(to left, var(--alp-accent) 0 24px, var(--alp-line) 24px 100%); } /* ═══════════════════════════════════════════════ 5. BUTTON SYSTEM ───────────────────────────────────────────── Buttons feel pressed from solid material, not painted onto the screen. Hover = brightness, not glow. Click = brief compression, immediate recovery. ═══════════════════════════════════════════════ */ .alp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--alp-space-2); min-height: 44px; padding-inline: var(--alp-space-4); border-radius: var(--alp-radius-s); border: 1px solid transparent; font-family: var(--alp-font); font-size: var(--alp-fs-body); font-weight: var(--alp-fw-bold); cursor: pointer; white-space: nowrap; transition: background-color var(--alp-duration-instant) var(--alp-ease-out), border-color var(--alp-duration-instant) var(--alp-ease-out), transform var(--alp-duration-instant) var(--alp-ease-out); } .alp-btn:focus-visible { outline: 2px solid var(--alp-accent); outline-offset: 2px; } .alp-btn:active { transform: translateY(1px) scale(.98); } .alp-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; } /* Primary — flat accent fill only, reserved for the one dominant action per view (Brand Guide "accent should be rare"). */ .alp-btn--primary { background: var(--alp-accent); color: #fff; } .alp-btn--primary:hover { background: var(--alp-accent-hover); } .alp-btn--primary:active { background: var(--alp-accent-active); } /* Secondary — same geometry, reduced contrast. Hierarchy is created through color/weight, never a different shape. */ .alp-btn--secondary { background: transparent; border-color: var(--alp-line); color: var(--alp-text); } .alp-btn--secondary:hover { background: var(--alp-surface-2); border-color: var(--alp-text-faint); } /* Icon button — square, compact, same corner language */ .alp-btn--icon { min-height: 40px; min-width: 40px; padding-inline: 0; border-radius: var(--alp-radius-s); background: var(--alp-surface-2); border-color: var(--alp-line); color: var(--alp-text); } .alp-btn--icon:hover { background: var(--alp-surface-3); } /* ═══════════════════════════════════════════════ 6. INPUT SYSTEM ───────────────────────────────────────────── Precision instruments. Label → Input → Supporting Text → Validation. Default / Focus / Success / Warning / Error only. ═══════════════════════════════════════════════ */ .alp-field { display: flex; flex-direction: column; gap: var(--alp-space-1); text-align: right; } .alp-field__label { font-family: var(--alp-font); font-size: var(--alp-fs-caption); font-weight: var(--alp-fw-bold); color: var(--alp-text-muted); } .alp-field__input { min-height: 44px; padding-inline: var(--alp-space-3); border-radius: var(--alp-radius-xs); border: 1px solid var(--alp-line); background: var(--alp-surface-2); color: var(--alp-text); font-family: var(--alp-font); font-size: var(--alp-fs-body); font-weight: var(--alp-fw-medium); outline: none; transition: border-color var(--alp-duration-fast) var(--alp-ease-out); } .alp-field__input::placeholder { color: var(--alp-text-faint); } .alp-field__input:focus { border-color: var(--alp-accent); } .alp-field__support { font-size: var(--alp-fs-caption); color: var(--alp-text-faint); } .alp-field--error .alp-field__input { border-color: var(--alp-error); } .alp-field--error .alp-field__support { color: var(--alp-error); } .alp-field--success .alp-field__input { border-color: var(--alp-success); } .alp-field--warning .alp-field__input { border-color: var(--alp-warning); } /* ═══════════════════════════════════════════════ 7. BADGE SYSTEM ═══════════════════════════════════════════════ */ .alp-badge { display: inline-flex; align-items: center; gap: var(--alp-space-1); padding: 3px var(--alp-space-2); border-radius: var(--alp-radius-xs); border: 1px solid var(--alp-line); background: var(--alp-surface-2); font-family: var(--alp-font); font-size: var(--alp-fs-label); font-weight: var(--alp-fw-bold); color: var(--alp-text-muted); } .alp-badge--accent { background: var(--alp-accent-muted); border-color: rgba(198,40,40,.3); color: var(--alp-accent); } .alp-badge--success { background: rgba(76,175,80,.1); border-color: rgba(76,175,80,.25); color: var(--alp-success); } .alp-badge--warning { background: rgba(224,165,45,.1); border-color: rgba(224,165,45,.25); color: var(--alp-warning); } .alp-badge--error { background: rgba(217,75,75,.1); border-color: rgba(217,75,75,.25); color: var(--alp-error); } /* ═══════════════════════════════════════════════ 9. PRODUCT CARD ───────────────────────────────────────────── Reusable product summary card (Home, Products, Product's "related" rail, Search). Combine with `.alp-panel`:
CTA inside uses the existing legacy `.btn-secondary` class, not a new alp-btn — button styling is preserved as-is. ═══════════════════════════════════════════════ */ .alp-product-card { display: flex; flex-direction: column; gap: var(--alp-space-2); text-align: right; padding: var(--alp-space-3); } .alp-product-card__thumb { width: 100%; aspect-ratio: 4 / 3; background: var(--alp-surface-2); border-radius: var(--alp-radius-s); } .alp-product-card__name { margin: 0; font-family: var(--alp-font); font-size: var(--alp-fs-body-lg); font-weight: var(--alp-fw-bold); color: var(--alp-text); } .alp-product-card__price { margin: 0; font-weight: var(--alp-fw-black); color: var(--alp-accent); } .alp-product-card__cta { align-self: flex-start; margin-top: var(--alp-space-1); } /* ═══════════════════════════════════════════════ 8. BEHAVIOR RULES — mechanical, not soft ───────────────────────────────────────────── Fast, precise transitions. No blur-glow, no elastic easing anywhere in this file (see alp-tokens.css motion tokens: ease-out / ease-in-out only). ═══════════════════════════════════════════════ */ .alp-field__input:focus-visible, .alp-panel--interactive:focus-visible { outline: 2px solid var(--alp-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .alp-btn, .alp-panel, .alp-field__input { transition-duration: .01ms !important; } }