/* ===================================================================== GiveRefer global chrome — redesigned header + footer. Loaded on every public page (partials/main.blade.php). All classes are grx-prefixed and scoped to .grx-header / .grx-footer so they don't collide with the legacy Bootstrap styles used by page bodies. ===================================================================== */ :root { --grx-pink: #ec2d7a; --grx-magenta: #c026d3; --grx-violet: #6d28d9; --grx-fg: #1c1530; --grx-muted: #6b6580; --grx-border: #ece8f2; --grx-gradient: linear-gradient(100deg, #ec2d7a 0%, #c026d3 50%, #6d28d9 100%); --grx-shadow-soft: 0 10px 40px -12px rgba(80, 20, 90, 0.12); --grx-shadow-brand: 0 18px 40px -12px rgba(192, 38, 211, 0.45); } /* Fixed-header offset. The header is position:fixed (immune to the legacy #wrapper{overflow:hidden} that breaks position:sticky), so push page content down on every public page. The homepage hero sits *under* the transparent header on purpose, so it opts out and adds its own top padding instead. */ body { padding-top: 64px; } body.grx-home-page { padding-top: 0; } /* ---------------- HEADER ---------------- */ .grx-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1080; font-family: 'Inter', 'Open Sans', system-ui, sans-serif; font-size: 16px; background: transparent; border-bottom: 1px solid transparent; transition: box-shadow .25s ease, background .25s ease, border-color .25s ease, backdrop-filter .25s ease; } .grx-header.is-scrolled { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--grx-border); box-shadow: var(--grx-shadow-soft); } .grx-header * { box-sizing: border-box; } .grx-header a { text-decoration: none; } .grx-bar { max-width: 1240px; margin: 0 auto; padding: 10.4px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; } .grx-logo__name, .grx-nav__link, .grx-btn, .grx-dd__toggle, .grx-coins { white-space: nowrap; } .grx-nav { flex-wrap: nowrap; } /* logo */ .grx-logo { display: inline-flex; align-items: center; gap: 9.6px; flex: none; } .grx-logo__mark { width: 38px; height: 38px; border-radius: 11px; background: #fff; display: grid; place-items: center; box-shadow: var(--grx-shadow-soft); } .grx-logo__mark img { width: 66%; height: 66%; object-fit: contain; } .grx-logo__name { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 800; font-size: 20.8px; letter-spacing: -.02em; background-image: var(--grx-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } /* desktop nav */ .grx-nav { display: none; align-items: center; gap: 2.4px; margin: 0; padding: 0; list-style: none; } @media (min-width: 1100px) { .grx-nav { display: flex; } } .grx-nav__link { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 8px 11.2px; border-radius: 8.8px; font-size: 14.72px; font-weight: 500; color: rgba(28,21,48,.72); background: transparent; border: 0; cursor: pointer; font-family: inherit; } .grx-nav__link:hover, .grx-nav__link.is-active { color: var(--grx-fg); } .grx-nav__link::after { content: ""; position: absolute; left: 11.2px; right: 11.2px; bottom: 2.4px; height: 2px; border-radius: 2px; background-image: var(--grx-gradient); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .grx-nav__link:hover::after, .grx-nav__link.is-active::after { transform: scaleX(1); } .grx-chev { transition: transform .2s ease; } .grx-has-mega[aria-expanded="true"] .grx-chev { transform: rotate(180deg); } /* mega menu */ .grx-mega-wrap { position: relative; } .grx-mega { position: absolute; left: 50%; top: calc(100% + 9.6px); transform: translateX(-50%) translateY(6px); width: min(896px, 92vw); background: #fff; border: 1px solid var(--grx-border); border-radius: 16px; box-shadow: var(--grx-shadow-soft); opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease; z-index: 1090; } .grx-mega-wrap.is-open .grx-mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .grx-mega__head { display: flex; align-items: center; justify-content: space-between; padding: 13.6px 20px; border-bottom: 1px solid var(--grx-border); } .grx-mega__head p { margin: 0; font-size: 14.4px; font-weight: 600; } .grx-mega__head a { font-size: 13.6px; font-weight: 600; color: var(--grx-magenta); display: inline-flex; align-items: center; gap: 4px; } .grx-mega__body { display: flex; gap: 20px; padding: 17.6px; } .grx-mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; flex: 1; } .grx-mega__item { display: flex; align-items: center; gap: 10.4px; padding: 8.8px 10.4px; border-radius: 11.2px; color: var(--grx-fg); } .grx-mega__item:hover { background: rgba(236,45,122,.06); } .grx-mega__icon { width: 33.6px; height: 33.6px; flex: none; display: grid; place-items: center; border-radius: 9.6px; background: rgba(236,45,122,.1); color: var(--grx-magenta); } .grx-mega__item:hover .grx-mega__icon { background-image: var(--grx-gradient); color: #fff; } .grx-mega__name { font-size: 13.6px; font-weight: 600; } .grx-mega__rail { width: 240px; flex: none; border-radius: 13.6px; background-image: var(--grx-gradient); color: #fff; padding: 16px; display: none; flex-direction: column; gap: 10.4px; } @media (min-width: 1280px) { .grx-mega__rail { display: flex; } } .grx-mega__railhead { display: flex; align-items: center; gap: 6.4px; font-size: 11.52px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.85); } .grx-mega__railcard { background: rgba(255,255,255,.16); border-radius: 11.2px; padding: 10.4px 12px; color: #fff; } .grx-mega__railcard b { font-size: 14.4px; } .grx-mega__railcard span { display: block; font-size: 12.48px; color: rgba(255,255,255,.85); } /* right-side actions */ .grx-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .grx-iconbtn { width: 38.4px; height: 38.4px; display: grid; place-items: center; border-radius: 11.2px; border: 1px solid var(--grx-border); background: rgba(255,255,255,.7); color: var(--grx-fg); cursor: pointer; } .grx-iconbtn:hover { background: #fff; color: var(--grx-magenta); } /* generic dropdown (country, profile) */ .grx-dd { position: relative; } .grx-dd__toggle { display: inline-flex; align-items: center; gap: 6.4px; padding: 8px 11.2px; border-radius: 11.2px; border: 1px solid var(--grx-border); background: rgba(255,255,255,.7); color: rgba(28,21,48,.85); font-size: 13.6px; font-weight: 500; cursor: pointer; font-family: inherit; } .grx-dd__toggle:hover { background: #fff; } .grx-dd__toggle img { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; } .grx-dd__menu { position: absolute; right: 0; top: calc(100% + 6.4px); min-width: 192px; background: #fff; border: 1px solid var(--grx-border); border-radius: 12.8px; box-shadow: var(--grx-shadow-soft); padding: 6.4px; z-index: 1090; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease; max-height: 352px; overflow: auto; } .grx-dd.is-open .grx-dd__menu { opacity: 1; visibility: visible; transform: translateY(0); } .grx-dd__item { display: flex; align-items: center; gap: 8.8px; padding: 8.8px 10.4px; border-radius: 8.8px; font-size: 14.08px; color: var(--grx-fg); } .grx-dd__item:hover { background: rgba(236,45,122,.06); color: var(--grx-fg); } .grx-dd__item img { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; } .grx-dd__item--danger { color: #dc2626; } .grx-dd__sep { height: 1px; background: var(--grx-border); margin: 5.6px 0; } /* coins pill */ .grx-coins { display: inline-flex; align-items: center; gap: 5.6px; padding: 7.2px 11.2px; border-radius: 999px; background: linear-gradient(135deg,#fbbf24,#f59e0b); color: #3a2a00; font-weight: 700; font-size: 13.12px; cursor: pointer; } /* buttons */ .grx-btn { display: inline-flex; align-items: center; gap: 7.2px; padding: 8.8px 16px; border-radius: 999px; font-size: 14.08px; font-weight: 600; cursor: pointer; border: 1px solid transparent; font-family: inherit; line-height: 1; } .grx-btn--ghost { background: transparent; color: rgba(28,21,48,.8); } .grx-btn--ghost:hover { color: var(--grx-fg); background: rgba(0,0,0,.04); } .grx-btn--primary { background-image: var(--grx-gradient); color: #fff; box-shadow: var(--grx-shadow-brand); } .grx-btn--primary:hover { color: #fff; opacity: .95; } .grx-actions .grx-login { display: none; } @media (min-width: 1100px) { .grx-actions .grx-login { display: inline-flex; } } .grx-submit__label { display: none; } @media (min-width: 640px) { .grx-submit__label { display: inline; } } /* burger */ .grx-burger { display: grid; } @media (min-width: 1100px) { .grx-burger { display: none; } } /* search panel (slides under bar) */ .grx-search { display: none; border-top: 1px solid var(--grx-border); background: rgba(255,255,255,.96); } .grx-search.is-open { display: block; } .grx-search__form { max-width: 1240px; margin: 0 auto; padding: 12px 20px; display: flex; gap: 8px; } .grx-search__field { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8.8px 14.4px; border: 1px solid var(--grx-border); border-radius: 999px; background: #fff; color: var(--grx-magenta); } .grx-search__field input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--grx-fg); } /* mobile panel */ .grx-mobile { display: none; border-top: 1px solid var(--grx-border); background: #fff; max-height: calc(100vh - 64px); overflow: auto; } .grx-mobile.is-open { display: block; } @media (min-width: 1100px) { .grx-mobile { display: none !important; } } .grx-mobile__inner { padding: 16px 20px 24px; } .grx-mobile__form { display: flex; gap: 8px; margin-bottom: 12px; } .grx-mobile__form .grx-search__field { background: #faf8fd; } .grx-mlink { display: flex; align-items: center; justify-content: space-between; padding: 11.2px 4px; font-size: 15.2px; font-weight: 500; color: var(--grx-fg); border-bottom: 1px solid var(--grx-border); width: 100%; background: transparent; border-left: 0; border-right: 0; border-top: 0; cursor: pointer; font-family: inherit; } .grx-msub { display: none; padding: 4px 0 8px 8px; } .grx-msub.is-open { display: block; } .grx-msub a { display: block; padding: 8px 4px; font-size: 14.08px; color: var(--grx-muted); } .grx-mobile__actions { margin-top: 16px; display: flex; flex-direction: column; gap: 9.6px; } .grx-mobile__actions .grx-btn { width: 100%; justify-content: center; } /* ---------------- FOOTER ---------------- */ .grx-footer { position: relative; overflow: hidden; color: #fff; font-family: 'Inter', 'Open Sans', system-ui, sans-serif; font-size: 16px; background: linear-gradient(135deg,#1c0a2b,#2a0d3f 55%,#13083a); } .grx-footer * { box-sizing: border-box; } .grx-footer a { text-decoration: none; } .grx-footer::before { content: ""; position: absolute; left: -96px; top: -32px; width: 288px; height: 288px; border-radius: 50%; background: rgba(109,40,217,.25); filter: blur(120px); } .grx-footer__inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 56px 20px 32px; } .grx-footer__top { display: grid; gap: 40px; grid-template-columns: 1fr; } @media (min-width: 992px) { .grx-footer__top { grid-template-columns: 1.4fr 2fr; } } .grx-footer__brandname { display: inline-flex; align-items: center; gap: 11px; } .grx-footer__brandtext { display: flex; flex-direction: column; line-height: 1.1; } .grx-footer__brandname .grx-logo__name { font-size: 20px; } .grx-footer__tagline { margin-top: 3px; font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,.55); } .grx-footer__about { margin-top: 16px; max-width: 416px; font-size: 14.4px; line-height: 1.6; color: rgba(255,255,255,.6); } .grx-news { margin-top: 24px; } .grx-news p { font-size: 14.4px; font-weight: 600; margin: 0 0 9.6px; } .grx-news form { display: flex; gap: 8px; align-items: center; padding: 5.6px 5.6px 5.6px 16px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(255,255,255,.05); max-width: 384px; } .grx-news input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font-size: 14.4px; } .grx-news input::placeholder { color: rgba(255,255,255,.4); } .grx-news button { width: 36.8px; height: 36.8px; flex: none; border: 0; border-radius: 50%; background-image: var(--grx-gradient); color: #fff; display: grid; place-items: center; cursor: pointer; } .grx-news .text-danger { display:block; margin:6.4px 0 0; color:#fda4af; font-size:12.8px; } .grx-news .alert-success { margin-top:8px; color:#86efac; font-size:13.6px; } .grx-footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } @media (min-width: 768px) { .grx-footer__cols { grid-template-columns: repeat(4, 1fr); } } .grx-fcol h3 { font-size: 13.12px; font-weight: 700; color: #fff; text-transform: none; margin: 0 0 16px; } .grx-fcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10.4px; } .grx-fcol a { font-size: 13.6px; color: rgba(255,255,255,.6); } .grx-fcol a:hover { color: #fff; } /* app badges */ .grx-app { margin-top: 24px; } .grx-app > p { font-size: 14.4px; font-weight: 600; margin: 0 0 12px; } .grx-appbadges { display: flex; flex-wrap: wrap; gap: 12px; } .grx-appbtn { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 12px; background: #0b0b0f; color: #fff; text-decoration: none; } .grx-appbtn:hover { color: #fff; opacity: .9; } .grx-appbtn span { display: flex; flex-direction: column; line-height: 1.15; font-weight: 700; font-size: 15px; } .grx-appbtn small { font-weight: 500; font-size: 10px; opacity: .8; } .grx-appbtn svg { display: inline-block; flex-shrink: 0; overflow: visible !important; fill: currentColor; stroke: none; } /* Coming-soon variant: muted, no pointer, no hover change */ .grx-appbtn--soon { opacity: .5; cursor: default; } .grx-appbtn--soon:hover { opacity: .5; } /* socials (FontAwesome brand glyphs) */ .grx-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .grx-social a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); color: rgba(255,255,255,.78); font-size: 15px; transition: background .2s ease, color .2s ease; } .grx-social a:hover { background-image: var(--grx-gradient); color: #fff; border-color: transparent; } /* faint genie watermark, bottom-right */ .grx-footer__genie { position: absolute; right: 16px; bottom: 0; width: 220px; max-width: 32%; opacity: .06; pointer-events: none; z-index: 0; filter: grayscale(0.2); } /* Move the legacy Telegram floating button to the right, above the back-to-top arrow, so it no longer overlaps the footer social icons (bottom-left). */ #telegrambtn { left: auto !important; right: 23px !important; bottom: 84px !important; } /* Defeat the legacy `#footer { … }` rules (id specificity) that the old footer markup relied on — they were forcing a black bg, zeroing the about margin, and adding a 60px top margin on #subscription_form. */ .grx-footer { background: linear-gradient(180deg, #2a0e40 0%, #1d0a33 55%, #160a28 100%) !important; } .grx-footer .grx-footer__about { margin-top: 18px !important; margin-bottom: 0 !important; } .grx-footer .grx-news > p { margin: 0 0 12px !important; } .grx-footer .grx-news form, .grx-footer #subscription_form { margin: 0 !important; } .grx-footer .grx-social a { color: rgba(255,255,255,.78) !important; } .grx-footer .grx-social a:hover { color: #fff !important; } /* muted column + legal links. Legacy `#footer ul li a{color:#eee!important;font-size:15px!important}` has id-specificity, so we must out-rank it: `#footer .grx-fcol a` (1,1,1) > `#footer ul li a` (1,0,3). */ #footer .grx-fcol a, #footer .grx-footer__legal a { color: rgba(255,255,255,.6) !important; font-size: 14px !important; font-weight: 500 !important; } #footer .grx-fcol a:hover, #footer .grx-footer__legal a:hover { color: #fff !important; } /* spacing under the app heading */ .grx-footer .grx-app > p { margin: 0 0 16px !important; } /* footer brand wordmark is solid white (header keeps the gradient) */ .grx-footer .grx-footer__brandname .grx-logo__name { background: none !important; -webkit-text-fill-color: #fff !important; color: #fff !important; } .grx-footer__bottom { position: relative; z-index: 1; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: space-between; } @media (min-width: 640px) { .grx-footer__bottom { flex-direction: row; } } .grx-footer__bottom p { margin: 0; font-size: 13.12px; color: rgba(255,255,255,.5); } .grx-footer__legal { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; margin: 0; padding: 0; } .grx-footer__legal a { font-size: 13.12px; color: rgba(255,255,255,.5); } .grx-footer__legal a:hover { color: #fff; } @media (prefers-reduced-motion: reduce) { .grx-mega, .grx-dd__menu, .grx-nav__link::after { transition: none; } } /* ===================================================================== Defeat the site-wide rule in upgrade/css/main.css: button, input[type=submit], .btn { background:#FB6765 !important; color:#fff !important; padding:14px 10px !important; font-size:14px !important; ... } Every