/* ========================================================= RKY FINANCE — style.css Shared stylesheet for index.html and about.html ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@500;600;700;800&display=swap'); *{ margin:0; padding:0; box-sizing:border-box; } :root{ --navy:#0b2551; --navy-2:#123f80; --blue:#123b72; --link:#1a63cf; --gold:#e0a020; --pink:#dc4269; --text:#2b3648; --muted:#64748b; --line:#e6ecf5; --page:#f5f8fc; --soft:#f6f9fd; --shadow-sm:0 2px 10px rgba(11,37,81,.05); --shadow-md:0 10px 30px rgba(11,37,81,.08); --shadow-lg:0 22px 48px rgba(11,37,81,.14); --r-sm:12px; --r-md:18px; --r-lg:24px; } html{scroll-behavior:smooth} body{ font-family:'Inter',"Segoe UI",Arial,sans-serif; background:var(--page); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,.brand{font-family:'Poppins',"Segoe UI",Arial,sans-serif} img,svg{display:block} /* ========================================================= SCROLL REVEAL ANIMATION ========================================================= */ /* IMPORTANT: elements are only hidden when JavaScript is confirmed running (the flag is set by an inline script in the page head). If the script is missing or blocked, every section simply shows straight away — the page can never end up blank. */ .js .reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); transition-delay:var(--d,0s); } .js .reveal.in{ opacity:1; transform:none; } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .js .reveal{opacity:1;transform:none;transition:none} *{animation:none !important} } /* ========================================================= HEADER / NAVIGATION ========================================================= */ .site-header{ position:sticky; top:0; z-index:80; /* stays above the mobile slide-out panel (70) */ background:rgba(255,255,255,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .nav{ max-width:1130px; margin:auto; padding:16px 30px; display:flex; justify-content:space-between; align-items:center; } .brand{ font-size:21px; font-weight:700; letter-spacing:-.3px; color:var(--navy); text-decoration:none; } .menu{ display:flex; align-items:center; gap:30px; } .menu a{ color:var(--muted); text-decoration:none; font-size:15px; font-weight:500; padding:4px 0; position:relative; transition:color .2s; } .menu a:hover{color:var(--navy)} .menu a.active{color:var(--link);font-weight:600} .menu a.active::after{ content:""; position:absolute; left:0;right:0; bottom:-3px; height:2px; border-radius:2px; background:var(--link); } /* hamburger (mobile only) */ .nav-toggle{ display:none; width:42px; height:42px; border:none; border-radius:11px; cursor:pointer; background:#eef2f8; padding:12px 10px; } .nav-toggle span{ display:block; height:2px; border-radius:2px; background:var(--navy); transition:.3s cubic-bezier(.4,.2,.2,1); } .nav-toggle span + span{margin-top:5px} .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle.open span:nth-child(2){opacity:0} .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav-backdrop{ position:fixed; inset:0; background:rgba(6,20,45,.4); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:.3s; z-index:55; } .nav-backdrop.show{opacity:1;visibility:visible} /* ========================================================= PAGE CONTAINER ========================================================= */ .container{ max-width:1130px; margin:auto; padding:34px 30px 44px; } /* ========================================================= HOME — CALCULATOR CARDS ========================================================= */ .calc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .calc-card{ display:flex; align-items:center; gap:18px; padding:22px; border-radius:20px; text-decoration:none; border:1px solid transparent; box-shadow:0 1px 3px rgba(16,40,80,.04), 0 10px 26px rgba(16,40,80,.05); transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s; } .calc-card:hover{ transform:translateY(-4px); box-shadow:0 2px 6px rgba(16,40,80,.06), 0 18px 40px rgba(16,40,80,.1); } .calc-icon{ width:60px; height:60px; flex:none; border-radius:16px; display:flex; align-items:center; justify-content:center; } .calc-icon svg{width:30px;height:30px} .calc-body{flex:1;min-width:0} .calc-title{ display:block; font-family:'Poppins',"Segoe UI",Arial,sans-serif; font-size:18px; font-weight:700; color:var(--navy); letter-spacing:-.2px; margin-bottom:3px; } .calc-desc{ display:block; font-size:13.5px; line-height:1.5; color:var(--muted); } .calc-chev{ width:34px; height:34px; flex:none; border-radius:50%; background:rgba(255,255,255,.75); display:flex; align-items:center; justify-content:center; transition:transform .3s; } .calc-card:hover .calc-chev{transform:translateX(3px)} .calc-chev svg{width:15px;height:15px} /* per-calculator colour */ .calc-blue {background:#eef4fd;border-color:#dbe8fa} .calc-blue .calc-icon{background:#d9e7fb;color:#3b7fd0} .calc-blue .calc-chev{color:#3b7fd0} .calc-green {background:#eef7f1;border-color:#d9ecdf} .calc-green .calc-icon{background:#d7ecdd;color:#3ba169} .calc-green .calc-chev{color:#3ba169} .calc-orange{background:#fdf3ea;border-color:#f6e2d0} .calc-orange .calc-icon{background:#fbe1ce;color:#df8340} .calc-orange .calc-chev{color:#df8340} .calc-purple{background:#f3f1fb;border-color:#e4dff5} .calc-purple .calc-icon{background:#e6dff7;color:#7a6bce} .calc-purple .calc-chev{color:#7a6bce} /* members-only group — kept neutral so it reads as a separate category */ .calc-society{background:#eef1f6;border-color:#e0e6ef} .calc-society .calc-icon{background:#e1e7f1;color:#5b6b85} .calc-society .calc-chev{color:#5b6b85} .calc-section{margin-top:32px} /* not-yet-live teaser card */ .calc-soon{ background:#f4f6fa; border-color:#e4e9f1; cursor:default; } .calc-soon .calc-icon{background:#e7ebf3;color:#9aa6ba} .calc-soon .calc-title{color:#6b7688} .calc-soon .calc-desc{color:#9aa6ba} .calc-soon:hover{ transform:none; box-shadow:0 1px 3px rgba(16,40,80,.04), 0 10px 26px rgba(16,40,80,.05); } .soon-badge{ flex:none; align-self:center; font-size:11px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:#8a94a6; background:#e7ebf3; border:1px solid #dce3ee; padding:5px 11px; border-radius:999px; white-space:nowrap; } .section-label{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:0 4px 14px; } .section-label h2{ font-family:'Poppins',"Segoe UI",Arial,sans-serif; font-size:15px; font-weight:700; color:var(--navy); letter-spacing:-.2px; } .section-label p{ font-size:12.5px; color:var(--muted); } /* ========================================================= HOME — WHY I BUILT THESE CALCULATORS ========================================================= */ .why-card{ margin-top:26px; display:flex; align-items:flex-start; gap:18px; padding:22px 24px; border-radius:18px; background:linear-gradient(180deg,#eef0ff,#f6f7ff); border:1px solid #d9dcf7; box-shadow:0 1px 3px rgba(16,40,80,.04), 0 10px 26px rgba(79,70,229,.08); } .why-icon{ width:46px; height:46px; flex:none; border-radius:13px; display:flex; align-items:center; justify-content:center; background:#e2e3fb; color:#4f46e5; } .why-icon svg{width:22px;height:22px} .why-body{flex:1;min-width:0} .why-body h2{ font-size:19px; font-weight:700; color:var(--navy); letter-spacing:-.3px; margin-bottom:8px; } .why-body p{ font-size:14.5px; line-height:1.55; color:var(--text); } .why-link{ display:inline-flex; align-items:center; gap:7px; margin-top:13px; font-size:13px; font-weight:700; color:#4338ca; text-decoration:none; transition:gap .2s; } .why-link svg{width:13px;height:13px} .why-link:hover{gap:11px} /* ========================================================= HOME — MY INSPIRATION ========================================================= */ .inspire-card{ margin-top:26px; display:flex; align-items:flex-start; gap:20px; padding:24px 28px; border-radius:20px; background:linear-gradient(150deg,#fef4f7,#fdecf1); border:1px solid #f6dde6; box-shadow:0 1px 3px rgba(16,40,80,.04), 0 10px 26px rgba(220,66,105,.06); } .inspire-icon{ width:52px; height:52px; flex:none; border-radius:15px; display:flex; align-items:center; justify-content:center; background:#fbdae4; color:#d9466b; } .inspire-icon svg{width:24px;height:24px} .inspire-body{flex:1;min-width:0} .inspire-body h2{ font-size:20px; font-weight:700; color:var(--navy); letter-spacing:-.3px; margin-bottom:11px; } .inspire-list{ list-style:none; display:flex; flex-wrap:wrap; gap:9px 24px; } .inspire-list li{ display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--text); } .inspire-list li svg{width:13px;height:13px;flex:none;color:#d9466b} .inspire-link{ display:inline-flex; align-items:center; gap:7px; margin-top:15px; font-size:13px; font-weight:600; color:#c93e63; text-decoration:none; transition:gap .2s; } .inspire-link svg{width:13px;height:13px} .inspire-link:hover{gap:11px} /* ========================================================= HOME — GRATITUDE ========================================================= */ .gratitude-card{ margin-top:26px; display:flex; align-items:center; gap:22px; padding:22px 26px; border-radius:20px; background:linear-gradient(150deg,#faf4e6,#f6ecd7); border:1px solid #efe3c8; box-shadow:0 1px 3px rgba(16,40,80,.04), 0 10px 26px rgba(120,90,20,.06); } .gratitude-visual{ width:80px; flex:none; display:flex; align-items:center; justify-content:center; } .gratitude-visual svg{width:100%;height:auto} .gratitude-body{flex:1;min-width:0} .gratitude-body h2{ font-size:21px; font-weight:700; color:var(--navy); letter-spacing:-.3px; margin-bottom:6px; } .gratitude-body p{ font-size:14px; line-height:1.6; color:#6b6350; } .gratitude-btn{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:8px 16px; border-radius:11px; background:#ecdcb8; color:#7d6327; font-size:13.5px; font-weight:600; text-decoration:none; transition:background .2s, transform .2s; } .gratitude-btn svg{width:14px;height:14px} .gratitude-btn:hover{background:#e4d0a4;transform:translateX(2px)} .gratitude-sign{ margin-top:10px; text-align:right; font-style:italic; font-size:13.5px; color:#8a7c5c; } /* ========================================================= ABOUT — PAGE TITLE ========================================================= */ .page-title{ text-align:center; margin:40px 0 32px; } .page-title h1{ font-size:42px; font-weight:800; letter-spacing:-1px; background:linear-gradient(120deg,#123b72 20%,#1a63cf 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .page-title .ornament{ display:flex; align-items:center; justify-content:center; gap:16px; margin:16px 0 0; } .page-title .ornament span{ width:82px; height:1.5px; background:linear-gradient(90deg,transparent,#b9cfeb); } .page-title .ornament span:last-of-type{ background:linear-gradient(90deg,#b9cfeb,transparent); } .page-title .ornament svg{width:20px;height:20px;color:var(--link)} /* ========================================================= ABOUT — INTRO CARD ========================================================= */ .about-hero{ position:relative; overflow:hidden; background:linear-gradient(135deg,#ffffff,#f8fbff); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 38px; display:flex; align-items:center; gap:44px; margin-bottom:26px; box-shadow:var(--shadow-md); } .about-hero::before{ content:""; position:absolute; width:280px;height:280px; top:-140px;right:-90px; border-radius:50%; background:rgba(26,99,207,.06); filter:blur(40px); } .about-illustration{width:42%;flex:none;position:relative} .about-illustration svg{width:100%;height:auto} .about-text{width:58%;position:relative} .about-text p{ font-size:15.5px; line-height:1.9; color:var(--text); } .about-text p + p{margin-top:18px} .about-text .contact-line{ margin-top:20px; text-decoration:none; color:var(--text); font-weight:500; width:fit-content; } .about-text .contact-line:hover{color:var(--link)} /* ========================================================= ABOUT — CREATOR + INSPIRATION ========================================================= */ .about-grid{ display:grid; grid-template-columns:1fr; gap:24px; margin-bottom:26px; } .info-card{ position:relative; overflow:hidden; border-radius:var(--r-md); padding:26px 28px 30px; border:1px solid transparent; box-shadow:var(--shadow-sm); transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; } .info-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); } .card-heading{ display:flex; align-items:center; gap:14px; margin-bottom:26px; } .card-heading h2{ font-size:21px; font-weight:700; color:var(--blue); position:relative; padding-bottom:9px; letter-spacing:-.3px; } .card-heading h2::after{ content:""; position:absolute; left:0;bottom:0; width:36px;height:3px; border-radius:3px; background:currentColor; opacity:.5; } /* Creator card */ .creator-card{ background:linear-gradient(160deg,#f7fbff,#eff6ff); border-color:#dfeafa; scroll-margin-top:110px; } .creator-card .badge{ background:linear-gradient(140deg,#dfeafa,#cbdff8); color:var(--link); box-shadow:0 6px 16px rgba(26,99,207,.2); } .creator-person{ display:flex; align-items:center; gap:16px; } .avatar{ width:60px; height:60px; border-radius:50%; background:linear-gradient(140deg,#e2edfc,#cbdef8); color:#4173b6; display:flex; align-items:center; justify-content:center; flex:none; box-shadow:0 8px 20px rgba(26,99,207,.18), inset 0 0 0 3px rgba(255,255,255,.7); } .avatar svg{width:31px;height:31px} .creator-person h3{ color:var(--blue); font-size:19px; font-weight:700; margin-bottom:3px; } .creator-person p{font-size:14px;color:var(--muted)} .divider{ height:1px; background:linear-gradient(90deg,transparent,#d7e4f5 20%,#d7e4f5 80%,transparent); margin:24px 0 20px; } .contact-line{ display:flex; align-items:center; gap:13px; font-size:15px; } .contact-line svg{ width:20px;height:20px; color:var(--link); flex:none; } /* Inspiration card */ .inspiration-card{ background:linear-gradient(160deg,#fef5f8,#fdeef3); border-color:#f6dde6; scroll-margin-top:110px; } .inspiration-card .badge{ background:linear-gradient(140deg,#fcdde6,#f9ccda); color:var(--pink); box-shadow:0 6px 16px rgba(220,66,105,.2); } .inspiration-card .card-heading h2{color:#cf3a60} .person-box{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid #f4e0e7; } .person-box:last-child{border-bottom:none;padding-bottom:0} .person-box .badge{width:42px;height:42px} .person-box h3{ color:var(--blue); font-size:16.5px; font-weight:700; margin-bottom:7px; } .person-box p{ font-size:14.5px; line-height:1.85; } .badge{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; } .badge svg{width:20px;height:20px} /* ========================================================= ABOUT — WHY I BUILT THESE CALCULATORS ========================================================= */ .why-box{ background:linear-gradient(160deg,#f1f2ff,#f7f8ff); border:1px solid #dcdef7; border-radius:var(--r-md); padding:26px 30px 30px; margin-bottom:26px; scroll-margin-top:110px; box-shadow:var(--shadow-sm); } .why-box .badge{ background:linear-gradient(140deg,#e0e1fb,#cdcff7); color:#4f46e5; box-shadow:0 6px 16px rgba(79,70,229,.22); } .why-box .card-heading{margin-bottom:20px;align-items:flex-start} .why-box .card-heading h2{color:#4338ca} .why-box p{ font-size:14.5px; line-height:1.85; color:var(--text); } .why-list{ list-style:none; margin:14px 0; display:flex; flex-direction:column; gap:12px; } .why-list li{ position:relative; padding-left:22px; font-size:14.5px; line-height:1.75; color:var(--text); } .why-list li::before{ content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; border-radius:50%; background:#4f46e5; } /* ========================================================= ABOUT — GRATITUDE ========================================================= */ .gratitude-box{ background:linear-gradient(160deg,#fffdf3,#fef8e7); border:1px solid #f5e9cd; border-radius:var(--r-md); padding:26px 30px 30px; margin-bottom:36px; scroll-margin-top:110px; box-shadow:var(--shadow-sm); } .gratitude-box .badge{ background:linear-gradient(140deg,#fceecb,#f9e3ac); color:#d59512; box-shadow:0 6px 16px rgba(224,160,32,.24); } .gratitude-item{ display:flex; gap:18px; padding:22px 0; border-bottom:1px solid #f3e9d3; } .gratitude-item:last-child{border-bottom:none;padding-bottom:0} .gratitude-item .badge{ width:46px; height:46px; background:linear-gradient(140deg,#fdf1d7,#f9e6b8); color:#c58a12; box-shadow:0 6px 16px rgba(224,160,32,.2); } .gratitude-item .badge svg{width:23px;height:23px} .gratitude-item h3{ color:var(--blue); font-size:17px; font-weight:700; margin-bottom:9px; } .gratitude-item h3 i{ font-weight:400; font-size:13.5px; color:var(--muted); margin-left:6px; } .gratitude-item p{ font-size:14.5px; line-height:1.85; max-width:940px; } .gratitude-item p + p{margin-top:12px} /* ========================================================= FOOTER ========================================================= */ .site-footer{ border-top:1px solid var(--line); margin-top:10px; background:#fff; } .footer-inner{ max-width:1130px; margin:auto; padding:24px 30px 30px; display:flex; justify-content:space-between; align-items:center; gap:14px 24px; flex-wrap:wrap; } .footer-brand strong{ display:block; font-family:'Poppins',"Segoe UI",Arial,sans-serif; font-size:15px; font-weight:700; color:var(--navy); } .footer-brand span{ font-size:12.5px; color:var(--muted); } .footer-mail{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--line); border-radius:10px; font-size:13.5px; font-weight:500; color:var(--text); text-decoration:none; transition:border-color .2s, color .2s; } .footer-mail svg{width:16px;height:16px;color:var(--link)} .footer-mail:hover{color:var(--link);border-color:#cfe0f7} /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:1000px){ .about-grid{grid-template-columns:1fr} .about-hero{ flex-direction:column; gap:28px; text-align:center; padding:30px 26px; } .about-illustration, .about-text{width:100%} .about-illustration{max-width:420px;margin:auto} } /* ---- Mobile: hamburger slide-out menu ---- */ @media(max-width:900px){ /* the closed slide-out panel sits just off the right edge — clip so it can never be revealed by a sideways scroll (clip keeps the sticky header working, unlike overflow:hidden) */ html,body{overflow-x:clip} .nav-toggle{ display:block; position:relative; z-index:75; /* keep the X tappable above the open panel (70) */ } .menu{ position:fixed; top:0; right:0; height:100vh; width:262px; z-index:70; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:4px; padding:84px 24px 24px; background:#fff; box-shadow:-14px 0 40px rgba(11,37,81,.16); transform:translateX(100%); transition:transform .35s cubic-bezier(.3,.8,.3,1); } .menu.open{transform:none} .menu a{ width:100%; font-size:16px; padding:14px 4px; border-bottom:1px solid var(--line); } .menu a.active::after{display:none} .menu a.active{color:var(--link)} } @media(max-width:760px){ .calc-grid{gap:16px} } @media(max-width:680px){ .nav{padding:14px 20px} .brand{font-size:19px} .container{padding:22px 16px 32px} /* compact 2×2 calculator grid — quicker to scan on a phone */ .calc-grid{grid-template-columns:1fr 1fr;gap:12px} .calc-card{ flex-direction:column; align-items:center; text-align:center; gap:9px; padding:18px 13px; border-radius:16px; } .calc-icon{width:50px;height:50px;border-radius:14px} .calc-icon svg{width:25px;height:25px} .calc-title{font-size:15px;margin-bottom:2px} .calc-desc{font-size:12px;line-height:1.4} .calc-chev{display:none} /* keep the "coming soon" teaser as one horizontal row */ .calc-soon{ flex-direction:row; align-items:center; text-align:left; gap:14px; padding:16px 14px; } .calc-soon .calc-icon{width:46px;height:46px} .soon-badge{font-size:10px;padding:4px 9px} .why-card{gap:14px;padding:18px 16px;border-radius:16px} .why-icon{width:42px;height:42px;border-radius:12px} .why-body h2{font-size:17.5px} .why-body p{font-size:13.75px} .inspire-card{gap:14px;padding:20px 18px;border-radius:16px} .gratitude-card{ align-items:flex-start; gap:14px; padding:18px 16px; border-radius:16px; } .gratitude-visual{width:52px} .gratitude-body h2{font-size:19px} .gratitude-body p{font-size:13.5px} .footer-inner{ flex-direction:column; align-items:flex-start; gap:14px; padding:22px 18px 26px; } .page-title{margin:28px 0 24px} .page-title h1{font-size:28px} .about-hero{text-align:left;padding:26px 20px} .about-text p{text-align:left} .info-card, .gratitude-box{padding:22px 20px 24px} .card-heading h2{font-size:19px} .creator-person h3{font-size:17.5px} .gratitude-item{gap:13px} .gratitude-item h3{font-size:15.5px} .gratitude-item h3 i{display:block;margin:3px 0 0} }