/* ==========================================================
IRG CARD SYSTEM — "Smart Setup"
==========================================================
A unified upgrade to every card/tile/box on the site:
• CONTENT cards → real glass (gradient fill, inner top
highlight, depth shadow) + animated gold top-edge stroke
on hover [Variant E]
• ACTION cards → same glass + a stronger gold glow bloom
behind the card on hover, for things meant to be clicked
(portals, tools, quote/illustration launchers) [Variant D]
• PER-SECTION ACCENT → an optional coloured top-edge stroke
that varies by section (gold / burgundy / cyan) so
sections stop blurring together as you scroll [Variant C]
----- HOW TO REVERT (fully reversible) -----
This file only OVERRIDES the shared card look; it never
deletes the originals. To turn the whole system off:
Remove this line from every HTML page :
The site reverts to the original flat-glass cards instantly.
To turn it off on ONE page only, remove the link from that
page alone.
========================================================== */
/* ----------------------------------------------------------
1. CONTENT CARDS (Variant E — real glass + top-edge stroke)
These selectors cover every content card across the site.
---------------------------------------------------------- */
.svc-card,
.prod-card,
.cheat-card,
.s-item,
.val-card,
.res-item,
.tech-card,
.uw-ref,
.audience-card {
position: relative;
background: linear-gradient(150deg,
rgba(245, 237, 220, 0.085) 0%,
rgba(245, 237, 220, 0.02) 60%) !important;
border: 1px solid rgba(245, 237, 220, 0.12) !important;
border-top: 1px solid rgba(255, 251, 237, 0.2) !important;
backdrop-filter: blur(24px) saturate(1.15);
-webkit-backdrop-filter: blur(24px) saturate(1.15);
box-shadow:
inset 0 1px 0 rgba(255, 251, 237, 0.12),
0 10px 34px rgba(0, 0, 0, 0.3);
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
border-color 0.3s cubic-bezier(0.22,1,0.36,1),
box-shadow 0.3s cubic-bezier(0.22,1,0.36,1);
z-index: 1;
}
/* Gold top-edge stroke — short by default, draws full width on hover */
.svc-card::after,
.prod-card::after,
.cheat-card::after,
.s-item::after,
.val-card::after,
.res-item::after,
.tech-card::after,
.uw-ref::after,
.audience-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 38%;
height: 2px;
background: linear-gradient(90deg, var(--gold), transparent);
opacity: 0.65;
transition: width 0.4s cubic-bezier(0.22,1,0.36,1),
opacity 0.3s cubic-bezier(0.22,1,0.36,1);
pointer-events: none;
z-index: 2;
}
.svc-card:hover,
.prod-card:hover,
.cheat-card:hover,
.s-item:hover,
.val-card:hover,
.res-item:hover,
.tech-card:hover,
.uw-ref:hover,
.audience-card:hover {
transform: translateY(-5px) !important;
border-color: rgba(201, 165, 90, 0.4) !important;
box-shadow:
inset 0 1px 0 rgba(255, 251, 237, 0.2),
0 20px 48px rgba(0, 0, 0, 0.42) !important;
}
.svc-card:hover::after,
.prod-card:hover::after,
.cheat-card:hover::after,
.s-item:hover::after,
.val-card:hover::after,
.res-item:hover::after,
.tech-card:hover::after,
.uw-ref:hover::after,
.audience-card:hover::after {
width: 100%;
opacity: 1;
}
/* uw-ref is a compact single-row tile — soften the lift so it doesn't
feel jumpy, and keep its left-aligned nudge motion. */
.uw-ref:hover {
transform: translateX(2px) translateY(-2px) !important;
}
/* ----------------------------------------------------------
2. ACTION CARDS (Variant D — glass + gold glow bloom on hover)
Portals, tools, and anything meant to be clicked to launch.
---------------------------------------------------------- */
.eapp-card,
.platform-card,
.res-cat-v2,
.portal-card {
position: relative;
background: linear-gradient(150deg,
rgba(245, 237, 220, 0.08),
rgba(245, 237, 220, 0.02)) !important;
border: 1px solid rgba(245, 237, 220, 0.12) !important;
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
box-shadow: inset 0 1px 0 rgba(255, 251, 237, 0.13);
transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
border-color 0.3s cubic-bezier(0.22,1,0.36,1),
box-shadow 0.3s cubic-bezier(0.22,1,0.36,1);
z-index: 1;
}
.eapp-card::before,
.platform-card::before,
.portal-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
background: radial-gradient(circle at 50% 0%, rgba(201,165,90,0.25), transparent 70%);
opacity: 0;
z-index: -1;
transition: opacity 0.35s cubic-bezier(0.22,1,0.36,1);
pointer-events: none;
}
.eapp-card:hover,
.platform-card:hover,
.res-cat-v2:hover,
.portal-card:hover {
transform: translateY(-5px) scale(1.008) !important;
border-color: rgba(201, 165, 90, 0.45) !important;
box-shadow:
inset 0 1px 0 rgba(255, 251, 237, 0.2),
0 18px 44px rgba(0, 0, 0, 0.4) !important;
}
.eapp-card:hover::before,
.platform-card:hover::before,
.portal-card:hover::before {
opacity: 1;
}
/* ----------------------------------------------------------
3. PER-SECTION ACCENT COLOUR
Add ONE of these class names to a (or any ancestor of
the cards) to tint the top-edge stroke for that section:
.accent-section-gold (default — gold)
.accent-section-burgundy (burgundy / --cyan)
.accent-section-cream (cool cream)
Cards inside inherit the accent automatically.
---------------------------------------------------------- */
.accent-section-burgundy .svc-card::after,
.accent-section-burgundy .prod-card::after,
.accent-section-burgundy .cheat-card::after,
.accent-section-burgundy .s-item::after,
.accent-section-burgundy .val-card::after,
.accent-section-burgundy .res-item::after,
.accent-section-burgundy .uw-ref::after {
background: linear-gradient(90deg, var(--cyan), transparent);
}
.accent-section-burgundy .svc-card:hover,
.accent-section-burgundy .prod-card:hover,
.accent-section-burgundy .cheat-card:hover,
.accent-section-burgundy .s-item:hover,
.accent-section-burgundy .val-card:hover,
.accent-section-burgundy .res-item:hover,
.accent-section-burgundy .uw-ref:hover {
border-color: rgba(107, 39, 55, 0.5) !important;
}
.accent-section-cream .svc-card::after,
.accent-section-cream .prod-card::after,
.accent-section-cream .cheat-card::after,
.accent-section-cream .s-item::after,
.accent-section-cream .val-card::after,
.accent-section-cream .res-item::after,
.accent-section-cream .uw-ref::after {
background: linear-gradient(90deg, var(--text2), transparent);
}
/* ----------------------------------------------------------
LOCK BADGE FIX
Cards that carry a corner lock badge (Grow Your Practice
cheat-cards, and any locked tile) must not clip it, and the
badge must sit above the decorative top-edge stroke.
---------------------------------------------------------- */
.cheat-card {
overflow: visible;
}
.cheat-card::after {
display: none;
}
.cheat-lock,
.uw-ref-lock {
z-index: 3;
}
/* ----------------------------------------------------------
4. Reduced-motion: honor the user's OS setting.
Keep the glass look, drop the movement.
---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.svc-card, .prod-card, .cheat-card, .s-item, .val-card, .res-item,
.tech-card, .uw-ref, .audience-card, .eapp-card, .platform-card,
.res-cat-v2, .portal-card {
transition: none;
}
.svc-card:hover, .prod-card:hover, .cheat-card:hover, .s-item:hover,
.val-card:hover, .res-item:hover, .tech-card:hover, .uw-ref:hover,
.audience-card:hover, .eapp-card:hover, .platform-card:hover,
.res-cat-v2:hover, .portal-card:hover {
transform: none !important;
}
}