/*-----------------*/ /*--- F O N T S ---*/ /*-----------------*/ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); /*-------------------------------------------*/ /*--- S I T E W I D E C O N S T A N T S ---*/ /*-------------------------------------------*/ :root { /*--- standard colours ---*/ --black: 0, 0, 0; --grey-875: 32, 32, 32; --grey-750: 64, 64, 64; --grey-625: 96, 96, 96; --grey-500: 128, 128, 128; --grey-375: 160, 160, 160; --grey-250: 192, 192, 192; --grey-125: 224, 224, 224; --grey-light: 248, 248, 246; --white: 255, 255, 255; /*--- design specific ---*/ --bg-dark: 22, 20, 28; --border-light: 234, 231, 228; --purple-dark: 27, 19, 64; --purple-light: 190, 176, 246; --gold: 218, 165, 32; --primary-minor-2: 240, 237, 255; --primary-minor-1: 226, 219, 255; --primary: 109, 74, 255; --primary-major-1: 98, 67, 230; --primary-major-2: 87, 59, 204; --primary-major-3: 76, 52, 179; --signal-danger-minor-2: 252, 235, 238; --signal-danger-minor-1: 248, 214, 220; --signal-danger:220, 50, 81; --signal-danger-major-1: 198, 45, 73; --signal-danger-major-2: 176, 40, 65; --signal-danger-major-3: 154, 35, 67; --signal-warning: 165, 171, 10; --signal-warning-major-1: 255, 163, 26; --signal-warning-major-2: 255, 173, 51; --signal-warning-major-3: 255, 184, 77; --signal-warning-contrast: 0, 0, 0; --signal-success-minor-2: 6, 34, 27; --signal-success-minor-1: 9, 50, 40; --signal-success: 30, 168, 133; --signal-success-major-1: 53, 177, 145; --signal-success-major-2: 75, 185, 157; --signal-success-major-3: 98, 194, 170; --interaction-weak: 76, 52, 178; --text-weak: 179, 163, 245; /*--- font sizes ---*/ --xxl: 42rem; --xl: 36rem; --l: 27rem; --m: 22rem; --s: 18rem; --xs: 15rem; --xxs: 12rem; /* --------------------------- Semantic variables (triplets) Use with rgb(var(--...)) or rgba(var(--...), a) --------------------------- */ /* surfaces & backgrounds (triplet tokens) */ --bg: var(--grey-light); /* page background triplet */ --surface: var(--white); /* card/dialog background triplet */ --surface-2: var(--primary-minor-2); /* text & emphasis (triplets) */ --text: var(--black); /* primary text triplet */ --muted-text: var(--grey-875); /* secondary text triplet */ --placeholder: var(--grey-750); /* borders & dividers */ --border: var(--border-light); --subtle-border: var(--grey-125); /* interactive accents */ --accent: var(--primary); --accent-strong: var(--primary-major-1); --danger: var(--signal-danger); --success: var(--signal-success); /* overlays/tooltips (triplets) */ --overlay: var(--black); --tooltip-bg: var(--black); } /* Dark theme override (apply to or :root[data-theme="dark"]) */ :root[data-theme="dark"] { --bg: var(--bg-dark); --surface: var(--purple-dark); --surface-2: var(--purple-dark); --text: var(--white); --muted-text: var(--white); --placeholder: var(--grey-250); --border: var(--border-light); /* tweak if you want different divider intensity */ --accent: var(--primary-minor-2); --accent-strong: var(--primary-major-1); --overlay: 0,0,0; /* used with rgba(var(--overlay), 0.6) */ --tooltip-bg: 0,0,0; } /*--- used to stop transitions showing on page load ---*/ .preload * { transition: none !important; } /*-------------------*/ /*--- G L O B A L ---*/ /*-------------------*/ * { margin:0; padding:0; box-sizing:border-box; line-height:1; /*-ms-overflow-style: none;*/ /*scrollbar-width: none;*/ } /**::-webkit-scrollbar { display: none; }*/ html, body { height:100%; min-height:100vh; overflow: hidden; overscroll-behavior: contain; touch-action: none; -webkit-overflow-scrolling: touch; } html { font-size: calc(1rem / 16); scroll-behavior: smooth; line-height:1; } body{ font-family: "Inter", sans-serif; font-size:18rem; font-weight:normal; height:100%; letter-spacing:0.5rem; touch-action: pan-x pan-y; /* semantic background + text */ background: rgb(var(--bg)); color: rgb(var(--text)); } body.fixed{ overflow:hidden; } h1{ font-size:var(--xl); font-weight:600; } p{ line-height: 1.4; } a{ color: rgb(var(--text)); } /*---------------------*/ /*--- B U T T O N S ---*/ /*---------------------*/ button{ font-size:var(--s); background-color: transparent; border:none; outline:none; cursor: pointer; -moz-appearance: none; -webkit-appearance: none; appearance: none; transition:0.25s all ease-in-out; } .button{ position: relative; display:flex; align-items: center; justify-content: center; height:50rem; padding:0 20rem; font-size:var(--s); color: rgb(var(--surface)); /* text on button uses surface (usually white) */ text-decoration: none; text-align: center; border:2rem solid transparent; background-color: rgb(var(--accent-strong)); border-radius:10rem; transition:0.25s all ease-in-out; overflow:hidden; } .button:has(span):not(.icon-text) { width:50rem; } @media (hover: hover) { .button:hover { background-color: rgb(var(--primary-major-2)); } } .button:active{ background-color:rgb(var(--primary-major-3)); } .button.danger { background-color: rgb(var(--signal-danger-major-1)); } @media (hover: hover) { .button.danger:hover { background-color: rgb(var(--signal-danger-major-2)); } } .button.danger:active { background-color: rgb(var(--signal-danger-major-3)); } .button.danger_outlined { color:rgb(var(--signal-danger-major-1)); border:2rem solid rgb(var(--signal-danger)); background-color: transparent; } @media (hover: hover) { .button.danger_outlined:hover { color: rgb(var(--signal-danger-major-2)); background-color: rgb(var(--signal-danger-minor-2)); } } .button.danger_outlined:active { color:rgb(var(--signal-danger-major-3)); background-color:rgb(var(--signal-danger-minor-1)); } .button.primary_outlined { color:rgb(var(--primary-major-1)); border:2rem solid rgb(var(--primary-major-1)); background-color:transparent; } @media (hover: hover) { .button.primary_outlined:hover { color: rgb(var(--primary-major-1)); background-color: rgb(var(--primary-minor-2)); } } .button.primary_outlined:active { color:rgb(var(--primary-minor-2)); background-color:rgb(var(--primary-minor-2)); } .button.primary_outlined[disabled] { color:rgba(var(--primary-major-1),0.5); border:2rem solid rgba(var(--primary-major-1),0.5); background-color:transparent; cursor:default; } button:disabled, .button:disabled { color:rgb(var(--text-weak)); background-color:rgb(var(--interaction-weak)); opacity:.5; cursor:not-allowed; } /*-----------------------*/ /*--- T O O L T I P S ---*/ /*-----------------------*/ .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { position:absolute; top:130%; left:50%; width:120rem; margin-left: -60rem; padding: 8rem; font-size:var(--xxs); color: rgb(var(--surface)); text-align: center; background-color: rgba(var(--tooltip-bg),0.8); border-radius:10rem; visibility: hidden; opacity: 0; transition: opacity 500ms; text-transform: initial !important; line-height: 1.4; } .tooltip .tooltiptext::after { content: " "; position: absolute; bottom: 100%; /* At the top of the tooltip */ left: 50%; margin-left: -5rem; border-width: 5rem; border-style: solid; border-color: transparent transparent rgba(var(--tooltip-bg),0.8) transparent; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } /*---------------*/ /*--- M I S C ---*/ /*---------------*/ /*--- used to hide elements when page first loads ---*/ .hidden{ display: none !important; } .limit-width { max-width:1440rem; width:100%; margin-left:auto; margin-right:auto; } .material-symbols-outlined { font-size:var(--m) !important; } .material-symbols-outlined { font-size:var(--m) !important; } [data-unavailable] { cursor: not-allowed; } /*-----------------*/ /*--- L O G I N ---*/ /*-----------------*/ #login { display: flex; width:100%; height:100%; flex-direction: column; align-items:center; justify-content: center; padding:50rem; background-color:rgb(var(--purple-dark)); } #login ul { display: flex; width:100%; max-width:300rem; flex-direction: column; row-gap: 20rem; padding:30rem; list-style: none; /*background-color:rgb(var(--bg-dark));*/ border-radius:10rem; } #login ul { display: flex; width:100%; max-width:300rem; flex-direction: column; row-gap: 20rem; padding:30rem; list-style: none; /*background-color:rgb(var(--bg-dark));*/ border-radius:10rem; } #login ul li { display: flex; flex-direction: column; list-style: none; } #login ul.password-reset li { flex-direction: row; flex-wrap: nowrap; } #login ul li h1{ color:rgb(var(--white)); } #login ul li input { color: rgba(var(--white), 0.87); border: 1rem solid rgba(var(--white), 0.87); background-color: transparent; } #login ul li input::placeholder { color: rgba(var(--white), 0.87); opacity: 1; } #login ul li input:-ms-input-placeholder { color: rgba(var(--white), 0.87); } #login ul li input::-ms-input-placeholder { color: rgba(var(--white), 0.87); } #login ul.password-reset li input { width:100%; color: rgba(var(--black), 0.87); border: 1rem solid rgba(var(--black), 0.87); background-color: rgba(var(--white), 1); } #login ul.password-reset li input::placeholder { color: rgba(var(--black), 0.87); opacity: 1; } #login ul.password-reset li input:-ms-input-placeholder { color: rgba(var(--black), 0.87); } #login ul.password-reset li input::-ms-input-placeholder { color: rgba(var(--black), 0.87); } /*-----------------------------------------------------*/ /*--- L O G I N A N D T O A S T N O T I C E S ---*/ /*-----------------------------------------------------*/ .notice { max-width:48vw; width:100%; margin:0 auto; padding:30rem; background-color: rgb(var(--surface)); border-radius:10rem; } .notice.password-reset { max-width:35vw; } .notice.password-reset ul { max-width:100% !important; } .notice h3, .notice p { padding-top:10rem; } .notice p:first-of-type { padding-top:20rem; } .notice input { width:100%; padding-right:36rem; color: rgb(var(--text)); background-color: rgb(var(--surface)); border-color: rgb(var(--text)); } .notice input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: rgba(var(--text), 0.87); opacity: 1; /* Firefox */ } .notice input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: rgba(var(--text), 0.87); } .notice input::-ms-input-placeholder { /* Microsoft Edge */ color: rgba(var(--text), 0.87); } .notice .pass-strength-visible #password { padding-bottom:7rem; border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-bottom: none; } .notice .requirements_met { background:url("/img/check-green.svg") top 50% right 12rem / 12rem no-repeat rgb(var(--surface)); } .notice ul { max-width: 100%; margin-top: 30rem; background-color: rgba(var(--grey-125), 0.5); } .notice ul li { padding:0; } .notice ul li:last-of-type { flex-direction: row; gap:10rem; } .notice.toast { position: fixed; bottom: 15rem; right: 15rem; padding:15rem; z-index:1000; } .notice.toast p { margin:0; padding:0; font-size:var(--xxs); font-weight: 700; } .notice.toast.dark { color:rgb(var(--white)); background-color: rgb(var(--purple-dark)); transform: translateX(0); } /*---------------*/ /*--- F O R M ---*/ /*---------------*/ input:not([type="checkbox"]), select, textarea { flex:1 100%; font-family: 'Motiva Sans', sans-serif; display: block; min-height:36rem; padding:10rem 12rem; font-size:var(--s); color: rgba(var(--black), 0.87); border:1rem solid rgba(var(--black), 1); background-color:rgba(var(--white), 1); border-radius:10rem; appearance: none; -moz-appearance: none; -webkit-appearance: none; } input:disabled, select:disabled, textarea:disabled { background-color:rgb(var(--grey-125)); } select { background:url(/img/down_arrow.svg) center right 20rem / 18rem auto no-repeat rgb(var(--surface)); cursor:pointer; line-height:1.2; } input:not([type="checkbox"]):focus, select:focus, textarea:focus { outline:none; } input.incorrect, select.incorrect, textarea.incorrect { border:1rem solid #f00000; } input[type="checkbox"] { width:22rem; height:22rem; border:1rem solid rgb(var(--black)); border-radius:4rem; appearance: none; -moz-appearance: none; -webkit-appearance: none; } input[type="checkbox"]:checked { background: url(/img/check.svg) center / 12rem no-repeat transparent; } main { display: flex; width:100%; height:100%; overflow:hidden; } aside { display:block; width:250rem; height:100%; padding:20rem 0; border-right:1.2rem solid rgba(241,245,249, .12); background-color:rgb(var(--purple-dark)); /* kept purple sidebar as original */ overflow-x: hidden; overflow-y:initial; } aside .simplebar-scrollbar::before { background-color:rgba(var(--white),0.5) !important; } aside #user { display:flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height:200rem; padding:0 10rem; color:rgba(var(--white), .8); cursor:default; } aside #user .avatar { display:flex; align-items: center; justify-content: center; width:96rem; height:96rem; font-size:var(--xxl); color:rgb(var(--black)); background-color:rgba(var(--white), .8); border-radius:9999px; } aside #user .name { margin-top:24rem; font-size:var(--xs); color:rgb(var(--white)); font-weight:500; text-align: center; } aside #user .email { margin-top:5rem; font-size:14rem; color:rgba(var(--white), .9); } aside #user .badges { display:flex; gap:10rem; } aside #user .badges .badge { display:flex; align-items: center; justify-content: center; gap:10rem; min-width:50rem; height:34rem; margin-top:15rem; padding:6rem 14rem; font-size:12rem; font-weight:600; color:rgb(var(--purple-light)); /*border:1rem solid rgb(var(--purple-light));*/ background-color:rgba(var(--white), 0.12); border-radius:6rem; letter-spacing: 1.1rem; text-transform: uppercase; } aside #user .badges .badge.savings { font-size:14rem; color:rgba(var(--gold), 1); } aside nav { width:100%; margin-top:20rem; } aside nav .simplebar-scrollbar:before { background-color: rgba(var(--white), 0.12) !important; } aside nav ul { flex:1; display:flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap:6rem; height:100%; padding:0 10rem; list-style: none; } aside nav ul li { width:100%; } aside nav ul li a { display:flex; align-items: center; justify-content: flex-start; gap:10rem; width:100%; padding:10rem 16rem; font-size:var(--xs); color:rgba(var(--white), 0.8); text-decoration: none; border-radius:10rem; background-color:transparent; transition: 0.1s all ease-in-out; cursor: pointer; } aside nav ul li a.active, aside nav ul li a:hover { background-color:rgba(var(--white), 0.12); } aside nav ul li a span.material-symbols-outlined { color:rgba(var(--purple-light), 1); } section { flex:1; display:flex; flex-direction: column; } header { position: fixed; width:calc(100% - 250rem); height:60rem; padding:5rem 20rem; box-shadow:rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.1) 0 1rem 3rem 0, rgba(0, 0, 0, 0.1) 0 1rem 2rem -1rem; z-index:20; } header > div { display:flex; align-items: center; justify-content: space-between; height:100%; } header ul { display:flex; justify-content: flex-end; gap:10rem; margin-left:auto; list-style: none; } header ul li { display:flex; align-items: center; color: rgba(var(--grey-875), 0.7); } header ul li button, header ul li a { display:flex; align-items: center; justify-content: space-between; gap:2rem; padding:5rem; color:rgb(var(--grey-875)); text-decoration: none; border-radius:6rem; } header ul li a .material-symbols-outlined { color:rgb(var(--grey-875)); } header ul li button:hover, header ul li a:hover { background-color:rgba(var(--grey-light)); } #content { height:100%; margin-top:60rem; background-color: rgb(var(--bg)); overflow-x:hidden; overflow-y:auto; } #content #hero { border-bottom:1rem solid rgb(var(--border)); background-color:rgb(var(--surface)); } #content #hero #hero_inner { display:flex; align-items: center; justify-content: space-between; height:132rem; padding:0 32rem; } #content #hero #hero_inner h1 { display: inline-flex; align-items: center; gap:10rem; } #content #hero #hero_inner h1 .badge { display:inline-flex; align-items: center; justify-content: center; min-width:28rem; height:28rem; padding:8rem 12rem; font-size: var(--xxs); color:rgb(var(--white)); text-transform: uppercase; background-color:rgb(var(--signal-danger-major-1)); border-radius:9999px; } #content #hero #hero_inner #page_actions { display:flex; gap:10rem; } #content p { padding:32rem; } #lists { display: flex; gap: 32rem; justify-content: flex-start; flex-wrap: wrap; padding:32rem; list-style: none; } #lists li { flex: 0 calc(33% - 20rem); min-height:150rem; background-color:rgb(var(--surface)); border-radius:10rem; border:1rem solid rgb(var(--border)); overflow:hidden; } #lists li.line-break { flex: 1 100%; min-height:auto; margin-top:32rem; border:none; background-color:transparent; border-radius: 0; } #lists li.list_expired { opacity:0.5; transition: all 500ms ease-in-out; } #lists li.list_expired:hover { opacity:1; } #lists li.list_hidden { opacity:0.5; transition: all 500ms ease-in-out; } #lists li.list_hidden:hover { opacity:1; } #lists li a { display:block; width:100%; height:100%; padding:20rem; text-decoration: none; overflow:hidden; } #lists li a.birthday { background: linear-gradient(0deg, transparent 0%, rgba(255,255,255,1) 60%), url("/img/patterns/2.svg") center center / 25% repeat; } #lists li a.christmas { background: linear-gradient(0deg, transparent 0%, rgba(255,255,255,1) 60%), url("/img/patterns/1.svg") top center repeat; } #lists li a.spooky-season { background: linear-gradient(0deg, transparent 0%, rgba(255,255,255,1) 60%), url("/img/patterns/3.svg") top center / 25% repeat; } #lists li a.premium { background: url("/img/patterns/4.svg") top center repeat; } #lists li a.premium h2{ color:rgb(var(--white)); } #lists li h2 { padding-bottom:10rem; font-size:var(--s); border-bottom:1rem solid rgb(var(--border)); /*white-space: nowrap;*/ } #lists_expired { display:none; } /* ----------------------- #items: 1 column -> 2 -> 3 Max container width: 1440rem Replace the old #items / #items li rules with this ----------------------- */ #items { /* Prevent content going edge-to-edge on ultrawide displays, center container */ max-width: 1440rem; /* <- overall cap you asked for */ margin: 0 auto; display: grid; gap: 32rem; padding: 32rem; list-style: none; /* default: 1 column (one card per row) */ grid-template-columns: 1fr; align-items: start; } /* Keep the cards as flex containers so internal flex layout still works */ #items li { display: flex; flex-direction: column; align-items: flex-start; gap: 12rem; min-width: 0; width: 100%; padding: 20rem; background-color: rgb(var(--surface)); border-radius: 10rem; border: 1rem solid rgb(var(--border)); overflow: hidden; cursor: default; box-sizing: border-box; } #items li.exceeded { background-color: rgb(var(--grey-250)); } #items li.reserved { box-shadow: 4rem 0 0 0 rgb(var(--primary-major-1)) inset; } #items li p { width: 100%; margin-top:20rem; background-color:rgb(var(--grey-125)); border-radius:10rem; cursor:default; } #items li div:first-of-type { display:flex; align-items: center; justify-content: space-between; column-gap: 10rem; max-width:100%; width:100%; } #items li div:first-of-type h2, #items li div:first-of-type h3 { font-size:var(--m); cursor:default; } #items li div:first-of-type h2 { flex: 1 50%; display: flex; align-items: center; position: relative; width: 75%; height: 28rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #items li div:first-of-type h2 > span { display: inline-block; white-space: nowrap; will-change: transform; } #items li div:first-of-type h2::after { content: ''; position: absolute; top: 0; right: 0; width: 50rem; height: 100%; background: linear-gradient( 270deg, rgba(var(--surface),1) 0%, rgba(var(--surface),0) 75% ); } #items li.exceeded div:first-of-type h2::after { background: linear-gradient( 270deg, rgba(var(--grey-250),1) 0%, rgba(var(--grey-250),0) 75% ); } #items li div:first-of-type h2 > span.scrolling { animation-name: scroll-left; animation-duration: var(--scroll-duration, 10s); animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; animation-delay: 0.7s; } #items li:hover div:first-of-type h2 > span.scrolling, #items li.scroll-paused div:first-of-type h2 > span.scrolling { animation-play-state: paused; } @keyframes scroll-left { 0% { transform: translateX(0); } 45% { transform: translateX(var(--scroll-distance, -100%)); } 55% { transform: translateX(var(--scroll-distance, -100%)); } 90%, 100% { transform: translateX(0); } } #items li div:first-of-type h3:first-of-type { display:inline-flex; align-items: center; justify-content: center; gap:5rem; min-width:28rem; height:28rem; padding:8rem; margin-left:15rem; font-size: var(--xxs); background-color:rgb(var(--purple-light)); border-radius:9999px; } #items li div:first-of-type h3:first-of-type { /* margin:0;*/ /* padding:0;*/ /* font-size: var(--s);*/ } #items li div:first-of-type h3 + h3:last-of-type { /*margin-left:15rem;*/ text-align: right; font-size:var(--s); } #items li div:last-of-type { flex:1; align-self: flex-end; display:flex; gap:10rem; width:100%; margin-top:20rem; padding-top:20rem; border-top:1rem solid rgb(var(--border)); } #items li div a.button { margin-left:auto; overflow:hidden; } #items li.exceeded h2, #items li.exceeded h3, #items li.exceeded p { color:rgba(var(--black),0.5); } #items li div .button.icon-text span { margin-right:10rem; font-size:var(--s); } /*-----------------*/ /*--- P O P U P ---*/ /*-----------------*/ dialog { position: fixed; max-width:38vw; width:100%; margin:auto; padding:25rem; border:none; outline:none; background-color:rgb(var(--surface)); border-radius:10rem; z-index:99; } dialog::backdrop { background:rgba(var(--overlay),0.5); backdrop-filter: blur(3px); z-index:98; } dialog > div { display: none; align-items: center; justify-content: flex-start; flex-wrap: wrap; max-width: 820rem; } dialog div h2 { flex:1 100%; color:rgb(var(--text)); text-align: left; } dialog div h3 { font-size:var(--s); line-height:1.4; } dialog div h3, dialog div p{ padding-top:20rem; } dialog form { flex:1 100%; margin-top:10rem; } dialog form ul { list-style: none; } dialog form ul li { margin-top:20rem } dialog form ul li.sub_option { display: flex; align-items: center; gap:10rem; margin-top:10rem; } dialog form ul li label { display:block; margin-bottom:10rem; font-weight:600; } dialog form ul li sub_option label { width:100%; margin:0; font-size:var(--xs); } dialog form ul li input[type="text"], dialog form ul li input[type="date"], dialog form ul li select, dialog form ul li textarea { width:100%; color:rgb(var(--text)); border:1rem solid rgba(var(--purple-dark), 1); } dialog form ul li textarea { height:200rem; resize:vertical; } dialog form ul li button { width:100%; margin-top:10rem; } dialog form ul li .inf[disabled] { background:url("/img/infinity.svg") 20rem 50% / 24rem no-repeat rgb(var(--grey-125)); } dialog form ul li.single_line { display: flex; align-items: center; justify-content: flex-start; gap:10rem; } dialog form ul li.single_line label { margin-bottom:0; } dialog form ul li.confirm_buttons { display: flex; align-items: center; justify-content: space-between; gap:10rem; } dialog form ul li.confirm_buttons button { flex:1 auto; } dialog div > .close { position: absolute; top:25rem; right:25rem; width:14rem; height:14rem; padding:0; border:none; background:url('/img/close.svg') center center / 14rem 14rem no-repeat transparent; cursor:pointer; }