STUDIO AR Loyaliteit
/* Verwijdert de grijze lijnen/randen rond de rewards */
#loyaltylion .lion-rewards-list,
#loyaltylion .lion-reward-item__container {
border: none !important;
box-shadow: none !important;
background: none !important;
}
/* Verwijder de grijze buitenlijnen en achtergrond */
#loyaltylion .lion-reward,
#loyaltylion .lion-rewards-list,
#loyaltylion .lion-rewards-list > div,
#loyaltylion .lion-reward-item__container,
#loyaltylion .lion-reward-item-wrapper {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
/* Tekstkleur aanpassen in earn-points blokken */
#loyaltylion .lion-action-item,
#loyaltylion .lion-action-item * {
color: #000 !important; /* zwarte tekst */
}
/* Zorg dat achtergrond wit blijft */
#loyaltylion .lion-action-item {
background-color: #f2f1ef !important; /* huidige lichtgrijze achtergrond behouden */
}
/* Alleen tekst in 'Ways to earn points' zwart maken */
#loyaltylion .lion-rule-item__title,
#loyaltylion .lion-rule-item__points,
#loyaltylion .lion-rule-item__subtitle,
#loyaltylion .lion-rule-item__description {
color: #000 !important;
}
/* Zorg dat alle titels in de blokken even groot en consistent zijn */
#loyaltylion .lion-rule-item__title,
#loyaltylion .lion-reward-item__title {
font-size: 18px !important; /* pas eventueel aan, bv. 16px of 20px */
font-weight: 500 !important; /* nette, consistente dikte */
line-height: 1.3 !important;
color: #000 !important; /* behoudt je zwarte tekstkleur */
text-align: center !important;
}
/* Alleen knop-tekst zwart maken wanneer ingelogd */
#loyaltylion .lion-integrated-page--authenticated .lion-action-button,
#loyaltylion .lion-integrated-page--authenticated .lion-action-button *,
#loyaltylion .lion-integrated-page--authenticated .lion-rule-item__cta a,
#loyaltylion .lion-integrated-page--authenticated .lion-reward-item__cta a {
color: #000000 !important;
}
/* Header buttons: geen witte achtergrond, witte tekst */
#loyaltylion .lion-header__join-buttons a {
background: transparent !important;
background-color: transparent !important;
color: #ffffff !important;
border: 1px solid #ffffff !important;
text-decoration: none !important;
}
#loyaltylion .lion-header__join-buttons a * {
color: #ffffff !important;
}
#loyaltylion .lion-header__join-today {
position: absolute;
bottom: 140px; /* iets boven de buttons */
left: 50%;
transform: translateX(-50%);
text-align: center;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
z-index: 2;
}
/* "You are here" blok dezelfde achtergrond als "1 point per €1" */
#loyaltylion .lion-tier-box__status {
background-color: rgba(255, 255, 255, 0.08) !important; /* zelfde subtiele vlak */
color: #ffffff !important;
padding: 14px 20px !important;
border-radius: 6px !important;
display: inline-block !important;
width: 100% !important;
text-align: center !important;
}
/* "You are here" dezelfde balk-stijl als "1 point per €1" (current tier label) */
#loyaltylion .lion-tier-box [class*="status"],
#loyaltylion .lion-tier-box [class*="current"],
#loyaltylion .lion-tier-box [class*="you-are-here"],
#loyaltylion .lion-tier-box [class*="you_are_here"],
#loyaltylion .lion-tier-box [class*="active"],
#loyaltylion .lion-tier-box [class*="is-current"],
#loyaltylion .lion-tier-box [class*="is_current"] {
background-color: rgba(255, 255, 255, 0.08) !important; /* match met 1 point per €1 */
padding: 18px 20px !important;
border-radius: 4px !important;
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
color: #fff !important;
text-align: center !important;
}
/* Zelfde regelafstand (titel + punten) in Earn + Rewards */
#loyaltylion .lion-rule-item__title,
#loyaltylion .lion-reward-item__title {
margin: 0 !important;
line-height: 1.2 !important;
}
#loyaltylion .lion-rule-item__points,
#loyaltylion .lion-reward-item__cost,
#loyaltylion .lion-reward-item__points {
margin: 6px 0 0 0 !important; /* bepaalt de ruimte tussen regel 1 en 2 */
line-height: 1.2 !important;
}
#loyaltylion .lion-integrated-page--authenticated .lion-header::after {
content: "Welcome back";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -60%);
color: #ffffff;
font-size: 22px;
letter-spacing: 0.05em;
}
/* ================================
WELCOME TITLE – AUTHENTICATED
================================ */
#loyaltylion .lion-integrated-page--authenticated .lion-header::after {
content: var(--welcome-text, "WELCOME TO AR HOUSE");
position: absolute;
top: 55%; /* ← HIER STEL JE DE HOOGTE AF */
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
font-family: var(--heading-font-family);
font-size: 28px;
font-weight: bold;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #ffffff;
text-align: center;
white-space: nowrap;
}
@media (max-width: 768px) {
#loyaltylion .lion-header__join-buttons {
position: absolute !important;
left: 50% !important;
bottom: 40px !important;
transform: translateX(-50%) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
width: 100% !important;
max-width: calc(100% - 40px) !important;
margin: 0 !important;
padding: 0 !important;
}
#loyaltylion .lion-header__join-buttons .lion-action-button,
#loyaltylion .lion-header__join-buttons a {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100px !important;
margin: 0 !important;
text-align: center !important;
}
#loyaltylion .lion-header__join-today {
left: 50% !important;
transform: translateX(-50%) !important;
width: calc(100% - 40px) !important;
text-align: center !important;
}
}
}
