/* quick access css */ /* ========================================================= MODERN FLOATING QUICK ACCESS PORTAL Elegant • Fresh • Structured • Mobile Optimized ========================================================= */ /* ========================= MAIN WRAPPER ========================= */ .quick-access{ --primary-blue: #2563eb; --soft-blue: #60a5fa; --orange: #ff9f1c; --soft-yellow: #ffe08a; --dark-text: #14253d; --light-text: #5d6c80; --white: #ffffff; position: relative; width: 100%; padding: 80px 42px; border-radius: 38px; overflow: hidden; background: linear-gradient( 135deg, #f7fbff 0%, #edf5ff 45%, #fff8ee 100% ); box-shadow: 0 22px 60px rgba(15,35,60,0.08); } /* ========================= FLOATING BACKGROUND ORBS ========================= */ .quick-access::before{ content: ""; position: absolute; top: -140px; right: -100px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient( circle, rgba(37,99,235,0.12), transparent 70% ); } .quick-access::after{ content: ""; position: absolute; bottom: -140px; left: -100px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient( circle, rgba(255,159,28,0.12), transparent 70% ); } /* ========================= MAIN H2 ========================= */ .quick-access h2{ position: relative; font-size: 42px; font-weight: 800; color: var(--dark-text); margin-bottom: 42px; padding-bottom: 18px; line-height: 1.2; letter-spacing: -0.7px; } .quick-access h2::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 135px; height: 7px; border-radius: 100px; background: linear-gradient( 90deg, var(--orange), var(--soft-yellow), var(--primary-blue) ); } /* ========================= PARENT GRID ========================= */ .access-pc{ display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 34px; margin-bottom: 70px; } /* ========================= FLOATING CARDS ========================= */ .access-cc1, .access-cc2, .access-cc3, .access-cc4, .access-cc5, .access-cc6{ position: relative; padding: 28px 22px; border-radius: 30px; background: rgba(255,255,255,0.82); border: 1px solid rgba(255,255,255,0.85); backdrop-filter: blur(16px); overflow: hidden; box-shadow: 0 10px 35px rgba(15,35,60,0.06); transition: transform 0.4s ease, box-shadow 0.4s ease; } /* SOFT INNER LIGHT */ .access-cc1::before, .access-cc2::before, .access-cc3::before, .access-cc4::before, .access-cc5::before, .access-cc6::before{ content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(255,255,255,0.35), transparent ); pointer-events: none; } /* TOP COLOR BAR */ .access-cc1::after, .access-cc2::after, .access-cc3::after, .access-cc4::after, .access-cc5::after, .access-cc6::after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 7px; background: linear-gradient( 90deg, var(--orange), var(--soft-yellow), var(--primary-blue) ); } /* CARD HOVER */ .access-cc1:hover, .access-cc2:hover, .access-cc3:hover, .access-cc4:hover, .access-cc5:hover, .access-cc6:hover{ transform: translateY(-12px); box-shadow: 0 24px 55px rgba(20,35,60,0.13); } /* ========================= H3 HEADINGS ========================= */ .quick-access h3{ position: relative; font-size: 24px; font-weight: 700; color: var(--dark-text); margin-bottom: 24px; padding-bottom: 14px; line-height: 1.4; } .quick-access h3::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 70px; height: 4px; border-radius: 50px; background: linear-gradient( 90deg, var(--primary-blue), var(--soft-yellow) ); } /* ========================= BUTTONS ========================= */ .quick-access a, .quick-access button{ position: relative; display: flex; align-items: center; width: 100%; padding: 15px 16px; margin-bottom: 14px; border-radius: 18px; background: rgba(255,255,255,0.92); border: 1px solid rgba(37,99,235,0.08); text-decoration: none; color: var(--dark-text); font-size: 15px; font-weight: 600; line-height: 1.45; overflow: hidden; box-shadow: 0 5px 16px rgba(0,0,0,0.04); transition: transform 0.25s ease, box-shadow 0.25s ease, border 0.25s ease, background 0.25s ease; } /* LEFT COLOR LINE */ .quick-access a::before, .quick-access button::before{ content: ""; display: block; width: 5px; height: 24px; border-radius: 30px; margin-right: 14px; background: linear-gradient( 180deg, var(--orange), var(--soft-yellow), var(--primary-blue) ); flex-shrink: 0; } /* BUTTON HOVER */ .quick-access a:hover, .quick-access button:hover{ transform: translateX(6px); background: rgba(255,255,255,1); border-color: rgba(37,99,235,0.18); box-shadow: 0 12px 24px rgba(37,99,235,0.10); } /* REMOVE LAST GAP */ .quick-access a:last-child, .quick-access button:last-child{ margin-bottom: 0; } /* ========================= TABLET VIEW ========================= */ @media(max-width:1100px){ .access-pc{ grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px; } } /* ========================= MOBILE VIEW ========================= */ @media(max-width:768px){ .quick-access{ padding: 44px 18px; border-radius: 26px; } .quick-access h2{ font-size: 32px; margin-bottom: 30px; } .access-pc{ grid-template-columns: 1fr; gap: 22px; margin-bottom: 45px; } .access-cc1, .access-cc2, .access-cc3, .access-cc4, .access-cc5, .access-cc6{ padding: 22px 16px; border-radius: 24px; } .quick-access h3{ font-size: 21px; margin-bottom: 20px; } .quick-access a, .quick-access button{ padding: 14px 14px; font-size: 14px; border-radius: 15px; } .quick-access a::before, .quick-access button::before{ width: 4px; height: 22px; margin-right: 12px; } .access-cc1:hover, .access-cc2:hover, .access-cc3:hover, .access-cc4:hover, .access-cc5:hover, .access-cc6:hover{ transform: translateY(-5px); } } /* ========================= SMALL MOBILE ========================= */ @media(max-width:480px){ .quick-access{ padding: 34px 14px; } .quick-access h2{ font-size: 27px; } .quick-access h3{ font-size: 19px; } .quick-access a, .quick-access button{ font-size: 13.5px; padding: 13px 13px; } }