/* ================================================================ Apex Brands Plugin — Frontend CSS v2 Works standalone (any theme) and pairs with Apex Brands theme. Respects [data-theme="dark"|"light"] on . ================================================================ */ /* ── Token inheritance ── */ :root { --abp-gold: #c8a96e; --abp-bg: #1e1e1e; --abp-bg2: #2a2a2a; --abp-border: rgba(255,255,255,0.08); --abp-text: #f5f0e8; --abp-muted: #a8a8a8; --abp-brand: #c8a96e; /* overridden inline per brand */ --abp-radius: 0; --abp-font: 'DM Sans', 'Helvetica Neue', sans-serif; --abp-display: 'Playfair Display', Georgia, serif; } [data-theme="light"] { --abp-gold: #a07840; --abp-bg: #ffffff; --abp-bg2: #f0ece4; --abp-border: rgba(0,0,0,0.09); --abp-text: #1a1a1a; --abp-muted: #777777; } /* ================================================================ Brand Card [apex_brand] ================================================================ */ .abp-card { background: var(--abp-bg); border: 1px solid var(--abp-border); border-top: 3px solid var(--abp-brand); padding: 1.75rem; font-family: var(--abp-font); transition: box-shadow .3s, transform .3s, background .35s; } .abp-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.25); transform: translateY(-3px); } .abp-card__header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; } .abp-card__icon { font-size: 2.25rem; flex-shrink: 0; line-height: 1; } .abp-card__cat { display: block; font-size: .65rem; letter-spacing: .22em; text-transform: uppercase; color: var(--abp-brand); font-weight: 600; margin-bottom: .2rem; } .abp-card__name { margin: 0; font-family: var(--abp-display); font-size: 1.25rem; color: var(--abp-text); line-height: 1.2; } .abp-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; margin-bottom: 1rem; } .abp-card__tagline { font-style: italic; color: var(--abp-gold); font-size: .9rem; margin-bottom: .6rem; display: block; } .abp-card__desc { font-size: .85rem; color: var(--abp-muted); line-height: 1.7; margin-bottom: 1rem; } .abp-card__services { list-style: none !important; padding: 0 !important; margin: 0 0 1.25rem !important; display: flex; flex-direction: column; gap: .3rem; } .abp-card__services li { font-size: .8rem; color: var(--abp-muted); display: flex; align-items: center; gap: .5rem; } .abp-card__services li::before { content: '→'; color: var(--abp-brand); flex-shrink: 0; } /* ================================================================ Brands Grid [apex_brands_grid] ================================================================ */ .abp-grid { display: grid; grid-template-columns: repeat(var(--abp-cols, 3), 1fr); gap: 1.25rem; margin: 1.5rem 0; } @media (max-width: 900px) { .abp-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .abp-grid { grid-template-columns: 1fr; } } /* ================================================================ Stats [apex_stats] ================================================================ */ .abp-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--abp-border); margin: 1.5rem 0; } @media (max-width: 640px) { .abp-stats { grid-template-columns: repeat(2, 1fr); } } .abp-stat { padding: 2rem 1.25rem; text-align: center; border-right: 1px solid var(--abp-border); background: var(--abp-bg); transition: background .35s; } .abp-stat:last-child { border-right: none; } .abp-stat__number { display: block; font-family: var(--abp-display); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; color: var(--abp-gold); line-height: 1; margin-bottom: .35rem; } .abp-stat__label { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--abp-muted); } /* ================================================================ Buttons ================================================================ */ .abp-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.75rem; font-family: var(--abp-font); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border: none; border-radius: var(--abp-radius); cursor: pointer; transition: all .25s ease; } .abp-btn--brand { background: var(--abp-brand); color: #0a0a0a !important; } .abp-btn--brand:hover { opacity: .88; transform: translateY(-1px); } .abp-btn--submit { width: 100%; justify-content: center; background: var(--abp-gold); color: #0a0a0a; padding: 1rem 2rem; font-size: .85rem; } .abp-btn--submit:hover { opacity: .9; } .abp-btn--sm { padding: .5rem 1.2rem; font-size: .72rem; } /* ================================================================ Contact Form [apex_contact_form] ================================================================ */ .abp-form-wrap { max-width: 640px; margin: 1.5rem 0; font-family: var(--abp-font); } .abp-form-title { font-family: var(--abp-display); font-size: 1.4rem; margin-bottom: 1.5rem; color: var(--abp-text); } .abp-form { display: flex; flex-direction: column; } .abp-form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } @media (max-width: 520px) { .abp-form-row2 { grid-template-columns: 1fr; } } .abp-form-group { margin-bottom: 1.25rem; } .abp-label { display: block; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: var(--abp-muted); margin-bottom: .5rem; } .abp-input, .abp-select, .abp-textarea { width: 100%; padding: .85rem 1.1rem; background: var(--abp-bg2); border: 1px solid var(--abp-border); color: var(--abp-text); font-family: var(--abp-font); font-size: .95rem; outline: none; border-radius: var(--abp-radius); appearance: none; transition: border-color .2s, background .35s; box-sizing: border-box; } .abp-input:focus, .abp-select:focus, .abp-textarea:focus { border-color: var(--abp-gold); } .abp-textarea { resize: vertical; min-height: 130px; } .abp-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%23c8a96e'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; cursor: pointer; } [data-theme="light"] .abp-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%23a07840'/%3E%3C/svg%3E"); } .abp-feedback { padding: .85rem 1.1rem; margin-bottom: 1.25rem; font-size: .875rem; border-radius: var(--abp-radius); border: 1px solid transparent; } .abp-feedback--success { background: rgba(74,124,110,.12); border-color: rgba(74,124,110,.4); color: #5d9e8e; } .abp-feedback--error { background: rgba(180,60,60,.12); border-color: rgba(180,60,60,.4); color: #d07070; } /* ================================================================ Brand List [apex_brand_list] ================================================================ */ .abp-list { list-style: none !important; padding: 0 !important; margin: 1rem 0 !important; } .abp-list__item { display: flex; align-items: baseline; gap: .875rem; padding: .65rem 0; border-bottom: 1px solid var(--abp-border); font-size: .95rem; font-family: var(--abp-font); } .abp-list__item:last-child { border-bottom: none; } .abp-list__icon { flex-shrink: 0; } .abp-list__name { color: var(--abp-gold); font-weight: 600; text-decoration: none; } .abp-list__name:hover { text-decoration: underline; } .abp-list__tag { color: var(--abp-muted); font-size: .82rem; } /* ================================================================ Widget: Brand Card ================================================================ */ .abp-widget { padding: 1.25rem; background: var(--abp-bg); border: 1px solid var(--abp-border); border-left: 3px solid var(--abp-brand); font-family: var(--abp-font); transition: background .35s; } .abp-widget__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .875rem; } .abp-widget__icon { font-size: 1.6rem; } .abp-widget__cat { display: block; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--abp-brand); margin-bottom: .15rem; } .abp-widget__name { font-size: .95rem; color: var(--abp-text); display: block; } .abp-widget__tag { font-size: .82rem; color: var(--abp-muted); font-style: italic; margin-bottom: 1rem; display: block; } /* ================================================================ Responsive clean-up ================================================================ */ @media (max-width: 480px) { .abp-card { padding: 1.35rem; } .abp-stats { grid-template-columns: 1fr 1fr; } .abp-stat { padding: 1.5rem .875rem; } }