/* ============================================================ GodBless Matrimony — Theme CSS Font: Manrope (loaded in ) ============================================================ */ /* ── Variables ── */ :root { --gb-purple: #6E3FBF; --gb-purple-hover:#4A2A8A; --gb-purple-deep: #2A1B4F; --gb-purple-ink: #1C1530; --gb-green: #7DC560; --gb-green-hover: #8FD673; --gb-green-dark: #3E7F27; --gb-green-tint: #E6F5DD; --gb-t1: #F1EAFB; --gb-t2: #EDE6FA; --gb-t3: #DCCFF5; --gb-t4: #C9B8F0; --gb-t5: #B9A8E8; --gb-bg: #F7F5FC; --gb-border: #E6E1F0; --gb-muted: #6B6480; --gb-faint: #9A93AE; --gb-text: #1C1530; --gb-shadow-card: 0 2px 10px rgba(42,27,79,.05); --gb-shadow-hover:0 14px 30px rgba(42,27,79,.14); --gb-shadow-dd: 0 18px 50px rgba(42,27,79,.18); } /* ── Base ── */ body { font-family: 'Manrope', sans-serif; color: #1C1530; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Links ── Never underline (overrides Bootstrap's a:hover underline). Hover reads as a colour deepen + soft tint instead. */ a { color: #6E3FBF; text-decoration: none; transition: color .18s ease, opacity .18s ease, filter .18s ease; } a:hover, a:focus, a:active { text-decoration: none; } a:hover { color: #4A2A8A; opacity: .92; } /* Buttons opt out of the generic link hover above */ a.gb-btn-purple:hover, a.gb-btn-purple:focus, a.gb-btn-green:hover, a.gb-btn-green:focus, a.gb-btn-ghost:hover, a.gb-btn-ghost:focus { opacity: 1; } /* Standalone links get a subtle pill tint; inline prose links stay flat so text never reflows mid-paragraph. */ .gb-header__nav a, .gb-footer a, .gb-link { border-radius: 999px; transition: color .18s ease, background-color .18s ease, transform .18s ease; } .gb-header__nav a:hover, .gb-link:hover { background-color: rgba(110, 63, 191, .10); color: #6E3FBF; } .gb-footer a:hover { color: #fff; transform: translateX(2px); } h1, h2, h3, h4, h5, h6 { font-family: 'Manrope', sans-serif; margin: 0; letter-spacing: -.02em; font-weight: 800; } .gb-wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 48px; box-sizing: border-box; } @media (max-width: 640px) { .gb-wrap { padding: 0 16px; } } /* ── Buttons ── */ .gb-btn-ghost { color: #fff; font-weight: 700; font-size: 14px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.55); transition: .15s; background: transparent; text-decoration: none; display: inline-flex; align-items: center; } .gb-btn-ghost:hover { background: rgba(255,255,255,.15); color: #fff; } .gb-header--sticky .gb-btn-ghost { color: #6E3FBF; border-color: #6E3FBF; } .gb-header--sticky .gb-btn-ghost:hover { background: #F1EAFB; color: #6E3FBF; } .gb-btn-green { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; border-radius: 999px; padding: 11px 20px; background: #7DC560; color: #0F2A05; box-shadow: 0 6px 18px rgba(125,197,96,.4); border: none; transition: .15s; cursor: pointer; font-family: inherit; text-decoration: none; } .gb-btn-green:hover { background: #8FD673; color: #0F2A05; } .gb-btn-purple { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; border-radius: 999px; padding: 11px 20px; background: #6E3FBF; color: #fff; box-shadow: 0 6px 18px rgba(110,63,191,.3); border: none; transition: .15s; cursor: pointer; font-family: inherit; text-decoration: none; } /* Glow only — background and white text stay put */ .gb-btn-purple:hover, .gb-btn-purple:focus, .gb-btn-purple:active { background: #6E3FBF; color: #fff; opacity: 1; box-shadow: 0 0 0 4px rgba(110,63,191,.22), 0 8px 22px rgba(110,63,191,.35); } /* ── Header ── */ .gb-header { position: absolute; left: 0; right: 0; z-index: 100; } .gb-header--sticky { position: sticky; top: 0; background: #fff; box-shadow: 0 1px 0 #E6E1F0; z-index: 100; } .gb-header__inner { display: flex; align-items: center; gap: 32px; height: 80px; } .gb-logo-wrap { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.92); padding: 6px 12px; border-radius: 12px; backdrop-filter: blur(6px); flex-shrink: 0; text-decoration: none; } .gb-header--sticky .gb-logo-wrap { background: transparent; backdrop-filter: none; padding: 0; } .gb-logo { height: 38px; display: block; } .gb-nav { display: flex; gap: 6px; } .gb-nav-link { color: #fff; font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 999px; transition: background .15s; text-decoration: none; } .gb-nav-link:hover { background: rgba(255,255,255,.18); color: #fff; } .gb-nav-link--active { background: rgba(255,255,255,.18); } .gb-header--sticky .gb-nav-link { color: #1C1530; } .gb-header--sticky .gb-nav-link:hover, .gb-header--sticky .gb-nav-link--active { background: #F1EAFB; color: #6E3FBF; } .gb-header__actions { margin-left: auto; display: flex; gap: 10px; align-items: center; } .gb-burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.55); background: transparent; color: #fff; font-size: 20px; align-items: center; justify-content: center; cursor: pointer; line-height: 1; } .gb-header--sticky .gb-burger { border-color: #6E3FBF; color: #6E3FBF; } /* User button */ .gb-user-btn { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.3); border-radius: 999px; padding: 6px 12px 6px 6px; cursor: pointer; font-weight: 700; font-size: 14px; color: #fff; transition: .15s; font-family: inherit; } .gb-user-btn:hover { background: rgba(255,255,255,.25); } .gb-header--sticky .gb-user-btn { background: #F7F5FC; border-color: #E6E1F0; color: #1C1530; } .gb-user-btn__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .gb-user-btn__initials { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex-shrink: 0; } .gb-user-btn__initials--m { background: linear-gradient(135deg,#A98EF0,#6E3FBF); color: #fff; } .gb-user-btn__initials--f { background: linear-gradient(135deg,#8FD673,#4E9A33); color: #fff; } /* User menu */ .gb-user-menu { position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border-radius: 18px; box-shadow: 0 18px 50px rgba(42,27,79,.18); min-width: 220px; overflow: hidden; z-index: 200; } .gb-user-menu__header { padding: 14px 16px; background: #F7F5FC; border-bottom: 1px solid #E6E1F0; } .gb-user-menu__name { font-weight: 700; font-size: 14px; color: #1C1530; } .gb-user-menu__id { font-size: 12px; color: #6B6480; margin-top: 2px; } .gb-user-menu__item { display: flex; align-items: center; gap: 10px; padding: 11px 16px; font-size: 14px; color: #1C1530; font-weight: 500; transition: background .1s; border: none; background: none; width: 100%; text-align: left; cursor: pointer; font-family: inherit; text-decoration: none; } .gb-user-menu__item:hover { background: #F1EAFB; color: #6E3FBF; } .gb-user-menu__item--danger:hover { background: #FEF2F2; color: #DC2626; } .gb-user-menu__sep { height: 1px; background: #E6E1F0; margin: 4px 0; } .gb-user-menu__badge { margin-left: auto; font-size: 11px; font-weight: 700; background: #6E3FBF; color: #fff; border-radius: 999px; padding: 2px 7px; } /* ── Mobile nav ── */ @media (max-width: 960px) { .gb-nav { display: none; } .gb-btn-ghost { display: none; } .gb-burger { display: inline-flex; } } .gb-mobile-nav { position: fixed; inset: 0; z-index: 300; pointer-events: none; visibility: hidden; } .gb-mobile-nav.open { pointer-events: auto; visibility: visible; } .gb-mobile-nav__overlay { position: absolute; inset: 0; background: rgba(28,21,48,.55); opacity: 0; transition: opacity .25s; } .gb-mobile-nav.open .gb-mobile-nav__overlay { opacity: 1; } .gb-mobile-nav__panel { position: absolute; top: 0; right: 0; width: 280px; height: 100%; background: #fff; transform: translateX(100%); transition: transform .25s; display: flex; flex-direction: column; overflow-y: auto; } .gb-mobile-nav.open .gb-mobile-nav__panel { transform: translateX(0); } .gb-mobile-nav__head { padding: 20px; border-bottom: 1px solid #E6E1F0; display: flex; justify-content: space-between; align-items: center; } .gb-mobile-nav__close { width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid #E6E1F0; background: none; cursor: pointer; font-size: 18px; display: grid; place-items: center; } .gb-mobile-nav__links { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 2px; } .gb-mobile-nav__link { display: block; padding: 12px 14px; border-radius: 12px; font-weight: 600; font-size: 15px; color: #1C1530; transition: background .1s; text-decoration: none; } .gb-mobile-nav__link:hover, .gb-mobile-nav__link--active { background: #F1EAFB; color: #6E3FBF; } .gb-mobile-nav__footer { padding: 16px; border-top: 1px solid #E6E1F0; display: flex; flex-direction: column; gap: 10px; } /* ── Hero ── */ .gb-hero { position: relative; min-height: 680px; background: #2A1B4F; overflow: hidden; display: grid; } .gb-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: left center; transition: opacity 1.2s; } .gb-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,21,48,0) 45%, rgba(28,21,48,.55) 100%); } .gb-hero__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(rgba(255,255,255,0), #fff); } .gb-hero__inner { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 130px 48px 80px; box-sizing: border-box; display: grid; grid-template-columns: 1fr 440px; gap: 40px; align-items: center; } .gb-hero__copy { align-self: end; padding-bottom: 20px; } .gb-hero__badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(4px); } .gb-hero__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #7DC560; display: inline-block; } .gb-hero__slide-dots { display: flex; gap: 8px; margin-top: 22px; } .gb-hero__dot { width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0; background: rgba(255,255,255,.5); cursor: pointer; transition: .3s; } .gb-hero__dot.active { width: 28px; background: #7DC560; } @media (max-width: 960px) { .gb-hero__inner { grid-template-columns: 1fr; padding-top: 96px; } .gb-hero__copy { display: none; } } @media (max-width: 640px) { .gb-hero__inner { padding-left: 16px; padding-right: 16px; padding-bottom: 40px; } .gb-hero { min-height: 560px; } } /* ── Quick search form ── */ .gb-qsf { background: #fff; border-radius: 22px; padding: 24px; box-shadow: 0 30px 80px rgba(28,21,48,.35), 0 0 0 1px rgba(28,21,48,.05); } .gb-qsf__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6E3FBF; } .gb-qsf__title { font-size: 24px; margin: 6px 0 18px; letter-spacing: -.02em; } .gb-qsf__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #F3EFFA; border-radius: 14px; padding: 5px; } .gb-qsf__tab { border: 0; border-radius: 10px; padding: 11px; font-weight: 700; font-size: 14px; cursor: pointer; background: transparent; color: #6B6480; transition: .15s; font-family: inherit; } .gb-qsf__tab.active { background: #fff; color: #6E3FBF; box-shadow: 0 2px 8px rgba(42,27,79,.12); } .gb-qsf__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .gb-qsf__row { margin-top: 8px; } /* ── Hero search column: direct lookup box above the filtered search ── */ .gb-qsf-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; } /* Direct profile ID / name lookup — its own card, its own button */ .gb-idf { background: #fff; border-radius: 18px; padding: 20px 20px 16px; box-shadow: 0 18px 50px rgba(28,21,48,.28), 0 0 0 1px rgba(28,21,48,.05); } .gb-idf__title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #1C1530; margin: 0 0 12px; } .gb-idf__label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6E3FBF; margin-bottom: 9px; } .gb-idf__row { display: flex; gap: 8px; align-items: stretch; } .gb-idf__field { position: relative; flex: 1 1 auto; min-width: 0; background: #F7F5FC; border: 1.5px solid transparent; border-radius: 13px; transition: border-color .15s, box-shadow .15s; } .gb-idf__field:focus-within { border-color: #6E3FBF; box-shadow: 0 0 0 3px rgba(110,63,191,.12); } .gb-idf__ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #8B849E; pointer-events: none; } .gb-idf__inp { width: 100%; box-sizing: border-box; padding: 13px 14px 13px 40px; border: 0; background: none; outline: none; font-family: inherit; font-size: 16px; /* 16px stops iOS zooming on focus */ font-weight: 700; color: #1C1530; -webkit-appearance: none; appearance: none; } .gb-idf__inp::placeholder { color: #9A93AE; font-weight: 500; } .gb-idf__inp::-webkit-search-cancel-button { cursor: pointer; } .gb-idf__btn { flex: 0 0 auto; width: 50px; border: 0; border-radius: 13px; background: #6E3FBF; color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(110,63,191,.32); transition: background .15s, box-shadow .15s; } .gb-idf__btn:hover { background: #4A2A8A; box-shadow: 0 0 0 4px rgba(110,63,191,.18), 0 8px 20px rgba(110,63,191,.4); } .gb-idf__hint { margin: 9px 0 0; font-size: 11.5px; line-height: 1.5; color: #9A93AE; } @media (max-width: 640px) { .gb-idf { padding: 16px 15px 13px; border-radius: 16px; } .gb-idf__title { font-size: 20px; margin-bottom: 10px; } .gb-idf__hint { font-size: 11px; } } .gb-qsf__submit { width: 100%; margin-top: 12px; border: 0; border-radius: 14px; padding: 16px; font-weight: 800; font-size: 15px; cursor: pointer; background: #6E3FBF; color: #fff; box-shadow: 0 8px 22px rgba(110,63,191,.35); font-family: inherit; transition: .15s; } .gb-qsf__submit:hover { background: #4A2A8A; } .gb-qsf__foot { text-align: center; font-size: 13px; color: #6B6480; margin-top: 12px; } /* ── Custom dropdown ── */ .gb-dd { position: relative; display: block; width: 100%; } .gb-dd__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; background: #F7F5FC; border: 1.5px solid transparent; border-radius: 14px; padding: 10.5px 14.5px; cursor: pointer; transition: border-color .15s, box-shadow .15s; font-family: inherit; } .gb-dd__btn:focus, .gb-dd__btn[aria-expanded="true"] { border-color: #6E3FBF; box-shadow: 0 0 0 3px rgba(110,63,191,.15); outline: none; } .gb-dd__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6B6480; } .gb-dd__value { display: block; font-size: 16px; font-weight: 700; margin-top: 4px; color: #1C1530; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gb-dd__value--ph { color: #9A93AE; } .gb-dd__chevron { flex: 0 0 auto; transition: transform .2s; } .gb-dd__btn[aria-expanded="true"] .gb-dd__chevron { transform: rotate(180deg); } .gb-dd__menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border-radius: 18px; box-shadow: 0 18px 50px rgba(42,27,79,.18); z-index: 50; overflow: hidden; /* clips scroll-inner to border-radius */ display: none; } .gb-dd__menu.open { display: block; } /* Opens upward when the hero would clip a downward menu */ .gb-dd__menu--up { top: auto; bottom: calc(100% + 6px); } /* inner scroll wrapper keeps border-radius intact on outer element */ .gb-dd__options { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; } .gb-dd__options::-webkit-scrollbar { width: 6px; } .gb-dd__options::-webkit-scrollbar-thumb { background: #CFC6E4; border-radius: 3px; } .gb-dd__options::-webkit-scrollbar-track { background: transparent; } .gb-dd__option { display: block; width: 100%; text-align: left; padding: 12px 14px; border: none; background: none; font-size: 14px; font-family: inherit; cursor: pointer; transition: background .1s; } .gb-dd__option:hover, .gb-dd__option.selected { background: #F1EAFB; color: #6E3FBF; font-weight: 700; } /* ── Stats bar ── */ .gb-stats { margin-top: -24px; position: relative; display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; font-size: 13px; font-weight: 700; background: #2A1B4F; color: #fff; border-radius: 999px; padding: 14px 28px; box-shadow: 0 12px 30px rgba(42,27,79,.25); } .gb-stats__item { display: inline-flex; align-items: baseline; gap: 8px; } .gb-stats__num { font-size: 18px; letter-spacing: -.02em; font-weight: 800; } .gb-stats__lbl { color: #B9A8E8; font-weight: 600; } .gb-stats__link { margin-left: auto; color: #7DC560; font-weight: 700; } .gb-stats__link:hover { color: #8FD673; } @media (max-width: 760px) { .gb-stats { border-radius: 20px; } .gb-stats__link { display: none; } } /* ── Sections ── */ .gb-section { padding-top: 56px; } .gb-section__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 12px; flex-wrap: wrap; } .gb-section__title { font-size: 30px; } .gb-section__link { font-size: 14px; font-weight: 700; } .gb-section__sub { margin: 0 0 20px; color: #6B6480; font-size: 15px; } /* ── Profile cards ── */ /* Featured profiles — one swipeable row, arrows at both ends. The viewport is position:relative so the arrows can sit over the edges; min-width:0 keeps the scroller's content width from pushing the page wider than the screen. */ .gb-profiles-vp { position: relative; min-width: 0; } .gb-profiles-grid { display: flex; gap: 14px; overflow-x: auto; /* overflow-x:auto computes overflow-y to auto too, which would clip the card's hover lift and shadow — pin it and pad instead. */ overflow-y: hidden; padding: 6px 0 10px; scrollbar-width: none; scroll-behavior: smooth; cursor: grab; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; min-width: 0; } .gb-profiles-grid::-webkit-scrollbar { display: none; } .gb-profiles-grid.is-drag { cursor: grabbing; scroll-behavior: auto; user-select: none; } .gb-profiles-grid.is-drag .gb-profile-card { pointer-events: none; } .gb-profiles-grid > .gb-profile-card { flex: 0 0 200px; scroll-snap-align: start; } .gb-profiles-grid img, .gb-profiles-grid b, .gb-profiles-grid small { -webkit-user-drag: none; user-select: none; } /* Arrows */ .gb-prow-nav { position: absolute; top: 125px; /* centre of a 200x250 thumb */ transform: translateY(-50%); width: 40px; height: 40px; padding: 0; border: 1.5px solid #E6E1F0; border-radius: 50%; background: #fff; color: #4B4460; display: grid; place-items: center; cursor: pointer; z-index: 3; box-shadow: 0 4px 14px rgba(28,21,48,.16); transition: opacity .18s, visibility .18s, color .15s, border-color .15s; } .gb-prow-nav:hover { color: #6E3FBF; border-color: #6E3FBF; } .gb-prow-nav[hidden] { display: none; } .gb-prow-nav.is-off { opacity: 0; visibility: hidden; pointer-events: none; } .gb-prow-nav--prev { left: -12px; } .gb-prow-nav--next { right: -12px; } /* Fade the edge that still has content */ .gb-profiles-vp::before, .gb-profiles-vp::after { content: ''; position: absolute; top: 6px; bottom: 10px; width: 40px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .18s; } .gb-profiles-vp::before { left: 0; background: linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)); } .gb-profiles-vp::after { right: 0; background: linear-gradient(270deg, #fff 30%, rgba(255,255,255,0)); } .gb-profiles-vp.can-prev::before { opacity: 1; } .gb-profiles-vp.can-next::after { opacity: 1; } @media (max-width: 640px) { .gb-profiles-grid > .gb-profile-card { flex: 0 0 150px; } .gb-prow-nav { display: none; } /* swipe instead */ } .gb-profile-card { background: #fff; border: 1px solid #E6E1F0; border-radius: 18px; overflow: hidden; color: inherit; display: flex; flex-direction: column; box-shadow: 0 2px 10px rgba(42,27,79,.05); transition: .18s; text-decoration: none; } .gb-profile-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(42,27,79,.14); color: inherit; } .gb-profile-card__thumb { aspect-ratio: 4/5; position: relative; display: grid; place-items: center; } .gb-profile-card__thumb--m { background: linear-gradient(160deg,#A98EF0,#6E3FBF); } .gb-profile-card__thumb--f { background: linear-gradient(160deg,#8FD673,#4E9A33); } .gb-profile-card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .gb-profile-card__initials { font-size: 40px; font-weight: 800; color: rgba(255,255,255,.85); letter-spacing: -.03em; position: relative; z-index: 1; } .gb-profile-card__id { position: absolute; left: 10px; top: 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.9); color: #4A2A8A; z-index: 2; } .gb-profile-card__online { position: absolute; right: 10px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: #7DC560; box-shadow: 0 0 0 3px rgba(255,255,255,.9); z-index: 2; } .gb-profile-card__body { padding: 12px 14px 14px; } .gb-profile-card__name { display: block; font-size: 15px; font-weight: 700; } .gb-profile-card__meta { display: block; font-size: 12.5px; color: #6B6480; margin-top: 3px; } .gb-profile-card__denom { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 700; color: #6E3FBF; background: #F1EAFB; padding: 4px 9px; border-radius: 999px; } /* ── Denomination cards ── */ /* ── Denomination pills ── */ .gb-denom-pills { display: flex; flex-wrap: wrap; gap: 10px; } .gb-denom-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 8px 9px 16px; background: #fff; border: 1.5px solid #E6E1F0; border-radius: 999px; color: #1C1530; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color .18s, background-color .18s, transform .18s, box-shadow .18s; } .gb-denom-pill:hover { border-color: #6E3FBF; color: #6E3FBF; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(110,63,191,.16); } .gb-denom-pill__count { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 8px; border-radius: 999px; background: #EDE8F8; color: #6E3FBF; font-size: 11.5px; font-weight: 800; } .gb-denom-pill:hover .gb-denom-pill__count { background: #DCCFF5; } .gb-denoms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } .gb-denom-card { background: #fff; border: 1px solid #E6E1F0; border-radius: 16px; box-shadow: 0 2px 10px rgba(42,27,79,.05); padding: 14px 16px; display: flex; align-items: center; gap: 12px; color: inherit; transition: .18s; text-decoration: none; } .gb-denom-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(42,27,79,.14); color: inherit; } .gb-denom-card__icon { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #4A2A8A; background: linear-gradient(135deg, #EDE6FA, #DCCFF5); } .gb-denom-card__name { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; } .gb-denom-card__count { display: block; font-size: 12px; color: #6B6480; margin-top: 2px; } /* ── How it works ── */ .gb-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .gb-step { background: #F7F5FC; border-radius: 20px; padding: 24px; position: relative; overflow: hidden; } .gb-step__num { font-size: 64px; font-weight: 800; letter-spacing: -.05em; color: #E6DDF7; position: absolute; right: 16px; top: 4px; line-height: 1; } .gb-step__icon { width: 44px; height: 44px; border-radius: 12px; background: #6E3FBF; display: grid; place-items: center; color: #fff; position: relative; } .gb-step__title { display: block; font-size: 16px; font-weight: 700; margin-top: 16px; position: relative; } .gb-step__text { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: #6B6480; position: relative; } /* ── Two-column (stories + why) ── */ .gb-two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; padding-top: 56px; } .gb-stories-wrap { background: linear-gradient(160deg, #F1EAFB, #E6F5DD); border-radius: 24px; padding: 28px; } .gb-stories-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; gap: 12px; } .gb-story-item { background: #fff; border-radius: 16px; padding: 16px; display: flex; gap: 14px; align-items: flex-start; box-shadow: 0 2px 10px rgba(42,27,79,.05); } .gb-story-item + .gb-story-item { margin-top: 10px; } .gb-story-item__avatar { width: 56px; height: 56px; border-radius: 16px; flex: 0 0 auto; background: linear-gradient(135deg,#A98EF0,#6E3FBF); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; } .gb-story-item__name { font-size: 15px; font-weight: 700; } .gb-story-item__meta { font-size: 12px; color: #9A93AE; margin: 2px 0 6px; } .gb-story-item__text { margin: 0; font-size: 13.5px; line-height: 1.55; color: #4B4460; } .gb-why-wrap { background: #fff; border: 1px solid #E6E1F0; border-radius: 24px; padding: 28px; box-shadow: 0 2px 10px rgba(42,27,79,.05); } .gb-why-title { font-size: 24px; margin-bottom: 18px; } .gb-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 20px; } .gb-why-item { display: flex; gap: 12px; align-items: flex-start; } .gb-why-item__icon { width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto; background: #E6F5DD; color: #3E7F27; display: grid; place-items: center; } .gb-why-item__title { display: block; font-size: 14.5px; font-weight: 700; } .gb-why-item__text { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: #6B6480; } /* ── Plans teaser ── */ .gb-plans-teaser { margin: 56px 0 0; background: linear-gradient(135deg, #6E3FBF, #2A1B4F); border-radius: 28px; padding: 48px; color: #fff; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; align-items: center; } @media (max-width: 640px) { .gb-plans-teaser { padding: 28px 20px; } } .gb-plans-teaser__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #B9A8E8; } .gb-plans-teaser__title { font-size: 32px; line-height: 1.1; margin: 12px 0; } .gb-plans-teaser__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: #D9CFF3; } .gb-plan-card { border-radius: 20px; padding: 24px; } .gb-plan-card--free { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); } .gb-plan-card--premium { background: #fff; color: #1C1530; } .gb-plan-card__row { display: flex; justify-content: space-between; align-items: center; } .gb-plan-card__name { font-size: 16px; font-weight: 700; } .gb-plan-card__badge { font-size: 10.5px; font-weight: 800; padding: 5px 10px; border-radius: 999px; color: #3E7F27; background: #E6F5DD; } .gb-plan-card__price { font-size: 40px; font-weight: 800; margin-top: 10px; letter-spacing: -.03em; } .gb-plan-card__period { font-size: 14px; font-weight: 600; color: #6B6480; } .gb-plan-card--free .gb-plan-card__period { color: #D9CFF3; } .gb-plan-card__note { font-size: 12.5px; color: #6B6480; margin-bottom: 14px; } .gb-plan-card--free .gb-plan-card__note { color: #D9CFF3; } .gb-plan-card__features { list-style: none; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.9; } .gb-plan-card--free .gb-plan-card__features { color: #EDE6FA; } .gb-plan-card--premium .gb-plan-card__features { color: #4B4460; } .gb-plan-card__cta { display: flex; justify-content: center; margin-top: 16px; padding: 12px; border-radius: 999px; font-weight: 700; font-size: 14px; text-align: center; transition: .15s; text-decoration: none; font-family: inherit; } .gb-plan-card--free .gb-plan-card__cta { border: 1.5px solid rgba(255,255,255,.5); color: #fff; } .gb-plan-card--free .gb-plan-card__cta:hover { background: rgba(255,255,255,.15); color: #fff; } .gb-plan-card--premium .gb-plan-card__cta { background: #6E3FBF; color: #fff; box-shadow: 0 6px 18px rgba(110,63,191,.3); } .gb-plan-card--premium .gb-plan-card__cta:hover { background: #4A2A8A; color: #fff; } /* ── Footer ── */ .gb-footer { background: linear-gradient(#2A1B4F, #1C1530); color: #fff; margin-top: 80px; } .gb-footer__inner { max-width: 1280px; margin: 0 auto; padding: 56px 48px 28px; } .gb-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.15); } .gb-footer__logo-wrap { display: inline-block; background: #fff; padding: 8px 12px; border-radius: 12px; } .gb-footer__logo { height: 40px; display: block; } .gb-footer__tagline { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: #B9A8E8; max-width: 320px; } .gb-footer__social { display: flex; gap: 8px; margin-top: 20px; } .gb-footer__social-btn { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); color: #fff; transition: .15s; text-decoration: none; } .gb-footer__social-btn:hover { background: rgba(255,255,255,.18); color: #fff; } .gb-footer__col-title { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #B9A8E8; } .gb-footer__nav a { display: block; color: #EDE6FA; font-size: 14.5px; font-weight: 600; padding: 6px 0; transition: .15s; text-decoration: none; } .gb-footer__nav a:hover { color: #fff; } .gb-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding-top: 22px; font-size: 12.5px; color: #B9A8E8; } .gb-footer__bottom-nav { display: flex; gap: 18px; flex-wrap: wrap; } .gb-footer__bottom-nav a { color: #D9CFF3; transition: .15s; text-decoration: none; } .gb-footer__bottom-nav a:hover { color: #fff; } @media (max-width: 900px) { .gb-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .gb-footer__grid { grid-template-columns: 1fr; } .gb-footer__inner { padding: 40px 16px 24px; } } /* ── Flash messages ── */ .gb-flash { padding: 14px 20px; border-radius: 14px; font-size: 14px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .gb-flash--success { background: #E6F5DD; color: #2A5A14; } .gb-flash--error { background: #FEE2E2; color: #B91C1C; } .gb-flash--info { background: #F1EAFB; color: #4A2A8A; } .gb-flash-wrap { padding: 16px 0 4px; }