/* ============================================================ PRIVACY.CSS - Alif Club privacy policy page ------------------------------------------------------------ 1. Colors / helpers 2. Background (sky-blue + dark moving blobs + clouds + grain) [about.css jaisa] 3. Top banner (image, ~45vh) 4. Glass base + buttons 5. At a glance cards 6. Layout + contents list 7. Policy sections 8. Mobile 9. 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); --pv-hdr:90px; /* header ki height (fixed header ke piche content hide na ho). Zarurat ho to badlo */ --pv-stick:96px; /* scroll karte waqt contents list / section header se kitna neeche rukey (header ki height + gap) */ } .container{ max-width:1440px; margin:0 auto; padding:0 15px; } .pv-band{ padding:6px 0 0; } /* ============================================================ 2. BACKGROUND (about.css ka same background) --bg1/--bg1b = sky upar/neeche | --bg2 = dark blobs | --bg3 = clouds ============================================================ */ @property --bg1 { syntax:''; inherits:true; initial-value:#bfe4fa; } @property --bg1b { syntax:''; inherits:true; initial-value:#4f8fc0; } @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; --bg1b:#4f8fc0; --bg2:#03163b; --bg3:#ffffff; transition:--bg1 .3s ease, --bg1b .3s ease, --bg2 .3s ease, --bg3 .3s ease; } 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:15vmax; --b1y:15vmax; --b1r:30vmax; --b2x:calc(100vw - 12.5vmax); --b2y:calc(100vh - 12.5vmax); --b2r:27.5vmax; --b3x:12.5vmax; --b3y:calc(55vh + 22.5vmax); --b3r:22.5vmax; --b4x:calc(40vw + 25vmax); --b4y:calc(10vh + 20vmax); --b4r:22vmax; --b5x:calc(55vw + 22.5vmax); --b5y:calc(45vh + 17.5vmax); --b5r:20vmax; background: radial-gradient(circle var(--b5r) at var(--b5x) var(--b5y), color-mix(in srgb, var(--bg3) 60%, transparent) 0%, transparent 100%), radial-gradient(circle var(--b4r) at var(--b4x) var(--b4y), color-mix(in srgb, var(--bg3) 70%, transparent) 0%, transparent 100%), 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 20s ease-in-out infinite alternate, alifB2 24s ease-in-out infinite alternate, alifB3 22s ease-in-out infinite alternate, alifB4 26s ease-in-out infinite alternate, alifB5 30s ease-in-out infinite alternate; } @keyframes alifB1{ 0% { --b1x:15vmax; --b1y:15vmax; --b1r:30vmax; } 50% { --b1x:calc(15vmax + 60vw); --b1y:calc(15vmax + 30vh); --b1r:36vmax; } 100% { --b1x:calc(15vmax + 20vw); --b1y:calc(15vmax + 70vh); --b1r:27vmax; } } @keyframes alifB2{ 0% { --b2x:calc(100vw - 12.5vmax); --b2y:calc(100vh - 12.5vmax); --b2r:27.5vmax; } 50% { --b2x:calc(45vw - 12.5vmax); --b2y:calc(60vh - 12.5vmax); --b2r:31.6vmax; } 100% { --b2x:calc(80vw - 12.5vmax); --b2y:calc(25vh - 12.5vmax); --b2r:27.5vmax; } } @keyframes alifB3{ 0% { --b3x:12.5vmax; --b3y:calc(55vh + 22.5vmax); --b3r:22.5vmax; } 50% { --b3x:calc(12.5vmax + 70vw); --b3y:calc(25vh + 22.5vmax); --b3r:27vmax; } 100% { --b3x:calc(12.5vmax + 90vw); --b3y:calc(75vh + 22.5vmax); --b3r:20.3vmax; } } @keyframes alifB4{ 0% { --b4x:calc(40vw + 25vmax); --b4y:calc(10vh + 20vmax); --b4r:22vmax; } 50% { --b4x:calc(-5vw + 25vmax); --b4y:calc(35vh + 20vmax); --b4r:26.4vmax; } 100% { --b4x:calc(-30vw + 25vmax); --b4y:calc(60vh + 20vmax); --b4r:20.9vmax; } } @keyframes alifB5{ 0% { --b5x:calc(55vw + 22.5vmax); --b5y:calc(45vh + 17.5vmax); --b5r:20vmax; } 50% { --b5x:calc(5vw + 22.5vmax); --b5y:calc(15vh + 17.5vmax); --b5r:23vmax; } 100% { --b5x:calc(35vw + 22.5vmax); --b5y:calc(-5vh + 17.5vmax); --b5r:20vmax; } } 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='.7' 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:.3; mix-blend-mode:overlay; 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. ============================================================ */ .pv-hero{ position:relative; box-sizing:border-box; overflow:hidden; height:clamp(300px, 45vh, 460px); padding-top:var(--pv-hdr); display:flex; align-items:center; background:linear-gradient(135deg,#0b3a66 0%,#1a6aa8 55%,#4f8fc0 100%); } .pv-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 */ } .pv-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%); } .pv-hero-in{ position:relative; z-index:2; width:100%; display:flex; align-items:center; justify-content:space-between; gap:30px; } .pv-hero-text{ color:#fff; text-shadow:0 2px 14px rgba(0,50,120,.55); max-width:640px; } .pv-crumbs{ display:flex; gap:8px; align-items:center; font-size:13px; font-weight:600; color:rgba(255,255,255,.85); margin-bottom:10px; } .pv-crumbs a{ color:#fff; text-decoration:none; } .pv-crumbs a:hover{ text-decoration:underline; } .pv-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; } .pv-hero p{ margin:0; font-size:clamp(.92rem,1.5vw,1.1rem); line-height:1.5; color:rgba(255,255,255,.92); } /* shield ka glass bubble */ .pv-seal{ position:relative; flex:none; width:clamp(120px,18vh,170px); aspect-ratio:1; display:grid; place-items:center; margin-right:4%; } .pv-seal > *{ position:absolute; } .pv-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:pvFloat 5s ease-in-out infinite alternate; color:#fff; font-size:clamp(2.6rem,5.2vh,3.8rem); text-shadow:0 4px 18px rgba(0,60,130,.55); } .pv-seal-ring{ inset:0; border-radius:50%; border:1.5px solid rgba(255,255,255,.6); opacity:0; animation:pvRipple 3.6s cubic-bezier(.2,.6,.3,1) infinite; } .pv-seal-ring.r2{ animation-delay:1.8s; } @keyframes pvFloat{ from{ transform:translateY(0); } to{ transform:translateY(-8px); } } @keyframes pvRipple{ 0%{ transform:scale(.9); opacity:0; } 20%{ opacity:.8; } 100%{ transform:scale(1.7); opacity:0; } } /* ============================================================ 4. GLASS BASE + BUTTONS ============================================================ */ .pv-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, transform .35s cubic-bezier(.25,1.25,.4,1); } .pv-glass.touch-active{ border-color:rgba(255,255,255,.65); } .pv-ico{ display:grid; place-items:center; flex:none; width:48px; height:48px; border-radius:50%; background:var(--bubbg); border:1px solid rgba(255,255,255,.55); box-shadow:var(--bubsh); font-size:18px; color:#fff; } .pv-btn{ position:relative; isolation:isolate; display:inline-flex; align-items: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; } .pv-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); } .pv-btn:hover{ transform:translateY(-2px); border-color:rgba(25,194,255,.85); } .pv-btn:hover::before{ opacity:1; transform:scale(1); } .pv-btn i{ transition:transform .3s ease; } .pv-btn:hover i.fa-arrow-right{ transform:translateX(4px); } .pv-btn:focus-visible, .pv-toc a:focus-visible, .pv-body a:focus-visible{ outline:2px solid #fff; outline-offset:3px; } /* ============================================================ 5. AT A GLANCE ============================================================ */ .pv-glance{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:46px; } .pv-g{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:22px 22px 24px; } .pv-g .pv-ico{ margin-bottom:10px; } .pv-g b{ font-size:1.02rem; font-weight:700; line-height:1.35; } .pv-g > span:last-child{ font-size:.88rem; color:rgba(255,255,255,.88); } .pv-g:hover, .pv-g.touch-active{ transform:translateY(-6px); border-color:rgba(255,255,255,.65); } /* ============================================================ 6. LAYOUT + CONTENTS LIST ============================================================ */ .pv-layout{ display:grid; grid-template-columns:290px minmax(0,1fr); gap:24px; align-items:start; margin-top:30px; margin-bottom:60px; } .pv-toc{ position:sticky; top:var(--pv-stick); align-self:start; } .pv-toc-card{ padding:22px 18px 18px; } .pv-toc h2{ margin:0 0 12px; padding:0 8px; font-size:1.05rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; } .pv-toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:2px; max-height:calc(100vh - var(--pv-stick) - 120px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.4) transparent; } .pv-toc a{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; color:#fff; text-decoration:none; font-size:.9rem; font-weight:600; line-height:1.3; border:1px solid transparent; transition:background .25s ease, border-color .25s ease, color .2s ease; } .pv-toc a span{ flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font-size:.72rem; font-weight:800; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35); transition:background .25s ease, border-color .25s ease; } .pv-toc a:hover{ color:#ffe066; background:rgba(255,255,255,.1); } .pv-toc a.is-on{ background:var(--bubbg), rgba(25,194,255,.28); border-color:rgba(255,255,255,.6); box-shadow:var(--bubsh); } .pv-toc a.is-on span{ background:#19c2ff; border-color:#fff; } /* ============================================================ 7. POLICY SECTIONS ============================================================ */ .pv-main{ display:grid; gap:20px; min-width:0; } .pv-law{ margin:0; display:flex; align-items:center; gap:10px; padding:0 4px; color:#fff; font-size:.95rem; font-weight:600; text-shadow:0 2px 12px rgba(0,50,120,.55); } .pv-law i{ color:#bff1ff; } .pv-sec{ padding:26px 30px 28px; scroll-margin-top:var(--pv-stick); } .pv-sec:hover{ border-color:rgba(255,255,255,.65); } .pv-sec-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; } .pv-num{ flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; font-size:.95rem; font-weight:800; background:linear-gradient(135deg,#19c2ff,#7b3ff2); border:1.5px solid rgba(255,255,255,.7); box-shadow:0 0 12px rgba(25,194,255,.5); } .pv-sec-head h2{ margin:0; flex:1; font-size:1.35rem; font-weight:700; letter-spacing:.3px; line-height:1.25; } .pv-sec-ico{ flex:none; font-size:20px; color:rgba(255,255,255,.7); } .pv-body p{ margin:0 0 14px; line-height:1.8; font-size:1rem; color:rgba(255,255,255,.95); max-width:80ch; } .pv-body p:last-child{ margin-bottom:0; } .pv-body .pv-lead{ margin:20px 0 10px; font-weight:700; color:#fff; } .pv-body > .pv-lead:first-child{ margin-top:0; } .pv-body a{ color:#bff1ff; font-weight:600; text-decoration:underline; text-underline-offset:3px; } .pv-body a:hover{ color:#ffe066; } /* lists */ .pv-list{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:10px; max-width:80ch; } .pv-list li{ position:relative; padding-left:28px; line-height:1.7; font-size:1rem; color:rgba(255,255,255,.95); } .pv-list li::before{ content:""; position:absolute; left:4px; top:.62em; width:10px; height:10px; border-radius:50%; background:var(--bubbg), #19c2ff; border:1px solid rgba(255,255,255,.8); box-shadow:0 0 8px rgba(25,194,255,.7); } .pv-list strong{ color:#fff; font-weight:700; } /* key/value (Who we are) */ .pv-kv{ margin:0 0 16px; display:grid; gap:10px; max-width:640px; } .pv-kv > div{ display:grid; grid-template-columns:170px 1fr; gap:14px; padding:13px 18px; border-radius:14px; background:rgba(6,30,70,.30); border:1px solid rgba(255,255,255,.32); box-shadow:inset 0 1px 1px rgba(255,255,255,.25); } .pv-kv dt{ font-size:.88rem; font-weight:600; color:rgba(255,255,255,.8); } .pv-kv dd{ margin:0; font-weight:700; } /* contact card - transparent glass + halka grain */ .pv-contact-card{ position:relative; isolation:isolate; overflow:hidden; max-width:560px; padding:22px 24px 24px; border-radius:20px; 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); box-shadow: inset 0 1.5px 1px rgba(255,255,255,.65), inset 0 -14px 28px rgba(255,255,255,.05), 0 12px 30px -18px rgba(0,30,70,.55); -webkit-backdrop-filter:blur(14px) saturate(170%); backdrop-filter:blur(14px) saturate(170%); } .pv-contact-card::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; } .pv-contact-card h3{ margin:0 0 14px; font-size:1.2rem; font-weight:800; letter-spacing:2px; } .pv-contact-card ul{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:10px; font-size:.97rem; } .pv-contact-card li{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .pv-contact-card li i{ width:20px; color:#fff; } .pv-contact-card li span{ color:rgba(255,255,255,.8); } /* ============================================================ 8. MOBILE ============================================================ */ @media (max-width:1100px){ .pv-glance{ grid-template-columns:repeat(2,1fr); } } @media (max-width:900px){ :root{ --pv-hdr:72px; --pv-stick:84px; } .pv-hero{ height:clamp(280px, 42vh, 380px); } .pv-seal{ width:96px; margin-right:0; } .pv-seal-disc{ font-size:2.4rem; } .pv-layout{ grid-template-columns:1fr; gap:18px; } /* contents: ek line me side-scroll chips */ .pv-toc{ position:static; } .pv-toc-card{ padding:14px 0 12px; border-radius:18px; } .pv-toc h2{ display:none; } .pv-toc ol{ display:flex; gap:8px; max-height:none; overflow-x:auto; overflow-y:hidden; padding:2px 14px 4px; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .pv-toc ol::-webkit-scrollbar{ display:none; } .pv-toc li{ flex:none; } .pv-toc a{ padding:8px 14px 8px 8px; border-radius:999px; white-space:nowrap; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); } } @media (max-width:768px){ .pv-glance{ gap:14px; margin-top:34px; } .pv-g{ padding:18px 16px 20px; } .pv-sec{ padding:20px 18px 22px; } .pv-sec-head h2{ font-size:1.15rem; } .pv-sec-ico{ display:none; } .pv-body p, .pv-list li{ font-size:.97rem; } .pv-kv > div{ grid-template-columns:1fr; gap:2px; padding:12px 16px; } .pv-contact-card{ padding:18px 16px 20px; } .pv-layout{ margin-bottom:44px; } body::before{ animation:none; } } @media (max-width:420px){ .pv-glance{ grid-template-columns:1fr; } } /* ============================================================ 9. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion:reduce){ html{ transition:none; } html::after, body::before{ animation:none; } .pv-seal-disc, .pv-seal-ring{ animation:none; } .pv-seal-ring{ display:none; } .pv-glass, .pv-btn, .pv-toc a{ transition:none; } }