/* ============================================================
BHOOMIVISTA v7.6 — BUTTON SYSTEM (Unified Variant Model)
Location: /bhoomivista-css/buttons.css
Depends: core.css (tokens), motion.css (keyframes)
============================================================ */
/* ============================================================
BHOOMIVISTA BUTTON SYSTEM — DESIGNER & DEVELOPER GUIDE
Version: v7.6 (Core-Aligned)
============================================================
Purpose:
Defines a unified, token-driven button hierarchy for all
BhoomiVista theme families (BV, Terra, Spark, Light, Echo,
Freedom, Nature future). Enables visual consistency across
Gutenberg, Elementor, and front-end templates.
============================================================
[A] HIERARCHY — WHERE STYLES COME FROM
============================================================
1. Base Layout → sets structure & spacing
(.wp-block-button__link, .bv-btn)
2. Theme Family → injects color tokens
(.terra-btn, .spark-btn, .light-btn, .echo-btn, .freedom-btn)
3. Variant Type → modifies shape or behavior
(.btn-outline, .btn-minimal, .btn-soft, etc.)
4. Utility / Effect → adds hover or state
(.hover-rise, .is-loading, .btn-icon, etc.)
5. Context / CTA → animated or contextual buttons
(.hero-btn, .btn-glass, .btn-ghost)
============================================================
[B] COMPOSITION RULES
============================================================
• Family classes (terra-btn, spark-btn, etc.) must always
be used on the outer `.wp-block-button` wrapper, not the
inner unless otherwise noted.
• Variant classes (.btn-outline, .btn-minimal, etc.)
apply to the same wrapper or to the link itself — both
are accepted because inheritance uses `[class*="-btn"]`.
• Utility classes (.hover-rise, .is-active, .btn-icon)
must be applied to the clickable element or ,
not the wrapper, to ensure hover triggers correctly.
• Hero buttons (.terra-hero-btn, .spark-hero-btn, etc.)
are special animated CTAs; they should not be nested
inside small containers or secondary UI.
• Never mix two theme families on one button; only one
color system can be active at a time.
============================================================
[C] THEME FAMILIES (COLOR LOGIC)
============================================================
| Theme | Base → Hover | Description |
|------------|--------------|--------------|
| BV (default) | Copper → Gold | Signature BhoomiVista accent |
| Terra | Clay → Pale beige | Warm neutral CTA |
| Spark | Terracotta → Golden | Energetic copper highlight |
| Light | Golden beige → Brighter gold | Elegant light mode |
| Echo | Deep blue → Sky blue | Calm & trustful tone |
| Freedom | Teal → Light teal | Natural, earthy modern look |
| Nature* | Green → Lime tint | Future eco theme placeholder |
Each family auto-maps WP Core variables so native WordPress
:where(.wp-element-button) obeys these colors automatically.
============================================================
[D] VARIANT TYPES (SHARED ACROSS ALL THEMES)
============================================================
1. `.btn-outline` — transparent with colored border; fills on hover.
2. `.btn-outline-hoverfill` — subtle fill animation on hover.
3. `.btn-minimal` — text only; draws underline L→R.
4. `.btn-minimal-rtl` — underline animates R→L.
5. `.btn-flat` — solid color, no shadow.
6. `.btn-soft` — light tinted background for secondary actions.
7. `.btn-pill` — fully rounded rectangle (border-radius: 999px).
8. `.btn-square` — sharp cornered version.
9. `.btn-round` — fixed 48x48px circle for icons.
10. `.btn-gradient` — static linear gradient (base→highlight).
11. `.hero-btn` — animated gradient CTA (e.g., spark-hero-btn).
12. `.btn-icon` — adds uniform spacing between icon & label.
Variants may be stacked with family names:
.spark-btn.btn-outline
.terra-btn.btn-flat.btn-icon
.light-btn-minimal-rtl.hover-rise
============================================================
[E] SIZE VARIANTS
============================================================
| Class | Description | Typical Use |
|---------|--------------|-------------|
| .btn-sm | Compact | nav pills, cards |
| .btn-md | Default | standard call-to-action |
| .btn-lg | Large | hero or marketing CTAs |
Always combine size with a family:
Book Now
============================================================
[F] EFFECTS & STATES
============================================================
• `.hover-rise` → subtle upward lift on hover.
• `.hover-glow` → universal glow shadow.
• `.pulse` → repeating scale animation (attention grab).
• `.is-active` → increases brightness for toggled state.
• `.is-disabled` → lowers opacity & blocks pointer events.
• `.is-loading` → semi-transparent wait cursor.
Example:
Plan Journey
============================================================
[G] CONTEXTUAL BUTTONS
============================================================
• `.btn-ghost` → translucent overlay for dark backgrounds.
• `.btn-glass` → frosted glass look (uses backdrop-filter).
Example:
Learn More
============================================================
[H] MINIMAL VARIANTS (TEXT LINKS)
============================================================
• `.btn-minimal` uses ::after underline L→R.
• `.btn-minimal-rtl` mirrors direction R→L.
• Works best for inline link CTAs, not buttons with bg.
Example:
Read More →
============================================================
[I] HERO / CTA VARIANTS
============================================================
• `.terra-hero-btn`, `.spark-hero-btn`, `.echo-hero-btn`,
`.freedom-hero-btn`, `.light-hero-btn`
→ use animated glow keyframes + gradient fills.
• Should be used for top-of-page CTAs, not stacked in grids.
Example:
Plan This Trip
============================================================
[J] IMPLEMENTATION NOTES
============================================================
• Always ensure has class `.bv-site` so scoping works.
• In Gutenberg “Additional CSS class(es)”, enter:
terra-btn btn-lg hover-rise
(WordPress adds this to the outer wrapper automatically.)
• For UAGB Buttons, same logic applies — family class on wrapper,
variant on the inner link.
• Editor parity achieved through mirrored `.editor-styles-wrapper`
selectors. If editing visually in Site Editor, all button classes
display accurate colors and sizing.
============================================================
END OF DESIGNER GUIDE — BhoomiVista v7.6
============================================================ */
/* ------------------------------------------------------------
[1] BASE STRUCTURE — universal layout
------------------------------------------------------------ */
.bv-site .wp-block-button__link,
.bv-site .bv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: var(--radius-md);
font-weight: 600;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
gap: 0.4rem;
padding: var(--btn-pad-md);
font-size: var(--btn-font-md);
transition: var(--btn-transition);
}
/* ------------------------------------------------------------
[1.1] DEFAULT VISUAL — optional BhoomiVista base
------------------------------------------------------------ */
.bv-site .bv-btn {
background: var(--brand-primary);
color: #fff;
box-shadow: var(--shadow-medium);
}
@media (hover:hover){
.bv-site .bv-btn:hover {
background: var(--brand-highlight);
box-shadow: 0 0 12px rgba(215,182,122,.45);
transform: translateY(var(--btn-hover-translate));
}
}
/* ------------------------------------------------------------
[1.2] VARIABLE REMAPS — WP Core parity
------------------------------------------------------------ */
.bv-site .bv-btn { --wp--preset--color--contrast: var(--bv-base); --wp--preset--color--base: #fff; }
.bv-site .terra-btn { --wp--preset--color--contrast: var(--terra-accent); --wp--preset--color--base: #fff; }
.bv-site .spark-btn { --wp--preset--color--contrast: var(--spark-base); --wp--preset--color--base: #fff; }
.bv-site .light-btn { --wp--preset--color--contrast: var(--light-base); --wp--preset--color--base: #fff; }
.bv-site .echo-btn { --wp--preset--color--contrast: var(--echo-base); --wp--preset--color--base: #fff; }
.bv-site .freedom-btn { --wp--preset--color--contrast: var(--freedom-base); --wp--preset--color--base: #fff; }
/* --- add hero remaps here --- */
.bv-site .spark-hero-btn { --wp--preset--color--contrast: var(--spark-base); --wp--preset--color--base:#fff; }
.bv-site .terra-hero-btn { --wp--preset--color--contrast: var(--terra-accent); --wp--preset--color--base:#fff; }
.bv-site .echo-hero-btn { --wp--preset--color--contrast: var(--echo-base); --wp--preset--color--base:#fff; }
.bv-site .freedom-hero-btn { --wp--preset--color--contrast: var(--freedom-base); --wp--preset--color--base:#fff; }
.bv-site .light-hero-btn { --wp--preset--color--contrast: var(--light-base); --wp--preset--color--base:#000; }
.editor-styles-wrapper .bv-btn,
.editor-styles-wrapper .terra-btn,
.editor-styles-wrapper .spark-btn,
.editor-styles-wrapper .light-btn,
.editor-styles-wrapper .echo-btn,
.editor-styles-wrapper .freedom-btn {
--wp--preset--color--base: #fff;
}
/* ------------------------------------------------------------
[1.3] HOVER / ACTIVE / FOCUS STATES
------------------------------------------------------------ */
/* Fix double-layer background on Light / Echo */
.bv-site .wp-block-button.light-btn,
.bv-site .wp-block-button.echo-btn {
background: transparent;
}
@media (hover:hover){
.bv-site .bv-btn:hover { --wp--preset--color--contrast: var(--bv-hover); box-shadow: 0 0 12px rgba(215,182,122,.45); transform: translateY(var(--btn-hover-translate)); }
.bv-site .terra-btn:hover { --wp--preset--color--contrast: var(--terra-hover); box-shadow: 0 0 10px color-mix(in srgb,var(--terra-accent)60%,#fff40%); transform: translateY(var(--btn-hover-translate)); }
.bv-site .spark-btn:hover { --wp--preset--color--contrast: var(--spark-hover); box-shadow: 0 0 10px color-mix(in srgb,var(--spark-base)60%,#fff40%); transform: translateY(var(--btn-hover-translate)); }
/* Light — brighten + glow + copper text */
@media (hover:hover){
.bv-site .light-btn .wp-block-button__link:hover {
--wp--preset--color--contrast: color-mix(in srgb,var(--light-base)80%,var(--brand-highlight)20%);
color: var(--brand-primary) !important; /* ensure copper text overrides core */
box-shadow: 0 0 16px color-mix(in srgb,var(--brand-highlight)60%,#fff40%);
transform: translateY(var(--btn-hover-translate));
}
}
.bv-site .echo-btn:hover { --wp--preset--color--contrast: var(--echo-hover); box-shadow: 0 0 10px color-mix(in srgb,var(--echo-base)70%,#fff30%); transform: translateY(var(--btn-hover-translate)); }
.bv-site .freedom-btn:hover { --wp--preset--color--contrast: var(--freedom-hover); box-shadow: 0 0 10px color-mix(in srgb,var(--freedom-base)60%,#fff40%); transform: translateY(var(--btn-hover-translate)); }
}
.bv-site .wp-block-button__link:active { transform: translateY(var(--btn-active-translate)); }
.bv-site .wp-block-button__link:focus-visible { outline: var(--btn-focus-outline-width) var(--btn-focus-outline-style) var(--brand-highlight); outline-offset: 2px; }
/* Variable remap */
.bv-site .nature-btn { --wp--preset--color--contrast: var(--nature-base); --wp--preset--color--base:#fff; }
/* Hover */
@media (hover:hover){
.bv-site .nature-btn:hover {
--wp--preset--color--contrast: var(--nature-hover);
box-shadow: 0 0 10px var(--nature-glow);
transform: translateY(var(--btn-hover-translate));
}
}
/* ------------------------------------------------------------
[2] SIZE VARIANTS (Action 2)
------------------------------------------------------------ */
.btn-sm { padding: var(--btn-pad-sm)!important; font-size: var(--btn-font-sm)!important; border-radius: var(--btn-radius-sm)!important; }
.btn-md { padding: var(--btn-pad-md)!important; font-size: var(--btn-font-md)!important; border-radius: var(--btn-radius-md)!important; }
.btn-lg { padding: var(--btn-pad-lg)!important; font-size: var(--btn-font-lg)!important; border-radius: var(--btn-radius-lg)!important; }
/* ------------------------------------------------------------
[3] SHAPE VARIANTS
------------------------------------------------------------ */
.btn-pill { border-radius: 999px!important; }
.btn-square { border-radius: 0!important; }
.btn-round { width:48px;height:48px;border-radius:50%;padding:0; }
/* ------------------------------------------------------------
[4] CORE VARIANTS — shared across all families
------------------------------------------------------------ */
/* Outline */
[class*="-btn-outline"], .bv-btn-outline {
background: transparent;
border: 2px solid currentColor;
color: inherit;
}
@media (hover:hover){
[class*="-btn-outline"]:hover, .bv-btn-outline:hover {
background: currentColor; color:#fff;
}
}
/* Outline Hover-Fill */
[class*="-btn-outline-hoverfill"], .bv-btn-outline-hoverfill {
background: transparent; border:2px solid currentColor; color:inherit;
transition: var(--btn-transition);
}
@media (hover:hover){
[class*="-btn-outline-hoverfill"]:hover, .bv-btn-outline-hoverfill:hover {
background: currentColor; color:#fff; box-shadow:var(--shadow-medium);
}
}
/* Minimal */
[class*="-btn-minimal"], .bv-btn-minimal {
background:none; border:none; color:inherit; position:relative; padding:0;
}
[class*="-btn-minimal"]::after, .bv-btn-minimal::after {
content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px;
background:currentColor; transition:width .3s ease;
}
@media (hover:hover){
[class*="-btn-minimal"]:hover::after, .bv-btn-minimal:hover::after { width:100%; }
}
/* Flat */
[class*="-btn-flat"], .bv-btn-flat {
background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base);
box-shadow:none;
}
/* Soft */
[class*="-btn-soft"], .bv-btn-soft {
background: color-mix(in srgb,var(--wp--preset--color--contrast)20%,#fff80%);
color: var(--wp--preset--color--contrast);
box-shadow:var(--shadow-soft);
}
/* Gradient (static) */
[class*="-btn-gradient"], .bv-btn-gradient {
background: linear-gradient(90deg,var(--wp--preset--color--contrast),var(--brand-highlight));
color:#fff;
}
/* Icon helper */
.btn-icon { gap:0.5rem; }
.btn-icon i, .btn-icon svg { font-size:1.1em; display:inline-block; }
/* ------------------------------------------------------------
[5] STATE & EFFECT UTILITIES
------------------------------------------------------------ */
.is-disabled { opacity:.55; pointer-events:none; cursor:not-allowed; }
.is-loading { opacity:.8; cursor:wait; }
.is-active { filter:brightness(1.05); }
.hover-rise:hover { transform:translateY(var(--btn-hover-translate)); }
.hover-glow:hover { box-shadow:0 0 12px rgba(0,0,0,.15); }
.pulse { animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.05);} }
/* ------------------------------------------------------------
[6] SPECIAL CONTEXT STYLES
------------------------------------------------------------ */
.btn-ghost { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.25); }
.btn-glass { background:rgba(255,255,255,.25); color:#000; backdrop-filter:blur(8px); }
/* ------------------------------------------------------------
[7] HERO & CTA VARIANTS — animated gradients
------------------------------------------------------------ */
.bv-site .spark-hero-btn .wp-block-button__link {
background: linear-gradient(90deg,var(--spark-base),var(--spark-hover));
color:#fff;
box-shadow:var(--shadow-strong);
animation:glow-spark 4s ease-in-out infinite;
}
.bv-site .terra-hero-btn .wp-block-button__link {
background:linear-gradient(90deg,var(--terra-base),var(--terra-hover));
color:#fff;
box-shadow:var(--shadow-strong);
animation:glow-terra 4s ease-in-out infinite;
}
.bv-site .echo-hero-btn .wp-block-button__link {
background:linear-gradient(90deg,var(--echo-base),var(--echo-hover));
color:#fff;
box-shadow:var(--shadow-strong);
animation:glow-echo 4s ease-in-out infinite;
}
.bv-site .freedom-hero-btn .wp-block-button__link {
background:linear-gradient(90deg,var(--freedom-base),var(--freedom-hover));
color:#fff;
box-shadow:var(--shadow-strong);
animation:glow-freedom 4s ease-in-out infinite;
}
.bv-site .light-hero-btn .wp-block-button__link {
background:linear-gradient(90deg,var(--light-base),var(--light-hover));
color:#000;
box-shadow:var(--shadow-medium);
}
@keyframes glow-terra { 0%,100%{box-shadow:0 0 12px rgba(180,95,75,.25);} 50%{box-shadow:0 0 20px rgba(180,95,75,.45);} }
@keyframes glow-spark { 0%,100%{box-shadow:0 0 12px rgba(255,140,0,.25);} 50%{box-shadow:0 0 22px rgba(255,140,0,.45);} }
@keyframes glow-echo { 0%,100%{box-shadow:0 0 12px rgba(66,133,244,.25);} 50%{box-shadow:0 0 22px rgba(66,133,244,.45);} }
@keyframes glow-freedom { 0%,100%{box-shadow:0 0 12px rgba(76,175,80,.25);} 50%{box-shadow:0 0 22px rgba(76,175,80,.45);} }
/* ------------------------------------------------------------
HERO HOVER ENHANCEMENTS
------------------------------------------------------------ */
@media (hover:hover) {
.bv-site .spark-hero-btn .wp-block-button__link:hover {
filter: brightness(1.1);
transform: translateY(var(--btn-hover-translate));
box-shadow: 0 0 24px rgba(255,140,0,.55);
}
.bv-site .terra-hero-btn .wp-block-button__link:hover {
filter: brightness(1.1);
transform: translateY(var(--btn-hover-translate));
box-shadow: 0 0 24px rgba(180,95,75,.55);
}
.bv-site .echo-hero-btn .wp-block-button__link:hover {
filter: brightness(1.1);
transform: translateY(var(--btn-hover-translate));
box-shadow: 0 0 24px rgba(66,133,244,.55);
}
.bv-site .freedom-hero-btn .wp-block-button__link:hover {
filter: brightness(1.1);
transform: translateY(var(--btn-hover-translate));
box-shadow: 0 0 24px rgba(76,175,80,.55);
}
.bv-site .light-hero-btn .wp-block-button__link:hover {
filter: brightness(1.05);
transform: translateY(var(--btn-hover-translate));
box-shadow: 0 0 18px color-mix(in srgb, var(--light-base) 70%, #fff 30%);
}
}
/* ------------------------------------------------------------
[8] FUTURE THEME PLACEHOLDER
------------------------------------------------------------ */
/* Nature — Reserved for future green theme (uses --nature-* tokens) */