/* ========================================================= 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:#ffffff; --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,.logo-mark{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(26px); transition:opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s 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) */ } .nav{ background:linear-gradient(100deg,#0a2049 0%,#0e2f63 55%,#123f80 100%); color:#fff; padding:15px 34px; display:flex; justify-content:space-between; align-items:center; box-shadow:0 6px 24px rgba(11,37,81,.18); } .logo{ display:flex; align-items:center; gap:14px; } .logo-mark{ border:2px solid rgba(255,255,255,.9); border-radius:11px; padding:7px 9px; font-size:15px; font-weight:700; letter-spacing:.6px; line-height:1; background:rgba(255,255,255,.07); box-shadow:0 0 0 4px rgba(255,255,255,.05); transition:.3s; } .logo:hover .logo-mark{ background:rgba(255,255,255,.16); transform:rotate(-3deg); } .logo h2{ font-size:22px; font-weight:700; line-height:1.2; letter-spacing:-.2px; } .logo p{ font-size:12.5px; font-style:italic; opacity:.75; letter-spacing:.3px; } .menu{ display:flex; align-items:center; gap:32px; } .menu a{ color:#fff; text-decoration:none; font-size:14.5px; font-weight:500; display:flex; align-items:center; gap:8px; position:relative; padding:6px 2px; transition:.25s; } .menu a svg{ width:17px; height:17px; opacity:.85; transition:.25s; } /* animated underline */ .menu a::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; border-radius:2px; background:linear-gradient(90deg,#8fc0ff,#fff); transition:width .3s ease; } .menu a:hover::after, .menu a.active::after{width:100%} .menu a:hover svg, .menu a.active svg{opacity:1;transform:translateY(-1px)} /* hamburger (mobile only) */ .nav-toggle{ display:none; width:42px; height:42px; border:none; border-radius:11px; cursor:pointer; background:rgba(255,255,255,.12); padding:11px 10px; } .nav-toggle span{ display:block; height:2px; border-radius:2px; background:#fff; 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;transform:scaleX(.4)} .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav-backdrop{ position:fixed; inset:0; background:rgba(6,20,45,.5); backdrop-filter:blur(3px); 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:26px 30px 54px; } /* ========================================================= HOME — HERO ========================================================= */ .hero{ position:relative; overflow:hidden; background: radial-gradient(900px 340px at 84% 8%, rgba(74,134,208,.42), transparent 60%), radial-gradient(620px 320px at 8% 96%, rgba(224,160,32,.16), transparent 62%), linear-gradient(122deg,#0a2559 0%,#103a78 58%,#15498f 100%); color:#fff; text-align:center; padding:52px 20px 58px; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); } /* soft floating glow orbs */ .hero::before, .hero::after{ content:""; position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; } .hero::before{ width:300px;height:300px; top:-120px;right:-60px; background:rgba(102,163,255,.35); animation:float1 12s ease-in-out infinite; } .hero::after{ width:250px;height:250px; bottom:-130px;left:-50px; background:rgba(224,160,32,.22); animation:float2 15s ease-in-out infinite; } @keyframes float1{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-26px,22px)} } @keyframes float2{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(24px,-20px)} } .hero-dots{position:absolute;top:18px;left:20px;opacity:.45} .hero-waves{position:absolute;right:0;bottom:0;opacity:.45} .hero-inner{position:relative;z-index:2} .hero-badge{ width:62px; height:62px; margin:0 auto 20px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.28); border-radius:17px; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.25); animation:bob 4.5s ease-in-out infinite; } @keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} } .hero-badge svg{width:30px;height:30px} .hero h1{ font-size:50px; font-weight:800; letter-spacing:-1.1px; line-height:1.1; background:linear-gradient(180deg,#ffffff 40%,#c9dcff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .ornament{ display:flex; align-items:center; justify-content:center; gap:16px; margin:20px 0 14px; } .ornament span{ width:120px; height:1.5px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55)); } .ornament span:last-of-type{ background:linear-gradient(90deg,rgba(255,255,255,.55),transparent); } .ornament svg{width:20px;height:20px;opacity:.9} .hero-tag{ font-size:20px; font-style:italic; color:#a8cdff; letter-spacing:.4px; } /* ========================================================= SECTION HEADINGS ========================================================= */ .section-head{ display:flex; align-items:center; gap:14px; margin:46px 0 24px; } .section-head h2{ color:var(--blue); font-size:27px; font-weight:800; letter-spacing:-.4px; } .head-badge{ width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex:none; background:linear-gradient(140deg,#e8f1fd,#d6e6fb); color:var(--link); box-shadow:0 6px 16px rgba(26,99,207,.18); } .head-badge svg{width:21px;height:21px} /* ========================================================= HOME — CALCULATOR CARDS ========================================================= */ .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .card{ position:relative; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:32px 18px 28px; text-align:center; text-decoration:none; box-shadow:var(--shadow-sm); transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s; } /* gradient sheen sweeping across on hover */ .card::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(26,99,207,.06) 50%,transparent 70%); transform:translateX(-100%); transition:transform .7s ease; } .card:hover::after{transform:translateX(100%)} .card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:#cfe0f7; } .card-icon{ width:82px; height:82px; margin:0 auto 20px; border-radius:50%; font-size:38px; line-height:1; display:flex; align-items:center; justify-content:center; transition:transform .4s cubic-bezier(.2,.7,.3,1); } .card:hover .card-icon{transform:scale(1.09) rotate(-4deg)} .icon-home{background:linear-gradient(140deg,#eaf1fc,#dbe7f9);box-shadow:0 8px 18px rgba(74,134,208,.16)} .icon-car {background:linear-gradient(140deg,#e6f6ea,#d5eeda);box-shadow:0 8px 18px rgba(60,160,90,.15)} .icon-cart{background:linear-gradient(140deg,#f2eafb,#e6dcf7);box-shadow:0 8px 18px rgba(130,90,190,.15)} .icon-card{background:linear-gradient(140deg,#fbf0da,#f7e6c6);box-shadow:0 8px 18px rgba(224,160,32,.18)} .card h3{ color:var(--blue); font-size:19.5px; font-weight:700; margin-bottom:22px; letter-spacing:-.2px; } .card .open{ position:relative; z-index:2; color:var(--link); font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:7px; padding-bottom:4px; border-bottom:1.5px solid rgba(26,99,207,.45); transition:.3s; } .card:hover .open{border-bottom-color:var(--link);gap:11px} .card .open svg{width:14px;height:14px} /* ========================================================= HOME — INSPIRATION & GRATITUDE PANELS ========================================================= */ .personal-grid{ display:grid; grid-template-columns:1fr 1.35fr; gap:24px; margin-top:38px; } a.panel{ display:block; text-decoration:none; color:inherit; } .panel{ position:relative; overflow:hidden; border-radius:var(--r-md); padding:28px 30px 30px; border:1px solid transparent; box-shadow:var(--shadow-sm); transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; } /* subtle corner glow */ .panel::before{ content:""; position:absolute; width:190px;height:190px; top:-90px;right:-70px; border-radius:50%; filter:blur(46px); transition:.5s; } .panel-head{ position:relative; display:flex; align-items:center; gap:14px; margin-bottom:20px; } .panel-head h2{ font-size:21px; font-weight:700; color:var(--blue); letter-spacing:-.3px; min-width:0; } /* small "view" arrow that slides in on hover */ .panel-arrow{ margin-left:auto; display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; opacity:0; transform:translateX(-6px); transition:.35s; } .panel-arrow svg{width:13px;height:13px} .panel:hover .panel-arrow{opacity:.9;transform:none} .badge{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; } .badge svg{width:20px;height:20px} .panel ul{list-style:none;position:relative} .panel li{ display:flex; align-items:center; gap:11px; font-size:15.5px; margin-bottom:13px; transition:transform .3s; } .panel:hover li{transform:translateX(4px)} .panel li:nth-child(2){transition-delay:.03s} .panel li:nth-child(3){transition-delay:.06s} .panel li:nth-child(4){transition-delay:.09s} .panel li:nth-child(5){transition-delay:.12s} .panel li svg{width:13px;height:13px;flex:none} /* Inspiration (pink) */ .inspiration{ background:linear-gradient(160deg,#fef4f7,#fdeef3); border-color:#f6dde6; } .inspiration::before{background:rgba(220,66,105,.14)} .inspiration .badge{ background:linear-gradient(140deg,#fcdde6,#f9ccda); color:var(--pink); box-shadow:0 6px 16px rgba(220,66,105,.22); } .inspiration li svg, .inspiration .panel-arrow{color:var(--pink)} .inspiration:hover{ transform:translateY(-6px); box-shadow:0 22px 44px rgba(220,66,105,.18); } /* Gratitude (gold) */ .gratitude{ background:linear-gradient(160deg,#fffcf1,#fef8e6); border-color:#f5e9cd; } .gratitude::before{background:rgba(224,160,32,.16)} .gratitude .badge{ background:linear-gradient(140deg,#fceecb,#f9e3ac); color:#d59512; box-shadow:0 6px 16px rgba(224,160,32,.24); } .gratitude li svg, .gratitude .panel-arrow{color:#d59512} .gratitude:hover{ transform:translateY(-6px); box-shadow:0 22px 44px rgba(224,160,32,.2); } /* ========================================================= HOME — NOTE ========================================================= */ .note{ margin-top:28px; background:linear-gradient(120deg,#eff5fd,#e8f0fb); border:1px solid #d9e5f7; border-radius:var(--r-md); padding:22px 26px; display:flex; align-items:flex-start; gap:16px; } .note .badge{ background:linear-gradient(140deg,#dcE9fa,#cadff7); color:var(--link); border-radius:12px; width:38px; height:38px; box-shadow:0 6px 14px rgba(26,99,207,.15); } .note h3{ color:var(--blue); font-size:15.5px; font-weight:700; margin-right:18px; padding-top:6px; flex:none; } .note p{ font-size:14.5px; line-height:1.7; color:var(--muted); padding-top:4px; } /* ========================================================= 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 span{ width:82px; background:linear-gradient(90deg,transparent,#b9cfeb); } .page-title .ornament span:last-of-type{ background:linear-gradient(90deg,#b9cfeb,transparent); } .page-title .ornament svg{color:var(--link);opacity:1} /* ========================================================= 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 — CREATOR + INSPIRATION ========================================================= */ .about-grid{ display:grid; grid-template-columns:1fr 1.25fr; 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; } /* ========================================================= 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 ========================================================= */ footer{ position:relative; background:linear-gradient(160deg,#0a2049 0%,#0d2a5e 60%,#113468 100%); color:#fff; padding:36px 50px 20px; overflow:hidden; } footer::before{ content:""; position:absolute; top:0;left:0;right:0; height:2px; background:linear-gradient(90deg,transparent,#4a86d0,#e0a020,#4a86d0,transparent); opacity:.6; } .footer-content{ position:relative; max-width:1130px; margin:auto; display:flex; } .footer-col{ flex:1; display:flex; align-items:center; gap:16px; padding:0 26px; border-left:1px solid rgba(255,255,255,.14); } .footer-col:first-child{border-left:none;padding-left:0} .footer-badge{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; flex:none; transition:.3s; } .footer-col:hover .footer-badge{ background:rgba(255,255,255,.2); transform:translateY(-3px); } .footer-badge svg{width:22px;height:22px} .footer-col h3{ font-size:13px; font-weight:500; opacity:.7; margin-bottom:4px; letter-spacing:.3px; } .footer-col p{ font-size:15.5px; font-weight:600; margin-bottom:2px; } .footer-col small{font-size:12.5px;opacity:.65} .copyright{ position:relative; max-width:1130px; margin:24px auto 0; text-align:center; padding-top:18px; font-size:13.5px; opacity:.8; border-top:1px solid rgba(255,255,255,.16); } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:1000px){ .grid{grid-template-columns:repeat(2,1fr)} .personal-grid, .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} /* touch devices have no hover, so the "Read more" hint just steals width from the heading — hide it */ .panel-arrow{display:none} .footer-content{flex-direction:column;gap:24px} .footer-col{border-left:none;padding:0} } /* ---- Mobile: hamburger slide-out menu ---- */ @media(max-width:900px){ .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:270px; z-index:70; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:6px; padding:88px 26px 26px; background:linear-gradient(160deg,#0a2049,#123f80); box-shadow:-14px 0 40px rgba(0,0,0,.3); 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 rgba(255,255,255,.1); } .menu a::after{display:none} .menu a.active{color:#a8cdff} } @media(max-width:680px){ .nav{padding:13px 20px} .logo h2{font-size:18.5px} .logo p{font-size:11.5px} .container{padding:20px 16px 38px} .hero{padding:38px 16px 42px;border-radius:var(--r-md)} .hero h1{font-size:32px;letter-spacing:-.6px} .hero-tag{font-size:16.5px} .ornament span{width:48px} .hero-badge{width:54px;height:54px} .grid{grid-template-columns:1fr} .page-title{margin:28px 0 24px} .page-title h1{font-size:28px} .section-head{margin:34px 0 20px} .section-head h2{font-size:22px} .panel, .info-card, .gratitude-box{padding:22px 20px 24px} .note{flex-wrap:wrap;padding:20px} .note h3{margin-right:0} /* centred paragraphs are hard to read on a narrow screen — keep the illustration centred but set the text flush left */ .about-hero{text-align:left;padding:26px 20px} .about-text p{text-align:left} .panel-head h2, .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} footer{padding:30px 22px 18px} }