/* ========================================================================= GrahaSphere — theme system Two palettes: default "mystical" (purple gradient) and "light" (pastel cream). Switch at runtime with or body class "gs-theme-light". Mystical (default) ------------------ bg gradient : #F3EAFD → #E8DFFF → #F5DDE8 ink : #2B1A50 primary : #6B3FA0 primary-deep : #3D2673 accent gold : #D4AF37 verticals : astrology #E8A87C | numerology #5B8FB9 vastu #D4A24C | palmology #B784D4 Light (pastel brand) -------------------- bg gradient : #FEF8F4 → #F5F1F9 → #EDF4F4 (cream → white → mint whisper) ink : #2B1A50 primary : #5B3E8C (Graha purple) secondary : #3C5B8C (Sphere steel-blue) accent gold : #C9A96E verticals softer: astrology #D08A6A | numerology #4B77A6 vastu #B88A3E | palmology #9E6EC4 ========================================================================= */ :root { /* mystical (default) */ --gs-bg-1: #F3EAFD; --gs-bg-2: #E8DFFF; --gs-bg-3: #F5DDE8; --gs-ink: #2B1A50; --gs-ink-soft: #5A4785; --gs-primary: #6B3FA0; --gs-primary-deep: #3D2673; --gs-secondary: #3C5B8C; --gs-accent: #D4AF37; --gs-accent-soft: #E8D08A; --gs-astrology: #E8A87C; --gs-numerology: #5B8FB9; --gs-vastu: #D4A24C; --gs-palmology: #B784D4; --gs-glass: rgba(255, 255, 255, 0.55); --gs-glass-border: rgba(255, 255, 255, 0.75); --gs-shadow: 0 10px 40px rgba(75, 40, 130, 0.18); --gs-shadow-soft: 0 4px 20px rgba(75, 40, 130, 0.1); --gs-radius: 18px; --gs-radius-lg: 28px; --gs-font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --gs-font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; } /* ------- light pastel theme (opt-in) ------- Apply with: OR */ /* Calibrated to match the mockup screenshot — washed pink-lavender pastel */ [data-theme="light"], .gs-theme-light, .gs-root.gs-theme-light { --gs-bg-1: #FAEFE5; /* warm cream top */ --gs-bg-2: #EDDFEE; /* lavender mid */ --gs-bg-3: #DDC8E5; /* deeper lavender bottom */ --gs-ink: #2B1A50; --gs-ink-soft: #6B5E87; --gs-primary: #5B3E8C; --gs-primary-deep: #3D2673; --gs-secondary: #3C5B8C; --gs-accent: #C9A96E; --gs-accent-soft: #E5D4A8; --gs-astrology: #D08A6A; --gs-numerology: #4B77A6; --gs-vastu: #B88A3E; --gs-palmology: #9E6EC4; --gs-glass: rgba(255, 255, 255, 0.55); --gs-glass-border: rgba(255, 255, 255, 0.85); --gs-shadow: 0 10px 40px rgba(60, 60, 140, 0.14); --gs-shadow-soft: 0 4px 18px rgba(60, 60, 140, 0.08); } [data-theme="light"] body, body:has(.gs-theme-light) { /* Full-page cosmic backdrop — single image with sun/moon/lotus/planets baked in. Falls back to the gradient if bg-page.png isn't there. */ background: url('/images/bg-page.png') center top / cover no-repeat fixed, linear-gradient(180deg, var(--gs-bg-1) 0%, var(--gs-bg-2) 45%, var(--gs-bg-3) 100%) !important; } /* (We used to hide .gs-ambient when bg-page.png was active; removed so the sun/moon/lotus decorations always show. If you upload bg-page.png with the same elements baked in, set body class .gs-bg-page on body to hide the decorative layer.) */ body.gs-bg-page .gs-ambient { display: none; } /* ------- split-color wordmark (Graha|Sphere) ------- */ .gs-wordmark { font-family: var(--gs-font-display); font-weight: 700; letter-spacing: .01em; line-height: 1; } .gs-wordmark .gs-wordmark__graha { color: var(--gs-primary); } .gs-wordmark .gs-wordmark__sphere { color: var(--gs-secondary); } .gs-wordmark--xl { font-size: clamp(2.5rem, 6vw, 4.5rem); } .gs-wordmark--lg { font-size: 2rem; } .gs-wordmark--md { font-size: 1.4rem; } .gs-wordmark__tag { display: block; font-family: var(--gs-font-body); font-weight: 500; letter-spacing: .28em; font-size: .6em; color: var(--gs-accent); margin-top: .3em; } html, body { font-family: var(--gs-font-body); color: var(--gs-ink); background: radial-gradient(circle at 15% 10%, rgba(255, 220, 150, 0.35) 0, transparent 35%), radial-gradient(circle at 85% 15%, rgba(255, 220, 240, 0.4) 0, transparent 40%), linear-gradient(180deg, var(--gs-bg-1) 0%, var(--gs-bg-2) 45%, var(--gs-bg-3) 100%); background-attachment: fixed; min-height: 100vh; margin: 0; position: relative; overflow-x: hidden; } /* ---------- ambient decorative background (sun/moon/lotus/planets) ---------- */ .gs-ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .gs-ambient > * { position: absolute; } /* SVG sun/moon already have proper alpha + their own glow halos */ .gs-sun { top: 30px; left: 30px; width: 180px; height: 180px; background: url('/images/bg-sun.svg') center/contain no-repeat; opacity: .95; filter: drop-shadow(0 0 24px rgba(255, 215, 160, 0.4)); } .gs-moon { top: 30px; right: 30px; width: 180px; height: 180px; background: url('/images/bg-moon.svg') center/contain no-repeat; opacity: .95; filter: drop-shadow(0 0 24px rgba(220, 200, 240, 0.5)); } .gs-zodiac-ring { top: 50%; left: 50%; width: 900px; height: 900px; margin: -450px 0 0 -450px; border: 1px dashed rgba(107,63,160,.08); border-radius: 50%; } .gs-zodiac-ring::after { content: ""; position: absolute; inset: 40px; border: 1px dotted rgba(212,175,55,.12); border-radius: 50%; } .gs-north-star { top: 80px; left: 50%; margin-left: -7px; width: 14px; height: 14px; background: #f4d789; clip-path: polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); opacity: .75; filter: drop-shadow(0 0 8px rgba(244,215,137,.7)); } .gs-planet { border-radius: 50%; opacity: .32; filter: blur(.5px); } .gs-planet--1 { top: 14%; left: 6%; width: 26px; height: 26px; background: radial-gradient(circle at 30% 30%, #c79bcb, #6b3fa0); } .gs-planet--2 { top: 24%; right: 5%; width: 32px; height: 32px; background: radial-gradient(circle at 30% 30%, #ffdca0, #c9a96e); } .gs-planet--3 { top: 58%; left: 3%; width: 20px; height: 20px; background: radial-gradient(circle at 30% 30%, #a8d4e8, #5b8fb9); } .gs-planet--4 { top: 72%; right: 8%; width: 22px; height: 22px; background: radial-gradient(circle at 30% 30%, #f4b8a0, #e8a87c); } .gs-planet--5 { top: 42%; right: 13%; width: 18px; height: 18px; background: radial-gradient(circle at 30% 30%, #d9c8f0, #b784d4); } .gs-lotus-bg { bottom: 0; width: 480px; height: 320px; background: url('/images/bg-lotus.svg') center bottom / contain no-repeat; opacity: 1; /* SVG already has soft alpha, no mask needed */ mix-blend-mode: normal; } .gs-lotus-bg--left { left: 0; } .gs-lotus-bg--right { right: 0; transform: scaleX(-1); } /* Keep content above decorations */ .gs-root { position: relative; z-index: 1; } h1, h2, h3, h4, h5, h6 { font-family: var(--gs-font-display); color: var(--gs-primary-deep); } a { color: var(--gs-primary); text-decoration: none; } a:hover { color: var(--gs-primary-deep); } /* ---------- shell ---------- */ .gs-root { min-height: 100vh; display: flex; flex-direction: column; } /* ---------- nav ---------- */ .gs-nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 3rem; gap: 2rem; } .gs-brand { display: flex; align-items: center; gap: .75rem; color: var(--gs-primary-deep); } .gs-brand img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .gs-brand-name { font-family: var(--gs-font-display); font-size: 1.4rem; font-weight: 700; line-height: 1; } .gs-brand-tag { font-size: .55rem; letter-spacing: .15em; color: var(--gs-ink-soft); margin-top: .2rem; } .gs-nav-links { display: flex; gap: 1.5rem; align-items: center; } .gs-nav-links a { color: var(--gs-ink); font-size: .95rem; font-weight: 500; } .gs-nav-links a:hover { color: var(--gs-primary); } .gs-cta-pill { background: linear-gradient(135deg, var(--gs-primary) 0%, var(--gs-primary-deep) 100%); color: #fff !important; padding: .6rem 1.4rem; border-radius: 999px; font-weight: 600; box-shadow: var(--gs-shadow-soft); } .gs-cta-pill:hover { color: #fff !important; transform: translateY(-1px); } .gs-theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--gs-glass-border); background: var(--gs-glass); color: var(--gs-primary-deep); font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s; } .gs-theme-toggle:hover { background: #fff; } .gs-culture { padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--gs-glass-border); background: var(--gs-glass); color: var(--gs-primary-deep); font: inherit; font-size: .85rem; cursor: pointer; } .gs-culture:focus { outline: 2px solid var(--gs-primary); outline-offset: 2px; } /* ---------- hero ---------- */ .gs-hero { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding: 3rem 3rem 5rem; align-items: center; } .gs-kicker { letter-spacing: .25em; font-size: .75rem; color: var(--gs-accent); font-weight: 600; margin-bottom: 1rem; } .gs-hero h1 { font-size: clamp(2.8rem, 5vw, 4.2rem); font-weight: 500; line-height: 1.05; margin: 0 0 1.2rem; } .gs-hero h1 .gs-hl { color: var(--gs-primary); font-style: italic; } .gs-hero p { font-size: 1.1rem; color: var(--gs-ink-soft); max-width: 480px; line-height: 1.6; } .gs-hero-cta { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; } .gs-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.8rem; border-radius: 999px; font-weight: 600; font-size: .95rem; border: 0; cursor: pointer; transition: transform .15s, box-shadow .15s; } .gs-btn-primary { background: linear-gradient(135deg, var(--gs-primary), var(--gs-primary-deep)); color: #fff; box-shadow: var(--gs-shadow-soft); } .gs-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--gs-shadow); color: #fff; } .gs-btn-ghost { background: var(--gs-glass); color: var(--gs-primary-deep); border: 1px solid var(--gs-glass-border); backdrop-filter: blur(8px); } .gs-btn-ghost:hover { background: rgba(255,255,255,0.8); color: var(--gs-primary-deep); } .gs-trust { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; } .gs-trust-avatars { display: flex; } .gs-trust-avatars span { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; background: linear-gradient(135deg, var(--gs-primary), var(--gs-accent)); margin-left: -8px; } .gs-trust-avatars span:first-child { margin-left: 0; } .gs-trust small { color: var(--gs-ink-soft); font-size: .85rem; } .gs-stars { color: var(--gs-accent); letter-spacing: .1em; } .gs-hero-art { position: relative; min-height: 460px; background: url('/images/graha-sphere-logo.png') center/contain no-repeat; } /* ---------- vertical cards ---------- */ .gs-services { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding: 0 3rem 5rem; } .gs-card { position: relative; padding: 2rem 1.5rem; border-radius: var(--gs-radius-lg); background: var(--gs-glass); backdrop-filter: blur(12px); border: 1px solid var(--gs-glass-border); box-shadow: var(--gs-shadow-soft); text-align: center; transition: transform .2s, box-shadow .2s; } .gs-card:hover { transform: translateY(-4px); box-shadow: var(--gs-shadow); } .gs-card .gs-card-icon { width: 80px; height: 80px; margin: 0 auto 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4)); } .gs-card h3 { font-size: 1.3rem; letter-spacing: .1em; margin: 0 0 .6rem; } .gs-card p { color: var(--gs-ink-soft); font-size: .9rem; margin: 0 0 1.2rem; min-height: 3em; } .gs-card .gs-explore { color: var(--gs-primary); font-weight: 600; font-size: .9rem; } .gs-card-astrology { border-top: 3px solid var(--gs-astrology); } .gs-card-astrology h3 { color: var(--gs-astrology); } .gs-card-numerology { border-top: 3px solid var(--gs-numerology); } .gs-card-numerology h3 { color: var(--gs-numerology); } .gs-card-vastu { border-top: 3px solid var(--gs-vastu); } .gs-card-vastu h3 { color: var(--gs-vastu); } .gs-card-palmology { border-top: 3px solid var(--gs-palmology); } .gs-card-palmology h3 { color: var(--gs-palmology); } /* ---------- reading block ---------- */ .gs-reading { max-width: 1280px; display: grid; grid-template-columns: 1.1fr 1fr .8fr; gap: 2rem; padding: 3rem; margin: 0 auto 4rem; border-radius: var(--gs-radius-lg); background: var(--gs-glass); backdrop-filter: blur(14px); border: 1px solid var(--gs-glass-border); box-shadow: var(--gs-shadow); } .gs-reading h2 { font-size: 2rem; margin: .5rem 0 1rem; } .gs-reading h2 em { color: var(--gs-primary); font-style: italic; } .gs-reading-badges { display: flex; gap: 1rem; margin-top: 1.5rem; } .gs-badge { text-align: center; padding: .75rem 1rem; border-radius: 14px; background: rgba(255,255,255,0.6); border: 1px solid var(--gs-glass-border); flex: 1; font-size: .75rem; color: var(--gs-ink-soft); } .gs-badge strong { display: block; color: var(--gs-primary-deep); font-size: .85rem; margin-bottom: .2rem; } .gs-form label { display: block; font-size: .8rem; color: var(--gs-ink-soft); margin: .8rem 0 .3rem; font-weight: 600; } .gs-form input { width: 100%; padding: .7rem 1rem; border-radius: 12px; border: 1px solid rgba(107,63,160,0.2); background: rgba(255,255,255,0.7); font: inherit; color: var(--gs-ink); } .gs-form input:focus { outline: none; border-color: var(--gs-primary); background: #fff; } .gs-form-submit { width: 100%; margin-top: 1.5rem; justify-content: center; } .gs-reading-art { background: url('/images/bg-cosmic-sphere.png') center/contain no-repeat; min-height: 320px; } /* ---------- footer ---------- */ .gs-closing { text-align: center; padding: 3rem; } .gs-closing .gs-dots { color: var(--gs-accent); letter-spacing: .3em; font-size: .75rem; margin-bottom: 1rem; } .gs-closing h2 { font-size: 2rem; margin: 0 0 .5rem; font-weight: 500; } .gs-closing h2 em { color: var(--gs-primary); font-style: italic; } .gs-footer { padding: 1.5rem 3rem; border-top: 1px solid rgba(107,63,160,0.15); } .gs-footer-row { display: flex; justify-content: center; gap: 2rem; color: var(--gs-ink-soft); font-size: .85rem; flex-wrap: wrap; } /* ---------- responsive ---------- */ @media (max-width: 960px) { .gs-nav { padding: 1rem 1.5rem; flex-wrap: wrap; } .gs-nav-links { gap: 1rem; } .gs-hero { grid-template-columns: 1fr; padding: 2rem 1.5rem; } .gs-hero-art { min-height: 320px; } .gs-services { grid-template-columns: repeat(2, 1fr); padding: 0 1.5rem 3rem; } .gs-reading { grid-template-columns: 1fr; padding: 2rem; margin: 0 1.5rem 3rem; } .gs-reading-art { display: none; } } /* ---------- stub pages ---------- */ .gs-stub { max-width: 760px; margin: 4rem auto; padding: 3rem 2rem; text-align: center; background: var(--gs-glass); backdrop-filter: blur(10px); border: 1px solid var(--gs-glass-border); border-radius: var(--gs-radius-lg); box-shadow: var(--gs-shadow-soft); } .gs-stub h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 1rem; } .gs-stub-lead { color: var(--gs-ink-soft); font-size: 1.05rem; margin-bottom: 2rem; } /* ---------- horoscope ---------- */ .gs-horoscope { max-width: 1100px; margin: 3rem auto; padding: 0 1.5rem; } .gs-horoscope-signs, .gs-horoscope-periods { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.5rem; } .gs-sign-chip, .gs-period-chip { padding: .5rem 1rem; border-radius: 999px; background: var(--gs-glass); border: 1px solid var(--gs-glass-border); color: var(--gs-ink); font-size: .9rem; } .gs-sign-chip--on, .gs-period-chip--on { background: var(--gs-primary); color: #fff; border-color: var(--gs-primary); } .gs-house-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .gs-house { padding: 1rem; border-radius: 14px; background: var(--gs-glass); border: 1px solid var(--gs-glass-border); font-size: .9rem; } .gs-house strong { display: block; color: var(--gs-primary-deep); } .gs-house em { color: var(--gs-ink-soft); font-size: .8rem; display: block; margin-bottom: .4rem; } .gs-house .gs-tone { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .7rem; margin-bottom: .4rem; } .gs-house ul { margin: .3rem 0 0; padding-left: 1rem; font-size: .8rem; } .gs-tone-favorable .gs-tone { background: #d4f4d2; color: #196b1a; } .gs-tone-challenging .gs-tone { background: #f8d4d4; color: #7a1b1b; } .gs-tone-neutral .gs-tone { background: #e8e5f0; color: #3D2673; } .gs-tone-quiet .gs-tone { background: #eee; color: #555; } /* ---------- matchmaking ---------- */ .gs-match { max-width: 900px; margin: 3rem auto; padding: 0 1.5rem; } .gs-match-picker { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem; align-items: end; padding: 1.5rem; background: var(--gs-glass); border: 1px solid var(--gs-glass-border); border-radius: 18px; margin-bottom: 2rem; } .gs-match-picker select, .gs-match-picker input { width: 100%; padding: .6rem .9rem; border-radius: 10px; border: 1px solid rgba(107,63,160,.2); background: #fff; font: inherit; } .gs-match-result { padding: 2rem; background: var(--gs-glass); border-radius: 18px; } .gs-match-score { text-align: center; margin-bottom: 1.5rem; } .gs-match-score__num { font-family: var(--gs-font-display); font-size: 4rem; color: var(--gs-primary); } .gs-match-score__max { font-size: 1.2rem; color: var(--gs-ink-soft); } .gs-verdict { display: block; font-style: italic; margin-top: .3rem; text-transform: uppercase; letter-spacing: .15em; font-size: .85rem; } .gs-verdict--excellent, .gs-verdict--very_good { color: #196b1a; } .gs-verdict--good { color: #1a5a7a; } .gs-verdict--average { color: #9a6a1a; } .gs-verdict--poor { color: #7a1b1b; } .gs-koota-table { width: 100%; border-collapse: collapse; } .gs-koota-table th, .gs-koota-table td { padding: .6rem; border-bottom: 1px solid rgba(107,63,160,.1); text-align: left; } .gs-match-note { margin-top: 1rem; font-size: .9rem; color: var(--gs-ink-soft); } /* ---------- astrologers ---------- */ .gs-astrologer-list { max-width: 1100px; margin: 3rem auto; padding: 0 1.5rem; } .gs-filters { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0 2rem; align-items: center; } .gs-filters input { padding: .5rem .8rem; border-radius: 10px; border: 1px solid rgba(107,63,160,.2); } .gs-astro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; } .gs-astro-card { padding: 1.25rem; border-radius: 18px; background: var(--gs-glass); border: 1px solid var(--gs-glass-border); display: flex; flex-direction: column; gap: .75rem; } .gs-astro-head { display: flex; gap: .75rem; align-items: center; position: relative; } .gs-astro-head img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; } .gs-astro-lang { font-size: .8rem; color: var(--gs-ink-soft); } .gs-online-dot { width: 10px; height: 10px; border-radius: 50%; background: #3cd04b; position: absolute; right: 0; top: 0; } .gs-astro-bio { font-size: .85rem; color: var(--gs-ink-soft); min-height: 3.5em; } .gs-astro-foot { display: flex; justify-content: space-between; font-size: .85rem; color: var(--gs-ink-soft); } .gs-astro-foot strong { color: var(--gs-primary); } /* ---------- apply form ---------- */ .gs-apply { max-width: 640px; margin: 3rem auto; padding: 0 1.5rem; } .gs-apply-form textarea { width: 100%; padding: .7rem 1rem; border-radius: 12px; border: 1px solid rgba(107,63,160,.2); background: rgba(255,255,255,.7); font: inherit; } /* ---------- chat ---------- */ .gs-chat { max-width: 760px; margin: 2rem auto; padding: 0 1.5rem; display: flex; flex-direction: column; height: calc(100vh - 160px); } .gs-chat-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; background: var(--gs-glass); border-radius: 14px 14px 0 0; border: 1px solid var(--gs-glass-border); } .gs-chat-status { color: var(--gs-ink-soft); font-size: .85rem; } .gs-chat-stream { flex: 1; overflow-y: auto; padding: 1rem; background: var(--gs-glass); border-left: 1px solid var(--gs-glass-border); border-right: 1px solid var(--gs-glass-border); } .gs-chat-msg { margin-bottom: .75rem; max-width: 75%; padding: .6rem .9rem; border-radius: 14px; } .gs-chat-msg--user { background: var(--gs-primary); color: #fff; margin-left: auto; } .gs-chat-msg--astrologer{ background: #fff; color: var(--gs-ink); border: 1px solid rgba(107,63,160,.15); } .gs-chat-msg--system { background: rgba(212,175,55,.2); color: var(--gs-ink-soft); font-style: italic; margin: 0 auto; text-align: center; } .gs-chat-meta { font-size: .7rem; opacity: .7; margin-top: .2rem; } .gs-chat-input { display: flex; gap: .5rem; padding: 1rem; background: var(--gs-glass); border-radius: 0 0 14px 14px; border: 1px solid var(--gs-glass-border); border-top: 0; } .gs-chat-input input { flex: 1; padding: .7rem 1rem; border-radius: 999px; border: 1px solid rgba(107,63,160,.2); font: inherit; } /* ---------- wallet ---------- */ .gs-wallet { max-width: 900px; margin: 3rem auto; padding: 0 1.5rem; } .gs-wallet-balance { padding: 2rem; text-align: center; background: var(--gs-glass); border-radius: 18px; margin-bottom: 2rem; } .gs-wallet-balance__label { display: block; font-size: .85rem; color: var(--gs-ink-soft); letter-spacing: .15em; } .gs-wallet-balance__num { font-family: var(--gs-font-display); font-size: 3.5rem; color: var(--gs-primary); } .gs-wallet-topup { padding: 1.5rem; background: var(--gs-glass); border-radius: 18px; margin-bottom: 2rem; } .gs-wallet-topup input[type=number] { width: 200px; padding: .6rem 1rem; border-radius: 10px; border: 1px solid rgba(107,63,160,.2); font: inherit; } .gs-amount-chips { display: flex; gap: .5rem; margin: 1rem 0; flex-wrap: wrap; } .gs-chip { padding: .4rem 1rem; border-radius: 999px; border: 1px solid rgba(107,63,160,.3); background: transparent; color: var(--gs-primary); cursor: pointer; } .gs-chip:hover { background: var(--gs-primary); color: #fff; } .gs-wallet-note { font-size: .8rem; color: var(--gs-ink-soft); margin-top: .5rem; } .gs-wallet-tx { width: 100%; border-collapse: collapse; background: var(--gs-glass); border-radius: 14px; overflow: hidden; } .gs-wallet-tx th, .gs-wallet-tx td { padding: .6rem; border-bottom: 1px solid rgba(107,63,160,.1); text-align: left; font-size: .9rem; } .gs-debit { color: #7a1b1b; } .gs-credit { color: #196b1a; } /* ---------- blazor error UI ---------- */ #blazor-error-ui { position: fixed; bottom: 0; left: 0; right: 0; background: #b32121; color: #fff; padding: 1rem; display: none; z-index: 1000; } .blazor-error-boundary { background: #b32121; color: #fff; padding: 1rem; border-radius: 8px; } .blazor-error-boundary::after { content: "An error has occurred."; } /* ========================================================================= Landing art direction override Keeps the existing app pages intact while matching the supplied mockup. ========================================================================= */ :root { --gs-page-max: 1240px; --gs-shell-pad: clamp(1rem, 3vw, 2.25rem); } html, body { background: radial-gradient(circle at 10% 13%, rgba(255, 214, 160, .46), transparent 14rem), radial-gradient(circle at 88% 12%, rgba(236, 196, 255, .54), transparent 16rem), radial-gradient(circle at 52% 52%, rgba(255, 255, 255, .5), transparent 22rem), linear-gradient(160deg, #fde9d8 0%, #eadcf7 42%, #f8dce8 70%, #d7ddfb 100%); background-attachment: fixed; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .34; background-image: linear-gradient(rgba(114, 74, 145, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(114, 74, 145, .12) 1px, transparent 1px), radial-gradient(circle, rgba(255, 255, 255, .95) 0 1px, transparent 1.5px); background-size: 72px 72px, 72px 72px, 42px 42px; mask-image: radial-gradient(ellipse at center, black 0 56%, transparent 82%); } .gs-root { max-width: 1480px; margin: 0 auto; } .gs-nav { max-width: var(--gs-page-max); margin: 0 auto; padding: .85rem var(--gs-shell-pad) .35rem; gap: 1rem; } .gs-brand img { width: 54px; height: 54px; border-radius: 0; filter: drop-shadow(0 8px 18px rgba(107, 63, 160, .24)); } .gs-wordmark--md { font-size: clamp(1.28rem, 2.1vw, 1.75rem); } .gs-wordmark__tag { font-size: .42rem; letter-spacing: .36em; } .gs-nav-links { gap: clamp(.75rem, 1.8vw, 1.65rem); } .gs-nav-links a { font-size: .78rem; color: #21184d; } .gs-cta-pill { padding: .72rem 1.15rem; box-shadow: 0 8px 28px rgba(61, 38, 115, .25), 0 0 0 1px rgba(255, 255, 255, .5) inset; } .gs-culture, .gs-theme-toggle { display: none; } .gs-sun { top: 55px; left: max(18px, calc(50% - 690px)); width: clamp(118px, 16vw, 190px); height: clamp(118px, 16vw, 190px); opacity: .66; } .gs-moon { top: 50px; right: max(18px, calc(50% - 680px)); width: clamp(112px, 15vw, 180px); height: clamp(112px, 15vw, 180px); opacity: .78; } .gs-zodiac-ring { top: 48%; width: min(1040px, 90vw); height: min(1040px, 90vw); margin: calc(min(1040px, 90vw) / -2) 0 0 calc(min(1040px, 90vw) / -2); border-color: rgba(107, 63, 160, .13); } .gs-north-star { top: 84px; width: 74px; height: 74px; margin-left: -37px; background: conic-gradient(from 45deg, transparent 0 12%, #b36c19 12% 13%, transparent 13% 37%, #d38b20 37% 38%, transparent 38% 62%, #9b5510 62% 63%, transparent 63% 87%, #d38b20 87% 88%, transparent 88%), radial-gradient(circle, #fff3c7 0 9%, #d99024 10% 18%, transparent 19%); clip-path: polygon(50% 0, 57% 39%, 100% 50%, 57% 61%, 50% 100%, 43% 61%, 0 50%, 43% 39%); opacity: .82; } .gs-lotus-bg { width: clamp(240px, 33vw, 520px); height: clamp(170px, 23vw, 340px); opacity: .55; } .gs-hero { max-width: var(--gs-page-max); grid-template-columns: minmax(300px, .82fr) minmax(430px, 1.18fr); gap: clamp(1.5rem, 3vw, 3rem); padding: clamp(1.25rem, 3vw, 2.5rem) var(--gs-shell-pad) 1.6rem; min-height: 560px; } .gs-hero-copy { position: relative; z-index: 2; } .gs-kicker { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .85rem; font-size: .7rem; color: #a96730; } .gs-hero h1 { font-size: clamp(3.35rem, 5.4vw, 5.95rem); line-height: .91; letter-spacing: 0; margin: 0 0 1.1rem; } .gs-hero h1 .gs-hl { color: #6530a4; font-style: normal; } .gs-hero-sub { max-width: 430px; margin: 0; color: #2e2856; font-size: .98rem; line-height: 1.55; } .gs-hero-cta { margin-top: 1.7rem; } .gs-btn { min-height: 42px; padding: .74rem 1.35rem; font-size: .82rem; } .gs-btn-primary { background: linear-gradient(135deg, #6d2d91, #27155d 64%, #c17832); box-shadow: 0 12px 28px rgba(68, 36, 109, .28), 0 0 0 1px rgba(255, 255, 255, .5) inset; } .gs-btn-ghost { background: rgba(255, 255, 255, .58); } .gs-trust { margin-top: 1.55rem; } .gs-trust-avatars span { width: 30px; height: 30px; background: radial-gradient(circle at 35% 28%, #f7d9b0 0 18%, transparent 19%), linear-gradient(135deg, #1d2748, #b46a4e); } .gs-trust small { font-size: .73rem; } .gs-stars { font-size: .84rem; } .gs-hero-art { min-height: clamp(430px, 45vw, 640px); display: grid; place-items: center; background: none; isolation: isolate; } .gs-hero-art::before, .gs-hero-art::after { content: ""; position: absolute; inset: 8%; border-radius: 50%; pointer-events: none; } .gs-hero-art::before { border: 1px solid rgba(154, 91, 43, .35); box-shadow: 0 0 0 28px rgba(255, 255, 255, .11) inset, 0 0 90px rgba(255, 205, 117, .32); } .gs-hero-art::after { inset: 18%; background: conic-gradient(from 210deg, transparent 0 18%, rgba(16, 145, 190, .78) 25%, rgba(250, 174, 45, .78) 44%, rgba(116, 38, 142, .88) 62%, transparent 78%), radial-gradient(circle, rgba(255, 255, 255, .84) 0 44%, transparent 45%); filter: blur(1px); opacity: .86; z-index: -1; } .gs-hero-art img { width: min(74%, 520px); height: auto; filter: drop-shadow(0 24px 45px rgba(60, 38, 96, .28)); } .gs-hero-orbit { position: absolute; inset: 0; animation: gs-slow-spin 80s linear infinite; } .gs-zodiac, .gs-mini-planet { position: absolute; transform: translate(-50%, -50%); } .gs-zodiac { font-family: Georgia, serif; font-size: clamp(1.2rem, 2vw, 2rem); color: #2c2762; animation: gs-counter-spin 80s linear infinite; } .z-aquarius { left: 17%; top: 42%; } .z-pisces { left: 45%; top: 11%; } .z-aries { left: 64%; top: 11%; } .z-gemini { left: 83%; top: 42%; } .z-capricorn { left: 78%; top: 63%; } .z-libra { left: 62%; top: 79%; } .z-virgo { left: 38%; top: 81%; } .z-leo { left: 17%; top: 63%; } .gs-mini-planet { width: clamp(22px, 3.6vw, 44px); aspect-ratio: 1; border-radius: 50%; box-shadow: inset -8px -7px 12px rgba(35, 17, 61, .28), 0 0 18px rgba(255, 255, 255, .72); } .p-saturn { left: 27%; top: 22%; background: radial-gradient(circle at 33% 27%, #ffe2a5, #4e2180 42%, #130b3e 74%); } .p-saturn::after { content: ""; position: absolute; inset: 43% -45%; border: 2px solid rgba(217, 151, 69, .78); border-radius: 50%; transform: rotate(-16deg); } .p-gold { left: 77%; top: 24%; background: radial-gradient(circle at 30% 28%, #ffefc1, #d08c2d 44%, #73400f 75%); } .p-blue { left: 88%; top: 47%; background: radial-gradient(circle at 30% 28%, #d4fbff, #1472b5 48%, #103766 78%); } .p-red { left: 24%; top: 68%; background: radial-gradient(circle at 30% 28%, #ffd5b8, #c3452f 48%, #5c181c 78%); } .p-violet { left: 75%; top: 70%; background: radial-gradient(circle at 30% 28%, #ffd1ff, #862cb8 48%, #311469 78%); } .p-earth { left: 50%; top: 85%; background: radial-gradient(circle at 30% 28%, #fff4b0, #1d94b8 34%, #305c9c 58%, #d4882e 78%); } @keyframes gs-slow-spin { to { transform: rotate(360deg); } } @keyframes gs-counter-spin { to { transform: translate(-50%, -50%) rotate(-360deg); } } .gs-reading { max-width: var(--gs-page-max); grid-template-columns: .86fr .72fr .9fr; gap: clamp(1.2rem, 2.2vw, 2rem); margin: 0 auto 1.4rem; padding: clamp(1.25rem, 2.4vw, 2.25rem); border-radius: 24px; background: linear-gradient(90deg, rgba(255, 248, 238, .78), rgba(255, 255, 255, .54)), radial-gradient(circle at 84% 50%, rgba(90, 72, 178, .2), transparent 34%); border: 1px solid rgba(255, 255, 255, .88); } .gs-reading h2 { font-size: clamp(2rem, 3.1vw, 3rem); line-height: 1; } .gs-reading-copy p:not(.gs-kicker) { max-width: 340px; font-size: .86rem; } .gs-reading-badges { gap: .6rem; } .gs-badge { background: transparent; border: 0; padding: .45rem; } .gs-form { padding: 1.25rem; border-radius: 18px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 18px 50px rgba(78, 48, 121, .14); } .gs-form h3 { margin: 0 0 .75rem; text-align: center; font-size: 1rem; font-family: var(--gs-font-body); } .gs-form label { margin: .48rem 0 0; } .gs-form label span { display: none; } .gs-form input { border-radius: 9px; padding: .62rem .85rem; min-height: 38px; font-size: .78rem; background: rgba(255, 244, 243, .9); } .gs-form-submit { margin-top: .85rem; } .gs-reading-art { min-height: 270px; background: radial-gradient(circle at 50% 50%, rgba(255, 246, 177, .85) 0 4%, transparent 5%), url('/images/bg-cosmic-sphere.png') center/contain no-repeat; filter: drop-shadow(0 18px 40px rgba(74, 48, 120, .2)); } .gs-footer { display: none; } @media (max-width: 1100px) { .gs-nav { align-items: flex-start; } .gs-nav-links { justify-content: flex-end; flex-wrap: wrap; } .gs-hero { grid-template-columns: 1fr; } } @media (max-width: 960px) { .gs-hero { min-height: auto; } .gs-reading { grid-template-columns: 1fr; } .gs-reading-art { display: block; min-height: 240px; } } @media (max-width: 620px) { .gs-nav { justify-content: center; text-align: center; } .gs-brand { justify-content: center; } .gs-nav-links { justify-content: center; } .gs-hero h1 { font-size: clamp(3rem, 16vw, 4.2rem); } .gs-hero-art { min-height: 350px; } .gs-hero-art img { width: 82%; } } /* ========================================================================= Landing art direction v2 Cleaner poster composition: use the supplied GrahaSphere artwork as the hero focal point instead of drawing a second orbit over it. ========================================================================= */ body:has(.gs-hero) { background: url('/images/bg-page.png') center top / cover no-repeat fixed, radial-gradient(circle at 9% 13%, rgba(255, 232, 188, .62), transparent 9rem), radial-gradient(circle at 91% 11%, rgba(250, 236, 255, .78), transparent 11rem), radial-gradient(circle at 48% 52%, rgba(255, 255, 255, .56), transparent 23rem), linear-gradient(150deg, #fbe8d4 0%, #f2e3ec 29%, #e7d8f7 55%, #f5ddeb 77%, #dfe8ff 100%); } body:has(.gs-hero)::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .28; background: radial-gradient(circle at 18% 38%, transparent 0 7rem, rgba(196, 122, 69, .28) 7.05rem, transparent 7.12rem), radial-gradient(circle at 87% 54%, transparent 0 13rem, rgba(137, 78, 158, .22) 13.05rem, transparent 13.12rem), repeating-radial-gradient(circle at 50% 47%, transparent 0 7.4rem, rgba(174, 129, 83, .16) 7.45rem 7.52rem); mask-image: linear-gradient(to bottom, black, rgba(0, 0, 0, .62) 70%, transparent); } .gs-root:has(.gs-hero) { max-width: none; } .gs-root:has(.gs-hero) .gs-nav, .gs-root:has(.gs-hero) .gs-hero, .gs-root:has(.gs-hero) .gs-cards, .gs-root:has(.gs-hero) .gs-reading, .gs-root:has(.gs-hero) .gs-closing-block { max-width: 1320px; } .gs-root:has(.gs-hero) .gs-nav { padding-top: .7rem; padding-bottom: .25rem; } .gs-root:has(.gs-hero) .gs-brand img { width: 48px; height: 48px; } .gs-root:has(.gs-hero) .gs-wordmark--md { font-size: 1.55rem; } .gs-root:has(.gs-hero) .gs-nav-links a { font-size: .72rem; } .gs-root:has(.gs-hero) .gs-hero { min-height: 610px; grid-template-columns: minmax(320px, .76fr) minmax(540px, 1.24fr); padding-top: .7rem; padding-bottom: 1.1rem; } .gs-root:has(.gs-hero) .gs-hero h1 { font-size: clamp(4rem, 5.85vw, 6.8rem); line-height: .88; color: #241653; } .gs-root:has(.gs-hero) .gs-hero-sub { font-size: .94rem; } .gs-root:has(.gs-hero) .gs-hero-art { min-height: 610px; overflow: visible; } .gs-root:has(.gs-hero) .gs-hero-orbit { display: none; } .gs-root:has(.gs-hero) .gs-hero-art::before { inset: 4%; border-color: rgba(178, 118, 53, .18); background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 56%), repeating-radial-gradient(circle, transparent 0 5.9rem, rgba(122, 73, 142, .12) 5.95rem 6rem); box-shadow: 0 0 120px rgba(255, 208, 127, .24); } .gs-root:has(.gs-hero) .gs-hero-art::after { inset: 11%; background: radial-gradient(circle, rgba(255, 255, 255, .72) 0 38%, rgba(255, 238, 208, .28) 55%, transparent 70%); filter: blur(18px); opacity: .72; } .gs-root:has(.gs-hero) .gs-hero-art img { width: min(82%, 590px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; position: relative; z-index: 1; transform: translateX(-1.5%); mix-blend-mode: multiply; box-shadow: 0 0 0 1px rgba(205, 145, 74, .16), 0 0 90px rgba(255, 219, 154, .36); -webkit-mask-image: radial-gradient(circle, black 0 64%, rgba(0, 0, 0, .86) 70%, transparent 76%); mask-image: radial-gradient(circle, black 0 64%, rgba(0, 0, 0, .86) 70%, transparent 76%); } .gs-root:has(.gs-hero) .gs-brand img { border-radius: 50%; object-fit: cover; } .gs-root:has(.gs-hero) .gs-cards { padding-top: .15rem; padding-bottom: 1.55rem; } .gs-root:has(.gs-hero) .gs-reading { margin-bottom: .65rem; } @media (max-width: 1100px) { .gs-root:has(.gs-hero) .gs-hero { grid-template-columns: 1fr; min-height: auto; } .gs-root:has(.gs-hero) .gs-hero-art { min-height: 520px; } } /* ========================================================================= Reference-match pass The supplied target is a compact portrait composition, so the landing page uses a scalable poster canvas instead of a full-width desktop spread. ========================================================================= */ :root { --gs-page-max: 760px; --gs-shell-pad: clamp(.8rem, 3vw, 1.45rem); } body:has(.gs-hero) { background: url('/images/bg-page.png') center top / cover no-repeat fixed, radial-gradient(circle at 9% 9%, rgba(255, 231, 171, .72), transparent 7.2rem), radial-gradient(circle at 92% 10%, rgba(255, 236, 178, .52), transparent 7rem), radial-gradient(circle at 15% 92%, rgba(244, 163, 197, .4), transparent 9rem), radial-gradient(circle at 86% 70%, rgba(142, 83, 177, .3), transparent 10rem), linear-gradient(155deg, #ffe6d5 0%, #ead7f1 35%, #f4d9e9 66%, #dce5ff 100%); } body:has(.gs-hero)::before { opacity: .24; background-size: 34px 34px, 34px 34px, 22px 22px; } body:has(.gs-hero)::after { opacity: .36; background: radial-gradient(circle at 17% 18%, transparent 0 5.1rem, rgba(213, 145, 76, .28) 5.15rem, transparent 5.22rem), radial-gradient(circle at 88% 52%, transparent 0 9rem, rgba(130, 75, 162, .22) 9.05rem, transparent 9.12rem), repeating-radial-gradient(circle at 50% 39%, transparent 0 4.2rem, rgba(174, 129, 83, .17) 4.25rem 4.32rem); } .gs-root:has(.gs-hero) { width: min(100%, var(--gs-page-max)); min-height: 100vh; overflow: hidden; } .gs-root:has(.gs-hero) .gs-nav, .gs-root:has(.gs-hero) .gs-hero, .gs-root:has(.gs-hero) .gs-cards, .gs-root:has(.gs-hero) .gs-reading, .gs-root:has(.gs-hero) .gs-closing-block { max-width: var(--gs-page-max); } .gs-root:has(.gs-hero) .gs-nav { padding: .62rem var(--gs-shell-pad) .18rem; gap: .75rem; } .gs-root:has(.gs-hero) .gs-brand { gap: .45rem; } .gs-root:has(.gs-hero) .gs-brand img { width: 36px; height: 36px; } .gs-root:has(.gs-hero) .gs-wordmark--md { font-size: 1.18rem; } .gs-root:has(.gs-hero) .gs-wordmark__tag { font-size: .31rem; letter-spacing: .28em; } .gs-root:has(.gs-hero) .gs-nav-links { gap: .82rem; } .gs-root:has(.gs-hero) .gs-nav-links a { font-size: .53rem; line-height: 1; } .gs-root:has(.gs-hero) .gs-cta-pill { padding: .47rem .72rem; } .gs-root:has(.gs-hero) .gs-sun { top: 48px; left: max(10px, calc(50% - 360px)); width: 108px; height: 108px; opacity: .72; } .gs-root:has(.gs-hero) .gs-moon { top: 48px; right: max(10px, calc(50% - 358px)); width: 112px; height: 112px; opacity: .76; } .gs-root:has(.gs-hero) .gs-north-star { top: 64px; width: 50px; height: 50px; margin-left: -25px; } .gs-root:has(.gs-hero) .gs-hero { grid-template-columns: minmax(210px, .78fr) minmax(310px, 1.22fr); min-height: 335px; padding: .55rem var(--gs-shell-pad) .75rem; gap: .65rem; align-items: center; } .gs-root:has(.gs-hero) .gs-kicker { margin-bottom: .5rem; font-size: .47rem; letter-spacing: .22em; } .gs-root:has(.gs-hero) .gs-hero h1 { font-size: clamp(3.05rem, 7.9vw, 3.95rem); line-height: .9; margin-bottom: .55rem; } .gs-root:has(.gs-hero) .gs-hero-sub { font-size: .62rem; line-height: 1.45; max-width: 205px; } .gs-root:has(.gs-hero) .gs-hero-cta { margin-top: .9rem; gap: .45rem; } .gs-root:has(.gs-hero) .gs-btn { min-height: 28px; padding: .48rem .78rem; font-size: .55rem; } .gs-root:has(.gs-hero) .gs-trust { margin-top: .72rem; gap: .5rem; } .gs-root:has(.gs-hero) .gs-trust-avatars span { width: 19px; height: 19px; margin-left: -5px; } .gs-root:has(.gs-hero) .gs-trust small, .gs-root:has(.gs-hero) .gs-stars { font-size: .48rem; } .gs-root:has(.gs-hero) .gs-hero-art { min-height: 335px; position: relative; overflow: visible; } .gs-root:has(.gs-hero) .gs-hero-art::before { inset: 1%; box-shadow: 0 0 72px rgba(255, 208, 127, .2); } .gs-root:has(.gs-hero) .gs-hero-art::after { inset: 8%; filter: blur(10px); } .gs-root:has(.gs-hero) .gs-hero-art img { width: min(96%, 385px); display: block; mix-blend-mode: normal; filter: drop-shadow(0 18px 30px rgba(60, 38, 96, .2)); opacity: 1; visibility: visible; border-radius: 50%; -webkit-mask-image: radial-gradient(circle, black 0 76%, rgba(0, 0, 0, .92) 82%, transparent 88%); mask-image: radial-gradient(circle, black 0 76%, rgba(0, 0, 0, .92) 82%, transparent 88%); } .gs-root:has(.gs-hero) .gs-cards { grid-template-columns: repeat(4, 1fr); padding: 0 var(--gs-shell-pad) 1.15rem; gap: .72rem; } .gs-root:has(.gs-hero) .gs-card { min-height: 196px; border-radius: 14px; padding: .72rem .55rem .75rem; } .gs-root:has(.gs-hero) .gs-card__icon { width: 82px; height: 82px; margin-bottom: .45rem; opacity: 1; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 70%, transparent)); } .gs-root:has(.gs-hero) .gs-card__icon img { opacity: 1; display: block; } .gs-root:has(.gs-hero) .gs-card__title { font-size: .68rem; letter-spacing: .08em; margin-bottom: .32rem; } .gs-root:has(.gs-hero) .gs-card__desc { font-size: .5rem; line-height: 1.25; max-width: 82px; min-height: 2.45em; } .gs-root:has(.gs-hero) .gs-card__cta { font-size: .48rem; padding: .22rem .4rem; } .gs-root:has(.gs-hero) .gs-reading { grid-template-columns: .82fr .74fr .98fr; gap: .72rem; margin: 0 var(--gs-shell-pad) 1rem; padding: .85rem; border-radius: 13px; } .gs-root:has(.gs-hero) .gs-reading h2 { font-size: 1.5rem; line-height: 1.02; margin: .35rem 0 .55rem; } .gs-root:has(.gs-hero) .gs-reading-copy p:not(.gs-kicker) { font-size: .5rem; max-width: 160px; } .gs-root:has(.gs-hero) .gs-reading-badges { margin-top: .65rem; gap: .28rem; } .gs-root:has(.gs-hero) .gs-badge { font-size: .42rem; padding: .2rem; } .gs-root:has(.gs-hero) .gs-badge strong { font-size: .5rem; } .gs-root:has(.gs-hero) .gs-form { padding: .72rem; border-radius: 11px; } .gs-root:has(.gs-hero) .gs-form h3 { font-size: .68rem; margin-bottom: .45rem; } .gs-root:has(.gs-hero) .gs-form label { margin-top: .3rem; } .gs-root:has(.gs-hero) .gs-form input { min-height: 25px; border-radius: 6px; padding: .38rem .52rem; font-size: .48rem; } .gs-root:has(.gs-hero) .gs-form-submit { margin-top: .5rem; width: 100%; } .gs-root:has(.gs-hero) .gs-reading-art { min-height: 172px; } .gs-root:has(.gs-hero) .gs-closing-block { margin-top: .15rem; padding: 1.1rem var(--gs-shell-pad) .45rem; } .gs-root:has(.gs-hero) .gs-closing-kicker { font-size: .46rem; margin-bottom: .35rem; } .gs-root:has(.gs-hero) .gs-closing-h { font-size: 1.05rem; } .gs-root:has(.gs-hero) .gs-closing-sub { font-size: 1.32rem; margin-bottom: .55rem; } .gs-root:has(.gs-hero) .gs-closing-cta { min-height: 26px; } .gs-root:has(.gs-hero) .gs-lotus { width: 142px; height: 105px; bottom: 14px; } .gs-root:has(.gs-hero) .gs-closing-trust { margin-top: .75rem; padding: .45rem .2rem 0; gap: 1.1rem; font-size: .44rem; } @media (max-width: 780px) { .gs-root:has(.gs-hero) { width: 100%; } } @media (max-width: 620px) { .gs-root:has(.gs-hero) .gs-nav-links { display: none; } .gs-root:has(.gs-hero) .gs-hero { grid-template-columns: .78fr 1.22fr; min-height: 300px; } .gs-root:has(.gs-hero) .gs-hero h1 { font-size: clamp(2.4rem, 11.5vw, 3.05rem); } .gs-root:has(.gs-hero) .gs-hero-art { min-height: 290px; } .gs-root:has(.gs-hero) .gs-cards { gap: .48rem; } .gs-root:has(.gs-hero) .gs-card { min-height: 170px; } }