/* ========================================================= FABRIC SMALL APP SHELL Shared structural shell for Fabric small applications. ========================================================= */ /* ========================= STANDARD THEME TOKENS ========================= */ :root, html[data-theme="light"]{ --font-ui: 'Rubik', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-ui: 'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --footColor: #020202; --font-mono: 'Roboto Mono', monospace; --ease: cubic-bezier(.2,.8,.2,1); --bg: linear-gradient(#f2f5f7, #e8edf1, #dde4ea); --text: rgba(15,18,20,.92); --text-soft: #556668; --text-muted: #7b898b; --muted: rgba(15,18,20,.68); --glass: rgba(255,255,255,.56); --glass-strong: rgba(255,255,255,.74); --glass-soft: rgba(255,255,255,.40); --ink: rgba(0,0,0,.05); --surface: rgba(255, 255, 255, .86); --surface-strong: #ffffff; --surface-soft: rgba(255, 255, 255, .62); --surface-muted: #eef4f3; --border: rgba(0,0,0,.10); --border-soft: rgba(0,0,0,.07); --border-light: rgba(31, 72, 76, .24); --danger: #984b4b; --danger-soft: #f7e8e7; --shadow: 0 18px 45px rgba(36, 58, 60, .14); --shadow-soft: 0 7px 22px rgba(36, 58, 60, .08); --shadow-lg: 0 20px 60px rgba(0,0,0,.16); --shadow-md: 0 14px 40px rgba(0,0,0,.14); --shadow-sm: 0 10px 24px rgba(0,0,0,.10); --btn-bg: rgba(0,0,0,.05); --btn-bg-hover: rgba(0,0,0,.085); --btn-border: rgba(74, 81, 83, 0.12); --btnColor: #828ca5; --btnColorAlt: #afb3bb; --btnLight: #afb7bb; --input-bg: rgba(255,255,255,.76); --input-border: rgba(0,0,0,.10); --input-text: rgba(15,18,20,.92); --placeholder: rgba(15,18,20,.50); --button-bg: #edf4f3; --button-text: #315e64; --overlay: rgba(225, 244, 255, 0.52); --bg-overlay: rgba(232, 242, 243, .55); /* old: --overlay: rgba(255,255,255,.42); */ --loadingPgBg: rgba(62, 65, 64, 0.48); --viewsHoldBg: #e8f2f6c2; --accent: #3d465e; --accent-strong: #5d6b8e; --accent-soft: rgba(52,136,144,.12); --topMenuInt: rgb(244, 245, 242); --panel-bg: var(--glass); --panel-bg-strong: var(--glass-strong); --card-bg: rgba(255,255,255,.58); --topbar-text: rgba(15,18,20,.78); --menu-text: rgba(15,18,20,.88); --modalBG: rgba(255, 255, 255, 0.35); --general-pan-bg: #fffffff0; --mainColor: #828ca5; /* grey */ --invert: #faac18; /* yellow */ --baseColor: rgba(255,255,255,1); /* white */ --baseColor018: rgba(255,255,255,.18); --baseColor060: rgba(255,255,255,.60); --baseColor078: rgba(255,255,255,.78); --footColor: #49515b; --themeFontFam: "Nunito", sans-serif; --subMenuFake: #ece9ec; --matFake: #f7f7f9; --localBdropBg: url('https://go.fabri.cc/images/fabric-portland-lynx-link-manager.jpg'); } /* Dark theme */ html[data-theme="dark"]{ --bg: linear-gradient(#40484f, #41454f, #30373c); --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.72); --glass: rgba(255,255,255,.08); --glass-strong: rgba(255,255,255,.12); --glass-soft: rgba(255,255,255,.05); --ink: rgba(0,0,0,.12); --border: rgba(255,255,255,.18); --border-soft: rgba(255,255,255,.10); --shadow-lg: 0 20px 60px rgba(0,0,0,.35); --shadow-md: 0 14px 40px rgba(0,0,0,.28); --shadow-sm: 0 10px 24px rgba(0,0,0,.18); --btn-bg: rgba(255,255,255,.10); --btn-bg-hover: rgba(255,255,255,.16); --btn-border: rgba(255,255,255,.14); --btnColor: #faac18; /* alt: dc9a32 */ --btnColorAlt: #9682a7; --btnLight: #B0832D; --input-bg: rgba(0,0,0,.18); --input-border: rgba(255,255,255,.18); --input-text: rgba(255,255,255,.92); --placeholder: rgba(255,255,255,.58); --topMenuInt: rgb(244, 245, 242); --overlay: rgba(19, 14, 32, 0.7); --blur: blur(14px) saturate(140%); --accent: #faac18; --accent-strong: #4ca9bf; --accent-soft: rgba(111,184,194,.18); --panel-bg: var(--glass); --panel-bg-strong: var(--glass-strong); --card-bg: rgba(255,255,255,.07); --topbar-text: rgba(255,255,255,.82); --menu-text: rgba(255,255,255,.88); --modalBG: rgba(0, 0, 0, 0.35); --mainColor: #faac18; /* yellow */ --invert: #828ca5; /* grey */ --baseColor: rgba(0,0,0,1); /* black */ --baseColor018: rgba(0,0,0,.18); --baseColor060: rgba(34, 32, 38, 0.55); --baseColor078: rgba(0,0,0,.78); --footColor: #faac18; --themeFontFam: "Nunito", sans-serif; --subMenuFake: #000; --blackVelvet: rgba(23, 25, 41, 0.7); --matFake: #f7f7f9; } /* ========================================================= GLOBAL NORMALIZATION ========================================================= */ *, *::before, *::after { box-sizing: border-box; } body.fabricSmallApp button, body.fabricSmallApp [role="button"], body.fabricSmallApp a, body.fabricSmallApp input, body.fabricSmallApp select, body.fabricSmallApp textarea { pointer-events: auto; } body.fabricSmallApp a { text-decoration:none; color:inherit;} body.fabricSmallApp button { background: var(--btnColor); } body.fabricSmallApp button.alt { background: var(--btnColorAlt); color: #383e44; } body.fabricSmallApp button, body.fabricSmallApp a, body.fabricSmallApp input, body.fabricSmallApp select, body.fabricSmallApp textarea { pointer-events: auto; -webkit-tap-highlight-color: transparent; } body.fabricSmallApp button:focus-visible, body.fabricSmallApp a:focus-visible, body.fabricSmallApp input:focus-visible, body.fabricSmallApp select:focus-visible, body.fabricSmallApp textarea:focus-visible, body.fabricSmallApp [role="button"]:focus-visible { outline: none; box-shadow: none; } body.fabricSmallApp .hideIt { display:none !important; } body.fabricSmallApp .bold { font-weight:700; } /* Disable visible theme jumping during startup. */ html.theme-loading *, html.theme-loading *::before, html.theme-loading *::after { transition: none !important; } html { min-height: 100%; scroll-behavior: smooth; } body.fabricSmallApp { position: relative; padding:0; text-align: left; min-height: 100vh; margin: 0; padding: 0; color: var(--text, #172426); pointer-events: auto; width: calc(100%); overflow-x: hidden; overflow-y: auto; font-family: var(--font-ui); font-weight: 600; background: var(--bg); background-color: var(--page-bg, #edf2f1); background-size:cover; background-position: center 20%; transition: background .3s var(--ease), color .3s var(--ease); } .showLoggedIn, body.loggedIn .hideLoggedIn { display:none; opacity:0; max-width:0; overflow:hidden; pointer-events:none; } .hideLoggedIn, body.loggedIn .showLoggedIn { display:inherit; opacity:1; max-width:none; overflow:initial; pointer-events:all; } body.fabricSmallApp h1, body.fabricSmallApp h2, body.fabricSmallApp h3 { font-family:var(--themeFontFam); font-weight:700; } body.fabricSmallApp input::placeholder, body.fabricSmallApp textarea::placeholder { color: var(--placeholder); } body.fabricSmallApp img, body.fabricSmallApp canvas, body.fabricSmallApp svg { max-width: 100%; } body.fabricSmallApp ul, body.fabricSmallApp li { list-style: none; } /* ========================= LOGO ========================= */ body.fabricSmallApp #logo img { max-width: 190px; } body.fabricSmallApp #logo .lightLogo, html[data-theme="light"] #logo .lightLogo, body.fabricSmallApp .lightTheme, html[data-theme="light"] .lightTheme, html[data-theme="dark"] #logo .darkLogo, html[data-theme="dark"] .darkTheme { display:block; transition: all .3s ease; } body.fabricSmallApp #logo .darkLogo, body.fabricSmallApp .darkTheme, html[data-theme="light"] #logo .darkLogo, html[data-theme="light"] .darkTheme, html[data-theme="dark"] #logo .lightLogo, html[data-theme="dark"] .lightTheme { display:none; transition: all .3s ease; } body.modalOpen .lightLogo { filter: brightness(1.2); } /* ========================= BACKGROUND ========================= */ body.fabricSmallApp #backdrop, body.fabricSmallApp #overlay { position: fixed; inset: 0; transition: all .3s ease; } body.fabricSmallApp #backdrop { padding: 20px; background:var(--localBdropBg); background-size: cover; background-position: center 20%; background-repeat: no-repeat; z-index: 0; } body.fabricSmallApp #overlay { backdrop-filter: blur(6px) saturate(115%); -webkit-backdrop-filter: blur(6px) saturate(115%); background: var(--bg-overlay) !important; z-index: 1; pointer-events: none; } body.viewsAreLoading #overlay { z-index: 9999999; background-color: var(--loadingPgBg) !important; } body.modalOpen #overlay, html[data-theme="light"] body.modalOpen #overlay { backdrop-filter: blur(19px) saturate(115%); filter: brightness(0.6); } html[data-theme="dark"] body.modalOpen #overlay { filter: brightness(0.6); background: rgba(0,0,0,.42); } body.modalOpen #overlay { z-index: 0 !important; } body.fabricSmallApp .holder { position: relative; inset: auto; z-index: 2; width: 100%; min-height: 100svh; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); overflow: visible; } /* ========================= THEME LOADER (during theme switch) ========================= */ #viewsLoader, html[data-theme="light"] #viewsLoader { position: absolute; top: 60px; bottom: 60px; display: flex; justify-content: center; align-items: anchor-center; background: var(--viewsHoldBg); width: 80%; z-index: 1; border-radius: 30px; backdrop-filter: blur(16px); box-shadow: 2px 1px 10px -9px #000; padding: 10px; pointer-events: none; opacity: 0; visibility: hidden; align-self: auto; left: 50%; transform: translate(-50%, 0); } html[data-theme="dark"] #viewsLoader { background: #0009; color:#faac18; } body.viewsAreLoading { max-height:100vh; overflow-y:hidden; } body.viewsAreLoading #viewsLoader { visibility: visible; z-index: 9999999; opacity: 1; pointer-events: all; } .loaderImg { display: flex; flex-direction: column; align-items: center; justify-content: center; } #viewsLoader img { width: 90px; margin: 0 0 10px 0; filter: brightness(0) saturate(100%) invert(54%) sepia(13%) saturate(524%) hue-rotate(185deg) brightness(98%) contrast(93%); animation: loaderChame 1.4s ease-in-out infinite; } @keyframes loaderChame { 0% { filter: brightness(0) saturate(100%) invert(54%) sepia(13%) saturate(524%) hue-rotate(185deg) brightness(98%) contrast(93%); } 20% { filter: brightness(0) saturate(100%) invert(54%) sepia(13%) saturate(524%) hue-rotate(185deg) brightness(98%) contrast(93%); } 25% { filter: brightness(0) saturate(100%) invert(51%) sepia(0%) saturate(2%) hue-rotate(326deg) brightness(101%) contrast(90%); } 30% { filter: brightness(0) saturate(100%) invert(89%) sepia(26%) saturate(6240%) hue-rotate(343deg) brightness(97%) contrast(101%); } 70% { filter: brightness(0) saturate(100%) invert(89%) sepia(26%) saturate(6240%) hue-rotate(343deg) brightness(97%) contrast(101%); } 75% { filter: brightness(0) saturate(100%) invert(51%) sepia(0%) saturate(2%) hue-rotate(326deg) brightness(101%) contrast(90%); } 80% { filter: brightness(0) saturate(100%) invert(54%) sepia(13%) saturate(524%) hue-rotate(185deg) brightness(98%) contrast(93%); } 100% { filter: brightness(0) saturate(100%) invert(54%) sepia(13%) saturate(524%) hue-rotate(185deg) brightness(98%) contrast(93%); } } .viewsLoadTxt { display: inline-flex; gap: 2px; font-weight: 600; letter-spacing: .08em; } .viewsLoadTxt span { display: inline-block; animation: loaderWave 1.1s ease-in-out infinite; } .viewsLoadTxt span:nth-child(1) { animation-delay: 0s; } .viewsLoadTxt span:nth-child(2) { animation-delay: .08s; } .viewsLoadTxt span:nth-child(3) { animation-delay: .16s; } .viewsLoadTxt span:nth-child(4) { animation-delay: .24s; } .viewsLoadTxt span:nth-child(5) { animation-delay: .32s; } .viewsLoadTxt span:nth-child(6) { animation-delay: .40s; } .viewsLoadTxt span:nth-child(7) { animation-delay: .48s; } @keyframes loaderWave { 0%,100% { transform: translateY(0); opacity:.7; } 40% { transform: translateY(-9px); opacity:1; } } html.theme-loading .backMat{ opacity: 1 !important; background: rgba(90, 90, 90, 0.85) !important; /* grey wash */ background-image: none !important; } /* spinner */ html.theme-loading .backMat::after{ content: ""; position: fixed; left: 50%; top: 50%; width: 42px; height: 42px; margin-left: -21px; margin-top: -21px; border-radius: 999px; border: 3px solid rgba(255,255,255,.22); border-top-color: rgba(255,255,255,.92); animation: deskSpin .75s linear infinite; z-index: 9999; pointer-events: none; } @keyframes deskSpin{ to{ transform: rotate(360deg); } } /* ========================================================= BRAND AND TOP CONTROLS ========================================================= */ body.fabricSmallApp #logo { position: fixed !important; top: max(18px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); z-index: 2; margin: 0; } body.fabricSmallApp #logo img { width: auto; max-width: 176px; max-height: 48px; } body.fabricSmallApp #hangbar { position: fixed; display: flex; align-items: center; opacity: 1; top: max(18px, env(safe-area-inset-top)); right: max(22px, env(safe-area-inset-right)); height: 59px; width: min( 760px, calc(100vw - 290px) ); min-height: 54px; padding: 0 18px; box-sizing: border-box; border: 1px solid var(--border, rgba(31, 72, 76, .14)); border-radius: 16px; background: var(--surface-soft, rgba(255, 255, 255, .62)); box-shadow: var(--shadow-soft, 0 7px 22px rgba(36, 58, 60, .08)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 999; transition: all .3s ease; } body.loggedIn #hangbar { top:unset; width:100px; background:none; border:none; box-shadow:none; backdrop-filter:blur(0); -webkit-backdrop-filter: blur(0); } .hangSignIn { position: relative; } #dropSign { position: absolute; top: calc(100% + 10px); right: -75px; width: 190px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; } /* Invisible bridge between link and form */ #dropSign::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } .hangSignIn:hover #dropSign, .hangSignIn:focus-within #dropSign { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } #dropSign.mobile-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .dropSignInt { display: grid; gap: 9px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); } .dropSignInt label { display:none; } .dropSignInt input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel-bg); color: var(--text); font-size: 16px; } .dropSignInt button { border-radius: 6px; width: 80%; margin: 8px 10% 0; } .hideLogHang .emailLogin { font-size:17px; color:#fff; } .quickSignInError { margin: 0; color: #a23f3f; font-size: 12px; } .google { background: #b5ccbc !important; color: #535353 !important; max-width: 50%; margin-left: 25%; } body.loggedIn .hideLogHang { opacity:0; pointer-events:none; } body.loggedIn #hangbar { top:unset; bottom:16px; width: 50px; } #hangbar.hanged { background: #ffffffd1; box-shadow: 1px 2px 10px -10px; backdrop-filter: blur(3px); } body.fabricSmallApp .hideLogHang { display: flex; align-items: center; box-sizing: border-box; font-weight: 600; font-size: 17px; width: calc(100% - 90px); padding: 0; gap: clamp(16px, 3vw, 42px); justify-content: space-evenly; } body.fabricSmallApp .hideLogHang a { position: relative; font-size: 14px; white-space: nowrap; } body.fabricSmallApp .hideLogHang a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: currentColor; transition: right .2s ease; } body.fabricSmallApp .hideLogHang a:hover::after, body.fabricSmallApp .hideLogHang a:focus-visible::after { right: 0; } /* ========================================================= TOP SHELL + LOCAL NAV ========================================================= */ body.fabricSmallApp #topMenu{ position: fixed; top: 8px; right: 10px; z-index: 99; width: 340px; box-shadow:none; height: 35px; max-width: 35px; overflow: hidden; transition: all .3s ease; border-radius: 50px; border: 1px solid var(--border); font-size: 0; } body.fabricSmallApp #topMenu:hover { max-width: 350px; } body.fabricSmallApp #topMenu.openTopMenu { max-width:35px; } body.fabricSmallApp .settingsIcon { cursor:pointer; transform: scale(1.1) translate(-2px,-1px); } body.fabricSmallApp #topMenu:hover .settingsIcon { transform: scale(1.03) translate(-0.3px, 0px); } body.fabricSmallApp .tMinterior { display: flex; gap: 19px; align-items: center; height: 100%; background: #fff0; padding: 0 0 0 12px; border-radius: 20px; font-weight: 400; font-size: 18px; color: var(--topbar-text); width: 343px; position: absolute; right: -16px; transition: all .3s var(--ease); top: 0; justify-content: center; } body.fabricSmallApp #insideTc { border-radius: 30px; background: #fff; height: 29px; border: 0.5px solid #dad9d6; padding: 1.5px 3px; } html[data-theme="classic"] .themeClickBtn, html[data-theme="light"] .themeClickBtn, html[data-theme="dark"] .themeClickBtn { cursor:pointer; background: var(--themeClckBg) !important; color: var(--themeClckClr) !important; border-radius: 50% !important; padding: 0; min-height: 0 !important; width: 22px; height: 22px; transform: translateY(0); } html[data-theme="classic"] .themeClickBtn:hover, html[data-theme="light"] .themeClickBtn:hover, html[data-theme="dark"] .themeClickBtn:hover { background: var(--themeClckBg-hover); color: var(--themeClckClr-hover); transform: translateY(0); } body.fabricSmallApp #topMenu:hover .tMinterior { right: -5px; background: #ffffff8a; } body.fabricSmallApp #question-nav { border: 1.3px solid !important; border-radius: 20px; padding: 0 5px; font-size: 13px; font-weight: 600; } body.fabricSmallApp .tMinterior i { background: #fff; font-size: 16px; border-radius: 50%; border:none !important; box-shadow: none !important; background: none !important; backdrop-filter: none !important; } body.fabricSmallApp .tMinterior .openTMi, html[data-theme="light"] .tMinterior .openTMi { background: #fff !important; } html[data-theme="dark"] .tMinterior .openTMi { background: #313640db !important; } body.fabricSmallApp #topMenu:hover .tMinterior { background: var(--glass); border-color: var(--border-soft); box-shadow: var(--shadow-sm); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } body.fabricSmallApp #question-nav { border: 1px solid currentColor; } body.fabricSmallApp #topMenu { color: var(--text); } body.fabricSmallApp .tMinterior a, body.fabricSmallApp .tMinterior i { color: var(--text-soft); } /* ========================= MOBILE SIGN-IN CLICKER ========================= */ #mobSignClick { position: absolute; right: 80px; font-size: 28px; color: var(--accent-strong); cursor: pointer; } body.modalOpen #mobSignClick, body.modalOpen #menu i { color: var(--modalOpenHL); } /* ========================= SECONDARY MENU ========================= */ .menuLogin:before, .menuLogin:after { content: ''; background: var(--mainColor); } .mainMenu { position: absolute !important; right: 37px; font-size: 0px; bottom: 16px; text-align: center; cursor: pointer; width:50px; color: #89a5a8cf; z-index: 999999; pointer-events: all; display: block; transform-origin:center; filter: none; text-shadow: none; transition: all .2s ease-in-out; } body.loggedIn .mainMenu { position:absolute !important; bottom:3px; right:17px; } #menu.menuOpened .block { background: #9caaa1; } #menuDiv { position: fixed !important; width: calc(100% - 18px); right: -400px; max-width: 260px; top: -100%; bottom:unset; box-sizing: border-box; overflow: hidden; z-index: 999999; transform-origin: top right; pointer-events: all; background: var(--panel-bg-strong); border: 1px solid var(--border); box-shadow: var(--shadow-lg); border-radius: 24px 0 0 24px; transition: all .28s var(--ease); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } .loggedIn #menuDiv { top:unset; bottom:-110%; } html[data-theme="dark"] #menuDiv { box-shadow: -1px 8px #606060; background: var(--blackVelvet); } .menuTextHold, #menu i { display:inline-block; } #menu i { font-size: 25px; color: var(--footColor); text-align: center; } .menuIsOpen { display:none; } .menuIsClosed { opacity:0; pointer-events:none; } .menuTextHold { vertical-align: middle; } .menuTextHold p { font-size: 15px; letter-spacing: 1px; margin: 3px 0 0 0; border-radius: 8px; font-weight: 500; color: var(--text); background: none; padding: 0; } #menu.menuOpened .menuTextHold p { color: #9caaa1; } .menuCircle { width: 71px; height: 71px; background: #fff; position: absolute; z-index: -1; border-radius: 50%; margin: -5px 0 0 -9px; } .menuWrap { padding: 30px 20px; text-align: right; } .menuWrap p { cursor:pointer; font-size: 17px; letter-spacing: 0.8px; padding-bottom: 20px; margin: 13% 0 20px 20%; font-weight: 400; color: var(--menu-text); border-bottom: .5px solid var(--border-soft); } .menuLogin p { border-bottom: none; } .menuLogin p span { background: #ccd9d64d; padding: 7px 15px 6px; border: .5px solid #c5c5c5; border-radius: 11px; box-shadow: inset 1px 3px 6px -5px #0000005c; color: #888; } .menuWrap .noBord { border-bottom: none; } #menu.menuOpened { filter: none; } #menu .block { display: inline-block; width: calc(46% - 2px); padding-top: 46%; background: var(--glass-strong); margin: 2px; box-shadow: var(--shadow-sm); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 10%; } #menu.menuOpened .block { background: var(--accent-soft); } #menuDiv.open { right: 0%; top: 100px; bottom:unset; } .loggedIn #menuDiv.open { top: unset !important; height:unset !important; bottom: 70px; } .mainMenu.animate { animation: bounce .4s ease forwards; } @keyframes bounce { 0% { transform:scale(1); } 30% { transform:scale(1.03); } 60% { transform:scale(.97); } 100% { transform:scale(1); } } #menu.menuOpened .block { background: #9caaa1; } html[data-theme="dark"] .subMenu { background: rgba(23, 25, 41, 0.7); } .subMenu:before, html[data-theme="light"] .subMenu:before { border-top: 15px solid rgba(245, 245, 251, 0.97); border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 0; } html[data-theme="dark"] .subMenu:before { border-top: 15px solid rgba(23, 25, 41, 0.5); } /* ========================= TERTIARY MENU ========================= */ #footNav { position: fixed; display:flex; bottom: 11px; width: 730px; z-index: 99; right: 100px; margin-left: 420px; pointer-events:all; text-align: right; justify-content:space-evenly; } body.loggedIn #footNav { display:none; } #footNav p { display: inline-block; text-align: center; font-weight:500; width: calc(22% - 2px); } #subFoot { position: fixed; bottom: 48px; width: calc(100% - 550px); margin-left: 420px; z-index: 99; opacity:0; pointer-events: none; max-height: 0; overflow: hidden; } #subM-tools { opacity:0 !important; width: 230px; margin: 0 0 0 calc(25% + 10px); padding: 7px 3px; box-sizing: border-box; border-radius: 6px; pointer-events: none; filter: drop-shadow(0px 2px 3px #0000002e); background: rgba(245, 245, 251, 0.97); transition: all .3s var(--ease); border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } #subM-tools.showSub, #subFoot.showSub { opacity:1 !important; pointer-events:all; max-height:400px; } #subFoot.showSub { padding-bottom:15px; } .subMenu:before { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-top: 15px solid white; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 0; } .subMenu p { margin:10px; } .subMenu a { color: var(--btnColor); font-size:14px; text-decoration:none; font-weight: 500; } .subMenu a:hover { color:var(--btnLight); } #mobileSubMenuD { position: absolute; top:0; width: 200px; background: #fff; padding: 10px 20px; border-radius: 10px 0 0 10px; right: -200px; transform-origin: top right; z-index: 99999; border-top: .5px solid #b8b8b8; border-left: .5px solid #b8b8b8; border-bottom: .5px solid #b8b8b8; margin-top: 180px; box-shadow: var(--shadow); transition: all .3s ease; } #mobileSubMenuD.showSubMenu { right: 250px; } /* ========================= COPYRIGHT ========================= */ .copyrightMat { position: fixed; bottom: -2px; left: 17px; font-size: 14px; font-weight: 400; color: #fff; text-align: left; z-index: 99; pointer-events:all; } .copyrightMat a { color: #fff; text-decoration:none; font-weight:600; } /* ========================= MODALS ========================= */ body.modalOpen { position:fixed; inset:0; overflow:hidden; } .modalBackdrop { position: fixed; inset: 0; z-index: 9998; opacity: 0; visibility: hidden; pointer-events: none; background: rgba(8, 18, 20, .34); backdrop-filter: blur(4px); } body.modalOpen .modalBackdrop { opacity: 1; visibility: visible; pointer-events: auto; } #goAboutMat, #goContactMat, #userProfileMat { position: fixed; height: 430px; width: min(720px, calc(100vw - 40px)); top: calc(50% - 290px); left: calc(50% - 325px); max-width: 650px; max-height: calc(100vh - 80px); margin: 75px auto 0; overflow-y: auto; padding: 28px 28px 24px; box-sizing: border-box; border-radius: 14px; background: #fffffff0; background: var(--general-pan-bg); border: 1px solid var(--border); box-shadow: var(--shadow-lg); z-index: 10000; transition: .3s ease; pointer-events: none; } .modalOpen #goAboutMat, .modalOpen #goContactMat { z-index:999999999; opacity:1; pointer-events:all; } .appContainer, .builderMain, .displayBlock, #view-help, #view-brands, #view-two .pageInt { background: var(--panel-bg); border: 1px solid var(--border); box-shadow: var(--shadow-md); color: var(--text); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } .appModal { position: fixed; top: 50%; left: 50%; width: min(760px, calc(100vw - 40px)); max-height: min(820px, calc(100svh - 40px)); padding: 0; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); color: var(--text); box-shadow: 0 28px 90px rgba(17, 34, 37, .28); opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden; transform: translate(0,0) scale(.97); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); z-index: 99999999999; } .appModal.is-open { opacity: 1; visibility: visible; pointer-events: auto !important; z-index: 99999999999 !important; transform: scale(1); } #appPrefMat { position:fixed; transform: translate(-50%, -50%); } .littleLogo { width: 95px; margin: 0 0 3px -5px; filter: grayscale(.5); text-align: left; } .littleLogo img { max-width: 150px; width:100%; } /* --------------------------------------------------------- ABOUT MODAL --------------------------------------------------------- */ .aboutModalInner { display: flex; flex-direction: column; gap: 18px; text-align: left; } .aboutEyebrow { margin: 0; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); font-weight: 700; } .matHeader { font-size: clamp(26px, 3.3vw, 42px); text-align:right; font-weight: 500; color: var(--accent); color: var(--accent); margin-top: 30px 0; } .matP { position: static; transform: none; padding: 30px; margin: 0; font-weight: 300; line-height: 24px; font-size: 18px; text-align: right; color: var(--muted); } .aboutLead { max-width: 62ch; } .aboutPoints { display: grid; grid-template-columns: 1fr; gap: 14px; } .aboutPoint { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 14px 16px; border-radius: 16px; background: var(--glass-soft); border: 1px solid var(--border-soft); } .aboutPoint i { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--glass-strong); color: var(--accent); font-size: 17px; } .aboutPoint h3 { margin: 2px 0 6px; font-size: 16px; color: var(--text); font-family: var(--font-ui); font-weight: 700; } .aboutPoint p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); font-weight: 400; } .aboutActions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; } .aboutActions a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--text); font-weight: 600; transition: transform .12s var(--ease), background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease); } .aboutActions a:hover { transform: translateY(-1px); background: var(--btn-bg-hover); border-color: var(--border); } .y-span { letter-spacing:-1px; } .y-span:after { content:''; position: absolute; width: 16px; height: 13px; margin-left: -15px; margin-top: 1px; background: var(--subMenuFake); } .matP .y-span:after { width: 12px; height: 13px; margin-left: -9px; margin-top: -3px; background: var(--matFake); } .matHeader .y-span:after { background: var(--matFake); margin-left: -18px; width: 19px; margin-top: 6px; } #goContactMat .matP { bottom: 100px; } .conLinks { margin-top: 40px; } .conLinks a { background: #dee9e3; padding: 4px 7px; margin-left: 6px; border-radius: 3px; } .greenButton { margin-top:35px; } .greenButton a { border: 1px solid #c3d7d4; padding: 5px 10px; border-radius: 9px; background: #7c8f92; font-weight: 400; color: #fff; letter-spacing: .3px; margin-left: 9px; } .greenButton a:hover, .conLinks a:hover { background: var(--btnColor) !important; } /* --------------------------------------------------------- PREFERENCES MODAL --------------------------------------------------------- */ .appPreferencesModal { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; } .appModalHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 30px 32px 24px; border-bottom: 1px solid var(--border); background: linear-gradient( 135deg, color-mix( in srgb, var(--surface) 92%, var(--accent) 8% ), var(--surface) ); } .appModalEyebrow, .prefSectionEyebrow, .builderEyebrow { margin: 0 0 5px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .builderIntro { display:none; } .prefSection { display: grid; gap: 18px; padding: 28px 32px; border-bottom: 1px solid var(--border); } .prefSection:last-child { border-bottom: 0; } .prefSectionHeading { display: grid; grid-template-columns: minmax(180px, .75fr) minmax(220px, 1fr); gap: 30px; align-items: start; } .prefSectionHeading h2 { margin: 0; font-family: "Roboto Slab", serif; font-size: 23px; font-weight: 350; } .prefSectionHeading > p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 450; line-height: 1.55; } .themeCardGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .themeCard { position: relative; display: grid; gap: 12px; min-width: 0; min-height: 185px; margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: 17px; background: color-mix( in srgb, var(--surface) 93%, transparent ) !important; color: var(--text); text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease; } .themeCard:hover { transform: translateY(-2px); border-color: color-mix( in srgb, var(--accent) 48%, var(--border) ); box-shadow: 0 10px 24px rgba(20, 43, 47, .10); } .themeCard.is-selected, .themeCard[aria-checked="true"] { border-color: var(--accent); background: color-mix( in srgb, var(--surface) 88%, var(--accent) 12% ) !important; box-shadow: 0 0 0 2px color-mix( in srgb, var(--accent) 20%, transparent ); } .themePreview { position: relative; display: block; height: 94px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .12); border-radius: 12px; } .themePreviewBar { position: absolute; top: 10px; left: 10px; right: 10px; height: 12px; border-radius: 999px; } .themePreviewPanel { position: absolute; top: 31px; right: 10px; bottom: 10px; left: 10px; border-radius: 8px; } .themePreviewAccent { position: absolute; right: 19px; bottom: 19px; width: 30%; height: 11px; border-radius: 999px; } .themePreview--light { background: #edf3f2; } .themePreview--light .themePreviewBar { background: #d2dedd; } .themePreview--light .themePreviewPanel { background: #fff; } .themePreview--light .themePreviewAccent { background: #4a9299; } .themePreview--dark { border-color: rgba(255, 255, 255, .1); background: #12191b; } .themePreview--dark .themePreviewBar { background: #344145; } .themePreview--dark .themePreviewPanel { background: #202b2e; } .themePreview--dark .themePreviewAccent { background: #80c4cc; } .themePreview--classic { background: #dfeceb; } .themePreview--classic .themePreviewBar { background: #b6cbc5; } .themePreview--classic .themePreviewPanel { background: #f8f4df; } .themePreview--classic .themePreviewAccent { background: #4f8f93; } .themeCardText { display: grid; gap: 3px; } .themeCardText strong { font-size: 15px; } .themeCardText small { color: var(--muted); font-size: 11px; font-weight: 450; line-height: 1.4; } .themeCardCheck { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--accent); color: #fff; opacity: 0; transform: scale(.75); transition: opacity .18s ease, transform .18s ease; } .themeCard.is-selected .themeCardCheck, .themeCard[aria-checked="true"] .themeCardCheck { opacity: 1; transform: scale(1); } .prefToggleCard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 15px; align-items: center; padding: 17px; border: 1px solid var(--border); border-radius: 16px; background: color-mix( in srgb, var(--surface) 94%, transparent ); cursor: pointer; } .prefToggleCard:hover { border-color: color-mix( in srgb, var(--accent) 42%, var(--border) ); } .prefToggleIcon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix( in srgb, var(--accent) 13%, transparent ); color: var(--accent); font-size: 18px; } .prefToggleCopy { display: grid; gap: 4px; } .prefToggleCopy strong { font-size: 14px; } .prefToggleCopy small { color: var(--muted); font-size: 12px; font-weight: 450; line-height: 1.45; } .switchControl { position: relative; display: inline-flex; } .switchControl input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .switchTrack { position: relative; display: block; width: 48px; height: 28px; border: 1px solid var(--border); border-radius: 999px; background: color-mix( in srgb, var(--muted) 15%, var(--surface) ); transition: background-color .2s ease, border-color .2s ease; } .switchThumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .22); transition: transform .2s ease; } .switchControl input:checked + .switchTrack { border-color: var(--accent); background: var(--accent); } .switchControl input:checked + .switchTrack .switchThumb { transform: translateX(20px); } .switchControl input:focus-visible + .switchTrack { box-shadow: 0 0 0 3px color-mix( in srgb, var(--accent) 25%, transparent ); } /* --------------------------------------------------------- ACCOUNT SECTION --------------------------------------------------------- */ .accountStatusCard { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 18px; border-radius: 18px; margin-bottom: 18px; border: 1px solid rgba(0,0,0,0.08); background: rgba(255,255,255,0.65); } html[data-theme="dark"] .accountStatusCard { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); } .accountEyebrow { margin: 0 0 6px; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; } .accountStatusCard h3 { margin: 0 0 6px; } .accountStatusCard p { margin: 0 0 6px; } .accountStatusActions { display: flex; flex-wrap: wrap; gap: 10px; } .planNotice { display: none; margin-top: 16px; padding: 14px; border-radius: 14px; background: rgba(255, 213, 79, 0.16); border: 1px solid rgba(255, 213, 79, 0.35); } .planNotice.showPlanNotice, body.squidlyFree .planNotice { display: block; } .profileAccountLinks, .accountQuickLinks { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .profileAccountLinks a, .accountQuickLinks a { text-decoration: none; } .profileAccountLinks a, .accountQuickLinks a, .aboutActions a { background: var(--button-bg); color: var(--button-text); border: 1px solid var(--border); } .accountPrefSection { background: color-mix( in srgb, var(--surface) 92%, var(--accent) 8% ); } .accountQuickLinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .accountQuickLinks a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 54px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 13px; background: color-mix( in srgb, var(--surface) 92%, transparent ); color: var(--text); text-decoration: none; font-size: 12px; font-weight: 600; } .accountQuickLinks a span { display: inline-flex; align-items: center; gap: 8px; } .accountQuickLinks a > i { color: var(--muted); font-size: 10px; } .accountQuickLinks a:hover { border-color: var(--accent); color: var(--accent); } .prefCancelBtn { display:none; border: 1px solid var(--border); background: transparent !important; color: var(--text); } .prefSaveBtn { border: 1px solid transparent; background: var(--accent) !important; color: #fff; } /* --------------------------------------------------------- MODAL CLOSING AND CLEANUP --------------------------------------------------------- */ .appModalFooter { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 32px; border-top: 1px solid var(--border); background: color-mix( in srgb, var(--surface) 96%, transparent ); box-shadow: 0 -10px 25px rgba(25, 47, 50, .06); } .appModalFooter button { min-height: 43px; margin: 0; padding: 0 17px; border-radius: 11px; cursor: pointer; } .appModalHeader .matHeader { margin: 0; font-family: "Roboto Slab", serif; font-size: clamp(30px, 5vw, 42px); font-weight: 300; line-height: 1.05; } .appModalIntro { max-width: 52ch; margin: 10px 0 0; color: var(--muted); font-size: 14px; font-weight: 450; line-height: 1.6; } .modalClose, .greenButton a, #closeAlert span { border: 1px solid var(--btn-border); background: var(--accent-strong); color: var(--baseColor); transition: transform .12s var(--ease), background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease); } #closeAlert span { border-radius: 14px; padding: 6px 15px 7px; } .appModalHeader .modalClose { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; min-height: 40px; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: color-mix( in srgb, var(--surface) 85%, transparent ) !important; color: var(--text); font-size: 27px; font-weight: 300; line-height: 1; cursor: pointer; } .appModalHeader .modalClose:hover { background: color-mix( in srgb, var(--surface) 75%, var(--accent) 25% ) !important; } .appModalBody { display: grid; gap: 0; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; } .modalClose { position: absolute; line-height: 0px; color: #fff; padding: 18.5px 27.5px 21.5px 12px; top: 12px; right: 14px; width: 34px; border: none; border-radius: 50% !important; background: #ffffffd9; color: #5c6a70; font-size: 26px; text-align: center; cursor: pointer; pointer-events: auto; } .modalClose:hover { background: #118091; color: #fff; } .modalClose { background: var(--glass-strong); color: var(--baseColor); border-radius: 50%; } .modalClose, .closeLogin.authCloser { background: var(--surface-strong) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } .closeLogin.authCloser { position: absolute; top: 16px; right: 18px; width: 34px; height: 34px; border-radius: 50%; line-height: 31px; font-size: 28px; text-align: center; cursor: pointer; transform: rotate(45deg); background: rgba(255,255,255,.65); border: 1px solid rgba(0,0,0,.08); } .authCloser { position: absolute; right: -8px; font-size: 34px; background: #fff; border-radius: 50%; width: 34px; line-height: 28px; text-align: center; height: 34px; transform: rotate(45deg); font-weight: 400; color: var(--mainColor); top: -8px; cursor:pointer; } .matHeader, .aboutModalInner h1, .aboutModalInner h3 { color: var(--text) !important; } .matP, .aboutLead, .aboutPoint p, .profileInner, .prefGroup { color: var(--text-soft) !important; } .bottomLinks { display: flex; gap: 30px; justify-content: space-evenly; } /* ========================= INSIDE APP ========================= */ #view-three { overflow-y: scroll; border-radius: 11px; margin-right: 6px; min-height: 350px; padding: 0 10px 10px 3px; } #view-help { display: none; flex-direction: column; gap: 18px; padding: 25px 28px 22px; margin-right: 6px; background: #ffffff91; border-radius: 13px; overflow: hidden; } #view-help.is-active { display: flex; } .pageInt { display:flex; padding: 10px; overflow-y: scroll; } #view-two .pageInt { background: #fff9; margin-right: 7px; border-radius: 20px; box-shadow: 2px 2px 10px #00000017; } /* ========================================================= HELP SECTION ========================================================= */ .hIwSlide { position:relative; min-height: 320px; text-align: left; display: flex; flex-direction: column; flex: 0 0 20%; justify-content: flex-start; gap: 14px; width: 20%; border-radius: 10px; margin-right: 3px; padding: 26px; box-sizing: border-box; height: calc(100% - 4px); float: left; background: var(--surface-strong) !important; color: var(--text) !important; } .hIwSlide h3 { margin: 30 0 0; line-height: 1.15; display: flex; align-items: center; gap: 11px; color: var(--text); font-size: clamp(22px, 3vw, 29px); font-weight: 320; } .helpCardInner { position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 410px; height: 100%; padding: 5px; text-align: left; } .helpCardTop { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .helpCardTop i { padding: 3px 30px 3px 10px; height: 40px; line-height: 32px; } .hIwNum { display: inline-grid; place-items: center; border-radius: 50%; flex: 0 0 auto; margin-right: 12px; padding: 2px 6px; width: 31px; height: 31px; background: color-mix( in srgb, var(--accent) 14%, var(--surface) ); border: 1px solid color-mix( in srgb, var(--accent) 30%, var(--border) ); color: var(--accent); font-family: var(--font-ui); font-size: 12px; font-weight: 800; } .hIwSlide p { position: static; margin: 0; font-size: 14px; font-weight: 300; color: var(--text-soft); text-align: right; position: absolute; bottom: 20px; right: 20px; width: calc(100% - 40px); line-height: 20px; } .hIwSlide h3, .helpEyebrow { color: var(--accent-strong); } .helpFeatureIcon { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix( in srgb, var(--accent) 11%, transparent ); color: var(--accent); font-size: 18px; } .hIwSlide .helpDescription { position: static; width: auto; max-width: 52ch; margin: 0; color: var(--muted); font-size: 14px; font-weight: 450; line-height: 1.65; text-align: left; } .helpEyebrow { margin: 0 0 7px; color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; } .helpInputLong, .helpInputShort, .helpSlug, .helpPill, .helpListItem { background: var(--surface-muted) !important; border: 1px solid var(--border); color: var(--text-soft); } .helpSlug, .helpPill { padding: 10px 14px; border-radius: 999px; background: rgba(0,0,0,.08); font-size: 12px; font-weight: 600; letter-spacing: .03em; } .helpListItem { width: 100%; height: 42px; border-radius: 10px; background: rgba(0,0,0,.08); } .helpListItem.short { width: 72%; } .helpInputLong, .helpInputShort { height: 44px; border-radius: 10px; background: rgba(0,0,0,.08); } .helpInputLong { width: 62%; } .helpInputShort { width: 32%; } .helpArrow { width: 18px; height: 18px; border-right: 2px solid #111; border-bottom: 2px solid #111; transform: rotate(-45deg); border-color: var(--text) !important; } /* --------------------------------------------------------- HELP TIP --------------------------------------------------------- */ .hIwSlide .helpTip { display: flex; align-items: flex-start; gap: 8px; position: static; width: auto; margin: 0; padding: 9px 11px; border-radius: 10px; background: color-mix( in srgb, var(--accent) 7%, transparent ); color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.45; } .helpTip i { flex: 0 0 auto; margin-top: 2px; color: var(--accent); } /* --------------------------------------------------------- SLIDER CONTROLS --------------------------------------------------------- */ .helpSliderFooter { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-top: 15px; } .sliderControl { position: absolute; display: grid; place-items: center; width: 38px; height: 38px; margin: 0; padding: 0; font-size: 51px; font-weight: 300; border: 1px solid var(--border); border-radius: 50%; background: color-mix( in srgb, var(--surface) 90%, transparent ); box-shadow: var(--shadow-sm); z-index: 5; color: var(--text); cursor: pointer; line-height: 48px; opacity: 0.6; transition: transform .17s ease, background-color .17s ease, opacity .17s ease; } .sliderControl:hover:not(:disabled) { transform: translateY(-1px); background: color-mix( in srgb, var(--surface) 84%, var(--accent) 16% ); color: var(--accent); } .sliderControl:disabled { cursor: default; opacity: .28; } .sliderControl i { font-size: 11px; } .sliderControl:hover { transform: scale(1.02); opacity:1; } .sliderControl p { margin: 0; } .helpProgress { display: flex; justify-content: center; gap: 7px; } .helpDot { width: 10px; height: 10px padding: 0; min-width: 10px; box-shadow: none; border: 0; border-radius: 999px; background: var(--muted); background: rgba(127,127,127,.35) !important; opacity: .25; cursor: pointer; transition: width .2s ease, opacity .2s ease, background-color .2s ease; } .helpDot.is-active { width: 24px; transform: scale(1.15); background: var(--accent); opacity: 1; } .helpViewHeader { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 4px 20px; } .helpViewEyebrow { margin: 0; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; } #view-help .helpViewHeader h2 { margin: 0; font-family: "Roboto Slab", serif; font-size: 28px; font-weight: 300; line-height: 1.1; letter-spacing: .5px; } .helpViewIntro { max-width: 270px; margin: 0; color: var(--muted); font-size: 12px; font-weight: 450; line-height: 1.45; text-align: right; } .helpViewHeader > div { display: grid; gap: 3px; } .helpHeader { text-align: left; } .helpIntro { margin: 10px 20px 0; max-width: 760px; font-size: 15px; line-height: 1.6; color: var(--muted); } .helpSliderWrap { position: relative; padding: 0 54px; } #questSlider { position: relative; overflow-x: hidden; overflow-y: scroll; width: 100%; height: 300px; border: 1px solid var(--border); border-radius: 22px; background: color-mix( in srgb, var(--surface) 94%, transparent ); box-shadow: 0 16px 40px rgba(18, 39, 42, .08); } #qSlideInner { display: flex; position: absolute; width: 500%; height: 100%; transition: all 0.4s cubic-bezier(.2, .75, .25, 1); } .slideIcon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 22px; background: var(--glass-strong); border: 1px solid var(--border); color: var(--accent); box-shadow: var(--shadow-sm); } .highLight { background: var(--glass-strong); border: 1px solid var(--border); color: var(--text); padding: 2px 7px; border-radius: 999px; } #prev { left: 10px; top: calc(50% - 10px); } #next { right: 10px; left: unset; top: calc(50% - 10px); } .helpFooter { display: flex; flex-direction: column; align-items: center; gap: 12px; } .helpDots { display: flex; align-items: center; gap: 10px; } .questCap { font-weight: 400; font-size: 10px; margin: 10px 0 0; line-height: 1.4; color: var(--muted); text-align: center; max-width: 680px; } .mDash { display: inline-block; width: 9px; height: 1px; background: #000; transform: translateY(-3px); margin: 0 1.5px; } /* ============================================= LOGGED-OUT MARKETING SHELL ============================================= */ #logoutWelcome { position: absolute; top: 10px; width: 100%; text-align: center; left:0; color: var(--accent); font-size: 27px; font-weight: bold; font-family: var(--font-ui); transition: all .3s var(--ease); opacity:1; pointer-events:all; z-index:99; overflow:hidden; text-shadow: 0 0 20px rgb(247, 244, 241); } #logoutWelcome section { max-width:970px; margin:50px auto; } #logoutWelcome.loggedIn { opacity:0; pointer-events: none; } #logoutWelcome.shrinkWelc { max-height:0px; padding:0; } #logoutWelcome h1 { margin: 0 auto 22px; text-shadow: 1px 1px #d0d0d0, -.7px -.7px #f6f4f98c; } #logoutWelcome p { color: var(--muted); font-weight:500; font-size: 16.5px; display: inline-block; } #logoutWelcome .button { display: inline-block; } #logoutWelcome .button p { cursor:pointer; display: inline-block; font-size: 21px; color: var(--text); background: var(--glass-strong); border: 1px solid var(--border); border-radius: 22px; padding: 4px 13px; box-shadow: var(--shadow-sm); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transition: transform .12s var(--ease), background .12s var(--ease); } #logoutWelcome .button p:hover { transform: translateY(-1px); background: var(--btn-bg-hover); } body.fabricSmallApp .marketingShell { position: relative; z-index: 50; width: min(1180px, calc(100vw - 44px)); margin: 92px auto 40px; padding: 0 0 70px; display: grid; gap: 18px; text-align: left; inset: auto; overflow: visible; opacity: 1; pointer-events:all; } .marketingHero, .marketingBenefits, .marketingPlans, .marketingAuth { border-radius: 24px; background: var(--panel-bg-strong); border: 1px solid var(--border); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } #marketingAuth { position: fixed; z-index: 9999; left: calc(-100% - 100px); padding: 50px 100px; gap:100px; margin: 50vh 0 0 50vw; transform: translate(-50%, -50%); width: calc(100% - 60px); transition: all .3s ease; box-sizing: border-box; background: none; max-width: 1150px; } .loggedIn #marketingAuth { display:none; } .modalOpen .marketingShell, .modalOpen .marketingAuth, .modalOpen #appShell { filter: brightness(0.6) blur(5px); } #marketingAuth.slideAuth { left:0; } .loggedIn #marketingAuth.slideAuth { left: calc(-100% - 100px); } body.fabricSmallApp .marketingHero { display: grid; align-items: center; padding: 34px; gap: clamp(28px, 5vw, 70px); grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); min-height: 480px; } .marketingEyebrow { margin: 0 0 10px !important; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); padding: 1px 9px; border-radius: 7px; border: .5px solid var(--accent); box-shadow: inset 1px 1.5px 2px -2px #0000007a; } .marketingHeroCopy h1 { margin: 0 0 14px; font-size: clamp(38px, 6vw, 66px); line-height: .96; color: var(--text); max-width: 11ch; } .marketingLead { margin: 0; max-width: 52ch; font-size: 17px; line-height: 1.7; color: var(--muted); font-weight: 400; } .marketingHeroActions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } .marketingBtn { min-height: 46px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--btn-border); font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: transform .12s var(--ease), background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease); } .marketingBtn:hover { transform: translateY(-1px); } .marketingBtn--primary { background: var(--accent-strong); color: var(--baseColor); } .marketingBtn--secondary { background: var(--btn-bg); color: var(--text); } .marketingMiniPoints { display: flex; flex-wrap: wrap; gap: 10px; justify-content: end; margin: 38px 0 0 40px; } .marketingMiniPoints span { padding: 6px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--glass-soft); border: 1px solid var(--border-soft); color: var(--muted); } .marketingBenefits { margin: 80px 4px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; overflow: hidden; } .marketingBenefit { padding: 24px; border-right: 1px solid var(--border-soft); } .marketingBenefit:last-child { border-right: none; } .marketingBenefit i { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--glass-soft); border: 1px solid var(--border-soft); color: var(--accent); margin: 0 auto 27px; } .marketingBenefit h3 { margin: 0 0 8px; font-size: 20px; color: var(--text); } .marketingBenefit p { margin: 0; font-size: 14px; line-height: 1.65; font-weight: 400; color: var(--muted); } body.fabricSmallApp .marketingPlans { display: grid; padding: 26px; gap: 24px; } body.fabricSmallApp .marketingPlanGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .marketingPlanCard { padding: 22px; border-radius: 20px; background: var(--glass-soft); border: 1px solid var(--border); } .marketingPlanCard.is-featured { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent); } .marketingPlanLabel { margin: 0 0 20px; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); padding: 3px 8px; border-radius: 5px; border: 1px solid; } .marketingPlanCard h3 { margin: 0 0 8px; font-size: 36px; color: var(--text); } .marketingPlanSub { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--muted); font-weight: 400; } .marketingPlanCard ul { margin: 0 0 18px; padding-left: 18px; } .marketingPlanCard li { margin-bottom: 8px; font-size: 14px; line-height: 1.5; color: var(--text); font-weight: 500; } body.fabricSmallApp .marketingAuth { position: relative; width: min(900px, calc(100% - 40px)); margin: 100px auto 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr); gap: 20px; padding: 26px; align-items: start; border: .5px solid rgba(0,0,0,.10); } .marketingAuthCopy { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: end; } .marketingAuthCopy h2 { margin: 0 0 10px; font-size: 34px; color: var(--text); } .marketingAuthCopy p { margin: 0; max-width: 52ch; font-size: 15px; line-height: 1.7; color: var(--muted); font-weight: 400; } .marketingAuthCopy .closeLogin { padding: 3px 10px; background: #fff; margin: 20px 10px 0 0; font-size: 16px; font-weight: 500; border-radius: 10px; border: .5px solid var(--accent); box-shadow: inset 1px 2px 4px -3px var(--btnColor); opacity: .6; transition: all .3s ease; } .marketingAuthCopy .closeLogin:hover { opacity:1; } .marketingAuthPanel { max-width:440px; box-sizing:border-box; padding: 22px; border-radius: 20px; background: var(--glass-soft); border: 1px solid var(--border-soft); } .marketingAuthPanel h3 { font-size: 17px; color: var(--text); font-weight: 100; text-align: right; margin: 0 12px -7px 0; } .marketingAuthPanel .login-wrapper { display: grid; gap: 8px; margin: 23px 5px 0; } .twoBtns { display: flex; margin: 2px 0; } .marketingAuthPanel .login-wrapper input, .marketingAuthPanel .login-wrapper button { width: 100%; box-sizing: border-box; padding: 0 16px; font-size: .85em; } .login-wrapper input { margin: 4px auto; height: 45px; } .marketingAuthPanel .clearer { margin: 1px auto; } .marketingAuthPanel { background: rgba(255,255,255,.42); border: 1px solid rgba(0,0,0,.08); } .marketingAuth .twoBtns { display: flex; gap: 33px; padding: 0 25px; } .marketingAuth .twoBtns button { flex: 1 1 50%; } .marketingPlansIntro h2, .lynxUseCases .marketingPlansIntro h2, .marketingAuthCopy h2 { font-family: "Roboto Slab", serif; font-weight: 300; letter-spacing: .3px; } .marketingPlansIntro h2 { margin: 0 0 8px; font-size: 34px; color: var(--text); } .marketingPlansIntro p { margin: 0 0 18px; max-width: 60ch; font-size: 15px; line-height: 1.65; font-weight: 400; color: var(--muted); } .marketingPlanCard, .lynxUseCase { background: rgba(255,255,255,.45); border: 1px solid rgba(0,0,0,.08); } .marketingPlanCard.is-featured { box-shadow: 0 0 0 1px rgba(0,0,0,.10); } .marketingHeroCopy h1 { max-width: 90%; font-size: clamp(28px, 4.2vw, 41px); line-height: 1.12; letter-spacing: -1px; } .marketingLead { max-width: 56ch; font-size: 17px; line-height: 1.72; } .marketingMiniPoints span { background: rgba(255,255,255,.58); color: #222; border: 1px solid rgba(0,0,0,.08); } .marketingBtn--primary { background: #111 !important; color: #fff !important; } .marketingBtn--secondary { background: rgba(255,255,255,.5) !important; color: #111 !important; border: 1px solid rgba(0,0,0,.12); } .marketingBtn--secondary:hover, .marketingBtn--primary:hover { transform: translateY(-1px); } body.fabricSmallApp .marketingHeroCopy, body.fabricSmallApp .marketingHeroArt { min-width: 0; } body.fabricSmallApp .marketingHeroCopy h1 { margin-top: 0; text-wrap: balance; } body.fabricSmallApp .marketingHeroActions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-evenly; } body.fabricSmallApp .marketingHeroActions button { margin: 0; } body.fabricSmallApp .marketingBenefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } /* --------------------------------------------------------- CLEANUP --------------------------------------------------------- */ .marketingHero, .marketingBenefits, .marketingPlans, .lynxUseCases, .marketingAuth, .marketingPlanCard, .marketingBenefit, .lynxUseCase, .marketingAuthPanel, .lynxHeroRow, .lynxHeroQr, .lynxHeroPills span { background-color: var(--surface-soft) !important; color: var(--text) !important; border-color: var(--border) !important; } .marketingLead, .marketingPlanSub, .marketingBenefit p, .lynxUseCase p, .marketingPlansIntro p, .marketingAuthCopy p { color: var(--text-soft) !important; } .marketingHeroCopy h1, .marketingPlansIntro h2, .marketingAuthCopy h2, .marketingBenefit h3, .lynxUseCase h3, .marketingPlanCard h3 { color: var(--text) !important; } .marketingMiniPoints span, .marketingPlanLabel, .marketingEyebrow { color: var(--accent-strong) !important; background: var(--accent-soft) !important; border-color: var(--border) !important; } .marketingHero, .marketingBenefits, .marketingPlans, .lynxUseCases, .marketingAuth { background: rgba(255,255,255,.58); border: 1px solid rgba(0,0,0,.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ========================================================= LOGGED-IN APPLICATION FRAME ========================================================= */ body.fabricSmallApp .appShell { display:none; position: relative; grid-template-columns: minmax(0, 1fr) 160px; gap: 12px; width: min(1120px, calc(100vw - 80px)); margin: 64px auto 30px; } body.loggedIn .appShell { display:grid; } body.fabricSmallApp #container { position: relative; display:none; min-height:0; } body.loggedIn #container { display:block; min-height:500px; max-height:calc(100vh - 180px); max-width: 580px; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; pointer-events: all; background:none !important; border:none !important; box-shadow:none !important; } body.fabricSmallApp #container, body.fabricSmallApp #container.signed, body.fabricSmallApp #container.pagePre { grid-column: 1; grid-row: 1; width: 100%; max-width: none; min-width: 0; max-height: none; margin: 0; padding: 0; overflow: visible; opacity: 1; pointer-events: auto; } body.fabricSmallApp .appViews, body.fabricSmallApp .appView { width: 100%; min-width: 0; } body.fabricSmallApp .appView.is-active { display: block; padding: 14px 13px 14px 13px !important; } body.fabricSmallApp .appSideNav { position: sticky; top: 90px; left: auto; grid-column: 2; grid-row: 1; display: flex; align-self: start; flex-direction: column; gap: 3px; width: 160px; max-height: calc(100svh - 120px); margin: 0; overflow-y: auto; filter: none; z-index: 1; } #sideBtnHelp { text-align: center; padding: 14px 21px 14px 0; } #sideBtnHelp span { border: 2px solid; padding: 4px 9px; border-radius: 50%; font-weight: 600; font-size: 18px; opacity: .6; } body.fabricSmallApp .sideNavBtn { letter-spacing:.8px; font-size:15px; font-family: var(--font-ui); font-weight: 500; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--text-soft) !important; box-shadow: var(--shadow-soft); width: 100%; min-height: 48px; margin: 0; opacity:0; border-radius: 12px; text-align: left; padding: 14px 13px 14px 20px; cursor: pointer; } .sideNavBtn:hover { padding-left: 24px; font-weight: 600; font-size: 15.5px; } body.fabricSmallApp .sideNavBtn.is-active { text-align:center; font-size: 16px; padding: 14px 13px 14px 13px; text-align: left; } .sideNavBtn:hover, .sideNavBtn.is-active { background: var(--surface-strong) !important; color: var(--accent-strong) !important; border-color: var(--border-light) !important; transform: translateX(-2px); } body.loggedIn .sideNavBtn { opacity:1; pointer-events:all; } body.fabricSmallApp .hiddenSideNav { max-width: 0; overflow: hidden; padding: 14px 0 14px 0 !important; border-width: 0px !important; box-shadow: none; } .showNavBtn, .showNavBtn { max-width:200px; padding: 14px 13px 14px 20px !important; border-width:1px; box-shadow: 0 2px 6px rgba(0,0,0,.08); } body.fabricSmallApp #footnavShad { position: fixed; bottom: 0; left: 0; width: 100%; height: 70px; background: linear-gradient(#0000 10%, #000 220%); z-index: 99; } /* Tool surfaces */ body.fabricSmallApp .appSurface { width: 100%; min-width: 0; margin: 0; padding: clamp(18px, 3vw, 30px); border: 1px solid var(--border, rgba(31, 72, 76, .14)); border-radius: 22px; background: var(--surface, rgba(255, 255, 255, .86)); box-shadow: var(--shadow, 0 18px 45px rgba(36, 58, 60, .14)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* Controls */ body.fabricSmallApp button { min-height: 31px; } /* ========================================================= APP VIEWS + FORMS ========================================================= */ body.fabricSmallApp .appView { display: none; opacity: 0; pointer-events: none; transition: opacity .2s ease; } body.fabricSmallApp .appView.is-active { display: block; opacity: 1; pointer-events: auto; } body.fabricSmallApp .appView, body.fabricSmallApp .pageInt { box-sizing:border-box; } .builderHeader h2, #view-help h2 span { background: var(--glass-strong); color: var(--text); border-radius: 12px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-soft); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } body.fabricSmallApp .appView h2, body.fabricSmallApp .builderHeader h2 { color: var(--text); } body.fabricSmallApp .appViews h2 .brandized { font-size:28px; } body.fabricSmallApp .brandized { display: inline-block; color: var(--mainColor); font-size: 15px; font-family: var(--font-ui); display: flex; align-items: center; } /* ========================================================= PROFILE MODAL ========================================================= */ .profileModal { display: grid; grid-template-rows: auto minmax(0, 1fr); } .profileModalBody { overflow-y: auto; scrollbar-gutter: stable; } /* --------------------------------------------------------- IDENTITY CARD --------------------------------------------------------- */ .profileIdentity { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 25px 32px; border-bottom: 1px solid var(--border); background: color-mix( in srgb, var(--surface) 94%, var(--accent) 6% ); } .profileAvatar { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid color-mix( in srgb, var(--accent) 28%, var(--border) ); border-radius: 18px; background: color-mix( in srgb, var(--accent) 12%, var(--surface) ); color: var(--accent); font-size: 27px; } .profileIdentityMain { display: grid; gap: 3px; min-width: 0; } .profileIdentityLabel { margin: 0; color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; } .profileIdentityMain strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 15px; font-weight: 650; } .profileIdentityMain span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 9px; font-weight: 500; } .profileIdentityMeta { display: flex; gap: 8px; } .profileMetaItem { display: grid; gap: 2px; min-width: 105px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 11px; background: color-mix( in srgb, var(--surface) 88%, transparent ); } .profileMetaItem span { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .profileMetaItem strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); font-size: 11px; font-weight: 700; text-transform: capitalize; } /* --------------------------------------------------------- PROFILE SECTIONS --------------------------------------------------------- */ .profileSection { display: grid; gap: 17px; padding: 27px 32px; border-bottom: 1px solid var(--border); } .profileSection:last-child { border-bottom: 0; } .profileSectionHeading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 280px); gap: 25px; align-items: end; } .profileSectionHeading h2 { margin: 0; color: var(--text); font-family: "Roboto Slab", serif; font-size: 22px; font-weight: 350; } .profileSectionHeading > p { margin: 0; color: var(--muted); font-size: 11px; font-weight: 450; line-height: 1.5; text-align: right; } /* --------------------------------------------------------- SHARED ACCOUNT PANEL — PROFILE PRESENTATION --------------------------------------------------------- */ .profileModal #appAccountPanel { width: 100%; } .profileModal .fabricAccountPanel { width: 100%; padding: 18px; border-radius: 17px; box-shadow: 0 10px 30px rgba(20, 38, 41, .08); } .profileModal .fabricAccountPanel > header { padding-bottom: 3px; } .profileModal .fabricAccountPanel > header h2 { font-family: "Roboto Slab", serif; font-weight: 350; } .profileModal .fabricAccountPanel section { padding-top: 12px; } .profileModal .fapPlan { gap: 10px; } .profileModal .fapPlan > div { flex: 1; padding: 10px 12px; border: 1px solid color-mix( in srgb, var(--border) 75%, transparent ); border-radius: 11px; background: color-mix( in srgb, var(--surface) 89%, transparent ); } .profileModal .fapUsage { padding: 10px 12px; border-radius: 11px; background: color-mix( in srgb, var(--accent) 6%, transparent ); } .profileModal .fapPrimary { min-height: 38px; padding: 0 14px; border-radius: 10px; font-size: 11px; font-weight: 700; } .profileModal .fabricAccountPanel footer { gap: 7px; } .profileModal .fabricAccountPanel footer a { min-height: 34px; padding: 0 10px; font-size: 10px; } /* --------------------------------------------------------- ACCOUNT LINKS --------------------------------------------------------- */ .profileAccountLinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .profileAccountLinks > a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; min-height: 68px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 13px; background: color-mix( in srgb, var(--surface) 92%, transparent ); color: var(--text); text-decoration: none; transition: transform .17s ease, border-color .17s ease, background-color .17s ease, box-shadow .17s ease; } .profileAccountLinks > a:hover { transform: translateY(-2px); border-color: color-mix( in srgb, var(--accent) 30%, var(--border) ); background: color-mix( in srgb, var(--surface) 90%, var(--accent) 10% ); box-shadow: 0 8px 22px rgba(18, 36, 39, .08); } .profileAccountLinks > a > i:first-child { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix( in srgb, var(--accent) 11%, transparent ); color: var(--accent); font-size: 12px; } .profileAccountLinks > a > span { display: grid; gap: 2px; min-width: 0; } .profileAccountLinks strong { font-size: 11px; font-weight: 700; } .profileAccountLinks small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 9px; font-weight: 450; } .profileAccountLinks > a > i:last-child { color: var(--muted); font-size: 8px; opacity: .6; } /* Alerts */ #alertDiv { position: fixed; width: min(340px, calc(100vw - 30px)); min-height: 68px; height: auto; top: 20px; right: 20px; padding: 16px 46px 16px 18px; box-sizing: border-box; border-radius: 5px; background: var(--surface-strong, #ffffff); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--text, #172426) !important; border: 1px solid var(--border-strong, rgba(31, 72, 76, .24)); box-shadow: var(--shadow, 0 18px 45px rgba(36, 58, 60, .14)); pointer-events: all; opacity: .95; z-index: 1000001; transform: translate(0, 0); transition:all .4s ease; } #alertDiv.showAlert { transform: translate(0, 320px); animation: fabricSmallAppAlertIn .2s ease both; } body.fabricSmallApp #alertDiv { position: fixed; top: -300px; left: calc(50% - 180px); width: 360px; height: auto; min-height: 76px; padding: 16px; z-index: 1000005; } .hideOnMobile { display:block; } .showOnMobile, .showUnder700 { display:none; } #closeAlert { margin: 7px 7px 8px; float: right; font-size: 14px; } #closeAlert:hover { background:none !important; } /* ========================================================= RESPONSIVE COMPLETION ========================================================= */ /* --------------------------------------------------------- Desktop --------------------------------------------------------- */ @media all and (max-width:1250px) { #subM-tools { margin: 0 0 0 calc(25%); } } @media all and (max-width:1150px) { #subM-tools { margin: 0 0 0 calc(25% - 25px); } .marketingHero { grid-template-columns: 1fr; } } /* --------------------------------------------------------- Desktop --------------------------------------------------------- */ @media (max-width: 980px) { body, html { max-width:100vw; overflow-x:hidden; } #footnavShad { opacity:.55; } .marketingHero, .marketingAuth { grid-template-columns: 1fr; } #marketingAuth { width: calc(100% - 130px); max-width: 830px; padding: 50px 70px; gap: 60px; } .marketingBenefits, .marketingPlanGrid { grid-template-columns: 1fr; } .marketingBenefit { border-right: none; border-bottom: 1px solid var(--border-soft); } .marketingBenefit:last-child { border-bottom: none; } .marketingMiniPoints { margin: 38px auto 20px; max-width: 360px; justify-content: space-evenly; } .marketingMiniPoints span { font-size:11px; } .hiddenSideNav { display:none !important; } #logoutWelcome { width:auto; } #topMenu:hover { max-width:35px; } #topMenu:hover .tMinterior { right: -10px; } #topMenu.openTopMenu { max-width:350px; background: var(--topMenuInt); } #topMenu.openTopMenu .tMinterior { background: var(--topMenuInt); border-color: var(--border-soft); box-shadow: var(--shadow-sm); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } #topMenu:hover .settingsIcon { transform: scale(1.1) translate(-2px,-1px); } .appShell { width: 100%; } .appSideNav { position: relative !important; left: auto !important; top: auto !important; width: min(620px, calc(100vw - 24px)) !important; margin: 82px auto 8px; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; } .appSideNav::-webkit-scrollbar { display: none; } .sideNavBtn { width: auto !important; min-width: max-content; flex: 0 0 auto; } .navGap { display: none; } #container { margin-top: 10px !important; max-height: none !important; } #how-it-works { background: none !important; border:none; backdrop-filter:none; } #footNav, #subFoot { display:none; } .showOnMobile { display:block; } .hideOnMobile { display:none; } .menuWrap p { font-size: 16px; padding-bottom: 13px; margin: 15px 0 0 20%; } .menuLogin p { font-size: 15px; } .copyrightMat { position:absolute; } #logoutWelcome.shrinkWelc .copyrightMat { position:fixed; } .copyrightMat p { color: #dcdcdc !important; font-size: 14.5px !important; text-shadow: none; } .marketingAuthCopy h2 { margin: 10px 0 12px; font-size: 32px; line-height: 1.25; } .marketingAuthCopy p { font-size: 14px; } .marketingAuthPanel { max-width: 300px; } body.fabricSmallApp #hangbar { width: calc(100vw - 260px); } body.fabricSmallApp .marketingHero { grid-template-columns: 1fr; } body.fabricSmallApp .marketingHeroArt { min-height: 330px; } body.fabricSmallApp .appShell { width: min(760px, calc(100vw - 40px)); grid-template-columns: 1fr; gap: 12px; margin-top: 86px; } body.fabricSmallApp .appSideNav { position: relative; top: auto; grid-column: 1; grid-row: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-height: none; overflow: visible; } body.fabricSmallApp #container, body.fabricSmallApp #container.signed, body.fabricSmallApp #container.pagePre { grid-column: 1; grid-row: 2; min-height: 0; } body.fabricSmallApp .sideNavBtn { min-width: 0; padding: 11px 8px; border-radius: 12px; text-align: center; font-size: 13px; } body.fabricSmallApp .sideNavBtn.is-active { text-align: center; font-size: 13px; } #footnavShad { z-index: 0; } body.fabricSmallApp .marketingShell { margin: 92px 20px 40px; } body.fabricSmallApp .marketingHeroActions { gap: 50px; justify-content: center; } } @media (max-width: 900px) { .helpSliderWrap { padding: 0 10px; } .sliderControl { display: none; } .hIwSlide { min-height: 280px; padding: 22px 20px; border-radius: 18px; } .hIwSlide h3 { font-size: 23px; } .helpIntro { margin-left: 0; margin-right: 0; } .accountStatusCard { flex-direction: column; } } /* ========================================================= MOBILE ========================================================= */ #mobileMenu, #menuToggle { display:none; } @media all and (max-width:800px) { .hideLogHang { font-size:15.5px; font-weight:500; } .marketingAuthCopy h2 { margin: 6px 0 11px; font-size: 26px; line-height: 1.15; } .marketingAuthCopy p { font-size: 13.5px; line-height: 1.4; font-weight: 500; } .marketingAuthCopy .closeLogin { margin: 20px 10px 0 0; font-size: 14px; } #marketingAuth { width: calc(100% - 60px); padding: 50px 50px; gap: 40px; } .mainMenu { right: 13px; } body.fabricSmallApp .hideLogHang { width: calc(100% - 50px); } body.fabricSmallApp #hangbar { width: calc(100vw - 220px); } } @media all and (max-width:700px) { .showUnder700 { display:block; } body { min-height: 100%; height: auto; } .holder { padding: 10px; padding-bottom: 100px; } #logo { left: 14px; top: 12px; } #hangbar { right: 8px; } #topMenu { width: calc(100vw - 20px); left: 10px; right: 10px; } .tMinterior { gap: 18px; padding-inline: 0 1px; width: 266px; } #topMenu { left: unset; right: 66px; top: 14px; } #topMenu.openTopMenu .tMinterior { padding-inline: 0 8px; } #topMenu.openTopMenu { max-width: 250px; } #item-nav { display: none; } #topMenu:hover .tMinterior { right: -16px; } .appSideNav { margin-top: 72px; width: calc(100vw - 20px) !important; } .appModal { position: fixed !important; inset: 90px 20px 30px !important; width: auto !important; height: auto !important; max-width: none !important; max-height: calc(100vh - 20px) !important; margin: 100px 30px !important; } #appPrefMat { transform:translate(0,0); } .twoBtns { display: grid !important; grid-template-columns: 1fr !important; } #footNav p { width: auto !important; margin-right: 12px; } .mainMenu { right: 16px !important; } #logoutWelcome section { margin: 50px 11px; } #how-it-works { margin: 50px auto !important; padding: 10px; } #logoutWelcome p { font-size:14.5px; } .marketingPlansIntro h2 { font-size: 29px; } .marketingPlanCard h3 { font-size: 28px; } .marketingBenefit h3 { font-size: 18px; font-weight: 500; } .dropSignInt { background: rgba(255, 255, 255, 0.96) !important; } body.loggedIn .mainMenu { top:1px; right:3px !important; } .appModal { width: calc( 100vw - max( 20px, env(safe-area-inset-left) + env(safe-area-inset-right) ) ); max-height: calc( 100svh - max( 20px, env(safe-area-inset-top) + env(safe-area-inset-bottom) ) ); border-radius: 20px; } .appModalHeader { padding: 23px 20px 19px; } .prefSection { padding: 22px 20px; } .prefSectionHeading { grid-template-columns: 1fr; gap: 8px; } .themeCardGrid { grid-template-columns: 1fr; } .themeCard { grid-template-columns: 112px minmax(0, 1fr); min-height: 0; align-items: center; } .themePreview { height: 72px; } .themeCardCheck { top: 50%; right: 15px; transform: translateY(-50%) scale(.75); } .themeCard.is-selected .themeCardCheck, .themeCard[aria-checked="true"] .themeCardCheck { transform: translateY(-50%) scale(1); } .accountQuickLinks { grid-template-columns: 1fr; } .appModalFooter { padding: 15px 20px; } .appModalFooter button { flex: 1; } #menuDiv.open { top: 70px; } #menu i { font-size: 30px; color: var(--accent-strong); } body.modalOpen #menu i { color:var(--modalOpenHL); } .menuLogin p { margin: 22px -1px 0 0; } #menuDiv { max-width: 220px; } .loggedIn #menuDiv { top: -110%; bottom: unset; } .loggedIn #menuDiv.open { top: 70px !important; height: unset !important; bottom: unset; } .menuWrap p { padding-bottom: 11px; margin: 12px 0 0 0; } #mobileSubMenuD.showSubMenu { right: 190px; } #mobileSubMenuD { font-weight: 500; font-size: 14px; } #marketingAuth { width: calc(100% - 50px); padding: 60px 30px 30px; gap: 23px; } #marketingAuth .marketingAuthCopy p { text-align: center; } .marketingAuthPanel { max-width: 340px; margin: 0 auto; min-width: 70%; } .marketingAuthPanel h3 { font-size: 16px; margin: -2px 11px -11px 0; } .marketingAuthPanel .login-wrapper { gap: 9px; margin: 21px 2px 0; } .marketingAuthPanel .login-wrapper input, .marketingAuthPanel .login-wrapper button { width: 100%; padding: 0 16px; font-size: 16px; } .marketingAuth .twoBtns { gap: 9.5px; margin: 6px 0 -3px; } .google { width: auto !important; margin: -2px auto; } .questCap { display: none; } .login-wrapper input { margin: -2px auto; height: 35px; } #view-help { padding: 19px 15px 17px; } .helpViewHeader { display: grid; gap: 7px; margin: 0 3px 14px; } .helpViewIntro { max-width: none; text-align: left; } #questSlider { border-radius: 17px; } .hIwSlide { padding: 19px 16px; } .helpCardInner { min-height: 460px; gap: 14px; } .helpCardTop { gap: 10px; } .hIwSlide h3 { align-items: flex-start; font-size: 21px; } .hIwNum { width: 28px; height: 28px; } .helpFeatureIcon { width: 36px; height: 36px; border-radius: 11px; font-size: 14px; } .hIwSlide .helpDescription { font-size: 13px; line-height: 1.55; } .helpVisual { min-height: 210px; padding: 14px; border-radius: 15px; } .helpSliderFooter { margin-top: 11px; } .sliderControl { width: 35px; height: 35px; } .profileIdentity { grid-template-columns: auto minmax(0, 1fr); padding: 20px; } .profileAvatar { width: 48px; height: 48px; border-radius: 15px; font-size: 22px; } .profileIdentityMeta { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .profileMetaItem { min-width: 0; } .profileSection { padding: 22px 20px; } .profileSectionHeading { grid-template-columns: 1fr; gap: 7px; } .profileSectionHeading > p { text-align: left; } .profileAccountLinks { grid-template-columns: 1fr; } .profileAccountLinks > a { min-height: 62px; } .profileModal .fapPlan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .profileModal .fapUsage { gap: 8px; } .profileModal .fabricAccountPanel footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .profileModal .fabricAccountPanel footer a { justify-content: center; } #view-one { gap: 15px; padding: 18px 15px; } #view-one > h2 { font-size: 24px; } .marketingShell { width: calc(100vw - 20px); margin-top: 82px; } .marketingHero, .marketingPlans, .lynxUseCases, .marketingAuth { padding: 18px; border-radius: 18px; } .marketingHeroCopy h1 { max-width: none; font-size: 38px; } .lynxUseCaseGrid, .marketingPlanGrid, .marketingBenefits { grid-template-columns: 1fr; } .marketingAuth .twoBtns { flex-direction: column; gap: 13px; } body.fabricSmallApp #view-one h2 { margin: 4px 0 20px; font-size: 24px; } body.fabricSmallApp .marketingHeroActions button { max-width: 230px; margin: 0 auto; } body.fabricSmallApp .marketingHeroActions { gap: 13px; } body.fabricSmallApp #alertDiv { right:unset; top: 66px; left: -400px; } body.fabricSmallApp #alertDiv.showAlert { transform: translate(0, 0); left: 9px; } body.fabricSmallApp .holder { padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); } body.fabricSmallApp #logo { top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); } body.fabricSmallApp #logo img { max-width: 128px; max-height: 38px; } body.fabricSmallApp #hangbar { top: 10px; right: 10px; width: 48px; min-height: 48px; padding: 0; background: none; border: none; backdrop-filter: none; box-shadow: none; } .hideLogHang > a, .hideLogHang > .hangSignIn > a { display: none; } .hideLogHang { display: block; position: static; } .hangSignIn { position: static; } #dropSign { position: absolute; top: 58px; right: 8px; width: 200px; z-index: 99999; } body.fabricSmallApp .hamburger { position: relative; inset: auto; display: flex; width: 48px; height: 48px; margin: 0; } body.fabricSmallApp .marketingShell { width: 100%; margin: 72px auto 24px; gap: 12px; } body.fabricSmallApp .marketingHero, body.fabricSmallApp .marketingBenefits, body.fabricSmallApp .marketingPlans { padding: 18px; border-radius: 20px; } body.fabricSmallApp .marketingHero { min-height: 0; gap: 26px; } body.fabricSmallApp .marketingHeroCopy h1 { max-width: none; font-size: clamp(38px, 12vw, 54px); line-height: .98; } body.fabricSmallApp .marketingLead { font-size: 16px; line-height: 1.6; } body.fabricSmallApp .marketingHeroActions { display: grid; grid-template-columns: 1fr; } body.fabricSmallApp .marketingHeroActions > * { width: 100%; } body.fabricSmallApp .marketingBenefits, body.fabricSmallApp .marketingPlanGrid { grid-template-columns: 1fr; } body.fabricSmallApp .marketingHeroArt { min-height: 320px; } body.fabricSmallApp .marketingAuth { width: 100%; margin: 72px auto 20px; padding: 18px; grid-template-columns: 1fr; border-radius: 20px; } body.fabricSmallApp .appShell { width: 100%; margin: 66px auto 20px; } body.fabricSmallApp .appSideNav { grid-template-columns: repeat(4, minmax(74px, 1fr)); gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 2px 1px 6px; scrollbar-width: none; } body.fabricSmallApp .appSideNav::-webkit-scrollbar { display: none; } body.fabricSmallApp .sideNavBtn, body.fabricSmallApp .sideNavBtn.is-active { min-height: 44px; padding: 8px 7px; border-radius: 12px; white-space: nowrap; font-size: 12px; } body.fabricSmallApp .appSurface { padding: 16px; border-radius: 18px; } body.fabricSmallApp .helpSliderWrap { padding: 0; } body.fabricSmallApp .hIwSlide { min-height: 380px; padding: 20px; } body.fabricSmallApp #prev, body.fabricSmallApp #next { position: static; display: inline-grid; margin-top: 12px; transform: none; } body.fabricSmallApp #fabricToolbarRoot .fabricToolbarTrigger { top: auto; bottom: max(18px, env(safe-area-inset-bottom)); left: 0; transform: none; } body.fabricSmallApp .hideLogHang a { font-size:13px; } } @media all and (max-width: 680px) { .marketingShell { width: calc(100vw - 20px); margin-top: 86px; gap: 14px; } .marketingHero, .marketingPlans, .marketingAuth { padding: 18px; border-radius: 18px; } .marketingHeroCopy h1 { font-size: 34px; max-width: none; } .marketingLead, .marketingPlansIntro p, .marketingAuthCopy p { font-size: 14px; } .marketingPlanCard { padding: 18px; } } @media (max-width: 640px) { #goAboutMat, #goContactMat, #userProfileMat { width: calc(100vw - 20px); max-height: calc(100vh - 20px); padding: 22px 18px 18px; border-radius: 18px; } .aboutPoint { grid-template-columns: 1fr; } .aboutPoint i { margin-bottom: 4px; } } @media all and (max-width:620px) { body.fabricSmallApp .marketingHeroCopy h1 { font-size: clamp(45px, 7vw, 42px); } body.fabricSmallApp .marketingLead { margin: 20px 0; } } @media all and (max-height:615px) { #marketingAuth { top: 14%; } } @media all and (max-width:500px) { body.loggedIn .mainMenu { right: -7px !important; } body.fabricSmallApp #alertDiv { width:270px; max-width: 70vw; } #topMenu { right: 56px; top: 17px; } #marketingAuth { margin: 75px auto 50px; top: 0; width: calc(100% - 10px); padding: 60px 40px 30px; } #marketingAuth.slideAuth { position:relative; transform: translate(0,0); } #logoutWelcome { position: relative; } .matP { font-weight: 300; line-height: 20px; } .bottomLinks { gap: 0px; flex-direction: column; } .conLinks { margin-top: 30px; } .greenButton { margin-top:10px; } .conLinks, .greenButton { font-size:16px !important; } .conLinks a { padding: 3px 6px; margin-left: 0px; } .appModal { margin:20px 10px !important; } .copyrightMat p { color: #fff !important; margin-bottom: 0; } #appPrefMat { margin: 20px 2px !important; } body.fabricSmallApp .marketingHeroCopy h1 { font-size: clamp(40px, 6vw, 38px); } } /* Very narrow screens */ @media all and (max-width:450px) { .menuWrap p { font-size:14px; } #menuDiv { max-width: 180px; } #mobileSubMenuD.showSubMenu { right: 140px; } .menuWrap p { padding-bottom: 10px; margin: 11px 0 0 0; } .menuLogin { margin-top: 30px; } .menuLogin p { font-size: 13px; } .menuWrap { padding: 15px 20px 21px 25px; } #mobileSubMenuD { font-size: 13px; } #mobileSubMenuD { width: 190px; padding: 4px 16px; } } @media (max-width: 420px) { body.fabricSmallApp .appSideNav { grid-template-columns: repeat(4, minmax(82px, 1fr)); } body.fabricSmallApp .marketingMiniPoints span { justify-content: center; text-align: center; } body.fabricSmallApp .fapPlan, body.fabricSmallApp .fapUsage, body.fabricSmallApp .fapSub { align-items: flex-start; flex-direction: column; } } @media all and (max-width:400px) { #hangbar { transform: scale(0.8); } .google { max-width: 88%; } .login-wrapper input { height: 31px; } .marketingAuthPanel { max-width: 440px; padding: 22px 20px; } } @media all and (max-width:360px) { .menuLogin p { font-size: 12px; } .menuLogin p span { padding: 6px 10px 6px; } .menuLogin { margin-top: 20px; } .menuWrap p { padding-bottom: 9px; margin: 10px 0 0 0; } .menuWrap { padding: 11px 18px 20px 16px; } #menuDiv { max-width: 158px; } #mobileSubMenuD.showSubMenu { right: 120px; } #mobileSubMenuD { font-size: 12.5px; } #mobileSubMenuD { width: 180px; padding: 3px 14px; } #logoutWelcome section { margin: 40px 3px; } #how-it-works { margin: 50px 1px !important; } .appModal { inset: 60px 0px 10px !important; } .marketingAuth .twoBtns { gap: 9px; padding: 0 5px; } #marketingAuth { padding: 60px 30px 30px; } body.fabricSmallApp .marketingHeroArt { min-height: 280px; } } @media all and (max-width:320px) { #menuDiv, #mobileSubMenuD { transform: scale(0.9); } #mobileSubMenuD.showSubMenu { right: 112px; } } @media (max-height: 650px) and (min-width: 721px) { #container { margin-top: 60px !important; max-height: calc(100vh - 95px) !important; } .appModal { max-height: calc(100vh - 30px); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body.fabricSmallApp *, body.fabricSmallApp *::before, body.fabricSmallApp *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }