/* ============================================================ FAQ.CSS - Alif Club FAQ page ------------------------------------------------------------ 1. Colors / helpers 2. Background (typical-section.css / contact.css ka same: sky-blue + dark moving blobs + grain) 3. Top banner (image, ~45vh) 4. Glass base + buttons 5. Search + topic chips 6. Question groups + accordion 7. Empty state 8. Contact panel (transparent grain glass) 9. Mobile 10. Reduced motion ============================================================ */ /* ============================================================ 1. COLORS / HELPERS ============================================================ */ :root{ --bubbg: radial-gradient(circle at 28% 22%,rgba(255,255,255,.65) 0,rgba(255,255,255,.18) 14%,rgba(255,255,255,0) 38%), radial-gradient(circle at 75% 90%,rgba(130,220,255,.40) 0,rgba(130,220,255,0) 55%), linear-gradient(180deg,rgba(255,255,255,.14),rgba(110,200,255,.10)); --bubsh: inset 0 2px 3px rgba(255,255,255,.7), inset 0 -8px 14px rgba(0,130,210,.18), inset 3px 0 6px rgba(255,255,255,.18), 0 8px 18px rgba(0,120,200,.18), 0 0 14px rgba(120,220,255,.25); --fq-hdr:90px; /* header ki height (fixed header ke piche content hide na ho). Zarurat ho to badlo */ } .container{ max-width:1440px; margin:0 auto; padding:0 15px; } .fq-band{ padding:6px 0 0; } [hidden]{ display:none !important; } /* ============================================================ 2. BACKGROUND (typical-section.css / contact.css ka bilkul same) ------------------------------------------------------------ Laptop + mobile dono par same: moving dark blobs + grain. --bg1 = sky upar | --bg2 = gehre dark blobs | --bg3 = clouds Blob size unit --u : laptop 1vmax, mobile .75vmax ============================================================ */ @property --bg1 { syntax:''; inherits:true; initial-value:#bfe4fa; } @property --bg2 { syntax:''; inherits:true; initial-value:#03163b; } @property --bg3 { syntax:''; inherits:true; initial-value:#ffffff; } @property --b1x { syntax:''; inherits:false; initial-value:0px; } @property --b1y { syntax:''; inherits:false; initial-value:0px; } @property --b1r { syntax:''; inherits:false; initial-value:0px; } @property --b2x { syntax:''; inherits:false; initial-value:0px; } @property --b2y { syntax:''; inherits:false; initial-value:0px; } @property --b2r { syntax:''; inherits:false; initial-value:0px; } @property --b3x { syntax:''; inherits:false; initial-value:0px; } @property --b3y { syntax:''; inherits:false; initial-value:0px; } @property --b3r { syntax:''; inherits:false; initial-value:0px; } @property --b4x { syntax:''; inherits:false; initial-value:0px; } @property --b4y { syntax:''; inherits:false; initial-value:0px; } @property --b4r { syntax:''; inherits:false; initial-value:0px; } @property --b5x { syntax:''; inherits:false; initial-value:0px; } @property --b5y { syntax:''; inherits:false; initial-value:0px; } @property --b5r { syntax:''; inherits:false; initial-value:0px; } html{ --bg1:#bfe4fa; /* sky upar (light) */ --bg2:#03163b; /* gehra dark blue */ --bg3:#ffffff; /* safed clouds */ --bg1b:color-mix(in srgb, var(--bg1) 45%, #1a5a92); /* sky neeche: --bg1 se apne aap banta hai */ --u:1vmax; /* blob size ki unit: laptop par 1vmax */ transition:--bg1 .3s ease, --bg2 .3s ease, --bg3 .3s ease; } @media(max-width:768px){ html{ --u:.75vmax; } /* mobile: blobs ka size laptop ke proportion me */ } html::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(to bottom, var(--bg1), var(--bg1b)); } html::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; --b1x:calc(15 * var(--u)); --b1y:calc(15 * var(--u)); --b1r:calc(42 * var(--u)); --b2x:calc(100vw - 12.5 * var(--u)); --b2y:calc(100vh - 12.5 * var(--u)); --b2r:calc(39 * var(--u)); --b3x:calc(12.5 * var(--u)); --b3y:calc(55vh + 22.5 * var(--u)); --b3r:calc(32 * var(--u)); --b4x:calc(40vw + 25 * var(--u)); --b4y:calc(10vh + 20 * var(--u)); --b4r:calc(22 * var(--u)); --b5x:calc(55vw + 22.5 * var(--u)); --b5y:calc(45vh + 17.5 * var(--u)); --b5r:calc(20 * var(--u)); background: radial-gradient(circle var(--b3r) at var(--b3x) var(--b3y), color-mix(in srgb, var(--bg2) 85%, transparent) 0%, transparent 100%), radial-gradient(circle var(--b2r) at var(--b2x) var(--b2y), color-mix(in srgb, var(--bg2) 92%, transparent) 0%, transparent 100%), radial-gradient(circle var(--b1r) at var(--b1x) var(--b1y), color-mix(in srgb, var(--bg2) 92%, transparent) 0%, transparent 100%); animation: alifB1 10s ease-in-out infinite alternate, alifB2 12s ease-in-out infinite alternate, alifB3 11s ease-in-out infinite alternate, alifB4 13s ease-in-out infinite alternate, alifB5 15s ease-in-out infinite alternate; } @keyframes alifB1{ 0% { --b1x:calc(15 * var(--u)); --b1y:calc(15 * var(--u)); --b1r:calc(42 * var(--u)); } 50% { --b1x:calc(15 * var(--u) + 60vw); --b1y:calc(15 * var(--u) + 30vh); --b1r:calc(50 * var(--u)); } 100% { --b1x:calc(15 * var(--u) + 20vw); --b1y:calc(15 * var(--u) + 70vh); --b1r:calc(38 * var(--u)); } } @keyframes alifB2{ 0% { --b2x:calc(100vw - 12.5 * var(--u)); --b2y:calc(100vh - 12.5 * var(--u)); --b2r:calc(39 * var(--u)); } 50% { --b2x:calc(45vw - 12.5 * var(--u)); --b2y:calc(60vh - 12.5 * var(--u)); --b2r:calc(45 * var(--u)); } 100% { --b2x:calc(80vw - 12.5 * var(--u)); --b2y:calc(25vh - 12.5 * var(--u)); --b2r:calc(39 * var(--u)); } } @keyframes alifB3{ 0% { --b3x:calc(12.5 * var(--u)); --b3y:calc(55vh + 22.5 * var(--u)); --b3r:calc(32 * var(--u)); } 50% { --b3x:calc(12.5 * var(--u) + 70vw); --b3y:calc(25vh + 22.5 * var(--u)); --b3r:calc(38 * var(--u)); } 100% { --b3x:calc(12.5 * var(--u) + 90vw); --b3y:calc(75vh + 22.5 * var(--u)); --b3r:calc(29 * var(--u)); } } @keyframes alifB4{ 0% { --b4x:calc(40vw + 25 * var(--u)); --b4y:calc(10vh + 20 * var(--u)); --b4r:calc(22 * var(--u)); } 50% { --b4x:calc(-5vw + 25 * var(--u)); --b4y:calc(35vh + 20 * var(--u)); --b4r:calc(26.4 * var(--u)); } 100% { --b4x:calc(-30vw + 25 * var(--u)); --b4y:calc(60vh + 20 * var(--u)); --b4r:calc(20.9 * var(--u)); } } @keyframes alifB5{ 0% { --b5x:calc(55vw + 22.5 * var(--u)); --b5y:calc(45vh + 17.5 * var(--u)); --b5r:calc(20 * var(--u)); } 50% { --b5x:calc(5vw + 22.5 * var(--u)); --b5y:calc(15vh + 17.5 * var(--u)); --b5r:calc(23 * var(--u)); } 100% { --b5x:calc(35vw + 22.5 * var(--u)); --b5y:calc(-5vh + 17.5 * var(--u)); --b5r:calc(20 * var(--u)); } } /* grain: overlay wala grayscale dana (baseFrequency .5), mobile par bhi laptop jaisa hi */ body::before{ content:""; position:fixed; inset:-80px; z-index:-1; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px; opacity:.5; mix-blend-mode:overlay; /* halka: .35 | strong: .7 ; dana bada: baseFrequency .5 -> .4 */ animation:alifGrain .8s steps(1) infinite; } @keyframes alifGrain{ 0% { transform:translate(0,0); } 25% { transform:translate(-30px,20px); } 50% { transform:translate(25px,-30px); } 75% { transform:translate(-15px,-35px); } 100%{ transform:translate(0,0); } } body::after{ display:none; } /* ============================================================ 3. TOP BANNER - image + height ~45vh (half screen se thodi kam) ------------------------------------------------------------ Height badalni ho to sirf neeche clamp(min, ideal, max) badlo. padding-top = header ki height, taaki text header ke piche hide na ho. Image na mile to neeche ka gradient dikhta hai. ============================================================ */ .fq-hero{ position:relative; box-sizing:border-box; overflow:hidden; height:clamp(300px, 45vh, 460px); padding-top:var(--fq-hdr); display:flex; align-items:center; background:linear-gradient(135deg,#0b3a66 0%,#1a6aa8 55%,#4f8fc0 100%); } .fq-hero-img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center; -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%); mask-image:linear-gradient(to bottom,#000 78%,transparent 100%); /* neeche image sky me mil jaati hai */ } .fq-hero::before{ /* image ke upar halka dark overlay: text saaf dikhe */ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(90deg,rgba(3,22,59,.62) 0%,rgba(3,22,59,.28) 55%,rgba(3,22,59,.10) 100%), linear-gradient(0deg,rgba(6,34,58,.30) 0%,rgba(6,34,58,0) 45%); } .fq-hero-in{ position:relative; z-index:2; width:100%; display:flex; align-items:center; justify-content:space-between; gap:30px; } .fq-hero-text{ color:#fff; text-shadow:0 2px 14px rgba(0,50,120,.55); max-width:640px; } .fq-crumbs{ display:flex; gap:8px; align-items:center; font-size:13px; font-weight:600; color:rgba(255,255,255,.85); margin-bottom:10px; } .fq-crumbs a{ color:#fff; text-decoration:none; } .fq-crumbs a:hover{ text-decoration:underline; } .fq-hero h1{ font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.08; letter-spacing:-.01em; margin:0 0 10px; } .fq-hero p{ margin:0; font-size:clamp(.92rem,1.5vw,1.1rem); line-height:1.5; color:rgba(255,255,255,.92); } /* glass bubble + andar phone (chat box). --s = circle ka size. Phone ka sab kuch em me hai aur font-size = --s/20, isliye --s badlo to phone + text apne aap circle ke hisab se chhota / bada ho jata hai. */ .fq-seal{ --s:clamp(150px,24vh,210px); position:relative; flex:none; width:var(--s); font-size:calc(var(--s) / 20); aspect-ratio:1; display:grid; place-items:center; margin-right:4%; } .fq-seal > *{ position:absolute; } .fq-seal-disc{ inset:0; border-radius:50%; display:grid; place-items:center; background:var(--bubbg), radial-gradient(circle at 30% 22%,rgba(255,255,255,.55),rgba(255,255,255,.12)); border:1.5px solid rgba(255,255,255,.65); box-shadow:var(--bubsh), 0 20px 40px -18px rgba(0,25,55,.6); -webkit-backdrop-filter:blur(8px) saturate(160%); backdrop-filter:blur(8px) saturate(160%); animation:fqFloat 5s ease-in-out infinite alternate; color:#fff; text-shadow:0 4px 18px rgba(0,60,130,.55); } .fq-seal-ring{ inset:0; border-radius:50%; border:1.5px solid rgba(255,255,255,.6); opacity:0; animation:fqRipple 3.6s cubic-bezier(.2,.6,.3,1) infinite; } .fq-seal-ring.r2{ animation-delay:1.8s; } @keyframes fqFloat{ from{ transform:translateY(0); } to{ transform:translateY(-8px); } } @keyframes fqRipple{ 0%{ transform:scale(.9); opacity:0; } 20%{ opacity:.8; } 100%{ transform:scale(1.7); opacity:0; } } /* ------------------------------------------------------------ PHONE + OPEN CHAT BOX ("Same Day Delivery?") Sab kuch em me hai (1em = circle ka 1/20), isliye circle ke hisab se scale hota hai. Phone ka size: .fq-phone width / height | bubble ka text: .fq-bubble font-size ------------------------------------------------------------ */ .fq-phone{ position:relative; box-sizing:border-box; display:flex; width:9em; height:14em; padding:.4em; border-radius:1.5em; background:linear-gradient(160deg,#1d3d63 0%,#0a1f3d 100%); border:.16em solid rgba(255,255,255,.88); box-shadow:0 .9em 1.6em -.6em rgba(0,20,50,.75), inset 0 0 0 .1em rgba(255,255,255,.12); text-shadow:none; } .fq-phone-notch{ position:absolute; top:.38em; left:50%; z-index:3; width:2.4em; height:.45em; margin-left:-1.2em; border-radius:1em; background:#06142a; } .fq-phone-screen{ position:relative; flex:1; overflow:hidden; border-radius:1.15em; display:flex; flex-direction:column; justify-content:center; gap:.7em; padding:2.6em .4em .5em; background:linear-gradient(180deg,#eaf7ff 0%,#bfe4fa 100%); } .fq-chat-head{ position:absolute; top:0; left:0; right:0; height:2.3em; padding:0 .55em .35em; display:flex; align-items:flex-end; gap:.4em; background:linear-gradient(90deg,#19a8f0,#4f8fc0); } .fq-chat-head i{ width:.95em; height:.95em; border-radius:50%; background:rgba(255,255,255,.95); } .fq-chat-head b{ width:2.6em; height:.34em; margin-bottom:.3em; border-radius:1em; background:rgba(255,255,255,.75); } .fq-bubble{ align-self:flex-start; max-width:96%; box-sizing:border-box; padding:.5em .55em; border-radius:.95em .95em .95em .25em; background:#fff; color:#0b2a45; font-weight:800; font-size:max(.95em,6.5px); line-height:1.2; box-shadow:0 .25em .6em -.2em rgba(0,40,90,.35); text-shadow:none; letter-spacing:0; } .fq-typing{ align-self:flex-end; display:flex; gap:.28em; padding:.5em .65em; border-radius:.95em .95em .25em .95em; background:linear-gradient(90deg,#19a8f0,#4f8fc0); box-shadow:0 .25em .6em -.2em rgba(0,40,90,.35); } .fq-typing i{ width:.42em; height:.42em; border-radius:50%; background:#fff; animation:fqDot 1.2s ease-in-out infinite; } .fq-typing i:nth-child(2){ animation-delay:.15s; } .fq-typing i:nth-child(3){ animation-delay:.3s; } @keyframes fqDot{ 0%,60%,100%{ transform:translateY(0); opacity:.6; } 30%{ transform:translateY(-.3em); opacity:1; } } /* ============================================================ 4. GLASS BASE + BUTTONS ============================================================ */ .fq-glass{ position:relative; isolation:isolate; overflow:hidden; background: radial-gradient(120% 70% at 12% 0%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 55%), linear-gradient(150deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.14) 100%); border:1px solid rgba(255,255,255,.38); border-radius:22px; box-shadow: inset 0 1.5px 1px rgba(255,255,255,.75), inset 1px 0 2px rgba(255,255,255,.25), inset 0 -14px 28px rgba(255,255,255,.06); -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%); color:#fff; text-shadow:0 1px 6px rgba(0,30,60,.4); transition:border-color .3s ease; } .fq-glass.touch-active{ border-color:rgba(255,255,255,.65); } .fq-ico{ display:grid; place-items:center; flex:none; width:46px; height:46px; border-radius:50%; background:var(--bubbg); border:1px solid rgba(255,255,255,.55); box-shadow:var(--bubsh); font-size:18px; color:#fff; } .fq-btn{ position:relative; isolation:isolate; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 28px; border-radius:30px; color:#fff; text-decoration:none; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.45); box-shadow:inset 0 1px 1px rgba(255,255,255,.45), 0 6px 16px -8px rgba(0,0,0,.6); -webkit-backdrop-filter:blur(6px) saturate(160%); backdrop-filter:blur(6px) saturate(160%); text-shadow:0 1px 4px rgba(0,20,40,.6); transition:transform .4s cubic-bezier(.25,1.25,.4,1), border-color .3s ease; } .fq-btn::before{ content:""; position:absolute; inset:2px; z-index:-1; pointer-events:none; border-radius:999px; opacity:0; transform:scale(.6); background:var(--bubbg); border:1px solid rgba(255,255,255,.5); box-shadow:var(--bubsh); transition:opacity .3s ease, transform .5s cubic-bezier(.25,1.25,.4,1); } .fq-btn:hover{ transform:translateY(-2px); border-color:rgba(25,194,255,.85); } .fq-btn:hover::before{ opacity:1; transform:scale(1); } .fq-btn i{ transition:transform .3s ease; } .fq-btn:hover i.fa-arrow-right{ transform:translateX(4px); } .fq-btn.ghost{ background:rgba(6,30,70,.35); } .fq-btn:focus-visible, .fq-chip:focus-visible, .fq-item summary:focus-visible, .fq-search input:focus-visible, .fq-clear:focus-visible{ outline:2px solid #fff; outline-offset:3px; } /* ============================================================ 5. SEARCH + TOPIC CHIPS ============================================================ */ /* ------------------------------------------------------------ 2 BHAG: bayen taraf main content, dayen taraf sticky ad Content ki chaudai kam karni ho -> .fq-layout ki max-width ghatao. Ad column ki chaudai -> grid-template-columns ka 320px. Sticky jagah (header ke neeche kitna) -> .fq-ad-sticky ka top. ------------------------------------------------------------ */ .fq-layout{ max-width:1240px; display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; align-items:start; } .fq-main{ min-width:0; } .fq-aside{ min-width:0; align-self:stretch; margin-top:46px; } /* stretch: sticky ko chalne ki lambi jagah milti hai */ .fq-ad-sticky{ position:sticky; top:calc(var(--fq-hdr) + 18px); } .fq-ad-label{ margin:0 0 8px; text-align:center; font-size:.68rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.75); text-shadow:0 1px 4px rgba(0,30,60,.45); } .fq-ad-slot{ box-sizing:border-box; width:100%; max-width:320px; min-height:600px; margin:0 auto; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; border-radius:18px; border:1.5px dashed rgba(255,255,255,.5); background:rgba(255,255,255,.08); -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%); text-shadow:none; } .fq-ad-ph{ font-size:.85rem; font-weight:700; line-height:1.6; letter-spacing:.5px; color:rgba(255,255,255,.7); } .fq-ad-slot:has(ins) { border:0; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; } .fq-ad-slot:has(ins) .fq-ad-ph{ display:none; } @media (max-width:1000px){ .fq-layout{ grid-template-columns:minmax(0,1fr); gap:0; } .fq-aside{ margin-top:26px; } .fq-ad-sticky{ position:static; } .fq-ad-slot{ min-height:250px; } } .fq-tools{ margin-top:46px; padding:24px 26px 20px; } .fq-search{ position:relative; display:flex; align-items:center; cursor:text; background:rgba(6,30,70,.30); border:1.5px solid rgba(255,255,255,.42); border-radius:16px; box-shadow:inset 0 1px 1px rgba(255,255,255,.28); transition:border-color .25s ease, background .25s ease, box-shadow .25s ease; } .fq-search:hover{ border-color:rgba(255,255,255,.7); } .fq-search:focus-within{ border-color:rgba(25,194,255,.95); background:rgba(6,30,70,.42); box-shadow:inset 0 1px 1px rgba(255,255,255,.28), 0 0 0 4px rgba(25,194,255,.22); } .fq-search > i{ flex:none; width:50px; text-align:center; font-size:16px; color:rgba(255,255,255,.85); pointer-events:none; } .fq-search input{ flex:1; min-width:0; padding:16px 8px 16px 0; border:0; background:transparent; outline:0; color:#fff; font:inherit; font-size:1.02rem; text-shadow:none; -webkit-appearance:none; appearance:none; } .fq-search input:focus-visible{ outline:0; } .fq-search input::placeholder{ color:rgba(255,255,255,.65); opacity:1; } .fq-search input::-webkit-search-cancel-button{ display:none; } .fq-clear{ flex:none; width:36px; height:36px; margin-right:8px; border-radius:50%; cursor:pointer; padding:0; display:grid; place-items:center; color:#fff; font-size:14px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4); transition:background .2s ease, transform .3s cubic-bezier(.25,1.25,.4,1); } .fq-clear:hover{ background:rgba(255,255,255,.3); transform:scale(1.1); } .fq-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; } .fq-chip{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; cursor:pointer; font:inherit; font-size:.86rem; font-weight:600; color:#fff; text-shadow:0 1px 4px rgba(0,20,40,.5); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4); box-shadow:inset 0 1px 1px rgba(255,255,255,.4); transition:background .25s ease, border-color .25s ease, transform .35s cubic-bezier(.25,1.25,.4,1); } .fq-chip i{ font-size:12px; color:#bff1ff; } .fq-chip:hover{ transform:translateY(-2px); border-color:rgba(25,194,255,.85); } .fq-chip.is-on{ background:var(--bubbg), rgba(25,194,255,.38); border-color:#fff; box-shadow:var(--bubsh); } .fq-count{ margin:14px 2px 0; font-size:.85rem; font-weight:600; color:rgba(255,255,255,.85); } /* ============================================================ 6. QUESTION GROUPS + ACCORDION ============================================================ */ .fq-list{ display:grid; gap:22px; margin-top:26px; } .fq-group{ padding:26px 28px 14px; } .fq-group-head{ display:flex; align-items:center; gap:14px; margin-bottom:10px; } .fq-group-head h2{ margin:0; font-size:1.35rem; font-weight:700; letter-spacing:.3px; } .fq-item{ border-top:1px solid rgba(255,255,255,.28); } .fq-item:first-child{ border-top:0; } .fq-item summary{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 4px; cursor:pointer; list-style:none; border-radius:10px; transition:color .2s ease; } .fq-item summary::-webkit-details-marker{ display:none; } .fq-item summary:hover{ color:#ffe066; } .fq-q{ font-size:1.02rem; font-weight:600; line-height:1.45; } .fq-chev{ flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; font-size:12px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.4); transition:transform .35s cubic-bezier(.25,1.25,.4,1), background .25s ease; } .fq-item[open] .fq-chev{ transform:rotate(180deg); background:rgba(25,194,255,.45); border-color:#fff; } .fq-a{ padding:0 52px 20px 4px; animation:fqOpen .35s ease both; } .fq-a p{ margin:0; max-width:75ch; line-height:1.75; font-size:.97rem; color:rgba(255,255,255,.95); } .fq-a a{ color:#bff1ff; font-weight:600; text-decoration:underline; text-underline-offset:3px; } .fq-a a:hover{ color:#ffe066; } @keyframes fqOpen{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } } /* ============================================================ 7. EMPTY STATE ============================================================ */ .fq-empty{ padding:34px 24px 36px; text-align:center; display:flex; flex-direction:column; align-items:center; } .fq-empty .fq-ico{ width:60px; height:60px; font-size:22px; margin-bottom:14px; } .fq-empty h3{ margin:0 0 8px; font-size:1.3rem; font-weight:700; } .fq-empty p{ margin:0 0 20px; line-height:1.6; color:rgba(255,255,255,.92); } .fq-empty-btns{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; } /* ============================================================ 8. CONTACT PANEL - transparent glass + halka grain ------------------------------------------------------------ Background transparent hai (peeche ka sky/blobs dikhta hai), ::before me halka noise grain, upar se blur + shine. ============================================================ */ .fq-contact{ position:relative; isolation:isolate; overflow:hidden; max-width:1100px; margin:60px auto 50px; padding:32px 34px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; background: radial-gradient(120% 80% at 10% 0%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%), linear-gradient(150deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.10) 100%); border:1px solid rgba(255,255,255,.38); border-radius:22px; box-shadow: inset 0 1.5px 1px rgba(255,255,255,.65), inset 0 -14px 28px rgba(255,255,255,.05), 0 16px 40px -22px rgba(0,30,70,.55); -webkit-backdrop-filter:blur(14px) saturate(170%); backdrop-filter:blur(14px) saturate(170%); text-shadow:0 1px 6px rgba(0,30,60,.4); } .fq-contact::before{ /* grain layer */ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px; opacity:.22; mix-blend-mode:overlay; } .fq-contact-text{ flex:1 1 360px; } .fq-contact h2{ margin:0 0 10px; font-size:1.6rem; font-weight:700; color:#fff; letter-spacing:.5px; } .fq-contact p{ margin:0 0 16px; line-height:1.7; font-size:.95rem; color:rgba(255,255,255,.92); max-width:60ch; } .fq-contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:.92rem; } .fq-contact-list i{ width:20px; color:#fff; } .fq-contact-list a{ color:#fff; text-decoration:none; font-weight:600; } .fq-contact-list a:hover{ text-decoration:underline; } .fq-contact-btns{ display:flex; flex-direction:column; gap:12px; align-items:stretch; } /* ============================================================ 9. MOBILE ============================================================ */ @media (max-width:900px){ :root{ --fq-hdr:72px; } .fq-hero{ height:clamp(280px, 42vh, 380px); } .fq-seal{ --s:118px; margin-right:0; } } @media (max-width:768px){ .fq-tools{ margin-top:34px; padding:18px 16px 16px; } .fq-search > i{ width:42px; } .fq-search input{ padding:14px 6px 14px 0; font-size:1rem; } /* chips ek line me side-scroll */ .fq-chips{ flex-wrap:nowrap; overflow-x:auto; margin:14px -16px 0; padding:2px 16px 6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .fq-chips::-webkit-scrollbar{ display:none; } .fq-chip{ flex:none; } .fq-list{ gap:16px; } .fq-group{ padding:20px 16px 8px; } .fq-group-head h2{ font-size:1.15rem; } .fq-q{ font-size:.98rem; } .fq-a{ padding:0 4px 18px 4px; } .fq-contact{ margin:46px 12px 36px; padding:24px 18px; } .fq-contact h2{ font-size:1.3rem; } .fq-contact-btns{ width:100%; } /* mobile par grain / blobs band nahi - laptop jaisa hi (typical-section jaisa) */ } /* ============================================================ 10. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion:reduce){ html{ transition:none; } html::after, body::before{ animation:none; } .fq-seal-disc, .fq-seal-ring, .fq-a, .fq-typing i{ animation:none; } .fq-seal-ring{ display:none; } .fq-chev, .fq-chip, .fq-btn, .fq-search{ transition:none; } }