/* GUL tenant variables - keep this block first in the single custom stylesheet. */
:root {
--gul-primary: #A49066;
--gul-secondary: #2D2D2D;
--gul-base: #1E1E1E;
--gul-body-bg: #fff;
--gul-error: #FF5858;
--gul-warning: #E40023;
--gul-success: #399C0A;
--gul-input-bg: #151515;
--gul-input-border: #BABABA;
--gul-card-bg: #FEFEFE;
--gul-card-border: #BABABA;
--gul-radius: 10px;
--pp-loading-accent: #D9C18C;
--pp-loading-track: rgba(217, 193, 140, 0.25);
--rz-primary: var(--gul-primary);
--rz-primary-light: #bfaa82;
--rz-primary-lighter: #d9c9a8;
--rz-primary-dark: #8a7a56;
--rz-secondary: var(--gul-secondary);
--rz-text-color: var(--gul-base);
--rz-base-background-color: var(--gul-body-bg);
--rz-text-font-family: "Suisse Works", Arial, sans-serif;
--rz-border-radius: var(--gul-radius);
--gul-sidebar-mob-bg: #1E1E1E;
--pp-wowbook-toolbar-color: var(--gul-primary);
--pp-digital-mailer-border-color: var(--gul-primary, #a49066);
--pp-digital-mailer-header-border-color: var(--gul-primary, #a49066);
--pp-wl-details-button-color: var(--white, var(--primary-color, #A49066));
--rz-sidebar-background-color: transparent;
--rz-sidebar-shadow: none;
--rz-panel-menu-background-color: transparent;
--rz-panel-menu-item-color: #fff;
--rz-header-background-color: var(--gul-sidebar-mob-bg);
--pp-nav-link-padding-y: 16px;
--pp-nav-link-padding-x: 32px;
--pp-nav-link-gap: 10px;
--pp-nav-link-active-radius: 35px;
--pp-nav-link-tablet-padding-y: 20px;
--pp-nav-link-tablet-padding-x: 32px;
--pp-nav-link-tablet-gap: 16px;
--pp-nav-link-tablet-active-radius: 40px;
--pp-nav-link-short-landscape-padding-y: 6px;
--pp-nav-link-short-landscape-padding-x: 14px;
--pp-nav-link-short-landscape-gap: 8px;
--pp-nav-link-short-landscape-active-radius: 30px;
--pp-nav-link-ultra-short-landscape-padding-y: 4px;
--pp-nav-link-ultra-short-landscape-padding-x: 10px;
}
/* ===== GUL theme styles ===== */
/* GUL Brand Theme - Overrides for Radzen Material Base
==========================================================
GUL Breakpoint Reference:
Phone: 0 – 767px
Tablet: 768px – 1180px
Desktop: 1181px +
Shell breakpoint (sidebar visible): 1181px
Content breakpoints: 576px / 768px / 992px / 1200px / 1300px
========================================================== */
/* Self-hosted Fonts */
@font-face {
font-family: "Suisse Works";
src: url("../fonts/SuisseWorks-Regular.otf") format("opentype");
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Suisse Works";
src: url("../fonts/SuisseWorks-Bold.otf") format("opentype");
font-weight: 700;
font-display: swap;
}
/* Aliases used by v2 account styles */
@font-face {
font-family: "Suisse Works-Regular";
src: url("../fonts/SuisseWorks-Regular.otf") format("opentype");
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Suisse Works-Bold";
src: url("../fonts/SuisseWorks-Bold.otf") format("opentype");
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "Suisse Int'l-Regular";
src: url("../fonts/SuisseWorks-Regular.otf") format("opentype");
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Suisse BP Int'l-Regular";
src: url("../fonts/SuisseWorks-Regular.otf") format("opentype");
font-weight: 400;
font-display: swap;
}
/* GUL CSS Variables */
/* ===== Authentication styles ===== */
/* ============================================================
Auth Pages — GUL Brand Styling
============================================================ */
:root {
--rz-gap: 1px;
}
.rz-row {
gap: 0.1px;
}
/* ----------------------------------------------------------
1. Auth Page Wrapper
---------------------------------------------------------- */
html:has(.auth-page-wrapper),
body:has(.auth-page-wrapper),
#app:has(.auth-page-wrapper) {
--pp-page-loading-background: #000;
--pp-page-loading-text: #fff;
background: #000;
min-height: 100vh;
min-height: 100dvh;
overflow-x: hidden;
margin: 0;
padding: 0;
}
.auth-page-wrapper {
--pp-page-loading-background: #000;
--pp-page-loading-text: #fff;
position: relative;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
background: transparent;
}
.auth-page-wrapper::before {
content: '';
position: fixed;
inset: 0;
background: #000;
z-index: -1;
}
/* ----------------------------------------------------------
2. Sparkle Animation
Scoped to the auth form container.
---------------------------------------------------------- */
.sparkles-container {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
.sparkle-gold {
position: absolute;
opacity: 0.7;
}
.sparkle-graphic {
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent rgb(169, 133, 69) transparent;
animation: sparkle-rotateY 3000ms linear infinite, sparkle-goldColor 750ms linear infinite alternate;
position: relative;
}
.sparkle-graphic-before,
.sparkle-graphic-after {
content: '';
position: absolute;
background: linear-gradient(90deg, rgba(169, 133, 69, 0) 0%, rgba(169, 133, 69, 0.1) 40%, rgba(169, 133, 69, 0.4) 50%, rgba(169, 133, 69, 0.1) 60%, rgba(169, 133, 69, 0) 100%);
animation: sparkle-reflect 750ms linear infinite alternate;
}
.sparkle-graphic-before {
top: 0;
transform: translateX(-50%);
}
.sparkle-graphic-after {
background: linear-gradient(0deg, rgba(169, 133, 69, 0) 0%, rgba(169, 133, 69, 0.1) 40%, rgba(169, 133, 69, 0.4) 50%, rgba(169, 133, 69, 0.1) 60%, rgba(169, 133, 69, 0) 100%);
transform: translateY(-50%);
}
@keyframes sparkle-rotateZ {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
@keyframes sparkle-rotateY {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
@keyframes sparkle-goldColor {
0% {
border-color: transparent transparent rgb(255, 255, 255) transparent;
}
10% {
border-color: transparent transparent rgb(169, 133, 69) transparent;
}
100% {
border-color: transparent transparent rgb(64, 13, 14) transparent;
}
}
@keyframes sparkle-reflect {
0% {
opacity: 1;
}
10% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* ----------------------------------------------------------
3. Auth Page Layout
---------------------------------------------------------- */
.auth-page {
position: relative;
z-index: 1;
min-height: 100vh;
min-height: 100dvh;
margin: 0;
display: flex;
flex-wrap: wrap;
}
/* Desktop: single row pinned to the viewport; left form scrolls, right hero stays fixed */
@media (min-width: 1024px) {
.auth-page-wrapper {
height: 100vh;
height: 100dvh;
overflow: hidden;
}
.auth-page {
flex-wrap: nowrap;
height: 100vh;
height: 100dvh;
min-height: 0;
}
}
.auth-form-col {
position: relative;
background: transparent;
overflow: visible;
padding: 0 !important;
}
@media (min-width: 1024px) {
.auth-form-col {
flex: 1 1 auto;
min-width: 0;
height: 100vh;
height: 100dvh;
overflow-x: hidden;
overflow-y: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.auth-form-col::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
}
.auth-form-inner {
position: relative;
min-height: calc(100dvh - 30vh);
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
background: #000;
isolation: isolate;
}
.auth-form-background {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.auth-form-bg-image {
position: absolute;
inset: 0;
background-image: url(../images/bg.png);
background-position: top left;
background-repeat: no-repeat;
background-size: clamp(160px, 26%, 280px) auto;
z-index: 0;
}
/* Desktop: form column is wider — allow bg.png to read larger (mobile/tablet keep tighter clamp above) */
@media (min-width: 1024px) {
.auth-form-bg-image {
background-size: clamp(260px, 42%, 560px) auto;
}
}
/* Mobile: stronger floor + % of form width so bg.png isn’t tiny on narrow phones */
@media (max-width: 767px) {
.auth-form-bg-image {
background-size: clamp(200px, 44%, 420px) auto;
}
}
.auth-form-content {
position: relative;
z-index: 2;
flex: 1;
display: flex;
flex-direction: column;
}
@media (min-width: 768px) and (max-width: 1023px) {
.auth-form-inner {
min-height: calc(100dvh - 38vh);
}
}
@media (min-width: 1024px) {
.auth-form-inner {
min-height: 100vh;
min-height: 100dvh;
}
}
.auth-form-header {
padding: 2rem 2rem 0;
text-align: center;
}
@media (min-width: 768px) {
.auth-form-header {
padding: 2rem 3rem 0;
}
}
.auth-body-wrap {
--auth-gutter: 2rem;
flex: 1;
display: flex;
flex-direction: column;
width: 100%;
padding-left: var(--auth-gutter);
padding-right: var(--auth-gutter);
}
@media (min-width: 768px) {
.auth-body-wrap {
--auth-gutter: 3rem;
}
}
/* Auth logo — block + full row width so mobile %/100% widths resolve to the header, not intrinsic SVG size */
.auth-logo {
display: block;
width: 100%;
margin-bottom: 2rem;
text-decoration: none;
}
.auth-logo img {
display: block;
height: auto;
width: min(100%, 600px);
max-width: 100%;
object-fit: contain;
max-height: 22rem;
margin: 0 auto;
}
@media (min-width: 768px) {
.auth-logo img {
max-height: none;
max-width: 100%;
width: 600px;
}
}
@media (min-width: 1024px) {
.auth-logo img {
width: 680px;
}
}
/* Hero column — mobile/tablet: above the form, fit viewport (no scroll); image fills width, cropped to match examples */
.auth-hero-col {
position: relative;
width: 100%;
height: 30vh;
min-height: 0;
flex-shrink: 0;
overflow: hidden;
padding: 0 !important;
order: -1;
}
.auth-hero-col img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
display: block;
pointer-events: none;
}
/* Desktop (≥1024px): hero on right, fits viewport, no scrolling of image; form on left scrolls */
@media (min-width: 1024px) {
.auth-hero-col {
position: sticky;
top: 0;
height: 100vh;
height: 100dvh;
min-height: 0;
flex-shrink: 0;
overflow: hidden;
order: unset;
}
.auth-hero-col img {
object-position: center center;
}
}
/* ----------------------------------------------------------
4. Heading & Subtitle
Desktop: two-line subtitle (keep
). Mobile/tablet: single line, smaller text.
---------------------------------------------------------- */
.auth-heading {
color: #D9C18C;
font-weight: 700;
font-size: 2rem;
line-height: 1.3;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.17px;
margin: 0;
padding-bottom: 1rem;
}
@media (min-width: 768px) {
.auth-heading {
font-size: 2.125rem;
padding-top: 1.25rem;
}
}
/* Tablet: smaller heading/subtitle than desktop */
@media (min-width: 768px) and (max-width: 1023px) {
.auth-heading {
font-size: 1.5rem;
padding-top: 1rem;
}
.auth-subtitle {
font-size: 0.9375rem;
}
}
.auth-subtitle {
color: #D1D1D1;
font-size: 1.125rem;
font-weight: 400;
text-align: center;
letter-spacing: 0.2px;
line-height: 1.4;
margin: 0 0 2rem 0;
}
@media (min-width: 1024px) {
.auth-subtitle {
font-size: 1.25rem;
}
}
/* Mobile/tablet: single-line subtitle (hide
) */
@media (max-width: 1023px) {
.auth-subtitle br {
display: none;
}
}
/* ----------------------------------------------------------
5. Form Structure
---------------------------------------------------------- */
.auth-form {
flex: 1;
display: flex;
flex-direction: column;
gap: 2rem;
min-height: 0;
}
.auth-fields {
padding: 0;
max-width: 550px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.auth-field {
margin-bottom: 1.25rem;
}
.auth-field:last-child {
margin-bottom: 0;
}
/* ----------------------------------------------------------
6. Labels
---------------------------------------------------------- */
.auth-label {
user-select: none;
cursor: pointer;
display: inline-block;
line-height: 1.1;
color: rgba(234, 232, 229, 1);
font-weight: 400;
font-size: 1rem;
margin-bottom: 0.625rem;
}
@media (min-width: 768px) {
.auth-label {
font-size: 1rem;
margin-bottom: 0.625rem;
}
}
/* ----------------------------------------------------------
7. Native HTML Input Styling
---------------------------------------------------------- */
.auth-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
display: block;
width: 100%;
padding: 0.875rem 1.25rem 0.875rem 1.25rem;
height: 3.5rem;
font-size: 1.125rem;
font-weight: 500;
font-family: inherit;
line-height: 1.3;
color: rgba(210, 210, 210, 1);
background: rgba(21, 21, 21, 1);
border: 2px solid #808080;
border-radius: var(--gul-radius, 10px);
outline: none;
transition: border-color 0.3s ease-in-out;
box-sizing: border-box;
}
@media (min-width: 768px) {
.auth-input {
font-size: 1.25rem;
height: 3.75rem;
}
}
.auth-input::placeholder {
color: #6B6B6B;
font-weight: normal;
}
.auth-input:hover {
border-color: var(--gul-primary, #D9C18C);
}
.auth-input:focus {
border-color: var(--gul-primary, #D9C18C);
}
.auth-input.has-error {
border-color: #FF5858;
}
.auth-input.has-error:hover,
.auth-input.has-error:focus {
border-color: #FF5858;
}
/* Browser autofill override — prevent white background on saved credentials */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px rgba(21, 21, 21, 1) inset !important;
box-shadow: 0 0 0 1000px rgba(21, 21, 21, 1) inset !important;
-webkit-text-fill-color: rgba(210, 210, 210, 1) !important;
caret-color: rgba(210, 210, 210, 1);
transition: background-color 5000s ease-in-out 0s;
}
/* ----------------------------------------------------------
8. Password Toggle
---------------------------------------------------------- */
.auth-input-wrap {
position: relative;
}
.auth-input-wrap .auth-input {
padding-right: 3.5rem;
}
.auth-pw-toggle {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
padding: 0;
cursor: pointer;
color: #D1D1D1;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
line-height: 1;
z-index: 2;
}
.auth-pw-toggle:hover {
color: #fff;
}
/* ----------------------------------------------------------
9. Help Link
---------------------------------------------------------- */
.auth-help-link {
text-align: right;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.auth-help-link a {
font-family: "Roboto", Helvetica, sans-serif;
font-weight: 400;
font-style: italic;
color: #ffffff;
font-size: 1rem;
text-decoration: underline;
transition: color 0.2s ease;
}
.auth-help-link a:hover {
color: var(--gul-primary, #D9C18C);
}
/* ----------------------------------------------------------
10. Error Notification
---------------------------------------------------------- */
.auth-error-notification {
background: #151515;
backdrop-filter: blur(1.4rem);
-webkit-backdrop-filter: blur(1.4rem);
border-radius: var(--gul-radius, 10px);
border: 1px solid #FF5858;
color: #fff;
padding: 1rem;
margin-bottom: 1.25rem;
}
.auth-error-header {
display: flex;
align-items: center;
gap: 0.5rem;
}
.auth-error-title {
font-size: 1rem;
font-weight: 700;
color: #FF5858;
letter-spacing: 0.5px;
margin: 0;
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.auth-error-description {
font-size: 1rem;
font-weight: 400;
color: #D2D2D2;
letter-spacing: 1px;
margin: 0.5rem 0 0 0;
line-height: 1.5;
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
/* ----------------------------------------------------------
11. Bottom Gradient Section
---------------------------------------------------------- */
.auth-bottom-gradient {
margin-top: auto;
margin-left: calc(-1 * var(--auth-gutter, 2rem));
margin-right: calc(-1 * var(--auth-gutter, 2rem));
position: relative;
flex-shrink: 0;
border-radius: 40px 40px 0 0;
border: none;
background: linear-gradient(180deg, rgba(21, 21, 21, 0.66) 36.67%, rgba(164, 144, 102, 0.66) 203.67%);
}
.auth-bottom-gradient::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: 40px 40px 0 0;
background: linear-gradient(270deg, rgba(153, 153, 153, 0.1) 0%, rgba(187, 187, 187, 0.3) 22%, rgba(207, 207, 207, 0.4) 50%, rgba(228, 228, 228, 0.3) 79%, rgba(255, 255, 255, 0.1) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: 1;
pointer-events: none;
}
.auth-bottom-content {
padding: 1.5rem 2rem 0.5rem;
max-width: 550px;
margin: 0 auto;
text-align: center;
}
/* ----------------------------------------------------------
12. Login Button
---------------------------------------------------------- */
.auth-login-btn {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
flex-shrink: 0;
width: auto;
min-width: 10.5rem;
max-width: min(100%, 16rem);
margin-left: auto;
margin-right: auto;
padding: 0.875rem 1.75rem;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0;
text-transform: uppercase;
font-family: inherit;
color: #fff;
background-color: #A49066;
border: 2px solid #A49066;
border-radius: var(--gul-radius, 10px);
cursor: default;
opacity: 0.45;
transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
line-height: 1.5;
white-space: nowrap;
user-select: none;
height: 50px;
}
@media (min-width: 768px) {
.auth-login-btn {
font-size: 1.125rem;
padding: 1rem 0.5rem;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.auth-login-btn {
width: 70%;
min-width: 0;
max-width: none;
height: 3.5rem;
padding: 1rem 1.25rem;
font-size: 1.1875rem;
}
}
@media (min-width: 1200px) {
.auth-login-btn {
font-size: 1.25rem;
}
}
.auth-login-btn.is-active {
opacity: 1;
cursor: pointer;
}
.auth-login-btn.is-active:hover,
.auth-login-btn.is-active:focus {
opacity: 0.8;
}
@media (min-width: 1024px) {
.auth-login-btn {
width: 70%;
min-width: 0;
max-width: none;
height: 3.75rem;
padding: 1rem 1.75rem;
font-size: 1.25rem;
}
}
/* ----------------------------------------------------------
13. Create Account & TPI Logo
---------------------------------------------------------- */
.auth-create-account {
color: #D1D1D1;
font-size: 1.125rem;
font-weight: 400;
margin: 1.5rem 0 0 0;
text-align: center;
}
@media (min-width: 768px) {
.auth-create-account {
font-size: 1.25rem;
}
}
.auth-create-account a {
color: inherit;
font-weight: 500;
text-decoration: none;
}
.auth-create-account a:hover {
text-decoration: none;
}
.auth-tpi-logo {
margin-top: 1.5rem;
text-align: center;
}
.auth-tpi-logo img {
display: block;
width: 150px;
height: auto;
object-fit: contain;
margin: 0 auto 0.75rem;
}
/* ----------------------------------------------------------
14. Password Requirements
---------------------------------------------------------- */
.password-requirements {
border-radius: 18px;
padding: 1rem 1.125rem;
border: 1px solid transparent;
}
.password-requirements__header {
display: flex;
align-items: center;
gap: 0.625rem;
margin-bottom: 0.875rem;
}
.password-requirements__badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 999px;
font-size: 0.8125rem;
font-weight: 700;
flex-shrink: 0;
}
.password-requirements__title {
font-size: 14px;
font-weight: 600;
line-height: 19px;
}
.password-requirements__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.5rem;
}
.password-requirements__item {
position: relative;
padding-left: 1.5rem;
font-size: 14px;
line-height: 19px;
}
.password-requirements__item::before {
content: "\2022";
position: absolute;
left: 0;
top: 0;
font-size: 14px;
font-weight: 700;
line-height: inherit;
}
.password-requirements__item.is-met::before {
content: "\2713";
}
.password-requirements--dark {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(217, 193, 140, 0.28);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.password-requirements--dark .password-requirements__badge {
background: #000;
border: 2px solid #fff;
color: #fff;
}
.password-requirements--dark .password-requirements__title {
color: #fff;
}
.password-requirements--dark .password-requirements__item.is-pending {
color: #D9C18C;
}
.password-requirements--dark .password-requirements__item.is-pending::before {
color: #D9C18C;
}
.password-requirements--dark .password-requirements__item.is-met {
color: #5AD58E;
}
.password-requirements--dark .password-requirements__item.is-met::before {
color: #5AD58E;
}
.password-requirements--light {
background: linear-gradient(180deg, #fffdf7 0%, #f9f2e1 100%);
border-color: #e4d2a4;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.password-requirements--light .password-requirements__badge {
background: #e6d5a8;
color: #7a6a3e;
}
.password-requirements--light .password-requirements__title {
color: #1a2a44;
}
.password-requirements--light .password-requirements__item.is-pending {
color: #5c5c5c;
}
.password-requirements--light .password-requirements__item.is-pending::before {
color: #8a8a8a;
}
.password-requirements--light .password-requirements__item.is-met {
color: #188a51;
}
.password-requirements--light .password-requirements__item.is-met::before {
color: #188a51;
}
.auth-field-error {
color: #FF5858;
font-size: 0.8125rem;
margin-top: 0.25rem;
display: block;
min-height: 1rem;
visibility: hidden;
}
.auth-field-error.is-visible {
visibility: visible;
}
/* ----------------------------------------------------------
15. Mobile Responsive
---------------------------------------------------------- */
@media (max-width: 767px) {
.auth-form-header {
padding: 1.5rem 1.25rem 0;
text-align: center;
}
.auth-logo img {
width: 50%;
max-width: 50%;
height: auto;
margin-left: auto;
margin-right: auto;
max-height: none;
}
.auth-body-wrap {
--auth-gutter: 1.25rem;
}
.auth-heading {
font-size: 20px;
}
.auth-subtitle {
font-size: 15px;
}
.auth-input {
font-size: 1rem;
height: 3.125rem;
}
.auth-help-link a {
font-size: 0.875rem;
}
.auth-bottom-content {
padding: 1.5rem 1.25rem 1rem;
padding-top: 10px;
}
.auth-create-account {
font-size: 0.9375rem;
}
.password-requirements {
padding: 0.9375rem 1rem;
border-radius: 16px;
}
}
@media (max-width: 1023px) {
.auth-password-requirements-field {
display: none;
}
.auth-fields:has(.auth-password-field .auth-input.has-error) .auth-password-requirements-field,
.auth-fields:has(.auth-password-field .auth-field-error.is-visible) .auth-password-requirements-field {
display: block;
}
}
/* ----------------------------------------------------------
16. iOS Safe Area
---------------------------------------------------------- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.auth-bottom-gradient {
padding-bottom: env(safe-area-inset-bottom);
}
}
/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
.auth-page-wrapper::before {
height: -webkit-fill-available;
min-height: -webkit-fill-available;
}
.auth-form-inner {
min-height: calc(100dvh - 30vh);
}
@media (max-width: 767px) {
.auth-form-inner {
min-height: -webkit-fill-available;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.auth-form-inner {
min-height: calc(100dvh - 38vh);
}
}
@media (min-width: 1024px) {
.auth-form-inner {
min-height: -webkit-fill-available;
}
}
.auth-bottom-gradient {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
}
/* ----------------------------------------------------------
17. Confirm / Landing Page Icons
---------------------------------------------------------- */
.auth-confirm-icon {
display: block;
width: 80px;
height: 80px;
margin: 2.5rem auto 0;
opacity: 0.9;
object-fit: contain;
}
@media (max-width: 767px) {
.auth-confirm-icon {
width: 64px;
height: 64px;
margin-top: 1.5rem;
}
}
/* ----------------------------------------------------------
18. Small height screens
---------------------------------------------------------- */
@media (max-height: 900px) {
.auth-error-description {
font-size: 0.75rem;
}
.auth-error-title {
font-size: 0.875rem;
}
.auth-heading {
font-size: 1.875rem;
padding-bottom: 0.75rem;
}
.auth-subtitle {
font-size: 1rem;
}
.auth-help-link a {
font-size: 0.875rem;
}
.auth-tpi-logo {
margin-top: 0.625rem;
}
}
@media (min-width: 768px) {
.password-requirements {
padding: 1.125rem 1.25rem;
}
}
@media (min-width: 1024px) {
.password-requirements {
padding: 1.25rem 1.375rem;
}
}
/* ===== Inner page shell styles ===== */
/* ============================================================
Inner Page Shell
Radzen layout shell + custom sidebar nav matching GUL design
Shell Breakpoints:
Phone: 0 – 767px (hamburger, full-screen sidebar overlay)
Tablet: 768px – 1180px (hamburger, full-screen sidebar overlay)
Desktop: 1181px + (always-visible 300px sidebar)
Content Breakpoints (used by page CSS, not this file):
576px – wider-than-phone content padding
768px – content typography and grid adjustments
1200px – wide desktop content padding
1300px – max content width cap
============================================================ */
/* --- RadzenLayout --- */
.gul-layout {
height: 100vh;
height: 100dvh;
}
/* iOS/Mac: prevent overscroll so layout/sidebar background doesn't appear to move */
@supports (-webkit-touch-callout: none) {
.gul-layout {
min-height: -webkit-fill-available;
}
}
/* --- RadzenHeader (Phone + Tablet Only) --- */
.gul-mobile-header {
background: var(--gul-sidebar-mob-bg);
height: auto;
min-height: 88px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1002;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
padding: 0 64px;
padding-top: calc(32px + env(safe-area-inset-top, 0px));
padding-bottom: 32px;
padding-left: calc(64px + env(safe-area-inset-left));
padding-right: calc(64px + env(safe-area-inset-right));
}
@media (min-width: 1181px) {
.gul-mobile-header {
display: none !important;
}
}
.gul-mobile-logo-link {
display: flex;
align-items: center;
max-height: none;
margin: auto;
}
.gul-mobile-logo {
max-height: none;
width: min(57.2vw, 416px);
height: auto;
object-fit: contain;
}
/* --- Hamburger Button (in RadzenHeader, phone + tablet only) --- */
.gul-hamburger {
position: absolute;
right: 32px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
padding: 0;
cursor: pointer;
z-index: 1003;
}
@media (min-width: 1181px) {
.gul-hamburger {
display: none;
}
}
/* --- RadzenSidebar --- */
.gul-sidebar,
.rz-sidebar.gul-sidebar {
background-image: url(../images/sidebar.png) !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-color: white !important;
z-index: 1001;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
transition: opacity 0.3s ease-in-out;
}
/* Desktop: sidebar always visible regardless of Radzen Expanded state */
@media (min-width: 1181px) {
.gul-sidebar,
.rz-sidebar.gul-sidebar {
display: block !important;
visibility: visible !important;
position: relative !important;
width: 300px !important;
transform: none !important;
opacity: 1 !important;
}
}
/* Phone + Tablet: base sidebar — hidden by default, transitions for smooth overlay */
@media (max-width: 1180.98px) {
.gul-sidebar,
.rz-sidebar.gul-sidebar {
display: none !important;
z-index: 1003;
position: fixed !important;
left: 0 !important;
top: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
margin: 0 !important;
transform: none !important;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s;
}
.gul-body,
.rz-body.gul-body {
margin-left: 0 !important;
width: 100% !important;
}
}
/* Mobile nav overlay — active when JS adds body.mobile-nav-open */
body.mobile-nav-open .gul-mobile-header {
display: none !important;
}
body.mobile-nav-open .gul-sidebar,
body.mobile-nav-open .rz-sidebar.gul-sidebar {
display: block !important;
visibility: visible !important;
position: fixed !important;
left: 0 !important;
top: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
z-index: 1003 !important;
transform: none !important;
margin: 0 !important;
opacity: 1 !important;
overflow-y: auto !important;
}
body.mobile-nav-open .gul-body {
margin-left: 0 !important;
}
/* Open nav overlay: drawer logo matches the closed mobile header logo size */
@media (max-width: 1180.98px) {
body.mobile-nav-open .sidebar__logo.logo .logo__img {
max-height: none;
width: min(57.2vw, 416px);
max-width: 100%;
height: auto;
}
}
/* Compact logo only on short landscape phones; drawer matches the closed mobile header logo. */
@media (max-width: 1180.98px) and (orientation: landscape) and (max-height: 600px) {
body.mobile-nav-open .sidebar__logo.logo .logo__img {
width: min(28vw, 180px);
}
}
/* --- Sidebar Main Container --- */
.sidebar__main {
display: flex;
flex-direction: column;
height: 100%;
overflow-x: hidden;
padding: 32px;
padding-left: calc(32px + env(safe-area-inset-left));
padding-right: calc(32px + env(safe-area-inset-right));
}
@media (max-width: 1180.98px) {
.sidebar__main {
padding-top: calc(32px + env(safe-area-inset-top, 0px));
padding-bottom: 32px;
padding-left: calc(20px + env(safe-area-inset-left));
padding-right: calc(20px + env(safe-area-inset-right));
}
.sidebar__header {
margin-bottom: 8px;
}
.sidebar__logo .logo__img {
max-height: none;
width: min(57.2vw, 416px);
max-width: 100%;
height: auto;
}
}
@media (min-width: 1181px) {
.sidebar__main {
padding-top: 16px;
padding-bottom: 16px;
padding-left: calc(24px + env(safe-area-inset-left));
padding-right: calc(24px + env(safe-area-inset-right));
overflow-y: auto;
}
}
/* --- Sidebar Header (logo + close button) --- */
@media (min-width: 1181px) {
.sidebar__header {
margin-bottom: 77px;
}
}
/* --- Logo --- */
@media (min-width: 1181px) {
.sidebar__logo {
max-height: none;
display: block;
}
}
.sidebar__logo .logo__img {
max-height: 148px;
object-fit: contain;
max-width: 100%;
width: auto;
height: auto;
margin: 0 auto;
}
@media (min-width: 1181px) {
.sidebar__logo .logo__img {
max-height: none;
object-fit: unset;
width: 257px;
max-width: 100%;
height: auto;
}
}
/* --- Close Button (phone + tablet only, inside sidebar overlay) --- */
.sidebar__toggle {
background: none;
border: none;
padding: 8px;
cursor: pointer;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
@media (min-width: 1181px) {
.sidebar__toggle {
display: none;
}
}
/* --- Sidebar Body (nav container) --- */
.sidebar__body {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
overflow-x: hidden;
}
/* --- Sidebar Nav --- */
.sidebar__nav {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-x: hidden;
}
/* --- Nav List --- */
.nav__list {
list-style: none;
margin: 0;
padding: 0 0 24px;
font-size: 32px;
font-weight: 500;
line-height: 1.1;
}
.nav__list:not(:last-child) {
margin-bottom: 16px;
}
/* --- Nav Item --- */
.nav__item:not(:last-child) {
margin-bottom: 8px;
}
/* --- Nav Link --- */
.nav__link {
color: #FFFFFFB2;
display: flex;
align-items: center;
transition: color 0.3s ease-in-out;
text-decoration: none;
font-family: "Suisse Int'l-Regular", Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 140%;
letter-spacing: 0;
background: none;
border: none;
cursor: pointer;
width: 100%;
text-align: left;
}
/* --- Nav Active State --- */
.nav__link.is-active {
font-weight: bold;
background-image: radial-gradient(39.08% 76.98% at 50.24% 106.35%, rgba(164, 144, 102, 0.66) 0%, rgba(21, 21, 21, 0.66) 100%);
color: #fff;
cursor: default;
border: none;
box-shadow: inset 0 0 0 0.8px rgba(255, 255, 255, 0.3);
}
.nav__link.is-active .nav__icon {
opacity: 1;
filter: invert(20%) sepia(35%) saturate(503%) hue-rotate(345deg) brightness(100%) contrast(85%);
}
/* --- Nav Icons --- */
.nav__icon {
flex: none;
width: 24px;
height: 24px;
opacity: 0.698;
}
.nav__icon--material {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
/* --- Nav Text --- */
.nav__text {
flex: 1;
}
/* --- Sign Out Separator --- */
.nav__item_exit {
border-bottom: 1px solid;
border-top: 1px solid;
border-image: linear-gradient(to right, #A49066A8 20%, #A4906633 66%) 1;
/*padding-top: 0.5rem;*/
}
/* --- RadzenBody Content Area --- */
.gul-body {
--pp-page-loading-background: var(--gul-body-bg);
background: var(--gul-body-bg);
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: none;
}
.gul-content-limit {
max-width: 1300px;
margin-left: auto;
margin-right: auto;
padding-top: 2rem;
padding-left: calc(2rem + env(safe-area-inset-left));
padding-right: calc(2rem + env(safe-area-inset-right));
padding-bottom: 150px;
}
@media (min-width: 576px) {
.gul-content-limit {
width: 100%;
padding-top: 1rem;
padding-left: calc(1rem + env(safe-area-inset-left));
padding-right: calc(1rem + env(safe-area-inset-right));
padding-bottom: 150px;
}
}
@media (min-width: 1200px) {
.gul-content-limit {
padding-top: 2rem;
padding-left: calc(2rem + env(safe-area-inset-left));
padding-right: calc(2rem + env(safe-area-inset-right));
padding-bottom: 150px;
}
}
/* --- Tablet (portrait + tall landscape) ---
Applies to tablet-class viewports (768px – 1180px). Polishes the mobile
header, hamburger, and side-menu drawer so the closed shell and opened
navigation match the Figma reference and avoid feeling undersized.
Phones in landscape are excluded via the more specific rule below. */
@media (min-width: 768px) and (max-width: 1180.98px) {
.gul-mobile-header {
min-height: 104px;
padding-top: calc(28px + env(safe-area-inset-top, 0px));
padding-bottom: 28px;
padding-left: calc(48px + env(safe-area-inset-left));
padding-right: calc(48px + env(safe-area-inset-right));
}
.gul-mobile-logo {
width: min(38vw, 360px);
}
.gul-hamburger {
right: 40px;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.gul-hamburger svg {
width: 32px;
height: 28px;
}
.sidebar__main {
padding-top: calc(2.8rem + env(safe-area-inset-top, 0px));
padding-bottom: 40px;
padding-left: calc(42px + env(safe-area-inset-left));
padding-right: calc(40px + env(safe-area-inset-right));
}
.sidebar__header {
margin-bottom: 40px;
}
.sidebar__logo .logo__img,
body.mobile-nav-open .sidebar__logo.logo .logo__img {
width: min(38vw, 360px);
max-width: 100%;
height: auto;
}
.nav__list {
padding-bottom: 32px;
}
.nav__list:not(:last-child) {
margin-bottom: 24px;
}
.nav__item:not(:last-child) {
margin-bottom: 12px;
}
.nav__link {
font-size: 20px;
}
.nav__icon {
width: 30px;
height: 30px;
}
}
/* --- Short Phone Landscape ---
Only applies to landscape devices with limited vertical space (phones).
Tablets in landscape (height >= 601px) use the spacious tablet rules above. */
@media (max-width: 1180.98px) and (orientation: landscape) and (max-height: 600px) {
.gul-mobile-header {
min-height: 46px;
padding: 0 20px;
padding-top: calc(8px + env(safe-area-inset-top, 0px));
padding-bottom: 8px;
padding-left: calc(20px + env(safe-area-inset-left));
padding-right: calc(20px + env(safe-area-inset-right));
}
.gul-mobile-logo {
width: min(28vw, 180px);
}
.gul-hamburger {
right: 12px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.gul-hamburger svg {
width: 18px;
height: 15px;
}
.sidebar__logo .logo__img {
width: min(28vw, 180px);
}
.sidebar__main {
padding-top: calc(8px + env(safe-area-inset-top, 0px));
padding-bottom: 8px;
padding-left: calc(20px + env(safe-area-inset-left));
padding-right: calc(20px + env(safe-area-inset-right));
}
.sidebar__header {
margin-bottom: 2px;
}
.sidebar__toggle {
transform: translateY(-50%);
}
.nav__list {
padding-bottom: 8px;
}
.nav__list:not(:last-child) {
margin-bottom: 8px;
}
.nav__item:not(:last-child) {
margin-bottom: 1px;
}
.nav__link {
font-size: 13px;
}
.nav__icon {
width: 18px;
height: 18px;
}
.nav__icon--material {
font-size: 18px;
}
}
/* --- Short landscape touch devices: keep mobile shell instead of desktop nav --- */
@media (min-width: 1181px) and (orientation: landscape) and (pointer: coarse) and (max-height: 500px) {
.gul-mobile-header {
display: flex !important;
min-height: 46px;
padding: 0 20px;
padding-top: calc(8px + env(safe-area-inset-top, 0px));
padding-bottom: 8px;
padding-left: calc(20px + env(safe-area-inset-left));
padding-right: calc(20px + env(safe-area-inset-right));
}
.gul-mobile-logo {
width: min(28vw, 180px);
}
.gul-hamburger {
display: inline-flex !important;
right: 12px;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
}
.gul-hamburger svg {
width: 18px;
height: 15px;
}
.gul-sidebar,
.rz-sidebar.gul-sidebar {
display: none !important;
z-index: 1003;
position: fixed !important;
left: 0 !important;
top: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
margin: 0 !important;
transform: none !important;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s;
}
.gul-body,
.rz-body.gul-body {
margin-left: 0 !important;
width: 100% !important;
}
body.mobile-nav-open .gul-sidebar,
body.mobile-nav-open .rz-sidebar.gul-sidebar {
display: block !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
z-index: 1003 !important;
opacity: 1 !important;
visibility: visible !important;
overflow-y: auto !important;
}
body.mobile-nav-open .sidebar__logo.logo .logo__img,
.sidebar__logo .logo__img {
width: min(28vw, 180px);
max-width: 100%;
height: auto;
}
.sidebar__main {
padding-top: calc(8px + env(safe-area-inset-top, 0px));
padding-bottom: 8px;
padding-left: calc(20px + env(safe-area-inset-left));
padding-right: calc(20px + env(safe-area-inset-right));
}
.sidebar__header {
margin-bottom: 2px;
}
.sidebar__toggle {
display: block;
transform: translateY(-50%);
}
.nav__list {
padding-bottom: 8px;
}
.nav__list:not(:last-child) {
margin-bottom: 8px;
}
.nav__item:not(:last-child) {
margin-bottom: 1px;
}
.nav__link {
font-size: 13px;
}
.nav__icon {
width: 18px;
height: 18px;
}
.nav__icon--material {
font-size: 18px;
}
}
/* Ultra-short landscape devices (e.g. iPhone SE landscape ~320px height) */
@media (max-width: 1180px) and (orientation: landscape) and (max-height: 500px) {
.sidebar__main {
padding-top: calc(8px + env(safe-area-inset-top, 0px));
padding-bottom: 8px;
}
.sidebar__header {
margin-bottom: 2px;
}
.sidebar__logo .logo__img,
body.mobile-nav-open .sidebar__logo.logo .logo__img {
width: min(28vw, 180px);
}
.nav__link {
font-size: 12px;
}
.nav__list {
padding-bottom: 4px;
}
.nav__list:not(:last-child) {
margin-bottom: 4px;
}
}
/* --- Short viewport (desktop shell ≤800px height, excluding short landscape devices) --- */
@media (max-height: 800px) and (min-width: 1181px) and (min-height: 501px) {
.sidebar__main {
padding-top: 32px;
}
.sidebar__header {
margin-bottom: 32px;
}
.nav__item:not(:last-child) {
margin-bottom: 24px;
}
}
/* --- iOS safe area bottom padding --- */
@supports (-webkit-touch-callout: none) {
@media (max-width: 1180.98px), (min-width: 1181px) and (orientation: landscape) and (pointer: coarse) and (max-height: 500px) {
.sidebar__nav {
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
}
}
}
/* ===== Player offer styles ===== */
/* GUL personalized offers page (v2 parity) */
.gul-content-limit:has(.offers-page) {
max-width: none;
margin-left: 0;
margin-right: 0;
width: 100%;
padding: 0;
}
.gul-content-limit:has(.drawing-selection-page) {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
@media (min-width: 768px) {
.offers-page.layout__main {
--pp-offers-layout-main-max-height: none;
--pp-offers-layout-main-overflow-y: visible;
}
}
@media (min-width: 768px) {
.offers-page .widgets {
gap: 30px;
}
}
.offers-page .widget {
border-radius: var(--card-radius, 0.5rem);
background: var(--card-bg, #fff);
border: 0.5px solid #a49066;
box-shadow: var(--card-shadow, none);
overflow: hidden;
display: flex;
flex-direction: column;
}
.offers-page .widget__header {
font-family: "Suisse Works-Bold", Helvetica;
font-weight: 700;
font-size: 24px;
letter-spacing: 0;
padding: 16px 25px;
display: flex;
gap: 15px;
align-items: center;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.48) 100%), radial-gradient(50% 76.98% at 50.24% 106.35%, rgba(164, 144, 102, 0.66) 45%, rgba(21, 21, 21, 0.66) 100%);
color: #fff;
border-bottom: 3px solid #a49066;
}
.offers-page .widget__heading {
margin: 0;
font-weight: 700;
font-size: 15px;
line-height: 1.1;
}
@media (min-width: 768px) {
.offers-page .widget__heading {
font-size: 24px;
}
}
.offers-page .widget__body {
display: flex;
flex-direction: column;
flex: 1;
padding: 15px;
}
@media (min-width: 768px) {
.offers-page .widget__body {
padding: 30px 25px;
}
}
.offers-page .offers {
width: 100%;
}
@media (min-width: 768px) {
.offers-page .offers__grid {
gap: 32px;
}
}
.offers-page .offers__empty {
margin: 0;
font-family: "Suisse Int'l-Regular", Helvetica, Arial, sans-serif;
font-size: 16px;
color: #0e0e0e;
}
.offers-page .offer-card {
border-radius: 10px;
padding: 20px;
display: flex;
align-items: center;
gap: 20px;
background: #ede9e0;
color: #333;
box-shadow: none;
}
@media (min-width: 768px) {
.offers-page .offer-card {
padding: 32px;
}
}
.offers-page .offer-card__info {
flex: 1;
display: flex;
align-items: center;
}
.offers-page .offer-card__details {
min-width: 0;
}
.offers-page .offer-card__heading {
margin: 0 0 12px;
font-family: "Suisse Works-Bold", Helvetica, Arial, sans-serif;
font-weight: 700;
color: #0e0e0e;
font-size: 22px;
line-height: 1.2;
}
@media (min-width: 768px) {
.offers-page .offer-card__heading {
font-size: 38px;
}
}
.offers-page .offer-card__heading-text {
font-size: 18px !important;
font-family: "Suisse Works-Bold", Helvetica;
font-weight: 700;
line-height: 100%;
letter-spacing: 0;
}
/* Prefer system fonts here so date slashes are not confused with periods (Suisse solidus on some iOS layouts). */
.offers-page .offer-card__date,
.offers-page .offer-card__dates {
font-size: 14px !important;
font-family: Helvetica, Arial, sans-serif;
font-weight: 400;
line-height: 1.35;
letter-spacing: 0;
color: #0e0e0e !important;
margin-bottom: 20px;
white-space: normal;
word-break: normal;
}
.offers-page .stat__value-highlight {
color: #ac5e35 !important;
}
.drawing-selection-page .offer-card__entries {
color: #ac5e35;
font-family: "Suisse Int'l-Regular", Helvetica, Arial, sans-serif;
font-size: 32px;
font-weight: 400;
line-height: 1.1;
margin-bottom: 14px;
}
.drawing-selection-page .layout__limit {
max-width: 1180px;
}
@media (min-width: 768px) {
.drawing-selection-page .offer-card {
width: min(100%, 1085px);
margin-left: auto;
margin-right: auto;
}
}
.offers-page .disclaimer-span {
display: block;
font-size: 16px !important;
font-family: "Inter", Helvetica;
font-style: italic;
font-weight: 400;
line-height: 100%;
letter-spacing: 0;
color: #0e0e0e;
}
@media (max-width: 767px) {
.drawing-selection-page .offer-card__entries {
font-size: 24px;
}
.offers-page .disclaimer-span {
font-size: 12px !important;
}
}
/* ===== Profile view styles ===== */
/* GUL profile view page (v2 parity + Online Account block) */
.user-info__name {
word-break: break-word;
overflow-wrap: anywhere;
}
.user-info__name-line {
word-break: break-word;
overflow-wrap: anywhere;
}
.gul-content-limit:has(.profile-view-page) {
max-width: none;
margin-left: 0;
margin-right: 0;
width: 100%;
padding: 0;
}
.user-info__preview-img {
max-width: 100%;
min-width: 0;
height: auto;
}
@media (min-width: 768px) {
.profile-view-page .widgets {
gap: 30px;
}
}
.profile-view-page .widget {
border-radius: var(--card-radius, 0.5rem);
background: var(--card-bg, #fff);
border: 0.5px solid #a49066;
box-shadow: var(--card-shadow, none);
overflow: hidden;
display: flex;
flex-direction: column;
}
.profile-view-page .widget__header {
font-family: "Suisse Works-Bold", Helvetica;
font-weight: 700;
font-size: 24px;
letter-spacing: 0;
padding: 16px 25px;
display: flex;
gap: 15px;
align-items: center;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.48) 100%), radial-gradient(50% 76.98% at 50.24% 106.35%, rgba(164, 144, 102, 0.66) 45%, rgba(21, 21, 21, 0.66) 100%);
color: #fff;
border-bottom: 3px solid #a49066;
}
.profile-view-page .widget__heading {
margin: 0;
font-weight: 700;
font-size: 15px;
line-height: 1.1;
}
@media (min-width: 768px) {
.profile-view-page .widget__heading {
font-size: 32px;
}
}
.profile-view-page .widget--banner {
background-color: #ede9e2;
border-color: transparent;
border-radius: 8px;
padding: 14px 20px;
text-align: center;
font-family: "Suisse Works-Bold", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.35;
color: #000;
}
@media (min-width: 768px) {
.profile-view-page .widget--banner {
font-size: 18px;
padding: 16px 24px;
}
}
.profile-view-page .widget--error {
background-color: #ec0000;
color: #fff;
border: 1px solid #ec0000;
padding: 12px 20px;
border-radius: 6px;
font-family: "Suisse Int'l-Regular", Helvetica, Arial, sans-serif;
font-size: 16px;
}
.profile-view-page .widget--success {
background-color: #1ba85f;
color: #fff;
border: 1px solid #1ba85f;
padding: 12px 20px;
border-radius: 6px;
font-family: "Suisse Int'l-Regular", Helvetica, Arial, sans-serif;
font-size: 16px;
}
.profile-view-page .user-info--card-layout {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
gap: 24px;
min-width: 0;
width: 100%;
padding-inline: 8px;
box-sizing: border-box;
}
.profile-view-page .user-info__card-text {
flex: 1 1 24rem;
min-width: 0;
max-width: none;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.profile-view-page .user-info__name-line {
flex: 0 1 auto;
max-width: 100%;
min-width: 0;
font-family: "Suisse Works-Bold", Helvetica, Arial, sans-serif;
font-weight: 800;
color: #0e0e0e;
font-size: clamp(1.125rem, 2vw, 1.625rem);
line-height: 1.25;
white-space: normal;
overflow: visible;
text-align: left;
}
.profile-view-page .user-info__name-line .user-info__name {
font-family: inherit;
font-weight: inherit;
}
.profile-view-page .user-info__name-gap {
white-space: pre;
}
.profile-view-page .user-info__divider {
height: 2px;
background: linear-gradient(to right, transparent, #a49066, transparent);
margin: 0 0 16px;
border: none;
flex-shrink: 0;
}
.profile-view-page .user-info__data {
margin: 0;
}
.profile-view-page .user-info__preview {
flex: 0 1 clamp(240px, 32vw, 350px);
min-width: 0;
max-width: 100%;
margin-left: auto;
align-self: flex-start;
display: flex;
justify-content: flex-end;
align-items: center;
}
.profile-view-page .user-info__preview-img {
width: 100%;
max-width: min(clamp(240px, 32vw, 350px), 100%);
min-width: 0;
height: auto;
aspect-ratio: 350 / 220;
margin: 0;
display: block;
border-radius: 22px;
object-fit: contain;
}
.profile-view-page .data__property {
font-family: "Suisse Works-Bold", Helvetica;
font-weight: 700;
font-size: 16px;
letter-spacing: 1px;
color: #0e0e0e;
}
.profile-view-page .data__value {
font-family: "Suisse Int'l-Regular", Helvetica;
font-size: 16px;
font-weight: 400;
color: #0e0e0e;
line-height: 1.35;
}
.profile-view-page .data__value--password-note {
color: #4a4a4a;
font-size: 14px;
font-style: italic;
}
.profile-view-page .details-cell {
text-align: center;
display: flex;
flex-direction: column;
gap: 8px;
container-type: inline-size;
}
/* Profile emails must remain a single uninterrupted value in row layout.
If the real rendered width cannot fit, JS must force stacked layout before
the user sees a shortened email. Do not remove this without replacing the
same measured-width safeguard. */
.profile-view-page .details-value--email {
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
font-size: clamp(12px, 4.5cqw, 16px);
line-height: 1.4;
min-width: 0;
}
/* When stacked (JS-driven or breakpoint-driven), give the email full width. */
.profile-view-page .is-stacked .details-value--email {
white-space: normal;
overflow: visible;
text-overflow: clip;
overflow-wrap: anywhere;
}
.profile-view-page .details-divider {
width: 2px;
align-self: stretch;
background: linear-gradient(to bottom, transparent, #a49066, transparent);
opacity: 0.5;
}
.profile-view-page .details-actions {
display: flex;
justify-content: center;
}
.profile-view-page .details-actions--column {
margin-top: 8px;
}
.profile-view-page .btn-edit,
.profile-edit-page .btn-edit {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 110px;
padding: 10px 22px;
border-radius: 6px;
border: none;
background: #a49066;
color: #fff;
font-family: "Suisse Int'l-Regular", Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.06em;
cursor: pointer;
transition: opacity 0.2s ease-in-out;
}
.profile-view-page .btn-edit:hover,
.profile-view-page .btn-edit:focus-visible,
.profile-edit-page .btn-edit:hover,
.profile-edit-page .btn-edit:focus-visible {
opacity: 0.8;
}
/* JS-driven stacked layout for long email addresses on wide viewports */
.profile-view-page .details-grid--three.is-stacked {
grid-template-columns: minmax(0, 1fr);
gap: 0;
margin-bottom: 16px;
}
.profile-view-page .details-grid--three.is-stacked > .details-cell {
padding: 14px 0;
}
.profile-view-page .details-grid--three.is-stacked > .details-cell:first-child {
padding-top: 0;
}
.profile-view-page .details-grid--three.is-stacked > .details-cell:last-child {
padding-bottom: 0;
}
.profile-view-page .details-grid--three.is-stacked > .details-divider {
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent, #a49066, transparent);
}
.profile-view-page .details-grid--three.is-stacked + .details-actions {
margin-top: 4px;
}
.profile-view-page .details-grid--three.is-stacked + .details-actions .btn-edit {
width: 100%;
max-width: 360px;
padding: 14px 22px;
font-size: 16px;
}
.profile-view-page .details-grid--two.is-stacked {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.profile-view-page .details-grid--two.is-stacked > .details-divider {
width: 100%;
height: 2px;
background: linear-gradient(to right, transparent, #a49066, transparent);
}
/* Contact Details: stack before columns collide at narrower widths */
@media (max-width: 1299px) {
.profile-view-page .details-grid--three {
grid-template-columns: minmax(0, 1fr);
gap: 0;
margin-bottom: 16px;
}
.profile-view-page .details-grid--three > .details-cell {
padding: 14px 0;
}
.profile-view-page .details-grid--three > .details-cell:first-child {
padding-top: 0;
}
.profile-view-page .details-grid--three > .details-cell:last-child {
padding-bottom: 0;
}
.profile-view-page .details-grid--three > .details-divider {
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent, #a49066, transparent);
}
.profile-view-page .details-grid--three + .details-actions {
margin-top: 4px;
}
.profile-view-page .details-grid--three + .details-actions .btn-edit {
width: 100%;
max-width: 360px;
padding: 14px 22px;
font-size: 16px;
}
/* Stacked by breakpoint — show the full email, never truncate. */
.profile-view-page .details-grid--three .details-value--email {
white-space: normal;
overflow: visible;
text-overflow: clip;
overflow-wrap: anywhere;
}
}
@media (max-width: 575px) {
.profile-view-page .user-info--card-layout {
gap: 16px;
}
.profile-view-page .user-info__card-text {
max-width: none;
gap: 12px;
}
.profile-view-page .user-info__preview {
flex: 0 1 220px;
max-width: 50%;
}
.profile-view-page .user-info__preview-img {
max-width: min(220px, 100%);
border-radius: 10px;
}
.profile-view-page .widgets > .widget:first-child .widget__header {
padding: 1rem 1.25rem;
}
.profile-view-page .widgets > .widget:first-child .widget__body {
padding: 0.875rem 0.875rem 1rem;
}
.profile-view-page .widgets > .widget:first-child .user-info--card-layout {
align-items: flex-start;
gap: 12px;
}
.profile-view-page .widgets > .widget:first-child .user-info__card-text {
gap: 0.5rem;
}
.profile-view-page .widgets > .widget:first-child .user-info__preview {
flex: 0 1 200px;
align-self: flex-start;
}
.profile-view-page .widgets > .widget:first-child .user-info__preview-img {
max-width: min(200px, 100%);
aspect-ratio: auto;
}
.profile-view-page .details-grid--two {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.profile-view-page .details-grid--two > .details-divider {
width: 100%;
height: 2px;
background: linear-gradient(to right, transparent, #a49066, transparent);
}
.profile-view-page .details-cell {
text-align: left;
}
/* Stacked by breakpoint — show the full email, never truncate. */
.profile-view-page .details-grid--two .details-value--email {
white-space: normal;
overflow: visible;
text-overflow: clip;
overflow-wrap: anywhere;
}
}
@media (min-width: 992px) and (max-width: 1399.98px) {
.profile-view-page .user-info--card-layout {
gap: 20px;
}
.profile-view-page .user-info__card-text {
flex-basis: 0;
}
.profile-view-page .user-info__preview {
flex-basis: 280px;
}
.profile-view-page .user-info__preview-img {
max-width: min(280px, 100%);
}
}
/* Mobile / tablet: vertical gold accent left of player number; hide horizontal divider */
@media (max-width: 767.98px) {
.profile-view-page .widgets > .widget:first-child .user-info--card-layout {
align-items: flex-start;
}
.profile-view-page .widgets > .widget:first-child .user-info__preview {
align-self: flex-start;
}
.profile-view-page .user-info__divider {
display: none;
}
.profile-view-page .user-info__data {
border-left: 3px solid;
border-image: linear-gradient(to bottom, #c9a84c, #a49066) 1;
padding-left: 12px;
}
}
@media (max-width: 402px) {
.profile-view-page .user-info--card-layout {
flex-direction: column;
align-items: stretch;
}
.profile-view-page .user-info__card-text {
max-width: 100%;
flex: 0 1 auto;
}
.profile-view-page .user-info__preview {
width: 100%;
max-width: 100%;
flex: 0 0 auto;
margin-left: 0;
align-self: stretch;
justify-content: center;
padding-top: 2rem;
}
.profile-view-page .user-info__preview-img {
max-width: 100%;
}
.profile-view-page .widgets > .widget:first-child .widget__body {
padding-top: 0.75rem;
}
.profile-view-page .widgets > .widget:first-child .user-info--card-layout {
gap: 0.75rem;
}
}
/* Profile edit page */
.gul-content-limit:has(.profile-edit-page) {
max-width: none;
margin-left: 0;
margin-right: 0;
width: 100%;
padding: 0;
}
@media (min-width: 768px) {
.profile-edit-page.layout__main {
max-height: none;
overflow-y: visible;
}
}
@media (min-width: 768px) {
.profile-edit-page .widgets {
gap: 30px;
}
}
.profile-edit-page .widget {
border-radius: var(--card-radius, 0.5rem);
background: var(--card-bg, #fff);
border: 0.5px solid #a49066;
box-shadow: var(--card-shadow, none);
overflow: hidden;
display: flex;
flex-direction: column;
}
.profile-edit-page .widget__header {
font-family: "Suisse Works-Bold", Helvetica;
font-weight: 700;
font-size: 24px;
letter-spacing: 0;
padding: 16px 25px;
display: flex;
gap: 15px;
align-items: center;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.48) 100%), radial-gradient(50% 76.98% at 50.24% 106.35%, rgba(164, 144, 102, 0.66) 45%, rgba(21, 21, 21, 0.66) 100%);
color: #fff;
border-bottom: 3px solid #a49066;
}
.profile-edit-page .profile-edit-banner {
background-color: #ede9e2;
border-color: transparent;
border-radius: 8px;
padding: 14px 20px;
text-align: center;
}
.profile-edit-page .profile-edit-banner__title {
font-family: "Suisse Works-Bold", Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1.2;
color: #0e0e0e;
margin-bottom: 2px;
}
.profile-edit-page .profile-edit-banner__message {
font-family: "Suisse Works-Bold", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.2;
color: #0e0e0e;
}
@media (min-width: 768px) {
.profile-edit-page .profile-edit-banner__title {
font-size: 36px;
}
.profile-edit-page .profile-edit-banner__message {
font-size: 16px;
}
}
.profile-edit-page .profile-edit-form {
display: flex;
flex-direction: column;
gap: 24px;
}
@media (min-width: 992px) {
.profile-edit-page .profile-edit-columns {
grid-template-columns: minmax(0, 1.2fr) 2px minmax(0, 1fr) 2px minmax(0, 1fr);
gap: 16px;
}
}
.profile-edit-page .profile-edit-column {
display: flex;
flex-direction: column;
gap: 8px;
}
.profile-edit-page .profile-edit-column--address .edit-input {
margin-bottom: 2px;
}
.profile-edit-page .profile-edit-column--contact {
height: 100%;
justify-content: center;
}
.profile-edit-page .profile-edit-divider {
width: 100%;
height: 2px;
background: linear-gradient(to right, transparent, #a49066, transparent);
opacity: 0.5;
}
@media (min-width: 992px) {
.profile-edit-page .profile-edit-divider {
width: 2px;
height: auto;
align-self: stretch;
background: linear-gradient(to bottom, transparent, #a49066, transparent);
}
}
.profile-edit-page .profile-edit-note {
margin: 0 0 6px;
font-family: "Suisse Int'l-Regular", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #0e0e0e;
text-align: center;
}
.profile-edit-page .edit-label {
font-family: "Suisse Works-Bold", Helvetica, Arial, sans-serif;
font-size: 16px;
letter-spacing: 0.02em;
color: #0e0e0e;
text-align: center;
margin-bottom: 2px;
}
.profile-edit-page .edit-input {
width: 100%;
border: 1px solid #bababa;
border-radius: 8px;
padding: 11px 12px;
font-family: "Suisse Int'l-Regular", Helvetica, Arial, sans-serif;
font-size: 15px;
color: #0e0e0e;
background: #fff;
outline: none;
transition: border-color 0.2s;
}
.profile-edit-page .edit-input:focus {
border-color: #a49066;
}
.profile-edit-page .edit-input:disabled {
background: #e9e9e9;
color: #8a8a8a;
border-color: #d2d2d2;
}
.profile-edit-page .edit-input.is-error {
border-color: #ec0000;
}
.profile-edit-page .edit-input.is-error:focus {
border-color: #ec0000;
}
.profile-edit-page .edit-error {
font-family: "Suisse Int'l-Regular", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #ec0000;
text-align: center;
}
.profile-edit-page .edit-field-message {
display: block;
margin-top: 2px;
min-height: 20px;
line-height: 17px;
}
.profile-edit-page .edit-empty-text {
font-family: "Suisse Int'l-Regular", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #0e0e0e;
text-align: center;
margin: 0;
}
.profile-edit-page .edit-actions {
display: flex;
justify-content: center;
margin-top: 6px;
gap: 0;
flex-wrap: wrap;
}
.profile-edit-page .edit-actions .btn-edit {
min-width: 260px;
}
.profile-edit-page .edit-actions .btn-edit:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.profile-edit-page .widget--error {
background-color: #ec0000;
color: #fff;
border: 1px solid #ec0000;
padding: 12px 20px;
border-radius: 6px;
font-family: "Suisse Int'l-Regular", Helvetica, Arial, sans-serif;
font-size: 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
}
.profile-edit-page .widget--success {
background-color: #1ba85f;
color: #fff;
border: 1px solid #1ba85f;
padding: 12px 20px;
border-radius: 6px;
font-family: "Suisse Int'l-Regular", Helvetica, Arial, sans-serif;
font-size: 16px;
}
.profile-edit-page .details-grid {
display: grid;
align-items: start;
}
.profile-edit-page .details-cell {
text-align: center;
display: flex;
flex-direction: column;
gap: 8px;
container-type: inline-size;
}
.profile-edit-page .data__property {
font-family: "Suisse Works-Bold", Helvetica;
font-weight: 700;
font-size: 16px;
letter-spacing: 1px;
color: #0e0e0e;
}
.profile-edit-page .data__value {
font-family: "Suisse Int'l-Regular", Helvetica;
font-size: 16px;
font-weight: 400;
color: #0e0e0e;
line-height: 1.35;
}
/* Edit page is always single-column — show the full email, never truncate. */
.profile-edit-page .details-value--email {
overflow-wrap: anywhere;
font-size: clamp(12px, 4.5cqw, 16px);
line-height: 1.4;
min-width: 0;
}
/* ===== Account widget styles ===== */
/* Account widgets aligned to v2 GUL common.css */
.gul-content-limit:has(.account-info-page) {
max-width: none;
margin-left: 0;
margin-right: 0;
width: 100%;
padding: 0;
min-width: 0;
}
.account-info-page.layout__main {
box-sizing: border-box;
max-width: 100%;
}
.account-info-page .layout__limit {
min-width: 0;
width: 100%;
max-width: 100%;
}
@media (min-width: 1200px) {
.account-info-page .widget.is-full {
grid-column: 1 / -1;
}
}
@media (min-width: 1400px) {
.account-info-page .widgets {
/* Side-by-side row: Player Information gets the larger share; Balances keeps a readable floor. */
grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}
}
.account-info-page .widget {
border-radius: var(--card-radius, 0.5rem);
background: var(--card-bg, #fff);
border: 0.5px solid #A49066;
box-shadow: var(--card-shadow, none);
overflow: hidden;
display: flex;
flex-direction: column;
min-width: 0;
}
.account-info-page .widget__header {
font-family: "Suisse Works-Bold", Helvetica;
font-weight: 700;
font-size: 24px;
letter-spacing: 0;
padding: 1.6rem 2.5rem;
display: flex;
gap: 1.5rem;
align-items: center;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.48) 100%), radial-gradient(50% 76.98% at 50.24% 106.35%, rgba(164, 144, 102, 0.66) 45%, rgba(21, 21, 21, 0.66) 100%);
color: #fff;
border-bottom: 3px solid #A49066;
}
.account-info-page .widget__heading {
font-weight: 700;
font-size: 1.3rem;
line-height: 1.1;
}
@media (min-width: 768px) {
.account-info-page .widget__heading {
font-size: 1.8rem;
}
}
.account-info-page .widget__body {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
padding: 1.5rem;
}
@media (max-width: 767.98px) {
.account-info-page .widgets > .widget:first-child .widget__header {
padding: 1.15rem 1.5rem;
}
.account-info-page .widgets > .widget:first-child .widget__body {
padding: 1rem;
}
.account-info-page .widgets > .widget:first-child .user-info--card-layout {
gap: 14px;
padding-inline: 0;
}
.account-info-page .widgets > .widget:first-child .user-info__card-text {
gap: 0.625rem;
}
}
@media (min-width: 768px) {
.account-info-page .widget__body {
padding: 3rem 2.5rem;
}
}
/* Player Information + Balances (the non-full first-row cards) carried heavy body
padding — tighten it without affecting the full-width Tier Progress / Host cards. */
.account-info-page .widget:not(.is-full) .widget__body {
padding: 1rem 1.25rem;
}
@media (min-width: 768px) {
.account-info-page .widget:not(.is-full) .widget__body {
padding: 1.75rem 2rem;
}
}
.account-info-page .user-info--card-layout {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 24px;
min-width: 0;
width: 100%;
padding-inline: 8px;
box-sizing: border-box;
}
.account-info-page .user-info__card-text {
flex: 1 1 24rem;
min-width: 0;
max-width: none;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.account-info-page .user-info__main {
font-family: "Suisse Works-Regular", Helvetica;
display: flex;
flex-direction: column;
align-items: stretch;
flex: 0 1 auto;
min-width: 0;
}
.account-info-page .user-info__preview {
flex: 0 1 min(240px, 42%);
min-width: 0;
max-width: 42%;
margin-left: auto;
align-self: center;
display: flex;
justify-content: flex-end;
align-items: center;
}
.account-info-page .user-info__preview-img {
width: 100%;
max-width: 100%;
min-width: 0;
height: auto;
aspect-ratio: 350 / 220;
margin: 0;
display: block;
border-radius: 22px;
box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.25);
object-fit: contain;
}
.account-info-page .user-info__divider {
height: 2px;
background: linear-gradient(to right, transparent, #a49066, transparent);
margin: 0.75rem 0;
border: none;
}
@media (max-width: 767.98px) {
.account-info-page .user-info__divider {
display: none;
}
.account-info-page .user-info__data {
border-left: 3px solid;
border-image: linear-gradient(to bottom, #c9a84c, #a49066) 1;
padding-left: 12px;
}
}
@media (max-width: 575px) {
.account-info-page .user-info--card-layout {
gap: 16px;
}
.account-info-page .user-info__card-text {
max-width: none;
gap: 12px;
}
.account-info-page .user-info__preview {
flex: 0 1 220px;
max-width: 50%;
}
.account-info-page .user-info__preview-img {
max-width: min(220px, 100%);
border-radius: 10px;
}
.account-info-page .data__item {
padding-left: 0;
}
.account-info-page .widgets > .widget:first-child .widget__header {
padding: 1rem 1.25rem;
}
.account-info-page .widgets > .widget:first-child .widget__body {
padding: 0.875rem 0.875rem 1rem;
}
.account-info-page .widgets > .widget:first-child .user-info--card-layout {
gap: 12px;
}
.account-info-page .widgets > .widget:first-child .user-info__card-text {
gap: 0.5rem;
}
}
@media (max-width: 402px) {
.account-info-page .user-info--card-layout {
flex-direction: column;
align-items: stretch;
}
.account-info-page .user-info__card-text {
max-width: 100%;
flex: 0 1 auto;
}
.account-info-page .user-info__preview {
width: 100%;
max-width: 100%;
flex: 0 0 auto;
margin-left: 0;
align-self: stretch;
justify-content: center;
padding-top: 4rem;
}
.account-info-page .user-info__preview-img {
max-width: min(220px, 80%);
}
.account-info-page .widgets > .widget:first-child .widget__body {
padding-top: 0.75rem;
}
.account-info-page .widgets > .widget:first-child .user-info--card-layout {
gap: 0.75rem;
}
}
.account-info-page .user-info__user--card-heading {
display: flex;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.account-info-page .user-info__name-line {
max-width: 100%;
font-family: "Suisse Works-Bold", Helvetica, Arial, sans-serif;
font-weight: 800;
color: #0e0e0e;
font-size: clamp(2rem, 3vw, 40px);
line-height: 1.25;
overflow-wrap: break-word;
text-align: left;
}
@media (min-width: 992px) and (max-width: 1399.98px) {
.account-info-page .user-info--card-layout {
gap: 20px;
}
.account-info-page .user-info__card-text {
flex: 1 1 12rem;
}
.account-info-page .user-info__preview {
flex: 0 1 min(220px, 38%);
max-width: 38%;
}
}
.account-info-page .user-info__name-line .user-info__name {
display: block;
font-family: inherit;
font-weight: inherit;
}
.account-info-page .user-info__data > *:not(:last-child) {
margin-bottom: 2.5rem;
}
.account-info-page .data {
margin: 0;
font-size: 1.5rem;
line-height: 1.35;
}
@media (min-width: 768px) {
.account-info-page .data {
font-size: 2rem;
}
}
.account-info-page .data__item {
padding-left: 1rem;
}
.account-info-page .data__item .data__value ~ .data__property {
margin-top: 0.75rem;
}
.account-info-page .data__property {
font-family: "Suisse Works-Bold", Helvetica;
font-weight: 700;
font-size: 16px;
letter-spacing: 1px;
color: #0e0e0e;
}
.account-info-page .data__value {
font-family: "Suisse Works-Regular", Helvetica;
font-weight: 400;
font-size: 16px;
letter-spacing: 0;
color: #0e0e0e;
}
.account-info-page .data a {
color: inherit;
}
.account-info-page .data a:hover {
text-decoration: underline;
}
.account-info-page .form-divider-hr {
height: 2px;
background: linear-gradient(to right, transparent, #a49066, transparent);
margin: 0.4rem 0;
border: none;
}
.account-info-page .stats--balances > .form-divider-hr {
width: 100%;
align-self: stretch;
}
.account-info-page .widget__body--balances {
justify-content: center;
}
.account-info-page .stats {
width: 100%;
min-width: 0;
}
.account-info-page .stats--balances {
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
text-align: center;
flex: 1;
min-width: 0;
width: 100%;
}
.account-info-page .stats__stat:not(:last-child) {
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.account-info-page .stats__stat:not(:last-child) {
margin-bottom: 1.5rem;
}
}
.account-info-page .stat {
padding: 0.4rem clamp(0.5rem, 2vw, 1rem);
line-height: 1.2;
pointer-events: none;
min-width: 0;
}
.account-info-page .stat--balances {
background-color: transparent;
border: none;
text-align: center;
width: 100%;
}
.account-info-page .stat__caption {
font-family: "Suisse Works-Bold", Helvetica;
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
color: #0e0e0e;
overflow-wrap: normal;
word-break: normal;
}
@media (min-width: 768px) {
.account-info-page .stat__caption {
font-size: clamp(1rem, 1.4vw, 1.25rem);
}
}
.account-info-page .stat__value {
font-family: "Suisse Int'l-Regular", Helvetica !important;
font-size: 14px;
font-weight: 400;
color: #0e0e0e;
}
@media (min-width: 768px) {
.account-info-page .stat__value {
font-size: 1.4rem;
}
}
.account-info-page .progress-area__info {
margin-bottom: 3rem;
font-size: 1.25rem;
text-align: center;
color: #0e0e0e;
}
@media (min-width: 768px) {
.account-info-page .progress-area__info {
font-size: 1.6rem;
margin-bottom: 5rem;
}
}
@media (min-width: 1200px) {
.account-info-page .progress-area__mob-stats {
display: none;
}
}
.account-info-page .progress-area__congrats {
width: 100%;
text-align: center;
margin-top: 1.5rem;
}
.account-info-page .progress-area__stat {
min-width: 0;
flex: 1;
}
.account-info-page .progress-area__footer {
font-family: "Suisse Int'l-Regular", Helvetica;
font-weight: 400;
font-size: 1.25rem;
color: #0e0e0e;
letter-spacing: 0;
}
.account-info-page .stat__value-highlight {
color: #AC5E35 !important;
font-weight: 700;
}
.account-info-page .stat-card__images {
display: flex;
justify-content: space-between;
gap: 1.5rem;
}
.account-info-page .stat-card__images-alt {
display: block;
}
.account-info-page .stat-card__img-wrap {
margin-bottom: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
@media (min-width: 768px) {
.account-info-page .stat-card__img-wrap {
margin-bottom: 3.5rem;
}
}
/* Tier Progress card art: smaller on phone/tablet; ~200px cap from 1200px up (desktop tier row) */
.account-info-page .stat-card__img {
width: 100%;
max-width: min(100%, 9.5rem); /* ~152px — compact on small phones */
display: block;
height: auto;
max-height: clamp(2.5rem, 15vw, 5.5rem); /* ~88px max on narrow viewports */
border-radius: 0.5rem;
aspect-ratio: 16/10.2;
object-fit: contain;
margin-inline: auto;
}
/* Slightly larger tier art on larger phones / tablet (still below desktop cap) */
@media (min-width: 480px) and (max-width: 1199.98px) {
.account-info-page .stat-card__img {
max-width: min(100%, 14.4rem); /* ~230px (~20% wider) */
max-height: clamp(3rem, 14vw, 9rem); /* ~144px max */
}
}
@media (min-width: 1200px) {
.account-info-page .stat-card__img {
max-height: 15rem; /* ~240px on desktop tier row (~20% larger) */
max-width: min(100%, 24rem); /* ~384px — matches ~240px height at 16/10.2 */
}
}
.account-info-page .stat-card__scale {
margin-bottom: 1rem;
height: 1rem;
border: 0.1rem solid #A49066;
position: relative;
background: transparent;
border-radius: 0;
}
@media (min-width: 768px) {
.account-info-page .stat-card__scale {
margin-bottom: 2rem;
}
}
.account-info-page .stat-card__scale-filled {
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.account-info-page .stat-card__positions {
display: flex;
justify-content: space-between;
gap: 1.5rem;
}
.account-info-page .stat-card__position {
font-size: 1.5rem;
font-weight: bold;
line-height: 1.15;
color: #0e0e0e;
}
@media (min-width: 768px) {
.account-info-page .stat-card__position {
font-size: 2rem;
}
}
.account-info-page .tier-proggress-title {
font-family: "Suisse Works-Bold", Helvetica;
font-weight: 700;
font-size: 20px;
letter-spacing: 1px;
color: #0e0e0e;
text-align: center;
}
.account-info-page .tier-proggress-subtitle {
font-family: "Suisse Int'l-Regular", Helvetica;
font-weight: 400;
font-size: 16px;
letter-spacing: 0.05em;
color: #0E0E0E;
}
.account-info-page .contacts-area {
width: 100%;
}
.account-info-page .contacts-area__layout,
.account-info-page .contacts-area__content-grid {
width: 100%;
min-width: 0;
}
.account-info-page .contacts-area__layout.rz-row,
.account-info-page .contacts-area__content-grid.rz-row {
margin-left: 0;
margin-right: 0;
}
.account-info-page .contacts-area__layout.rz-row {
column-gap: 2rem !important;
row-gap: 1.75rem !important;
}
.account-info-page .contacts-area__content-grid.rz-row {
column-gap: 1rem !important;
row-gap: 1rem !important;
}
.account-info-page .contacts-area__profile-col,
.account-info-page .contacts-area__content-col,
.account-info-page .contacts-area__detail-col,
.account-info-page .contacts-area__action-col {
min-width: 0;
}
.account-info-page .contacts-area__profile-col,
.account-info-page .contacts-area__action-col {
display: flex;
}
.account-info-page .contacts-area__action-col {
align-items: stretch;
}
.account-info-page .contacts-area__info {
width: 100%;
font-size: 2rem;
line-height: 1.25;
}
@media (min-width: 768px) {
.account-info-page .contacts-area__info {
font-size: 2.4rem;
}
}
.account-info-page .contacts-area__avatar {
flex: 0 0 7rem;
max-width: 7rem;
height: 7rem;
border-radius: 50%;
border: 0.1rem solid #BABABA;
object-fit: cover;
}
@media (min-width: 768px) {
.account-info-page .contacts-area__avatar {
flex: 0 0 109px;
max-width: 109px;
height: 109px;
}
}
.account-info-page .contacts-area__prop {
display: flex;
gap: 1rem;
align-items: center;
min-width: 0;
}
.account-info-page .contacts-area__prop .data__item {
display: flex;
flex-direction: column;
gap: 0.35rem;
min-width: 0;
}
.account-info-page .contacts-area__link-wrap {
min-width: 0;
}
.account-info-page .contacts-area__link {
display: inline-block;
max-width: 100%;
white-space: nowrap;
}
.account-info-page .contacts-area__name {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.account-info-page .contacts-area__action-col--email {
justify-content: flex-start;
}
@media (max-width: 767.98px) {
.account-info-page .contacts-area__profile-col {
justify-content: center;
}
.account-info-page .contacts-area__info {
justify-content: center;
text-align: left;
}
}
@media (min-width: 1200px) {
.account-info-page .contacts-area__content-grid.rz-row {
column-gap: 2rem !important;
}
}
@media (min-width: 1200px) {
.account-info-page .contacts-area__content-col {
padding-left: 0.75rem;
}
.account-info-page .contacts-area__actions.rz-row {
flex-wrap: nowrap;
column-gap: 1.5rem !important;
}
.account-info-page .contacts-area__actions .contacts-area__action-col {
flex: 1 1 0;
max-width: none;
}
}
.account-info-page .contacts-area__heading {
font-family: "Suisse Works-Bold", Helvetica;
font-weight: 700;
font-size: 16px;
letter-spacing: 1px;
color: #0E0E0E;
}
.account-info-page .contacts-area__subheading {
font-family: "Suisse Int'l-Regular", Helvetica;
font-weight: 400;
font-size: 16px;
color: #0E0E0E;
}
.account-info-page .contacts-area__btn {
font-family: "Suisse Int'l-Regular", Helvetica;
font-weight: 400;
font-size: 20px;
}
.account-info-page .contacts-area__btn.btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
min-height: 46px;
height: 46px;
padding: 12px 16px;
border-radius: 6px;
text-decoration: none;
background: #A49066;
color: #fff;
border: none;
cursor: pointer;
transition: opacity 0.2s;
}
.account-info-page .contacts-area__btn.btn:hover,
.account-info-page .contacts-area__btn.btn:focus {
opacity: 0.8;
color: #fff;
}
.account-info-page .form-divider {
width: 2px;
height: 60px;
background: linear-gradient(to bottom, transparent, #a49066, transparent);
opacity: 0.5;
}
/* ===== Win loss details styles ===== */
/* Win/Loss Statement details layout */
@media (max-width: 575px) {
.gul-body, .rz-body.gul-body {
padding: 2px;
margin: 0px;
}
.gul-content-limit {
padding:0;
padding-left: 4px;
padding-right: 4px;
}
}
/* doc__header – buttons sit ABOVE the PDF card with spacing below */
/* Buttons stretch full-width on mobile, fixed min-width on desktop */
.wl-details-page .doc__btn {
flex: 1;
min-width: 0;
}
@media (min-width: 768px) {
.wl-details-page .doc__header .doc__btn {
box-sizing: border-box;
flex: 0 1 196px;
width: 100%;
max-width: 196px;
min-width: 0;
}
}
.wl-details-page .doc__btn.btn--primary {
color: #fff;
background-color: #A49066;
border-color: #A49066;
}
.wl-details-page .doc__btn.btn--primary:not(:disabled):hover,
.wl-details-page .doc__btn.btn--primary:not(:disabled):focus {
opacity: 0.8;
}
.wl-details-page .doc__btn.btn--primary-reverse {
color: var(--primary-color, #A49066);
border-color: var(--primary-color, #A49066);
background: #fff;
}
.wl-details-page .doc__btn.btn--primary-reverse:hover,
.wl-details-page .doc__btn.btn--primary-reverse:focus {
color: #fff;
background: var(--primary-color, #A49066);
border-color: var(--primary-color, #A49066);
}
.wl-details-page .btn__icon {
fill: currentColor;
width: 16px;
height: 16px;
flex: none;
display: block;
}
.wl-details-page .btn__icon + .btn__text {
margin-left: 0;
}
.wl-details-page .doc__btn--download.btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding-left: 1rem;
padding-right: 1rem;
}
.wl-details-page .doc__btn--download .btn__icon {
width: 16px;
height: 16px;
}
@media (min-width: 768px) {
.wl-details-page .doc__btn--download.btn {
font-size: 15px;
}
.wl-details-page .doc__btn--download .btn__icon {
width: 18px;
height: 18px;
}
}
@media (min-width: 1200px) {
.wl-details-page .doc__btn--download.btn {
font-size: 16px;
}
}
/* doc__main – the bordered card containing the PDF canvases */
.wl-details-page .doc__main {
padding: 0.5rem;
border-radius: 0.5rem;
background: var(--card-bg, #fff);
border: 0.2rem solid var(--card-border-color, #a49066);
box-shadow: var(--card-shadow, none);
overflow-x: auto;
}
@media (min-width: 768px) {
.wl-details-page .doc__main {
padding: 2rem;
}
}
/* PDF canvas pages rendered by PDF.js */
#pdf-container {
width: 100%;
min-height: 60vh;
}
#pdf-container .pdf-page {
margin-bottom: 10px;
}
#pdf-container .pdf-page:last-child {
margin-bottom: 0;
}
.doc__empty p {
margin: 0;
font-family: "Suisse Int'l-Regular", "Suisse Works", Helvetica, sans-serif;
font-size: 16px;
color: var(--rz-text-color, #0E0E0E);
}
.doc__error {
color: var(--gul-error, #E40023) !important;
}
/* ===== Application shell styles ===== */
h1:focus {
outline: none;
}
body {
margin: 0;
}
/* ============================================================
Portal dialog background lock
Radzen only renders the wrapper while a dialog is open, so
these selectors automatically toggle page locking on and off.
============================================================ */
html:has(.portal-dialog-wrapper),
body:has(.portal-dialog-wrapper) {
overflow: hidden !important;
overscroll-behavior: none;
}
body:has(.portal-dialog-wrapper) .gul-body,
body:has(.portal-dialog-wrapper) .layout__main {
overflow: hidden !important;
overscroll-behavior: none;
}
body:has(.portal-dialog-wrapper) .rz-dialog-mask {
pointer-events: auto;
touch-action: none;
overscroll-behavior: contain;
}
.portal-dialog-wrapper {
touch-action: none;
overscroll-behavior: contain;
}
.portal-dialog-wrapper .rz-dialog {
touch-action: auto;
}
.portal-dialog-wrapper .rz-dialog-content {
overscroll-behavior: contain;
}
/* Main content area: same as V2 GUL common.css .layout__main */
.layout__main {
--pp-page-loading-background: var(--main-bg, var(--gul-body-bg));
}
@media (min-width: 1024px) {
.layout__main {
--pp-layout-main-max-height: calc(var(--vh, 1vh) * 100);
--pp-layout-main-overflow-y: auto;
}
}
.error-dialog-wrapper .ped__actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: flex-end;
margin-top: 8px;
}
.error-dialog-wrapper .ped__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 150px;
padding: 12px 28px;
border: 1.5px solid #1a2a44;
border-radius: 6px;
background: transparent;
color: #1a2a44;
font-family: "Suisse Int'l-Regular", Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.04em;
line-height: 1.35;
box-shadow: none;
cursor: pointer;
transition: opacity 0.2s, background-color 0.2s;
}
.error-dialog-wrapper .ped__btn:hover,
.error-dialog-wrapper .ped__btn:focus-visible {
background: rgba(26, 42, 68, 0.06);
}
@media (max-width: 575px) {
.error-dialog-wrapper .ped__actions {
justify-content: flex-end;
}
.error-dialog-wrapper .ped__btn {
min-width: 150px;
}
}
/* ===== Consolidated former GUL scoped styles ===== */