/* ═══════════════════════════════════════════════════ MYFUNDINGGENIE.COM — Universal Stylesheet Path: public_html/css/style.css ═══════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=DM+Serif+Display:ital@0;1&display=swap'); /* ── TOKENS ── */ :root { --void: #060412; --deep: #0D0B1E; --dark: #1A1535; --card: #221B45; --card2: #2A2155; --gold: #C9A84C; --gold2: #E8C76A; --gold3: #F5DFA0; --gold-dim: #7A6020; --violet: #9B59B6; --purple: #4A2D8B; --lavender: #B8A8E8; --amethyst: #7B5EA7; --white: #FFFFFF; --red: #8B1A1A; --nav-h: 76px; --drawer-w: 290px; } /* ── RESET ── */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; } /* IMPORTANT: Do NOT put overflow-x:hidden on body or html. It breaks position:fixed on iOS Safari. The #page-wrap div handles overflow for scrollable content. All position:fixed elements (nav, sparkles, overlay, drawer, toast) must be DIRECT CHILDREN of , OUTSIDE #page-wrap. */ body { font-family: 'IBM Plex Sans', sans-serif; background: var(--void); color: var(--white); font-size: 16px; line-height: 1.7; } /* #page-wrap contains ONLY non-fixed scrollable content. overflow-x:hidden here is safe because no position:fixed children are inside this element. */ #page-wrap { overflow-x: hidden; width: 100%; } img { max-width:100%; height:auto; display:block; } a { text-decoration:none; } button { font-family:inherit; cursor:pointer; } h1,h2,h3,h4,h5,h6 { font-weight:normal; line-height:1.2; } /* ═══════════════════════════════════════════════════ NAVIGATION ═══════════════════════════════════════════════════ */ .site-nav { position: fixed; top:0; left:0; right:0; z-index: 1000; height: var(--nav-h); background: rgba(6,4,18,0.97); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border-bottom: 2px solid rgba(201,168,76,0.45); box-shadow: 0 2px 30px rgba(0,0,0,0.55); padding: 0 4%; display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: background .3s, border-color .3s; } .site-nav.scrolled { background: rgba(4,2,12,1); border-bottom-color: var(--gold); } .nav-logo { display: flex; flex-direction: column; gap: 2px; text-decoration: none; flex-shrink: 0; } .nav-logo-name { font-family: 'Cinzel Decorative', serif; font-size: 1.05rem; line-height: 1; letter-spacing: .04em; white-space: nowrap; } .nl-my { color: var(--violet); } .nl-fund { color: var(--gold); } .nl-gen { color: var(--white); } .nav-logo-sub { font-family: 'IBM Plex Sans', sans-serif; font-size: .62rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(184,168,232,0.65); } /* Desktop links — shown by default, hidden on mobile via media query */ .nav-links { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; } .nav-links a { font-family: 'IBM Plex Sans', sans-serif; font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,0.58); padding: 7px 12px; border-radius: 5px; border: 1px solid transparent; transition: color .2s, background .2s, border-color .2s; white-space: nowrap; } .nav-links a:hover, .nav-links a.active { color: var(--gold); background: rgba(201,168,76,0.09); border-color: rgba(201,168,76,0.22); } .nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .nav-cta { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: var(--void); font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: 10px 22px; border-radius: 5px; white-space: nowrap; box-shadow: 0 0 18px rgba(201,168,76,0.28); transition: box-shadow .2s, transform .2s; border: none; text-decoration: none; display: inline-block; } .nav-cta:hover { box-shadow: 0 0 34px rgba(201,168,76,0.56); transform: translateY(-1px); } /* ── HAMBURGER — hidden on desktop, shown on mobile ── */ .hamburger { display: none; /* hidden on desktop >= 860px */ flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 42px; height: 42px; background: rgba(201,168,76,0.1); border: 1.5px solid rgba(201,168,76,0.38); border-radius: 5px; cursor: pointer; padding: 9px; transition: background .2s, border-color .2s; flex-shrink: 0; } .hamburger:hover { background:rgba(201,168,76,0.18); border-color:var(--gold); } .hamburger span { display: block; width: 20px; height: 2px; background: var(--gold); border-radius: 2px; transition: transform .28s ease, opacity .28s ease, width .28s ease; transform-origin: center; } .hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity:0; width:0; } .hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } /* ═══════════════════════════════════════════════════ MOBILE DRAWER — right-to-left Must be direct child of , outside #page-wrap ═══════════════════════════════════════════════════ */ .drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 9998; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; } .drawer-backdrop.open { opacity: 1; visibility: visible; pointer-events: all; } .mobile-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: var(--drawer-w); max-width: 82vw; background: #080516; border-left: 2px solid rgba(201,168,76,0.28); z-index: 9999; transform: translateX(100%); transition: transform .32s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; will-change: transform; visibility: hidden; } .mobile-drawer.open { transform: translateX(0); visibility: visible; } .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: var(--nav-h); border-bottom: 1px solid rgba(201,168,76,0.14); flex-shrink: 0; } .drawer-logo-name { font-family: 'Cinzel Decorative', serif; font-size: .9rem; } .drawer-close { width: 34px; height: 34px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; color: var(--white); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; flex-shrink: 0; } .drawer-close:hover { background:rgba(201,168,76,0.14); color:var(--gold); } .drawer-nav { flex:1; padding:6px 0; overflow-y:auto; } .drawer-nav a { display: flex; align-items: center; gap: 11px; padding: 13px 20px; font-family: 'IBM Plex Sans', sans-serif; font-size: .82rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,0.58); border-left: 3px solid transparent; transition: color .2s, background .2s, border-color .2s; text-decoration: none; } .drawer-nav a:hover, .drawer-nav a.active { color: var(--gold); background: rgba(201,168,76,0.07); border-left-color: var(--gold); } .drawer-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 5px 20px; } .drawer-cta-wrap { padding: 16px 20px 26px; border-top: 1px solid rgba(201,168,76,0.12); flex-shrink: 0; } .drawer-cta { display: block; text-align: center; background: linear-gradient(135deg, var(--gold), var(--gold2)); color: var(--void); font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; padding: 14px; border-radius: 5px; box-shadow: 0 4px 20px rgba(201,168,76,0.3); text-decoration: none; } /* ═══════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════ */ .site-footer { background: #030210; border-top: 1px solid rgba(201,168,76,0.12); padding: 52px 4% 0; } .footer-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.06); } .footer-brand .footer-logo-name { font-family: 'Cinzel Decorative', serif; font-size: .93rem; display: block; margin-bottom: 4px; } .footer-brand .footer-logo-sub { font-family: 'IBM Plex Sans', sans-serif; font-size: .63rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(184,168,232,0.55); display: block; margin-bottom: 14px; } .footer-brand p { font-size:.82rem; color:rgba(255,255,255,0.3); line-height:1.78; max-width:280px; } .footer-col h4 { font-family: 'IBM Plex Sans', sans-serif; font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; padding-bottom: 7px; border-bottom: 1px solid rgba(201,168,76,0.17); } .footer-col a { display: block; font-size: .82rem; color: rgba(255,255,255,0.4); text-decoration: none; margin-bottom: 9px; transition: color .2s, padding-left .2s; } .footer-col a:hover { color:var(--gold); padding-left:5px; } .footer-bottom { max-width: 1140px; margin: 0 auto; padding: 17px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: .7rem; color: rgba(255,255,255,0.2); } .footer-disc { padding: 12px 4% 16px; text-align: center; border-top: 1px solid rgba(255,255,255,0.04); } .footer-disc p { font-size: .65rem; color: rgba(255,255,255,0.15); font-style: italic; max-width: 820px; margin: 0 auto; line-height: 1.75; } /* ═══════════════════════════════════════════════════ SHARED UTILITIES ═══════════════════════════════════════════════════ */ .container { max-width:1140px; margin:0 auto; } /* Used by legal pages to push content below fixed nav */ .page-content-wrap { padding-top:var(--nav-h); min-height:100vh; } .btn-primary { display: inline-flex; align-items: center; gap: 9px; background: linear-gradient(135deg, var(--gold), var(--gold2)); color: var(--void); font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; padding: 15px 30px; border-radius: 5px; border: none; cursor: pointer; box-shadow: 0 4px 24px rgba(201,168,76,0.36); transition: box-shadow .25s, transform .25s; text-decoration: none; } .btn-primary:hover { box-shadow: 0 8px 38px rgba(201,168,76,0.58); transform: translateY(-2px); } .btn-secondary { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.06); border: 1.5px solid rgba(184,168,232,0.38); color: var(--lavender); font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: .83rem; letter-spacing: .06em; text-transform: uppercase; padding: 14px 26px; border-radius: 5px; text-decoration: none; cursor: pointer; transition: all .25s; } .btn-secondary:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,0.09); } .section-eyebrow { font-family: 'IBM Plex Sans', sans-serif; font-size: .65rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .section-eyebrow::before, .section-eyebrow::after { content:'✦'; font-size:.5rem; opacity:.55; } .section-h2 { font-family: 'Cinzel Decorative', serif; font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.15; margin-bottom: 14px; } .section-lead { font-size: .95rem; font-weight: 300; color: rgba(255,255,255,0.52); max-width: 580px; line-height: 1.85; } /* Toast */ .toast { position: fixed; bottom: 22px; right: 22px; z-index: 9999; padding: 14px 20px; border-radius: 5px; font-size: .85rem; font-weight: 600; max-width: 340px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); transform: translateY(60px); opacity: 0; transition: transform .3s ease, opacity .3s ease; pointer-events: none; } .toast.show { transform:translateY(0); opacity:1; } .toast.success{ background:rgba(27,107,58,0.97); border:1px solid rgba(46,180,98,0.38); color:#90EEB0; } .toast.error { background:rgba(139,26,26,0.97); border:1px solid rgba(220,60,60,0.38); color:#FFC0C0; } /* ═══════════════════════════════════════════════════ RESPONSIVE — SHARED ═══════════════════════════════════════════════════ */ @media (max-width: 860px) { .hamburger { display:flex; } /* show hamburger */ .nav-links { display:none; } /* hide desktop links */ .footer-inner { grid-template-columns:1fr 1fr; gap:28px; } } @media (max-width: 600px) { :root { --nav-h:64px; } .nav-logo-name { font-size:.88rem; } .nav-cta { font-size:.67rem; padding:9px 14px; } .footer-inner { grid-template-columns:1fr; gap:24px; } .footer-bottom { flex-direction:column; text-align:center; } .toast { bottom:14px; right:10px; left:10px; max-width:100%; } } @media (max-width: 390px) { .nav-cta { display:none; } }