/* ============================================================================ FamePro — style.css (v2 · MyFame layout · black & white) PASTE THE WHOLE FILE into: Appearance → Bootstrap templates → CSS → style.css Layout, spacing, section order and dimensions replicate the MyFame reference 1:1 (250px fixed sidebar · 58px nav items · 68px mobile bottom bar · Inter/Lexend type). Palette is strictly grayscale: accent = white on black, no colour anywhere. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Lexend:wght@600;700;800&display=swap'); /* ---------------------------------------------------------------- tokens */ :root{ --bg:#111111; /* page background (was #162030) */ --bg-side:#141414; /* sidebar (was #172130) */ --well:#181818; /* cards / wells (was #152234) */ --field:#222222; /* inputs, pills, chips (was #1c2d44) */ --field-2:#262626; /* active nav item (was #1e2c43) */ --accent:#ffffff; /* accent (was #2b95e9) */ --accent-text:#0d0d0d; /* text on accent */ --text:#ffffff; --text-2:#ffffff99; --line:#ffffff10; --line-2:#ffffff20; --well-border:#2a2a2a; /* (was #2a3f5a) */ } /* ---------------------------------------------------------------- base */ html,body{height:100%;} *{margin:0;} /* the page colour lives on so the decorative backdrop can sit at z-index:-1 (behind all content) without 's background hiding it. This avoids putting a stacking context on any content wrapper — which would trap Bootstrap modals below .modal-backdrop and make them unusable. */ html{background:var(--bg);} body{font-family:"Inter",sans-serif;margin:0;padding:0;background:transparent;color:var(--text);font-weight:500;position:relative;min-height:100%;} h1,h2,h3,h4,h5{font-family:"Lexend",sans-serif;font-weight:bold;color:var(--text);} a{color:var(--text);} a:hover,a:focus{color:var(--text);text-decoration:none;opacity:.85;} .text-muted{color:var(--text-2) !important;} ::selection{background:var(--accent);color:var(--accent-text);} /* ---------------------------------------------------------------- sidebar MyFame metrics: fixed 250px · brand pad 25/10/20 · logo max 150px items: pad 16px · radius 12px · gap 12px · 16px/24px · height 58px */ .fp-side{position:fixed;background:var(--bg-side);top:0;left:0;width:250px;height:100%;z-index:100;display:flex;flex-direction:column;transition:all .25s ease-in-out;box-shadow:#0003 0 4px 6px -1px,#0000001f 0 2px 4px -1px;overflow-y:auto;} a.fp-brand{padding:25px 10px 20px;display:flex;align-items:center;justify-content:flex-start;color:var(--text);font-family:"Lexend",sans-serif;font-weight:800;font-size:22px;text-decoration:none;} a.fp-brand img{max-width:150px;} ul.fp-menu{display:flex;flex-direction:column;gap:3px;padding:10px;position:relative;list-style:none;margin:0;} ul.fp-menu li a{display:flex;align-items:center;position:relative;cursor:pointer;padding:16px;border-radius:12px !important;border:1px solid transparent;gap:12px;transition:250ms ease-in-out;text-decoration:none;font-size:16px;font-style:normal;line-height:24px;color:var(--text-2);font-weight:500;height:58px;} ul.fp-menu li a.active,ul.fp-menu li.active a{background:var(--field-2);border-color:var(--line);color:#fff;} ul.fp-menu li a:hover{border-color:var(--line);color:var(--text);} ul.fp-menu li a .navbar-icon{height:28px;width:28px;color:var(--text-2);border-radius:7px;display:flex;align-items:center;justify-content:center;flex:0 0 28px;background:var(--field);border:1px solid var(--line);transition:all .2s ease;} ul.fp-menu li a .navbar-icon svg{width:15px;height:15px;display:block;} /* icon matches the theme: subtle dark plate + muted icon by default; on hover/active it inverts to the white accent with a black glyph */ ul.fp-menu li a:hover .navbar-icon{color:#fff;border-color:var(--line-2);} ul.fp-menu li a.active .navbar-icon,ul.fp-menu li.active a .navbar-icon{background:var(--accent);color:var(--accent-text);border-color:var(--accent);} /* ---------------------------------------------------------------- shell */ .fp-main{margin-left:250px;padding:15px 0;} nav.navbar.fp-topbar{margin-bottom:15px;position:sticky;top:0;background:var(--bg);border:0;border-bottom:1px solid var(--line);z-index:101;border-radius:0;display:none;padding:6px 12px;min-height:0;} /* Bootstrap's .navbar clearfix pseudo-elements become flex items here and break space-between (logo/wallet get pushed toward the middle). Kill them. */ nav.navbar.fp-topbar:before,nav.navbar.fp-topbar:after{display:none !important;content:none !important;} nav.navbar.fp-topbar .fp-topbrand{display:flex;align-items:center;padding:6px 0;color:var(--text);font-family:"Lexend",sans-serif;font-weight:800;font-size:20px;text-decoration:none;margin:0;flex:0 0 auto;} nav.navbar.fp-topbar .fp-topbrand img{max-height:38px;width:auto;} nav.navbar.fp-topbar .navbar-right-block{display:flex;align-items:center;gap:4px;margin:0;padding:0 8px;list-style:none;} nav.navbar.fp-topbar .navbar-right-block li a{color:var(--text-2);font-size:13px;font-weight:600;padding:8px 10px;display:block;text-decoration:none;} nav.navbar.fp-topbar .navbar-right-block li.active a{color:#fff;} nav.navbar.fp-topbar .badge{background:var(--accent);color:var(--accent-text);border-radius:20px;padding:5px 12px;font-weight:700;} /* wallet chip (mobile top bar) — balance + quick top-up, MyFame style */ .fp-wallet{display:flex;align-items:center;gap:8px;background:var(--field);border:1px solid var(--line);border-radius:30px;padding:6px 6px 6px 10px;margin:0;text-decoration:none;color:#fff;flex:0 0 auto;} .fp-wallet:hover,.fp-wallet:focus{color:#fff;background:var(--field-2);} .fp-wallet .ic{display:flex;align-items:center;justify-content:center;color:var(--text-2);} .fp-wallet .ic svg{width:16px;height:16px;} .fp-wallet .amt{font-weight:800;font-size:14px;line-height:1;font-family:"Lexend",sans-serif;} .fp-wallet .plus{display:flex;align-items:center;justify-content:center;height:22px;width:22px;border-radius:50%;background:var(--accent);color:var(--accent-text);flex:0 0 22px;} .fp-wallet .plus svg{width:13px;height:13px;} /* ---------------------------------------------------------------- mobile MyFame: sidebar hidden ≤991.2px · bottombar grid-5 · 68px · body pad 80px */ @media (max-width:991.2px){ .fp-side{left:0;width:100%;border:0;opacity:0;pointer-events:none;display:none;} .fp-main{margin-left:0;} nav.navbar.fp-topbar{display:flex;align-items:center;justify-content:space-between;} /* clearance for the fixed bottom tab bar. It goes on .fp-main (the content wrapper) rather than , because body has height:100% which caps its own padding and leaves the last element hidden behind the tab bar. */ body.fp-app{padding-bottom:0;} body.fp-app .fp-main{padding-bottom:110px;} } .fp-tabbar{display:none;} @media (max-width:991.2px){ .fp-tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;z-index:100;padding:0;width:100%;box-shadow:0 5px 5px #0a0a0a66;justify-items:center;background:var(--bg-side);height:68px;align-items:center;border-top:1px solid var(--line);} .fp-tab{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text-2);background:none;border:0;font-size:11px;font-weight:600;text-decoration:none;padding:6px 4px;} .fp-tab svg{width:20px;height:20px;} .fp-tab.active,.fp-tab:hover{color:#fff;} .fp-tab-fab .fab{background:var(--accent);color:var(--accent-text);height:44px;width:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:-26px;box-shadow:0 6px 18px rgba(0,0,0,.5);} .fp-tab-fab .fab svg{width:20px;height:20px;} } /* mobile full-screen menu sheet */ .fp-sheet{position:fixed;inset:0;z-index:99;background:var(--bg);padding:20px 14px 90px;overflow-y:auto;display:none;} .fp-sheet.open{display:block;} .fp-sheet-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;} .fp-sheet-list li a{display:flex;align-items:center;gap:12px;padding:16px;height:58px;border-radius:12px;border:1px solid transparent;color:var(--text-2);font-size:16px;line-height:24px;font-weight:500;text-decoration:none;} .fp-sheet-list li.active a{background:var(--field-2);border-color:var(--line);color:#fff;} .fp-sheet-list li a .ic{height:25px;width:25px;border-radius:5px;background:var(--field);display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;flex:0 0 25px;} .fp-sheet-list li a .ic svg{width:15px;height:15px;display:block;} .fp-sheet-list li a .ch{margin-left:auto;color:var(--text-2);} /* ---------------------------------------------------------------- wells */ .well,.panel{background:var(--well);font-weight:700;border:1px solid var(--well-border);padding:15px !important;box-shadow:none !important;border-radius:10px;color:var(--text);margin-bottom:20px;} .well-float{overflow-x:auto;} .panel-heading{background:transparent;border-bottom:1px solid var(--line);color:var(--text);} .panel-body{color:var(--text);background:transparent;} .modal-content{background:var(--well);border-radius:12px;border:1px solid var(--well-border);color:var(--text);} .modal-header,.modal-footer{border-color:var(--line);} .modal-header .close{color:#fff;opacity:.6;text-shadow:none;} /* ---------------------------------------------------------------- forms MyFame metrics: pad 10px 12px · weight 600 · radius 10px · 14px */ .form-group{margin-bottom:10px;} label,.control-label{color:var(--text);} form label.control-label{text-transform:uppercase;margin-bottom:5px;font-size:10px;font-weight:700;letter-spacing:.12em;} .form-control,.form-control:focus, input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=tel],textarea,select{ background:var(--field);color:#fff;border:0;padding:10px 12px;font-weight:600;border-radius:10px !important;font-size:14px;box-shadow:none !important;transition:all .25s ease;height:auto;} .form-control:focus{outline:1px solid var(--line-2);} .form-control::placeholder{color:#8a8a8a;} select.form-control option{background:var(--field);color:#fff;} /* Bootstrap sets .form-control[disabled]{background:#eee} via an ATTRIBUTE selector, which also matches (used for the read-only "current email" field). Our old rule used the :disabled pseudo-class, which never matches a span — so Bootstrap's near-white background won. Match the attribute form too. */ .form-control:disabled,.form-control[disabled],.form-control[readonly], fieldset[disabled] .form-control{background:#1e1e1e !important;color:var(--text-2) !important;opacity:1;} /* a has no intrinsic height — give it one */ span.form-control{display:block;min-height:40px;line-height:20px;} small.help-block{color:var(--text-2);} small.help-block.min-max{background:var(--field);padding:5px 5px;margin-top:-2px;border-radius:0 0 5px 5px;text-align:center;line-height:1;border-top:1px solid var(--line);display:block;} .checkbox label,.radio label{color:var(--text-2);text-transform:none;letter-spacing:0;font-weight:500;} .input-group .form-control{border-radius:10px 0 0 10px !important;} .input-group-btn .btn{border-radius:0 10px 10px 0 !important;padding:10px 14px;} /* ---------------------------------------------------------------- buttons */ .btn{border-radius:10px;font-weight:700;border:0;transition:all .25s ease;} .btn-primary{background:var(--accent);color:var(--accent-text);margin-left:auto;box-shadow:rgba(255,255,255,.2) 0 1px 0 0 inset;} .btn-primary:hover,.btn-primary:focus,.btn-primary:active{background:#e6e6e6;color:var(--accent-text);} .btn-default{background:var(--field);color:#fff;} .btn-default:hover,.btn-default:focus{background:var(--field-2);color:#fff;} .btn-xs{padding:3px 10px;font-size:11px;border-radius:7px;} .btn-lg{padding:12px 22px;font-size:15px;} .btn-block{display:block;width:100%;} /* ---------------------------------------------------------------- alerts */ .alert{border-radius:10px;border:1px solid var(--line-2);font-weight:600;} .alert-success{background:#1f1f1f;color:#fff;border-left:3px solid #fff;} .alert-danger{background:#1a1a1a;color:#eee;border-left:3px solid #8a8a8a;} .alert .close{color:#fff;opacity:.6;text-shadow:none;} /* ---------------------------------------------------------------- tables */ .table{color:var(--text);margin-bottom:0;} .table>thead>tr>th{border-bottom:1px solid var(--line-2);color:var(--text-2);text-transform:uppercase;font-size:10px;letter-spacing:.12em;font-weight:700;} .table>tbody>tr>td{border-top:1px solid var(--line);font-size:13px;font-weight:500;vertical-align:middle;} .table-striped>tbody>tr:nth-of-type(odd){background:#ffffff05;} .table-hover>tbody>tr:hover,.table-striped>tbody>tr:hover>td{background:#ffffff08;color:#fff;} /* nav pills (status filters etc.) */ .nav-pills{margin-bottom:15px;display:flex;flex-wrap:wrap;gap:5px;align-items:center;} .nav-pills>li{float:none;} .nav-pills>li>a{border-radius:20px;background:var(--field);color:#fff;font-size:13px;font-weight:600;padding:8px 16px;transition:all .3s ease;} .nav-pills>li>a:hover{background:var(--field-2);color:#fff;} .nav-pills>li.active>a,.nav-pills>li.active>a:hover,.nav-pills>li.active>a:focus{background:var(--accent) !important;color:var(--accent-text) !important;box-shadow:rgba(255,255,255,.2) 0 1px 0 0 inset,rgba(0,0,0,.15) 1.95px 1.95px 2.6px;} .nav-pills>li.search{margin-left:auto;} .pagination>li>a{background:var(--field);border:0;color:#fff;margin:0 2px;border-radius:8px;font-weight:600;} .pagination>li.active>a{background:var(--accent);color:var(--accent-text);} .pagination>li>a:hover{background:var(--field-2);color:#fff;} .dropdown-menu{background:var(--well);border:1px solid var(--well-border);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5);} .dropdown-menu>li>a{color:var(--text-2);padding:8px 14px;font-weight:600;} .dropdown-menu>li>a:hover{background:var(--line);color:#fff;} /* ============================================================================ NEW ORDER — MyFame structure 1:1 ========================================================================== */ /* welcome card — accent block (was #2b95e9 → white) */ .fp-wbar{border-radius:8px;padding:1rem;margin-bottom:1rem;box-shadow:rgba(0,0,0,.24) 0 3px 8px;position:relative;background:var(--accent);border:0;color:var(--accent-text);} .fp-wbar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;} .fp-hi{margin:0;font-size:14px;color:#00000099;font-weight:600;} .fp-who{color:var(--accent-text);font-weight:600;text-transform:uppercase;font-size:16px;display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;font-family:"Lexend",sans-serif;} .fp-wbar-acts{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap;} .fp-wbar-acts .btn.btn-primary{width:fit-content;background:var(--accent-text);color:#fff;border-radius:30px;font-size:12px;padding:6px 14px;display:flex;align-items:center;gap:6px;border:1px solid #000;font-weight:700;} .fp-wbar-acts .btn.btn-primary:hover{background:#222;color:#fff;} .fp-wbar-acts .btn.btn-demo{width:fit-content;background:transparent;color:var(--accent-text);border-radius:30px;font-size:12px;padding:6px 14px;display:flex;align-items:center;gap:6px;border:1px solid #00000033;font-weight:700;} .fp-wbar-acts .btn.btn-demo:hover{background:#00000010;color:var(--accent-text);border-color:#00000066;} .fp-wbar-acts .btn svg{flex:0 0 auto;} .fp-wcards{display:flex;align-items:center;justify-content:flex-start;gap:10px;} .fp-wcard{background:#00000010;padding:7px 10px;display:flex;align-items:center;justify-content:flex-start;flex:1;border-radius:7px;line-height:1;gap:10px;color:var(--accent-text);} .fp-wcard .wic{font-size:20px;display:flex;} .fp-wcard .wic svg{width:20px;height:20px;} .fp-wcard .lbl{margin:0 0 5px;font-weight:600;color:#00000099;font-size:13px;} .fp-wcard .val{font-weight:bold;font-size:16px;} .fp-wcard .val a{color:var(--accent-text);} /* platform filter pills — MyFame .servFiltr metrics */ .fp-chips{list-style:none;overflow-x:auto;margin:0 0 1rem;transition:all 250ms ease;display:flex;align-items:center;justify-content:flex-start;gap:5px;padding:10px;background:var(--well);border:1px solid var(--well-border);border-radius:10px;scrollbar-width:none;} .fp-chips::-webkit-scrollbar{display:none;} .fp-chip{display:flex;flex-direction:row;white-space:nowrap;font-size:13px;background:var(--field);border-radius:20px;transition:all .3s ease;font-weight:600;border:0;align-items:center;justify-content:center;gap:4px;color:#fff;padding:4px;padding-right:14px;} .fp-chip svg,.fp-chip i{height:30px;width:30px;font-size:14px;border-radius:35px;margin-right:3px;transition:all .3s ease;display:flex;align-items:center;justify-content:center;box-shadow:rgba(0,0,0,.15) 1.95px 1.95px 2.6px;background:#fff;color:#111;padding:7px;box-sizing:border-box;flex:0 0 30px;} .fp-chip.on{background:var(--accent) !important;color:var(--accent-text);box-shadow:rgba(255,255,255,.2) 0 1px 0 0 inset,rgba(0,0,0,.15) 1.95px 1.95px 2.6px;} .fp-chip.on svg,.fp-chip.on i{background:#111;color:#fff;} /* order grid: col-lg-7 form / col-lg-5 recent — matched via grid 7/5 */ .fp-ogrid{display:grid;grid-template-columns:7fr 5fr;gap:24px;align-items:start;} @media (max-width:991.2px){.fp-ogrid{grid-template-columns:1fr;}} /* order card header — MyFame .no-form-card__header */ .fp-ocard-head{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:0 0 10px;border-bottom:1px solid var(--line);margin-bottom:15px;} .fp-ocard-head .t{font-size:10px;font-weight:700;letter-spacing:.12em;white-space:nowrap;text-transform:uppercase;display:flex;align-items:center;gap:8px;} .fp-ocard-head .t svg{width:16px;height:16px;} .fp-ocard-head .fp-sw{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.12em;white-space:nowrap;text-transform:uppercase;display:flex;align-items:center;gap:6px;line-height:1;color:var(--text-2);text-decoration:none;} .fp-ocard-head .fp-sw i{width:28px;height:16px;border-radius:10px;background:var(--field);display:inline-block;position:relative;} .fp-ocard-head .fp-sw i:before{content:"";position:absolute;top:2px;left:2px;height:12px;width:12px;border-radius:50%;background:#fff;transition:all .2s ease;} .fp-ocard-head .fp-sw:hover{color:#fff;} form#order-form{margin-bottom:0;position:relative;border:0;padding:0;} /* search box */ .fp-searchbox{position:relative;margin-bottom:10px;} .fp-searchbox>svg{display:none;} .search-dropdown .input-wrapper .form-control{padding-left:40px !important;border:1px solid var(--line-2);} .search-dropdown .input-wrapper .form-control::placeholder{color:#fff;} .search-dropdown .input-wrapper button span{color:var(--text-2);} /* description — MyFame .descflex / .DescSpecs / .bottomflexServ */ .fp-descflex{overflow:hidden;margin-bottom:10px;border:0;box-shadow:none;border-radius:8px;font-size:13px;} /* delivery-time banner — sits at the top of the description block (MyFame vibe) */ .fp-delivery{display:flex;align-items:center;gap:10px;background:var(--accent);color:var(--accent-text);padding:9px 12px;border-radius:8px 8px 0 0;font-weight:700;} .fp-delivery .ic{display:flex;align-items:center;justify-content:center;height:26px;width:26px;border-radius:50%;background:#00000012;flex:0 0 26px;} .fp-delivery .ic svg{width:15px;height:15px;} .fp-delivery .lbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#00000099;} .fp-delivery .val{margin-left:auto;font-family:"Lexend",sans-serif;font-weight:800;font-size:14px;} .fp-topflex{padding:10px;overflow:auto;background:var(--field) !important;box-shadow:none;scrollbar-width:none;} .fp-topflex::-webkit-scrollbar{display:none;} .fp-specs{display:flex;justify-content:space-between;gap:10px;} @media (max-width:1024px){.fp-specs{display:grid;grid-template-columns:1fr 1fr 1fr;}} .fp-specchild{display:flex;align-items:center;gap:10px;min-width:100px;} .fp-specchild .hetopse{font-size:12px;line-height:1;color:var(--text-2);display:flex;align-items:center;justify-content:flex-start;font-weight:500;margin-bottom:8px;} .fp-specchild .hetopse i,.fp-specchild .hetopse svg{background:#fff;color:#111;padding:3px;border-radius:20px;width:20px;height:20px;display:inline-flex;box-shadow:none;margin-right:4px;vertical-align:bottom;} .fp-specchild span{line-height:1;display:block;margin-top:4px;font-weight:700;} .fp-bottomflex{border-top:1px solid var(--line-2);background:var(--field);padding:10px;border-bottom:0;} .fp-bottomflex .hetopse{font-size:12px;color:var(--text-2);} #fp-details{max-height:100px;overflow:auto;font-weight:500;} #fp-details::-webkit-scrollbar{width:6px;background:transparent;} #fp-details::-webkit-scrollbar-thumb{background-color:#666;} .fp-desc{padding:10px;background:var(--field);border-radius:8px;font-weight:500;} /* total amount button — MyFame .order-btn-premium (was #0098EA → white) */ button.fp-orderbtn{all:unset;display:inline-block;cursor:pointer;background:var(--accent);transition:all .4s cubic-bezier(.23,1,.32,1);box-shadow:rgba(255,255,255,.1) 0 1px 1px 0 inset,rgba(50,50,93,.25) 0 50px 100px -20px,rgba(0,0,0,.3) 0 30px 60px -30px;position:static;padding:0;border-radius:10px;width:100%;box-sizing:border-box;margin-top:10px;} button.fp-orderbtn:hover{transform:translateY(-3px);box-shadow:0 15px 30px -10px rgba(255,255,255,.25);} button.fp-orderbtn:active{transform:translateY(0);} .fp-orderbtn .content-wrapper{display:flex;align-items:center;border-radius:12px;padding:16px 20px;gap:20px;justify-content:space-between;background:var(--accent);box-sizing:border-box;width:100%;max-width:100%;overflow:hidden;} .fp-orderbtn .price-section{display:flex;flex-direction:column;border:0;padding-right:20px;min-width:0;flex:1 1 auto;overflow:hidden;} .fp-orderbtn .label-text{font-family:"Inter",sans-serif;font-size:10px;font-weight:700;color:#00000099;letter-spacing:1.5px;margin-bottom:4px;text-align:left;} .fp-orderbtn .input-container{display:flex;align-items:center;color:var(--accent-text);min-width:0;} .fp-orderbtn #charge{background:transparent;border:none;outline:none;color:var(--accent-text);font-weight:800;width:100%;min-width:0;padding:0;pointer-events:none;font-size:22px;line-height:1.1;box-shadow:none !important;border-radius:0 !important;text-overflow:ellipsis;} .fp-orderbtn .action-section{display:flex;align-items:center;gap:12px;flex:0 0 auto;} .fp-orderbtn .order-text{color:var(--accent-text);font-weight:800;font-size:18px;letter-spacing:.5px;display:flex;gap:8px;justify-content:flex-start;line-height:1;align-items:center;font-style:italic;white-space:nowrap;} .fp-orderbtn .order-text svg{width:18px;height:18px;} /* tighten up on narrow phones so "Submit" never clips off the edge */ @media (max-width:480px){ .fp-orderbtn .content-wrapper{padding:14px 14px;gap:10px;} .fp-orderbtn .price-section{padding-right:8px;} .fp-orderbtn #charge{font-size:19px;} .fp-orderbtn .order-text{font-size:16px;gap:6px;} .fp-orderbtn .order-text svg{width:16px;height:16px;} .fp-orderbtn .label-text{letter-spacing:1px;} } /* recent orders column */ .fp-rtitle{margin-bottom:10px;text-transform:uppercase;letter-spacing:1px;font-family:"Lexend",sans-serif;font-weight:bold;font-size:16px;} .fp-empty{text-align:center;padding:40px 16px;background:var(--well);border:1px solid var(--well-border);border-radius:10px;} .fp-empty .ic{margin-bottom:12px;} .fp-empty .ic svg,.fp-empty .ic i{width:48px;height:48px;font-size:44px;color:#333;} .fp-empty h4{margin:0 0 6px;} .fp-empty p{color:var(--text-2);font-weight:500;font-size:13px;margin:0 0 14px;} /* terms checkbox row */ label.control-label.terms{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;color:var(--text-2);} label.control-label.terms a{color:#fff;text-decoration:underline;} /* ============================================================================ ORDERS — MyFame orders-dashboard ========================================================================== */ .fp-orders-head{margin-bottom:1.5rem;display:flex;gap:12px;flex-wrap:wrap;align-items:center;} .fp-status-filter{position:relative;min-width:220px;} .fp-status-filter .btn{width:100%;display:flex;align-items:center;gap:10px;background:var(--well);border:1px solid var(--well-border);color:#fff;text-align:left;padding:10px 14px;font-size:13px;} .fp-status-filter .btn .caret{margin-left:auto;} .fp-status-dot{height:8px;width:8px;border-radius:10px;display:inline-block;background:#fff;} .fp-status-dot.pending{background:#bdbdbd;} .fp-status-dot.inprogress{background:#8a8a8a;} .fp-status-dot.completed{background:#ffffff;} .fp-status-dot.partial{background:#6f6f6f;} .fp-status-dot.processing{background:#a3a3a3;} .fp-status-dot.canceled{background:#4d4d4d;} .fp-orders-search{flex:1;min-width:240px;} .fp-orders-search .input-group{width:100%;display:flex;background:var(--well);border:1px solid var(--well-border);border-radius:10px;overflow:hidden;} .fp-orders-search .form-control{background:transparent;border-radius:0 !important;flex:1;} .fp-orders-search .input-group-btn{width:auto;} .fp-orders-search .btn{background:transparent;color:var(--text-2);} /* order cards grid */ .fp-orders-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;} .fp-ordercard{background:var(--well);border:1px solid var(--well-border);border-radius:10px;padding:14px;font-weight:500;} .fp-ordercard .top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;} .fp-ordercard .oid{font-weight:800;font-size:14px;} .fp-ordercard .status{position:relative;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:7px;} .fp-ordercard .status:before{content:"";height:7px;width:7px;background:#fff;border-radius:10px;animation:fp-flicker 1.2s infinite ease-in-out;} @keyframes fp-flicker{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.2;transform:scale(.7)}} .fp-ordercard .svc{font-size:13px;margin-bottom:8px;color:#fff;} .fp-ordercard .lnk{font-size:12px;color:var(--text-2);word-break:break-all;margin-bottom:10px;} .fp-ordercard .meta{display:flex;flex-wrap:wrap;gap:6px 0;font-size:12px;color:var(--text-2);align-items:center;} .fp-ordercard .meta span{display:flex;align-items:center;gap:6px;} .fp-ordercard .meta span + span:before{content:"";display:block;height:5px;width:5px;background:#fff;border-radius:10px;margin:0 8px;} .fp-ordercard .acts{margin-top:10px;display:flex;gap:6px;} .fp-empty-state{text-align:center;padding:50px 20px;grid-column:1/-1;} .fp-empty-state .ic i,.fp-empty-state .ic svg{font-size:44px;width:48px;height:48px;color:#333;margin-bottom:12px;} /* ============================================================================ SERVICES — MyFame layout: icon rail well + filter well + table well ========================================================================== */ .fp-servrail{display:flex;gap:6px;overflow-x:auto;list-style:none;margin:0;padding:0;scrollbar-width:none;} .fp-servrail::-webkit-scrollbar{display:none;} .fp-servrail button{border:0;background:var(--field);color:#fff;height:38px;width:38px;min-width:38px;border-radius:35px;display:flex;align-items:center;justify-content:center;font-size:15px;transition:all .3s ease;padding:0;} .fp-servrail button svg{width:17px;height:17px;display:block;} .fp-servrail button.active,.fp-servrail button:hover{background:var(--accent);color:var(--accent-text);} .fp-servfilter{display:flex;gap:8px;align-items:center;flex-wrap:wrap;} .fp-servfilter .search-item{margin-left:auto;flex:1;min-width:220px;} #service-table .trcat td{padding-top:16px;font-family:"Lexend",sans-serif;} #service-table .trcat .catfilte{display:flex;align-items:center;gap:8px;} #service-table .totalServcount{color:var(--text-2);font-weight:500;font-size:12px;} /* ---- MOBILE: turn each service row into a card so the table never overflows the screen (the desktop table is untouched) ---- */ @media (max-width:767px){ .well.well-float{overflow-x:visible;padding:10px !important;} #service-table,#service-table tbody,#service-table tr,#service-table td{display:block;width:100%;} #service-table thead{display:none;} #service-table{border:0;} #service-table>tbody>tr{background:var(--field);border:1px solid var(--line);border-radius:10px; padding:12px;margin-bottom:10px;position:relative;} #service-table>tbody>tr>td{border:0;padding:3px 0;font-size:13px; display:flex;align-items:center;justify-content:space-between;gap:12px;} /* service name = card title, full width */ #service-table>tbody>tr>td.fp-c-name{display:block;font-weight:700;color:#fff;font-size:14px; line-height:1.4;padding:0 0 8px;margin-bottom:6px;border-bottom:1px solid var(--line); padding-right:26px;} /* label on the left, value on the right */ #service-table>tbody>tr>td[data-label]:before{content:attr(data-label);color:var(--text-2); font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;flex:0 0 auto;} #service-table>tbody>tr>td.fp-c-id{position:absolute;top:12px;right:38px;padding:0; font-size:11px;color:var(--text-2);gap:5px;width:auto;display:flex;} #service-table>tbody>tr>td.fp-c-id:before{font-size:10px;} #service-table>tbody>tr>td.fp-c-rate{font-weight:800;color:#fff;font-size:15px;} #service-table>tbody>tr>td.fp-c-fav{position:absolute;top:10px;right:10px;width:auto;padding:0;} #service-table>tbody>tr>td.fp-c-desc{justify-content:flex-start;padding-top:8px;} #service-table>tbody>tr>td.fp-c-desc:empty{display:none;} /* category heading row stays a plain full-width heading */ #service-table>tbody>tr.trcat{background:transparent;border:0;padding:14px 2px 6px;margin:0;} #service-table>tbody>tr.trcat>td{padding:0;display:block;} #service-table>tbody>tr.trcat .catfilte{font-size:14px;} } /* ============================================================================ ADD FUNDS — MyFame layout: top strip + centered col + tabs + chips ========================================================================== */ .fp-fundstop{display:flex;align-items:center;gap:14px;margin-bottom:1rem;padding:10px 4px;} .fp-fundstop>a:first-child{font-size:18px;color:#fff;} .fp-fundstop h3{margin:0;font-size:16px;} .fp-fundstop span{display:block;font-size:11px;color:var(--text-2);font-weight:600;} .fp-fundstop .btn-htp{margin-left:auto;background:var(--field);color:#fff;border-radius:20px;font-size:12px;font-weight:700;padding:8px 14px;display:flex;align-items:center;gap:6px;text-decoration:none;} .fp-fundtabs{display:flex;gap:8px;margin:0;padding:0;list-style:none;} .fp-fundtabs li{flex:1;} .fp-fundtabs button,.fp-fundtabs a{width:100%;border:0;background:var(--field);color:#fff;border-radius:10px;padding:10px;font-weight:700;font-size:13px;transition:all .25s ease;display:block;text-align:center;text-decoration:none;} .fp-fundtabs .active button,.fp-fundtabs button.active,.fp-fundtabs a.active{background:var(--accent);color:var(--accent-text);} .fp-amountrec-wrap label{text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:.12em;} ul.fp-amountrec{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:8px 0 0;} ul.fp-amountrec li{background:var(--field);border:1px solid transparent;border-radius:20px;padding:7px 16px;font-size:13px;font-weight:700;cursor:pointer;position:relative;transition:all .2s ease;} ul.fp-amountrec li:hover{color:#fff;border-color:#fff;} ul.fp-amountrec li.active{background:var(--accent);color:var(--accent-text);} .fp-divider{display:flex;align-items:center;gap:12px;margin:16px 0;} .fp-divider p{margin:0;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--text-2);} .fp-divider span{content:"";width:100%;background:#fff;height:1px;border-radius:10px;opacity:.1;display:block;} .fp-supportcta{text-align:center;padding:24px 16px;} .fp-supportcta h3{font-size:16px;margin:0 0 6px;} .fp-supportcta p{color:var(--text-2);font-weight:500;font-size:13px;max-width:44ch;margin:0 auto 14px;} /* ============================================================================ TICKETS — MyFame ticketTotal / chat ========================================================================== */ .fp-tickets-wrap{position:relative;} .fp-newchat{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--accent-text);border-radius:20px;padding:9px 18px;font-weight:800;font-size:13px;text-decoration:none;border:0;cursor:pointer;} .fp-newchat:hover{background:#e6e6e6;color:var(--accent-text);} .fp-ticketlist{margin-top:16px;} .fp-ticketlist a.tk{display:flex;align-items:center;gap:12px;background:var(--well);border:1px solid var(--well-border);border-radius:10px;padding:12px 14px;margin-bottom:8px;text-decoration:none;color:#fff;transition:all .2s ease;} .fp-ticketlist a.tk:hover{border-color:var(--line-2);} .fp-ticketlist .tid{font-weight:800;font-size:12px;color:var(--text-2);min-width:48px;} .fp-ticketlist .tsub{flex:1;font-weight:600;font-size:13px;} .fp-ticketlist .tst{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);} .fp-ticketlist .ttime{font-size:11px;color:var(--text-2);} /* chat bubbles (view ticket) */ .ticket-message{background:var(--field);border-radius:12px;padding:12px 14px;position:relative;font-weight:500;font-size:13px;margin-bottom:6px;} .ticket-message-right .ticket-message{background:var(--field);} .ticket-message-right .ticket-message:after{content:"";display:block;height:15px;width:15px;background:var(--field);position:absolute;right:-5px;bottom:10px;transform:rotate(45deg);} .ticket-message-left .ticket-message{background:#151515;} .ticket-message-left .ticket-message:after{content:"";display:block;height:15px;width:15px;background:#151515;position:absolute;left:-5px;bottom:10px;transform:rotate(45deg);} .ticket-message-block{margin-bottom:14px;} .ticket-message-block .info{font-size:11px;color:var(--text-2);} .titcket-title{font-family:"Lexend",sans-serif;font-weight:bold;font-size:16px;margin-bottom:14px;} /* ============================================================================ AFFILIATES — MyFame container-dashboard / card-panel ========================================================================== */ .fp-affwrap .page-header{border:0;margin:0 0 1.25rem;padding:0;} .fp-affwrap .page-header h2{display:flex;align-items:center;gap:10px;font-size:20px;margin:0 0 4px;} .fp-affwrap .page-header .header-icon{height:34px;width:34px;border-radius:8px;background:var(--accent);color:var(--accent-text);display:flex;align-items:center;justify-content:center;} .fp-affwrap .page-header .header-icon svg{width:18px;height:18px;} .fp-affwrap .page-header p{color:var(--text-2);font-weight:500;font-size:13px;margin:0;} .fp-top-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;} @media (max-width:991.2px){.fp-top-grid{grid-template-columns:1fr;}} .fp-card-panel{background:var(--well);border:1px solid var(--well-border);border-radius:10px;padding:15px;margin-bottom:14px;} .fp-card-panel .card-title{display:flex;align-items:center;gap:8px;font-size:13px;margin:0 0 12px;text-transform:uppercase;letter-spacing:.08em;} .fp-card-panel .card-title svg{width:15px;height:15px;} .fp-reflink{display:flex;background:var(--field);border-radius:10px;overflow:hidden;} .fp-reflink input{flex:1;background:transparent;border:0;color:#fff;padding:10px 12px;font-weight:600;font-size:13px;border-radius:0 !important;} .fp-reflink .btn-copy{border:0;background:var(--accent);color:var(--accent-text);font-weight:800;font-size:12px;padding:0 16px;display:flex;align-items:center;gap:6px;cursor:pointer;} .fp-rates-flex{display:flex;justify-content:space-between;gap:12px;} .fp-rate-item .label{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-2);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:6px;} .fp-rate-item .value{font-family:"Lexend",sans-serif;font-weight:800;font-size:20px;} .fp-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;} @media (max-width:767px){.fp-stats-grid{grid-template-columns:repeat(2,1fr);}} .fp-stat-item{background:var(--field);border-radius:8px;padding:12px;} .fp-stat-label{font-size:11px;color:var(--text-2);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:6px;} .fp-stat-value{font-family:"Lexend",sans-serif;font-weight:800;font-size:18px;} /* ============================================================================ ACCOUNT — MyFame settingsTopcard / accCards / well-head ========================================================================== */ .fp-acc-top{background:var(--well);border:1px solid var(--well-border);border-radius:10px;padding:15px;margin-bottom:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;} .fp-acccard{display:flex;align-items:center;gap:12px;background:var(--field);border-radius:8px;padding:12px;} .fp-acccard>i{font-size:18px;color:#fff;} .fp-acccard p{margin:0 0 4px;font-size:11px;color:var(--text-2);text-transform:uppercase;letter-spacing:.08em;font-weight:700;display:flex;align-items:center;gap:8px;} .fp-acccard span{font-weight:700;font-size:13px;word-break:break-all;} .fp-acccard .chngEmail{background:none;border:0;color:var(--text-2);cursor:pointer;padding:0;font-size:11px;} .fp-wellhead{display:flex;align-items:center;gap:8px;font-family:"Lexend",sans-serif;font-weight:bold;font-size:14px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line);} /* API key reveal / copy buttons (injected by script.js) */ .fp-key-wrap{position:relative;} .fp-key-wrap .form-control{width:100%;padding-right:48px;} .fp-key-actions{position:absolute;top:50%;right:6px;transform:translateY(-50%);display:flex;gap:2px;} .fp-key-btn{background:none;border:0;padding:0;cursor:pointer;color:var(--text-2);display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .2s ease;height:36px;width:36px;flex:0 0 36px;} .fp-key-btn:hover,.fp-key-btn:active{color:#fff;background:var(--field-2);} .fp-key-btn svg{width:17px;height:17px;} /* ============================================================================ PUBLIC PAGES — MyFame guestNav / hero / loginwell / footer band ========================================================================== */ body.fp-public{padding-top:0;position:relative;} /* ---------------------------------------------------------------- landing backdrop Black themed decorative layer for public pages. Two large ring clusters are anchored so their centres sit OFF-screen — only a semicircle arc bleeds into view on each side (never a full centred circle). Floating white social glyphs (Instagram · X · YouTube · Facebook) drift with a gentle motion. Purely decorative · behind everything · never intercepts clicks. */ .fp-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;} /* right-edge semicircle cluster — big arcs sweeping in from the right */ .fp-bg::before{content:"";position:absolute;top:50%;right:0;width:150vmin;height:150vmin; transform:translate(42%,-50%);border-radius:50%; background: radial-gradient(circle,transparent 0 26%,rgba(255,255,255,.14) 26% 26.18%,transparent 26.18%), radial-gradient(circle,transparent 0 39%,rgba(255,255,255,.11) 39% 39.15%,transparent 39.15%), radial-gradient(circle,transparent 0 52%,rgba(255,255,255,.085) 52% 52.13%,transparent 52.13%), radial-gradient(circle,transparent 0 65%,rgba(255,255,255,.06) 65% 65.11%,transparent 65.11%);} /* left-edge semicircle cluster — big arcs sweeping in from the left */ .fp-bg::after{content:"";position:absolute;top:46%;left:0;width:120vmin;height:120vmin; transform:translate(-42%,-50%);border-radius:50%; background: radial-gradient(circle,transparent 0 30%,rgba(255,255,255,.12) 30% 30.18%,transparent 30.18%), radial-gradient(circle,transparent 0 45%,rgba(255,255,255,.085) 45% 45.15%,transparent 45.15%), radial-gradient(circle,transparent 0 60%,rgba(255,255,255,.06) 60% 60.13%,transparent 60.13%);} /* floating social glyphs */ .fp-bg .fp-glyph{position:absolute;color:#fff;opacity:.16;will-change:transform; animation:fp-float 14s ease-in-out infinite;} .fp-bg .fp-glyph svg{width:100%;height:100%;fill:currentColor; filter:drop-shadow(0 12px 30px rgba(255,255,255,.16));} .fp-bg .g1{top:11%;left:5%;width:124px;height:124px;--rot:-12deg;animation-duration:15s;animation-delay:0s;} .fp-bg .g2{top:56%;left:9%;width:96px;height:96px;--rot:9deg;opacity:.14;animation-duration:18s;animation-delay:-4s;} .fp-bg .g3{top:19%;right:11%;width:110px;height:110px;--rot:10deg;opacity:.17;animation-duration:16s;animation-delay:-7s;} .fp-bg .g4{bottom:11%;right:7%;width:138px;height:138px;--rot:-6deg;opacity:.16;animation-duration:20s;animation-delay:-2s;} .fp-bg .g5{top:41%;left:45%;width:74px;height:74px;--rot:-14deg;opacity:.11;animation-duration:17s;animation-delay:-9s;} .fp-bg .g6{bottom:27%;left:31%;width:64px;height:64px;--rot:16deg;opacity:.12;animation-duration:19s;animation-delay:-5s;} @keyframes fp-float{ 0% {transform:translateY(0) rotate(var(--rot));} 25% {transform:translateY(-16px) rotate(calc(var(--rot) + 4deg));} 50% {transform:translateY(-5px) rotate(var(--rot));} 75% {transform:translateY(13px) rotate(calc(var(--rot) - 4deg));} 100% {transform:translateY(0) rotate(var(--rot));} } @media (prefers-reduced-motion:reduce){ .fp-bg .fp-glyph{animation:none;transform:rotate(var(--rot));} } @media (max-width:767px){ .fp-bg .g5,.fp-bg .g6{display:none;} .fp-bg .g1,.fp-bg .g3{width:84px;height:84px;} .fp-bg .g2,.fp-bg .g4{width:70px;height:70px;} } /* (no z-index needed on public content — the backdrop is at z-index:-1) */ /* ---- backdrop on LOGGED-IN pages ---- The app backdrop starts after the fixed sidebar (250px) so the arcs and glyphs live in the content area, and the sidebar + all cards sit above it. */ .fp-bg--app{left:250px;} @media (max-width:991.2px){ .fp-bg--app{left:0;} } .fp-bg--app .fp-glyph{opacity:.12;} .fp-bg--app .fp-glyph.g2{opacity:.10;} .fp-bg--app .fp-glyph.g3{opacity:.13;} .fp-bg--app .fp-glyph.g4{opacity:.12;} .fp-bg--app .fp-glyph.g5{opacity:.08;} .fp-bg--app .fp-glyph.g6{opacity:.09;} /* ⚠️ Nothing here sets z-index on content wrappers on purpose. The backdrop sits at z-index:-1 (behind everything), so content needs no z-index at all. Adding one here creates a stacking context that traps Bootstrap modals underneath .modal-backdrop (z-index 1040) — the modal renders but becomes unclickable/untypeable. Do not re-add it. */ nav.navbar.fp-guestnav{background:transparent;border:0;margin-bottom:0;padding:14px 0;min-height:0;border-radius:0;} nav.navbar.fp-guestnav:before,nav.navbar.fp-guestnav:after{display:none !important;content:none !important;} .fp-guestnav-row{display:flex;align-items:center;justify-content:space-between;gap:10px;} nav.fp-guestnav .navbar-brand{color:#fff;font-family:"Lexend",sans-serif;font-weight:800;font-size:22px;height:auto;padding:8px 0;display:flex;align-items:center;float:none;margin:0;} nav.fp-guestnav .navbar-brand img{max-height:34px;} .fp-pubnav-right{display:flex;gap:8px;align-items:center;float:none;padding:0;flex:0 0 auto;} .fp-pubnav-right .btn{background:var(--field);color:#fff;border-radius:8px;font-size:13px;font-weight:700;padding:9px 18px;white-space:nowrap;} @media (max-width:480px){ nav.fp-guestnav .navbar-brand{font-size:18px;} nav.fp-guestnav .navbar-brand img{max-height:28px;} .fp-pubnav-right{gap:6px;} .fp-pubnav-right .btn{font-size:12px;padding:8px 12px;} } .fp-pubnav-right .btn.btn-primary{background:var(--accent);color:var(--accent-text);position:relative;} .fp-pubnav-right .btn.btn-primary:before{content:"";position:absolute;inset:0;border-radius:8px;z-index:-1;animation:fp-pulse 2.5s cubic-bezier(.4,0,.6,1) infinite;} @keyframes fp-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%{box-shadow:0 0 0 15px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}} .navbar-toggle{border:1px solid var(--line-2);background:var(--field);border-radius:10px;} .navbar-toggle .icon-bar{background:#fff;} /* hero — MyFame: col-lg-8 copy + col-lg-4 login card */ .fp-hero{position:relative;z-index:2;padding:24px 0 40px;} /* hero CTA row — cancel the global btn-primary margin-left:auto so the button sits where it should and doesn't stretch the flex row */ .fp-hero .btn,.fp-hero .btn-primary,.fp-strip .btn,.fp-strip .btn-primary{margin-left:0;} .fp-cta-row{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap;} .fp-cta-row .btn-primary{flex:0 0 auto;white-space:nowrap;} /* on phones keep the button and the social proof on ONE row (MyFame layout) */ @media (max-width:600px){ .fp-cta-row{flex-wrap:nowrap;gap:12px;} .fp-cta-row .btn-primary{padding:12px 18px;font-size:14px;} .fp-proof{min-width:0;flex:1 1 auto;gap:8px;} .fp-proof .text-muted{font-size:12px;line-height:1.25;} .fp-avatars img{height:30px;width:30px;} .fp-avatars img+img{margin-left:-8px;} } .fp-hero-grid{display:grid;grid-template-columns:2fr 1fr;gap:34px;align-items:center;} @media (max-width:991.2px){.fp-hero-grid{grid-template-columns:1fr;}} .fp-eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);display:block;margin-bottom:10px;} .fp-h1{font-size:44px;line-height:1.12;margin:0 0 18px;letter-spacing:-.01em;} @media (max-width:767px){.fp-h1{font-size:32px;}} /* MyFame .span_rect highlight — accent block behind text (blue → white) */ .fp-h1 .span_rect{position:relative;z-index:1;color:var(--accent-text);padding:0 6px;white-space:nowrap;} .fp-h1 .span_rect:after{content:"";position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;transform:rotate(-2deg);background-color:var(--accent);} .fp-lead{color:var(--text-2);font-weight:500;font-size:16px;line-height:1.65;max-width:56ch;} .fp-proof{display:flex;align-items:center;gap:10px;} .fp-avatars{display:flex;} .fp-avatars img{height:36px;width:36px;border-radius:50%;border:2px solid var(--bg);object-fit:cover;} .fp-avatars img+img{margin-left:-10px;} /* login card — MyFame .loginwell */ .fp-loginwell{background:var(--well);border:1px solid var(--well-border);border-radius:12px;padding:20px;} .fp-loginwell h4{margin:0 0 20px;} /* forgot-password sits ABOVE the input, on the label row (MyFame style) */ .fp-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;} .fp-label-row .control-label{margin-bottom:0;} .forgot-password{font-size:11px;color:var(--text-2);text-transform:none;letter-spacing:0;font-weight:600;} .forgot-password:hover{color:#fff;} /* Remember me toggle switch */ .fp-remember{display:flex;align-items:center;gap:10px;margin:12px 0 0;cursor:pointer;font-weight:600;text-transform:none;letter-spacing:0;} .fp-remember input{position:absolute;opacity:0;width:0;height:0;} .fp-remember .fp-switch{position:relative;height:22px;width:40px;flex:0 0 40px;border-radius:20px;background:var(--field);border:1px solid var(--line);transition:all .25s ease;} .fp-remember .fp-switch:before{content:"";position:absolute;top:2px;left:2px;height:16px;width:16px;border-radius:50%;background:#8a8a8a;transition:all .25s ease;} .fp-remember input:checked + .fp-switch{background:var(--accent);border-color:var(--accent);} .fp-remember input:checked + .fp-switch:before{left:20px;background:var(--accent-text);} .fp-remember input:focus-visible + .fp-switch{outline:2px solid var(--line-2);outline-offset:2px;} .fp-remember-tx{font-size:13px;color:var(--text-2);} .fp-remember:hover .fp-remember-tx{color:#fff;} /* password field with show/hide eye */ .fp-pass-wrap{position:relative;} .fp-pass-wrap .form-control{width:100%;padding-right:44px;} .fp-pass-toggle{position:absolute;top:50%;right:8px;transform:translateY(-50%);background:none;border:0;padding:6px;cursor:pointer;color:var(--text-2);display:flex;align-items:center;justify-content:center;border-radius:8px;} .fp-pass-toggle:hover{color:#fff;background:var(--field-2);} .fp-pass-toggle svg{width:18px;height:18px;} /* big "Sign in with Google" — matches the Sign in button footprint */ .fp-gbtn{margin-top:12px;width:100%;display:flex;align-items:center;justify-content:center;gap:10px; background:#fff;color:#0d0d0d;border:0;border-radius:10px;padding:12px 22px;font-size:15px;font-weight:700; font-family:"Inter",sans-serif;cursor:pointer;transition:all .25s ease; box-shadow:rgba(255,255,255,.2) 0 1px 0 0 inset;} .fp-gbtn:hover{background:#e6e6e6;} .fp-gbtn .fp-gicon{width:20px;height:20px;flex:0 0 20px;} .fp-loginwell-terms{margin:12px 0 0;text-align:center;font-size:11px;color:var(--text-2);font-weight:500;line-height:1.5;} .fp-loginwell-terms a{color:#fff;text-decoration:underline;} /* landing sections */ .fp-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--accent) !important;border:0 !important;color:var(--accent-text);} .fp-strip h2,.fp-strip .fp-eyebrow{color:var(--accent-text);} .fp-strip .fp-eyebrow{color:#00000099;} .fp-strip .text-muted{color:#00000099 !important;} .fp-strip .btn-primary{background:var(--accent-text);color:#fff;} .fp-strip .btn-primary:hover{background:#222;color:#fff;} .fp-strip-icons{display:flex;gap:10px;margin-top:14px;} .fp-strip-icons span{height:34px;width:34px;border-radius:50%;background:#00000010;display:flex;align-items:center;justify-content:center;} .fp-strip-icons svg{width:16px;height:16px;fill:var(--accent-text);} .fp-why-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start;} @media (max-width:991.2px){.fp-why-grid{grid-template-columns:1fr;}} /* DESKTOP ONLY — make the 4 stat boxes fill the same height as the video so the two columns line up. Grid items stretch by default, so we just need align-items:stretch; adding height:100% double-counts padding/border and leaves the columns ~22px out. Phone layout is untouched (single column). */ @media (min-width:992px){ .fp-why-grid{align-items:stretch;grid-template-columns:1.6fr 1fr;} .fp-stats{grid-template-rows:1fr 1fr;} .fp-stat{display:flex;flex-direction:column;justify-content:center;padding:24px !important;} .fp-stat .num{font-size:34px;} .fp-stat .lbl{font-size:14px;} .fp-reel-card{display:flex;} .fp-reel{flex:1 1 auto;aspect-ratio:auto;min-height:0;} } .fp-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;} @media (max-width:600px){.fp-stats{grid-template-columns:1fr;}} .fp-stat{margin-bottom:0;} .fp-stat-ico{height:34px;width:34px;border-radius:8px;background:var(--accent);color:var(--accent-text);display:flex;align-items:center;justify-content:center;margin-bottom:12px;} .fp-stat-ico svg{width:18px;height:18px;} .fp-stat .num{font-family:"Lexend",sans-serif;font-weight:800;font-size:28px;line-height:1;margin-bottom:6px;} .fp-stat .lbl{color:var(--text-2);font-weight:500;font-size:13px;} .fp-reel-card{padding:10px !important;margin-bottom:0;} .fp-reel{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:9/16;background:#000;} .fp-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .fp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;} @media (max-width:767px){.fp-steps{grid-template-columns:1fr;}} .fp-step{margin-bottom:0;} .fp-step .no{height:34px;width:34px;border-radius:50%;background:var(--accent);color:var(--accent-text);display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:12px;font-family:"Lexend",sans-serif;} .fp-step h4{margin:0 0 8px;font-size:16px;} .fp-step p{font-size:13px;line-height:1.6;margin:0;font-weight:500;} .fp-powered{text-align:center;padding:20px 0 40px;} .fp-powered .logos{display:flex;justify-content:center;gap:18px;margin-top:14px;flex-wrap:wrap;} .fp-powered .logos svg{width:26px;height:26px;fill:var(--text-2);transition:all .25s ease;} .fp-powered .logos svg:hover{fill:#fff;} .fp-trust{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-weight:500;} .fp-mail{display:inline-flex;align-items:center;gap:8px;background:var(--field);border-radius:20px;padding:9px 16px;font-weight:700;font-size:13px;color:#fff;text-decoration:none;} .fp-mail svg{width:15px;height:15px;} /* auth (signup / reset) — MyFame centered col-lg-5 card */ .fp-auth{display:flex;justify-content:center;padding:24px 0 40px;} .fp-auth-card{width:100%;max-width:460px;margin-bottom:0;} .fp-auth-title{margin:0 0 18px;font-size:18px;text-align:center;text-transform:uppercase;letter-spacing:.03em;} .fp-auth-or{display:flex;align-items:center;gap:12px;margin:16px 0;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--text-2);text-transform:uppercase;} .fp-auth-or:before,.fp-auth-or:after{content:"";flex:1;height:1px;background:#fff;opacity:.1;border-radius:10px;} .fp-gwrap{display:flex;justify-content:center;} .fp-auth-foot{text-align:center;margin-top:16px;font-size:13px;color:var(--text-2);font-weight:500;} .fp-auth-foot a{color:#fff;text-decoration:underline;} .fp-tilt{font-size:30px;margin:0 0 16px;} .fp-tilt span{position:relative;z-index:1;color:var(--accent-text);padding:0 6px;} .fp-tilt span:after{content:"";position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;transform:rotate(-2deg);background:var(--accent);} /* footer band — MyFame gradient-bg → flat grayscale band */ .fp-band{background:var(--bg-side);border-top:1px solid var(--line);margin-top:30px;padding:18px 0;} .fp-band-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;} .fp-band-brand{font-family:"Lexend",sans-serif;font-weight:800;color:#fff;font-size:16px;text-decoration:none;} .fp-band-brand img{max-height:26px;} .fp-band-links{display:flex;gap:18px;flex-wrap:wrap;} .fp-band-links a{color:var(--text-2);font-size:13px;font-weight:600;text-decoration:none;} .fp-band-links a:hover{color:#fff;} .fp-band-copy{color:var(--text-2);font-size:12px;font-weight:600;} /* ---------------------------------------------------------------- legal */ .fp-legal-head{text-align:center;margin:20px 0 24px;} .fp-legal-head h1{font-size:30px;margin:0 0 8px;} .fp-legal-badge{display:inline-block;background:var(--field);border-radius:20px;padding:6px 14px;font-size:12px;font-weight:700;color:var(--text-2);} .fp-legal .well{font-weight:500;line-height:1.7;font-size:14px;} .fp-legal h2{font-size:18px;margin:26px 0 10px;} .fp-legal h3{font-size:15px;margin:18px 0 8px;} .fp-legal ul{padding-left:20px;} .fp-legal li{margin-bottom:6px;} .fp-legal .lead{font-size:15px;font-weight:600;} /* ---------------------------------------------------------------- misc */ #notify-wrapper{position:fixed;bottom:20px;right:20px;z-index:9999;background:var(--accent);color:var(--accent-text);border-radius:10px;padding:12px 18px;font-weight:700;} .tickets-uploader .btn{background:var(--field);color:#fff;border-radius:8px;} .width-40{width:40%;} .nowrap{white-space:nowrap;} img{filter:none;}